mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-29 08:09:58 +09:00
로그인 UI 개선
git-svn-id: http://xe-core.googlecode.com/svn/sandbox@7008 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong
parent
e5f945203f
commit
91c61c0890
4 changed files with 102 additions and 116 deletions
BIN
modules/message/skins/default/images/buttonAction.gif
Normal file
BIN
modules/message/skins/default/images/buttonAction.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,31 +1,39 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
/* NHN | dece24@nhncorp.com */
|
||||||
.messageLayer { border:2px solid #777; font-size:12px; background:#fff; margin:50px auto; width:370px;}
|
#loginAccess{ position:relative; width:384px; border:2px solid #757575; margin:30px auto; padding:20px 0 0 0; background:#fff; font-size:12px; font-family:Tahoma; line-height:normal;}
|
||||||
.messageLayer * { margin:0; padding:0; font-size:12px; }
|
#loginAccess form{ margin:0; padding:0;}
|
||||||
.messageLayer h4 { font-size:14px !important; font-family:Dotum; background:#f4f4f4 !important; padding:8px 30px 8px 15px !important; letter-spacing:-1px !important; }
|
#loginAccess fieldset{ border:0; margin:0; padding:0;}
|
||||||
.messageLayer .messageLayerBody{ margin:0;}
|
#loginAccess h1{ margin:0 28px 20px 28px; font-size:12px; color:#e77161;}
|
||||||
|
#loginAccess ul{ margin:0; padding:0; list-style:none;}
|
||||||
.messageLogin { padding:0; }
|
#loginAccess .mLogin{ display:none;}
|
||||||
.messageLogin fieldset{ position:relative; border:0; margin:0; padding:20px 10px;}
|
#loginAccess .idpw{ margin:0 28px 20px 28px;}
|
||||||
|
#loginAccess .oid{ margin:0 28px 20px 28px;}
|
||||||
.openid_login { display:none; }
|
#loginAccess .idpw li{ margin:0 0 5px 0;}
|
||||||
.messageLogin .openIDTitle { width:99%; white-space:nowrap; overflow:hidden; background:url("images/openid_login_bg.gif") no-repeat left top; padding:1px 0 0 25px; margin-bottom:8px; color:#888888; font-weight:bold; }
|
#loginAccess .inputText{ font-size:12px; height:22px; color:#767676; font-weight:bold; border:1px solid #b7b7b7; border-right-color:#e1e1e1; border-bottom-color:#e1e1e1;}
|
||||||
.messageLogin .openIDTitle input { vertical-align:middle; }
|
#loginAccess .idpw .inputText{ width:316px; padding:8px 0 0 10px;}
|
||||||
.messageLogin .openid_login { display:none; clear:both; height:38px; border:3px solid #D5D8DB; background-color:#FFFFFF; margin:0 0 10px 0; }
|
#loginAccess .oid .inputText{ width:291px; padding:8px 0 0 35px; background:url(./images/openid_login_bg.gif) no-repeat 10px center;}
|
||||||
.messageLogin .openIDTitle input { margin:0; padding:0; }
|
#loginAccess .inputCheck{ width:13px; height:13px; margin:0; padding:0; vertical-align:middle;}
|
||||||
|
#loginAccess label{ vertical-align:middle;}
|
||||||
.messageLogin .login dl { margin:0; padding:0; overflow:hidden; margin-right:10px; width:250px;}
|
#loginAccess #warning{ display:none; margin:0 0 20px 0;}
|
||||||
.messageLogin .login dl dt { margin:0; padding:0; width:100px; clear:left; float:left; color:#54564b; height:24px; padding-top:3px; text-indent:10px;}
|
#loginAccess #warning.open{ display:block;}
|
||||||
.messageLogin .login dl dd { margin:0; padding:0; float:left; height:27px; width:150px; }
|
#loginAccess #warning p{ margin:0;}
|
||||||
.messageLogin .login dl dd .inputText{ border:1px solid; border-color:#A6A6A6 #D8D8D8 #D8D8D8 #A6A6A6; padding:2px 6px; height:16px; width:130px;}
|
#loginAccess .buttonArea{ position:relative; margin:0 28px; padding:0; color:#767676; *zoom:1;}
|
||||||
.messageLogin .login dl dd .inputText:hover,
|
#loginAccess .buttonArea .keeping{ position:relative; margin:0 0 20px 0; height:32px; line-height:32px;}
|
||||||
.messageLogin .login dl dd .inputText:focus{ background:#f4f4f4;}
|
#loginAccess #gLogin .buttonArea .buttonAccount{ position:absolute; top:0; right:0;}
|
||||||
.messageLogin .login .keep { clear:both; white-space:nowrap; margin-left:100px;}
|
#loginAccess #oLogin .buttonArea{ text-align:center; margin-bottom:20px;}
|
||||||
.messageLogin .login .keep input { vertical-align:middle;}
|
#loginAccess .buttonAccount,
|
||||||
.messageLogin .login .keep label { margin:0; padding:0; font-size:12px; color:#999999;}
|
#loginAccess .buttonAccount a,
|
||||||
.messageLogin .openid_user_id { background: url(../img/openid_login_bg.gif) left no-repeat; background-color: #ffffff; background-position: 0 50%; padding:3px 3px 3px 18px; border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; line-height:1em; vertical-align:middle; color:#666666; width:120px;}
|
#loginAccess .buttonAccount input{ position:relative; display:inline-block; margin:0; padding:0; overflow:visible; height:32px; line-height:32px; font-size:12px; font-weight:bold; color:#fff; vertical-align:middle; cursor:pointer; border:0; text-decoration:none !important; background:transparent url(./images/buttonAction.gif) no-repeat;}
|
||||||
.messageLogin .help { background:#f5f5f3; color:#666666; overflow:hidden; padding:10px; color:#ccc; text-align:center;}
|
#loginAccess .buttonAccount{ margin:0 4px 0 0; background-position:left top;}
|
||||||
.messageLogin .help a{ color:#666; text-decoration:underline;}
|
#loginAccess .buttonAccount a,
|
||||||
.messageLogin .buttonArea{ position:absolute; top:20px; left:260px;}
|
#loginAccess .buttonAccount input{ left:4px; background-position:right top; *vertical-align:top; padding:0 24px 0 36px;}
|
||||||
|
#loginAccess .help{ position:relative; padding:15px 0; background:#fafafa; border-top:1px solid #d9d9d9; text-align:center;}
|
||||||
.buttonArea{ text-align:center;}
|
#loginAccess .help li{ display:inline; border-left:1px solid #c3c3c3; padding:0 0 0 10px; margin:0 6px 0 0; line-height:1;}
|
||||||
|
#loginAccess .help li.first{ border:0; padding:0;}
|
||||||
|
#loginAccess .help a{ text-decoration:none; color:#333;}
|
||||||
|
#loginAccess .help a:hover,
|
||||||
|
#loginAccess .help a:active,
|
||||||
|
#loginAccess .help a:focus{ text-decoration:underline;}
|
||||||
|
#loginAccess .logOut{ text-align:left; margin:0 28px; padding:0 0 20px 0;}
|
||||||
|
.gLogin #gLogin,
|
||||||
|
.oLogin #oLogin{ display:block;}
|
||||||
|
|
@ -1,27 +1,11 @@
|
||||||
/* 로그인 후 */
|
/* 로그인 후 */
|
||||||
function completeMessageLogin(ret_obj, response_tags, params, fo_obj) {
|
function completeMessageLogin(ret_obj, response_tags, params, fo_obj) {
|
||||||
var url = current_url.setQuery('act','');
|
var url = current_url.setQuery('act','');
|
||||||
location.href = url;
|
location.href = url;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 오픈아이디 로그인 후 */
|
/* 오픈아이디 로그인 후 */
|
||||||
function completeMessageOpenIDLogin(ret_obj, response_tags) {
|
function completeMessageOpenIDLogin(ret_obj, response_tags) {
|
||||||
var redirect_url = ret_obj['redirect_url'];
|
var redirect_url = ret_obj['redirect_url'];
|
||||||
location.href = redirect_url;
|
location.href = redirect_url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 오픈 아이디 폼 변환 */
|
|
||||||
function toggleLoginForm(obj) {
|
|
||||||
if(xGetElementById('messageLogin').style.display != "none") {
|
|
||||||
xGetElementById('messageLogin').style.display = "none";
|
|
||||||
xGetElementById('messageOpenidLogin').style.display = "block";
|
|
||||||
xGetElementById('messageOpenIDForm').use_open_id_2.checked = true;
|
|
||||||
xGetElementById('messageOpenIDForm').openid.focus();
|
|
||||||
} else {
|
|
||||||
xGetElementById('messageLogin').style.display = "block";
|
|
||||||
xGetElementById('messageOpenidLogin').style.display = "none";
|
|
||||||
xGetElementById('messageLoginForm').use_open_id.checked = false;
|
|
||||||
xGetElementById('messageLoginForm').user_id.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,59 @@
|
||||||
<!--%import("message.css")-->
|
<!--%import("message.css")-->
|
||||||
|
|
||||||
<div class="messageLayer">
|
<div id="loginAccess" class="gLogin">
|
||||||
<div class="messageLayerBody">
|
<h1>{$system_message}</h1>
|
||||||
<h4> {$system_message} </h4>
|
<!--@if(!$is_logged)-->
|
||||||
<!--@if(!$is_logged)-->
|
<!--%import("./filter/login.xml")-->
|
||||||
<!--%import("./filter/login.xml")-->
|
<!--%import("./filter/openid_login.xml")-->
|
||||||
<!--%import("./filter/openid_login.xml")-->
|
<!--%import("./message.js")-->
|
||||||
<!--%import("./message.js")-->
|
<div class="mLogin" id="gLogin">
|
||||||
<script type="text/javascript">
|
<form action="./" method="post" onsubmit="return procFilter(this, message_login)" id="gForm">
|
||||||
var keep_signed_msg = "{$lang->about_keep_signed}";
|
<fieldset>
|
||||||
xAddEventListener(window, "load", function(){ xGetElementById("messageLoginForm").user_id.focus(); });
|
<ul class="idpw">
|
||||||
</script>
|
<li><input type="text" name="user_id" id="uid" value="{$lang->user_id}" class="inputText" title="{$lang->user_id}" onfocus="this.value=''" /></li>
|
||||||
<div class="messageLogin" id="messageLogin">
|
<li><input type="password" name="password" id="upw" value="{$lang->password}" class="inputText" title="{$lang->password}" onfocus="this.value=''" /></li>
|
||||||
<form action="./" method="post" onsubmit="return procFilter(this, message_login)" id="messageLoginForm">
|
</ul>
|
||||||
<fieldset class="login">
|
<div class="buttonArea">
|
||||||
<dl>
|
<p class="keeping">
|
||||||
<dt>
|
<input type="checkbox" name="keep_signed" id="keepid" class="inputCheck" value="Y" onclick="jQuery('#warning')[(jQuery('#keepid:checked').size()>0?'addClass':'removeClass')]('open');" />
|
||||||
<label for="uid">{$lang->user_id}</label>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<input type="text" name="user_id" id="uid" value="" class="inputText" />
|
|
||||||
</dd>
|
|
||||||
<dt>
|
|
||||||
<label for="upw">{$lang->password}</label>
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<input type="password" name="password" id="upw" value="" class="inputText" />
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
<p class="keep">
|
|
||||||
<input type="checkbox" name="keep_signed" id="keepid" value="Y" onclick="if(this.checked) return confirm(keep_signed_msg);" />
|
|
||||||
<label for="keepid">{$lang->keep_signed}</label>
|
<label for="keepid">{$lang->keep_signed}</label>
|
||||||
<!--@if($member_config->enable_openid=='Y')-->
|
|
||||||
<input name="use_open_id" id="use_open_id" type="checkbox" value="Y" onclick="toggleLoginForm(this); return false;" />
|
|
||||||
<label for="use_open_id">Open ID</label>
|
|
||||||
<!--@end-->
|
|
||||||
</p>
|
</p>
|
||||||
<div class="buttonArea"> <span class="button black strong"><input type="submit" value="{$lang->cmd_login}" /></span> </div>
|
<div id="warning" class="">
|
||||||
</fieldset>
|
<p>{$lang->about_keep_warning}</p>
|
||||||
</form>
|
</div>
|
||||||
<div class="help"> <a href="{getUrl('','act','dispMemberFindAccount')}"><span>{$lang->cmd_find_member_account}</span></a> | <a href="{getUrl('','act','dispMemberSignUpForm')}"><span>{$lang->cmd_signup}</span></a> </div>
|
<span class="buttonAccount"><input type="submit" value="{$lang->cmd_login}" /></span>
|
||||||
</div>
|
</div>
|
||||||
<!-- OpenID -->
|
</fieldset>
|
||||||
<!--@if($member_config->enable_openid=='Y')-->
|
</form>
|
||||||
<div class="messageLogin openid_login" id="messageOpenidLogin">
|
<ul class="help">
|
||||||
<form action="{getUrl('module','member','act','procMemberOpenIDLogin')}" method="post" onsubmit="return procFilter(this, openid_login)" id="messageOpenIDForm">
|
<li class="first"><a href="{getUrl('','act','dispMemberFindAccount')}"><span>{$lang->cmd_find_member_account}</span></a></li>
|
||||||
<div class="openIDTitle"> OpenID
|
<li><a href="{getUrl('','act','dispMemberSignUpForm')}"><span>{$lang->cmd_signup}</span></a></li>
|
||||||
<input type="text" name="openid" class="inputTypeText" />
|
<!--@if($member_config->enable_openid=='Y')-->
|
||||||
<input name="use_open_id_2" type="checkbox" value="Y" onclick="toggleLoginForm(this); return false;" checked="checked" />
|
<li><a href="#oLogin" onclick="jQuery('#loginAccess').removeClass('gLogin'); jQuery('#loginAccess').addClass('oLogin');">Open ID</a></li>
|
||||||
<span class="button black strong">
|
<!--@end-->
|
||||||
<input type="submit" value="{$lang->cmd_login}" />
|
</ul>
|
||||||
</span> </div>
|
</div>
|
||||||
</form>
|
|
||||||
</div>
|
<!-- OpenID -->
|
||||||
<!--@end-->
|
<!--@if($member_config->enable_openid=='Y')-->
|
||||||
<!--@end-->
|
<div class="mLogin" id="oLogin">
|
||||||
|
<form action="{getUrl('module','member','act','procMemberOpenIDLogin')}" method="post" onsubmit="return procFilter(this, openid_login)" id="oForm">
|
||||||
|
<fieldset>
|
||||||
|
<div class="oid">
|
||||||
|
<input type="text" name="openid" class="inputText" title="Open ID" />
|
||||||
|
</div>
|
||||||
|
<div class="buttonArea">
|
||||||
|
<span class="buttonAccount"><input type="submit" value="{$lang->cmd_login}" /></span>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<div class="help"><a href="#mLogin" onclick="jQuery('#loginAccess').removeClass('oLogin'); jQuery('#loginAccess').addClass('gLogin');">{$lang->cmd_common_id}</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="buttonArea">
|
|
||||||
<a href="#" onclick="history.back(); return false;" class="button black"><span>{$lang->cmd_back}</span></a>
|
|
||||||
<!--@if($is_logged)-->
|
|
||||||
<a href="{getUrl('act','dispMemberLogout')}" class="button red"><span>{$lang->cmd_logout}</span></a>
|
|
||||||
<!--@end-->
|
<!--@end-->
|
||||||
</div>
|
<!--@end-->
|
||||||
|
<!--@if($is_logged)-->
|
||||||
|
<div class="logOut">
|
||||||
|
<span class="buttonAccount"><a href="{getUrl('act','dispMemberLogout')}">{$lang->cmd_logout}</a></span>
|
||||||
|
</div>
|
||||||
|
<!--@end-->
|
||||||
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue