[login] modified UI

media/css/seahub.css

@@ -83,6 +83,7 @@
 .icon-cloud-download:before       { content: "\f0ed"; }
 .icon-download:before             { content: "\f01a"; }
 .icon-trash:before                { content: "\f014"; }
+.icon-refresh:before              { content: "\f021"; }
 .icon-plus:before                 { content: "\f067"; }
 .icon-minus:before                { content: "\f068"; }
 .icon-pencil:before               { content: "\f040"; }
@@ -1975,6 +1976,9 @@ button.sf-dropdown-toggle:focus {
 .captcha {
     float:right;
 }
+#refresh-captcha {
+    margin:10px 3px 0 5px;
+}
 #id_captcha_1 {
     width:auto;
     height:36px;
@@ -1983,11 +1987,12 @@ button.sf-dropdown-toggle:focus {
     margin:0;
 }
 .login-panel {
-    background:#f4eaea;
+    background:#f5f6f7;
     border-radius:3px;
-    padding:10px 60px 20px;
+    padding:20px 60px;
     width:390px;
     margin:0 auto;
+    box-shadow:0 0 8px #a7a6a9;
 }
 @media (max-width:389px) {
     .login-panel {
@@ -1996,9 +2001,15 @@ button.sf-dropdown-toggle:focus {
         padding-right: calc((100% - 270px)/2);
     }
 }
-.login-panel .logo {
+.login-panel-logo {
     display:block;
-    margin:0 auto 18px;
+    margin:0 auto 20px;
+}
+.login-panel-hd {
+    font-size:18px;
+    font-weight:normal;
+    text-align:center;
+    margin:5px 0 15px;
 }
 .login-panel .input {
     margin:0;
@@ -2019,9 +2030,6 @@ button.sf-dropdown-toggle:focus {
 .login-panel .remember {
     margin:20px 0 10px;
 }
-.login-panel .forgot-passwd {
-    margin-left:18px;
-}
 .login-panel .submit {
     margin:20px 0 15px;
     border-width:0;

seahub/templates/registration/login.html

@@ -28,16 +28,18 @@ html, body, #wrapper { height:100%; }
 {% endblock %}
 
 {% block main_content %}
-<div class="login-panel vh">
-    <img src="{{MEDIA_URL}}img/seafile-transparent-128.png" alt="" width="64" class="logo" />
-
+<div class="login-panel-outer-container vh">
+<div class="login-panel">
+    <h1 class="login-panel-hd">{% trans "Log In" %}</h1>
     <form action="" method="post">{% csrf_token %}
         <input type="text" name="login" placeholder="{% trans "Email or Username" %}" value="" class="input name-input" /><br />
         <input type="password" name="password" placeholder="{% trans "Password" %}" value="" class="input passwd-input" autocomplete="off" />
 
         {% if form.captcha %}
-        {{ form.captcha }}
-        <p class="clear"><a href="#" id="refresh-captcha">{% trans "Not clear? Refresh it." %}</a></p>
+        <div class="ovhd">
+            <span id="refresh-captcha" title="{% trans "Refresh" %}" class="icon-refresh op-icon fright"></span>
+            {{ form.captcha }}
+        </div>
         {% endif %}
 
         <input type="hidden" name="next" value="{% if next %}{{ next|escape }}{% else %}{{ SITE_ROOT }}{% endif %}" />
@@ -82,22 +84,24 @@ html, body, #wrapper { height:100%; }
         {% endif %}
     </div>
 </div>
+</div>
 {% endblock %}
 
 {% block extra_script %}
 <script type="text/javascript">
+$('.login-panel-outer-container').prepend($($('#logo').html()).addClass('login-panel-logo'));
 $('.login-panel-bottom-container').append($('#lang').removeClass('fright'));
 
-var $loginPanel = $('.login-panel');
-var loginPanelHeight = $loginPanel.outerHeight();
+var $el = $('.login-panel-outer-container');
+var elHeight = $el.outerHeight();
 var wdHeight = $(window).height();
-if (wdHeight > loginPanelHeight) {
-    $loginPanel.css({'margin-top': (wdHeight - loginPanelHeight)/2});
+if (wdHeight > elHeight) {
+    $el.css({'margin-top': (wdHeight - elHeight)/2});
 }
-$loginPanel.removeClass('vh')
+$el.removeClass('vh');
 
 $('#lang-context-selector').css({
-    'top': '-' + $('#lang').offset().top + 'px',
+    'top': '-' + ($('#lang').offset().top - 5) + 'px',
     'right': 0
 });
 $('#lang-context-selector .sf-popover-con').css({
@@ -107,12 +111,10 @@ $('#lang-context-selector .sf-popover-con').css({
 $('[name="login"]').focus();
 
 function setCaptchaInputWidth() {
-    $('#id_captcha_1').outerWidth($('.input').outerWidth() - $('.captcha').width() - 10);
+    $('#id_captcha_1').outerWidth($('.input').outerWidth() - $('.captcha').width() - $('#refresh-captcha').outerWidth(true) - 10);
 }
 $(window).load(setCaptchaInputWidth);
 $('.captcha').load(setCaptchaInputWidth);
-
-$('#refresh-captcha').parent().css({'text-align':'right', 'margin':0});
 $('#refresh-captcha').click(function() {
     $.ajax({
         url: '{% url 'captcha-refresh' %}',
@@ -128,6 +130,7 @@ $('#refresh-captcha').click(function() {
     });
     return false;
 });
+
 $('input[type="submit"]').click(function(){
     if (!$.trim($('input[name="login"]').val())) {
         $('.error').removeClass('hide').html("{% trans "Email or username cannot be blank" %}");