kallithea Changeset - 7a5db341a942

Changeset - 7a5db341a942

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Andrew Shadura - 11 years ago 2015-05-12 23:32:41
andrew@shadura.me

style: make the login page Bootstrap-ready

Change the template to use CSS classes names compatible with what
Bootstrap provides. That would allow the login page to have sane
appearance with Bootstrap CSS immediately.

The template changes also remove extra vertical space between
the ‘Log in’ button and extra links at the bottom for the sake
of having a simpler markup.

2 files changed with 43 insertions and 47 deletions:

kallithea/public/css/style.css

kallithea/templates/login.html

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -1779,226 +1779,222 @@ div.form div.fields div.field div.button @@
     target-new: tab !important;
+}
 .metatag[tag="see"] {
     border: solid 1px #CBD;
     background-color: #EDF;
+}
 a.metatag[tag="license"]:hover {
     background-color: #577632;
     color: #FFF;
     text-decoration: none;
+}
 #summary .desc {
     white-space: pre;
     width: 100%;
+}
 #summary .repo_name {
     font-size: 1.6em;
     font-weight: bold;
     vertical-align: baseline;
     clear: right
+}
 #footer {
     clear: both;
     overflow: hidden;
     text-align: right;
     margin: 0;
     padding: 0 10px 4px;
     margin: -10px 0 0;
+}
 #footer div#footer-inner {
     background-color: #577632;
     background-repeat: repeat-x;
     background-image: -khtml-gradient( linear, left top, left bottom, from(#577632), to(#577632));
     background-image: -moz-linear-gradient(top, #577632, #577632);
     background-image: -ms-linear-gradient( top, #577632, #577632);
     background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #577632), color-stop( 100%, #577632));
     background-image: -webkit-linear-gradient( top, #577632, #577632);
     background-image: -o-linear-gradient( top, #577632, #577632);
     background-image: linear-gradient(to bottom, #577632, #577632);
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
     -webkit-border-radius: 4px 4px 4px 4px;
     -khtml-border-radius: 4px 4px 4px 4px;
     border-radius: 4px 4px 4px 4px;
+}
 #footer div#footer-inner p {
     padding: 15px 25px 15px 0;
     color: #FFF;
     font-weight: 700;
+}
 #footer div#footer-inner .footer-link {
     float: left;
     padding-left: 10px;
+}
 #footer div#footer-inner .footer-link a,
 #footer div#footer-inner .footer-link-right a {
     color: #FFF;
+}
 #login div.title {
     clear: both;
     overflow: hidden;
     position: relative;
     background-color: #577632;
     background-repeat: repeat-x;
     background-image: -khtml-gradient( linear, left top, left bottom, from(#577632), to(#577632));
     background-image: -moz-linear-gradient( top, #577632, #577632);
     background-image: -ms-linear-gradient( top, #577632, #577632);
     background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #577632), color-stop( 100%, #577632));
     background-image: -webkit-linear-gradient( top, #577632, #577632);
     background-image: -o-linear-gradient( top, #577632, #577632);
     background-image: linear-gradient(to bottom, #577632, #577632);
     margin: 0 auto;
     padding: 0;
+}
 #login div.inner .icon-lock {
     font-size: 80pt;
     color: #DDD;
+}
 #login div.inner {
     background: #FFF;
     border-top: none;
     border-bottom: none;
     margin: 0 auto;
     padding: 20px;
+}
-#login div.form div.fields div.field div.label {
+#login div.form div.form-horizontal div.form-group > label {
     width: 173px;
     float: left;
     text-align: right;
     margin: 2px 10px 0 0;
     padding: 5px 0 0 5px;
+}
-#login div.form div.fields div.field div.input input {
+#login div.form div.form-horizontal div.form-group div input {
     background: #FFF;
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
     border-right: 1px solid #eaeaea;
     border-bottom: 1px solid #eaeaea;
     color: #000;
     font-size: 11px;
     margin: 0;
     padding: 7px 7px 6px;
+}
 #login div.form div.fields div.buttons {
     clear: both;
     overflow: hidden;
     border-top: 1px solid #DDD;
     text-align: right;
     margin: 0;
     padding: 10px 0 0;
 #login div.form .buttons {
     float: right;
+}
 #login div.form div.links {
     clear: both;
     overflow: hidden;
     margin: 10px 0 0;
     padding: 0 0 2px;
     border-top: 1px solid #DDD;
     padding: 10px 0 0;
+}
 .user-menu {
     margin: 0px !important;
     float: left;
+}
 .user-menu .container {
     padding: 0px 4px 0px 4px;
     margin: 0px 0px 0px 0px;
+}
 .user-menu .gravatar {
     margin: 0px 0px 0px 0px;
     cursor: pointer;
+}
 .user-menu .gravatar.enabled {
     background-color: #FDF784 !important;
+}
 .user-menu .gravatar:hover {
     background-color: #FDF784 !important;
+}
 #quick_login {
     min-height: 110px;
     padding: 4px;
     position: absolute;
     right: 0;
     background-color: #577632;
     background-repeat: repeat-x;
     background-image: -khtml-gradient(linear, left top, left bottom, from(#577632), to(#577632) );
     background-image: -moz-linear-gradient(top, #577632, #577632);
     background-image: -ms-linear-gradient(top, #577632, #577632);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #577632), color-stop(100%, #577632) );
     background-image: -webkit-linear-gradient(top, #577632, #577632);
     background-image: -o-linear-gradient(top, #577632, #577632);
     background-image: linear-gradient(to bottom, #577632, #577632);
     z-index: 999;
     -webkit-border-radius: 0px 0px 4px 4px;
     -khtml-border-radius: 0px 0px 4px 4px;
     border-radius: 0px 0px 4px 4px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
     overflow: hidden;
+}
 #quick_login h4 {
     color: #fff;
     padding: 5px 0px 5px 14px;
+}
 #quick_login .password_forgoten {
     padding-right: 0px;
     padding-top: 0px;
     text-align: left;
+}
 #quick_login .password_forgoten a {
     font-size: 10px;
     color: #fff;
     padding: 0px !important;
     line-height: 20px !important;
+}
 #quick_login .register {
     padding-right: 10px;
     padding-top: 5px;
     text-align: left;
+}
 #quick_login .register a {
     font-size: 10px;
     color: #fff;
     padding: 0px !important;
     line-height: 20px !important;
+}
 #quick_login .submit {
     margin: -20px 0 0 0px;
     position: absolute;
     right: 15px;
+}
 #quick_login .links_left {
     float: left;
     margin-right: 130px;
     width: 170px;
+}
 #quick_login .links_right {
     position: absolute;
     right: 0;
+}
 #quick_login .full_name {
     color: #FFFFFF;
     font-weight: bold;
     padding: 3px 3px 3px 6px;
@@ @@ -3663,442 +3659,442 @@ img.icon, .right .merge img { @@
 #content div.box div.message div.dismiss,
 #content div.box div.traffic div.legend ul {
     float: right;
     margin: 0;
     padding: 0;
+}
 #header #header-inner #home,
 #header #header-inner #logo,
 #content div.box ul.left,
 #content div.box ol.left,
 div#commit_history,
 div#legend_data, div#legend_container, div#legend_choices {
     float: left;
+}
 #header #header-inner #quick li #quick_login,
 #header #header-inner #quick li:hover ul ul,
 #header #header-inner #quick li:hover ul ul ul,
 #header #header-inner #quick li:hover ul ul ul ul,
 #content #left #menu ul.closed,
 #content #left #menu li ul.collapsed,
 .yui-tt-shadow {
     display: none;
+}
 #header #header-inner #quick li:hover #quick_login,
 #header #header-inner #quick li:hover ul,
 #header #header-inner #quick li li:hover ul,
 #header #header-inner #quick li li li:hover ul,
 #header #header-inner #quick li li li li:hover ul,
 #content #left #menu ul.opened,
 #content #left #menu li ul.expanded {
     display: block;
+}
 .repo-switcher .select2-choice {
     padding: 0px 8px 1px !important;
     display: block;
     height: 100%;
+}
 .repo-switcher .select2-container,
 .repo-switcher .select2-choice,
 .repo-switcher .select2-choice span {
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
     color: #FFFFFF !important;
+}
 .repo-switcher .select2-arrow {
     display: none !important;
+}
 .repo-switcher .select2-chosen:after {
     font-family: 'kallithea';
     content: ' \23f7';
+}
 .repo-switcher-dropdown.select2-drop.select2-drop-active {
     xborder-color: black;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     color: #fff;
     background-color: #576622;
+}
 .repo-switcher-dropdown.select2-drop.select2-drop-active .select2-results .select2-highlighted {
     background-color: #6388ad;
+}
 #content div.graph {
     padding: 0 10px 10px;
     height: 450px;
+}
 #content div.box ol.lower-roman,
 #content div.box ol.upper-roman,
 #content div.box ol.lower-alpha,
 #content div.box ol.upper-alpha,
 #content div.box ol.decimal {
     margin: 10px 24px 10px 44px;
+}
 #content div.box div.form,
 #content div.box div.table,
 #content div.box div.traffic {
     position: relative;
     clear: both;
     margin: 0;
     padding: 0 20px 10px;
+}
 #content div.box div.form div.fields,
 #login div.form,
 #login div.form div.fields,
 #login div.form-horizontal,
 #login div.form-horizontal div.form-group,
 #register div.form,
 #register div.form div.fields {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.label span,
-#login div.form div.fields div.field div.label span,
+#login div.form div.form-horizontal div.form-group div.label span,
 #register div.form div.fields div.field div.label span {
     height: 1%;
     display: block;
     color: #363636;
     margin: 0;
     padding: 2px 0 0;
+}
 #content div.box div.form div.fields div.field div.input input.error,
-#login div.form div.fields div.field div.input input.error,
+#login div.form div.form-horizontal div.form-group div.input input.error,
 #register div.form div.fields div.field div.input input.error {
     background: #FBE3E4;
     border-top: 1px solid #e1b2b3;
     border-left: 1px solid #e1b2b3;
     border-right: 1px solid #FBC2C4;
     border-bottom: 1px solid #FBC2C4;
+}
 #content div.box div.form div.fields div.field div.input input.success,
-#login div.form div.fields div.field div.input input.success,
+#login div.form div.form-horizontal div.form-group div.input input.success,
 #register div.form div.fields div.field div.input input.success {
     background: #E6EFC2;
     border-top: 1px solid #cebb98;
     border-left: 1px solid #cebb98;
     border-right: 1px solid #c6d880;
     border-bottom: 1px solid #c6d880;
+}
 #content div.box-left div.form div.fields div.field div.textarea,
 #content div.box-right div.form div.fields div.field div.textarea,
 #content div.box div.form div.fields div.field div.select select,
 #content div.box table th.selected input,
 #content div.box table td.selected input {
     margin: 0;
+}
 #content div.box-left div.form div.fields div.field div.select,
 #content div.box-left div.form div.fields div.field div.checkboxes,
 #content div.box-left div.form div.fields div.field div.radios,
 #content div.box-right div.form div.fields div.field div.select,
 #content div.box-right div.form div.fields div.field div.checkboxes,
 #content div.box-right div.form div.fields div.field div.radios {
     margin: 0 0 0 0px !important;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.select,
 #content div.box div.form div.fields div.field div.checkboxes,
 #content div.box div.form div.fields div.field div.radios {
     margin: 0 0 0 200px;
     padding: 0;
+}
 #content div.box div.form div.fields div.field div.select a:hover,
 #content div.box div.form div.fields div.field div.select a.ui-selectmenu:hover,
 #content div.box div.action a:hover {
     color: #000;
     text-decoration: none;
+}
 #content div.box div.form div.fields div.field div.select a.ui-selectmenu-focus,
 #content div.box div.action a.ui-selectmenu-focus {
     border: 1px solid #666;
+}
 #content div.box div.form div.fields div.field div.checkboxes div.checkbox,
 #content div.box div.form div.fields div.field div.radios div.radio {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 8px 0 2px;
+}
 #content div.box div.form div.fields div.field div.checkboxes div.checkbox input,
 #content div.box div.form div.fields div.field div.radios div.radio input {
     float: left;
     margin: 0;
+}
 #content div.box div.form div.fields div.field div.checkboxes div.checkbox label,
 #content div.box div.form div.fields div.field div.radios div.radio label {
     height: 1%;
     display: block;
     float: left;
     margin: 2px 0 0 4px;
+}
 div.form div.fields div.field div.button input,
 #content div.box div.form div.fields div.buttons input
 div.form div.fields div.buttons input,
 #content div.box div.action div.button input {
     font-size: 11px;
     font-weight: 700;
     margin: 0;
+}
 div.form div.fields div.field div.highlight,
 #content div.box div.form div.fields div.buttons div.highlight {
     display: inline;
+}
 #content div.box div.form div.fields div.buttons,
 div.form div.fields div.buttons {
     margin: 10px 0 0 200px;
     padding: 0;
+}
 #content div.box-left div.form div.fields div.buttons,
 #content div.box-right div.form div.fields div.buttons,
 div.box-left div.form div.fields div.buttons,
 div.box-right div.form div.fields div.buttons {
     margin: 10px 0 0;
+}
 #content div.box table td.user,
 #content div.box table td.address {
     width: 10%;
     text-align: center;
+}
 #content div.box div.action div.button,
-#login div.form div.fields div.field div.input div.link,
+#login div.form div.form-horizontal div.form-group div.input div.link,
 #register div.form div.fields div.field div.input div.link {
     text-align: right;
     margin: 6px 0 0;
     padding: 0;
+}
 #content div.box div.pagination div.results,
 #content div.box div.pagination-wh div.results {
     text-align: left;
     float: left;
     margin: 0;
     padding: 0;
+}
 #content div.box div.pagination div.results span,
 #content div.box div.pagination-wh div.results span {
     height: 1%;
     display: block;
     float: left;
     background: #ebebeb url("../images/pager.png") repeat-x;
     border-top: 1px solid #dedede;
     border-left: 1px solid #cfcfcf;
     border-right: 1px solid #c4c4c4;
     border-bottom: 1px solid #c4c4c4;
     color: #4A4A4A;
     font-weight: 700;
     margin: 0;
     padding: 6px 8px;
+}
 #content div.box div.pagination ul.pager li.disabled,
 #content div.box div.pagination-wh a.disabled {
     color: #B4B4B4;
     padding: 6px;
+}
 #login, #register {
     width: 520px;
     margin: 10% auto 0;
     padding: 0;
+}
 #login div.color,
 #register div.color {
     clear: both;
     overflow: hidden;
     background: #FFF;
     margin: 10px auto 0;
     padding: 3px 3px 3px 0;
+}
 #login div.color a,
 #register div.color a {
     width: 20px;
     height: 20px;
     display: block;
     float: left;
     margin: 0 0 0 3px;
     padding: 0;
+}
 #login div.title h5,
 #register div.title h5 {
     color: #fff;
     margin: 10px;
     padding: 0;
+}
-#login div.form div.fields div.field,
+#login div.form div.form-horizontal div.form-group,
 #register div.form div.fields div.field {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 0 10px;
+}
-#login div.form div.fields div.field span.error-message,
+#login div.form div.form-horizontal div.form-group span.error-message,
 #register div.form div.fields div.field span.error-message {
     height: 1%;
     display: block;
     color: red;
     margin: 8px 0 0;
     padding: 0;
     max-width: 320px;
+}
-#login div.form div.fields div.field div.label label,
+#login div.form div.form-horizontal div.form-group label,
 #register div.form div.fields div.field div.label label {
     color: #000;
     font-weight: 700;
+}
-#login div.form div.fields div.field div.input,
+#login div.form div.form-horizontal div.form-group div,
 #register div.form div.fields div.field div.input {
     float: left;
     margin: 0;
     padding: 0;
+}
-#login div.form div.fields div.field div.input input.large {
+#login div.form div.form-horizontal div.form-group div input.large {
     width: 250px;
+}
-#login div.form div.fields div.field div.checkbox,
+#login div.form div.form-horizontal div.form-group div.checkbox,
 #register div.form div.fields div.field div.checkbox {
     margin: 0 0 0 184px;
     padding: 0;
+}
-#login div.form div.fields div.field div.checkbox label,
+#login div.form div.form-horizontal div.form-group div.checkbox label,
 #register div.form div.fields div.field div.checkbox label {
     color: #565656;
     font-weight: 700;
+}
-#login div.form div.fields div.buttons input,
 #login div.form div.buttons input,
 #register div.form div.fields div.buttons input {
     color: #000;
     font-size: 1em;
     font-weight: 700;
     margin: 0;
+}
 #changeset_content .container .wrapper,
 #graph_content .container .wrapper {
     width: 600px;
+}
 #changeset_content .container .date,
 .ac .match {
     font-weight: 700;
     padding-top: 5px;
     padding-bottom: 5px;
+}
 div#legend_container table td,
 div#legend_choices table td {
     border: none !important;
     height: 20px !important;
     padding: 0 !important;
+}
 .q_filter_box {
     -webkit-box-shadow: rgba(0,0,0,0.07) 0 1px 2px inset;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     border: 0 none;
     margin-bottom: -4px;
     margin-top: -4px;
     padding-left: 3px;
+}
 #node_filter {
     border: 0px solid #545454;
     color: #AAAAAA;
     padding-left: 3px;
+}
 .group_members_wrap {
     min-height: 85px;
     padding-left: 20px;
+}
 .group_members .group_member {
     height: 30px;
     padding: 0px 0px 0px 0px;
+}
 .reviewer_status {
     float: left;
+}
 .reviewers_member {
     height: 15px;
     padding: 0px 0px 0px 10px;
+}
 .emails_wrap {
     padding: 0px 20px;
+}
 .emails_wrap .email_entry {
     height: 30px;
     padding: 0px 0px 0px 10px;
+}
 .emails_wrap .email_entry .email {
     float: left
+}
 .emails_wrap .email_entry .email_action {
     float: left
+}
 .ips_wrap {
     padding: 0px 20px;
+}
 .ips_wrap .ip_entry {
     height: 30px;
     padding: 0px 0px 0px 10px;
+}
 .ips_wrap .ip_entry .ip {
     float: left
+}
 .ips_wrap .ip_entry .ip_action {
     float: left
+}
 /*README STYLE*/
 div.readme {

kallithea/templates/login.html

➞

Show inline comments

 ## -*- coding: utf-8 -*-
 <%inherit file="base/root.html"/>
 <%block name="title">
     ${_('Log In')}
 </%block>
 <div id="login">
+<div id="login" class="panel panel-default">
     <%include file="/base/flash_msg.html"/>
     <!-- login -->
     <div class="title withlogo">
+    <div class="panel-heading title withlogo">
         %if c.site_name:
             <h5>${_('Log In to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Log In')}</h5>
         %endif
     </div>
     <div class="inner">
+    <div class="panel-body inner">
         ${h.form(h.url.current(came_from=c.came_from))}
         <div class="form">
             <i class="icon-lock"></i>
             <!-- fields -->
             <div class="fields">
                 <div class="field">
                     <div class="label">
                         <label for="username">${_('Username')}:</label>
                     </div>
                     <div class="input">
                         ${h.text('username',class_='focus large')}
             <div class="form-horizontal">
                 <div class="form-group">
                     <label class="control-label col-sm-5" for="username">${_('Username')}:</label>
                     <div class="input col-sm-7">
                         ${h.text('username',class_='form-control focus large')}
                     </div>
                 </div>
                 <div class="field">
                     <div class="label">
                         <label for="password">${_('Password')}:</label>
                     </div>
                     <div class="input">
                         ${h.password('password',class_='focus large')}
                 <div class="form-group">
                     <label class="control-label col-sm-5" for="password">${_('Password')}:</label>
                     <div class="input col-sm-7">
                         ${h.password('password',class_='form-control focus large')}
                     </div>
                 </div>
                 <div class="field">
                     <div class="checkbox">
                         <input type="checkbox" id="remember" name="remember" />
                         <label for="remember">${_('Remember me')}</label>
                 <div class="form-group">
                     <div class="col-sm-offset-5 col-sm-7">
                         <div class="checkbox">
                             <label for="remember">
                                 <input type="checkbox" id="remember" name="remember"/>
                                 ${_('Remember me')}
                             </label>
                         </div>
                     </div>
                 </div>
                 <div class="buttons">
                     ${h.submit('sign_in',_('Sign In'),class_="btn")}
                 </div>
             </div>
             <!-- end fields -->
             <!-- links -->
             <div class="links">
                 ${h.link_to(_('Forgot your password ?'),h.url('reset_password'))}
                 %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
+                  /
                  ${h.link_to(_("Don't have an account ?"),h.url('register'))}
                 %endif
                 <span class="buttons">
                     ${h.submit('sign_in',_('Sign In'),class_="btn btn-default")}
                 </span>
             </div>
             <!-- end links -->
         </div>
         ${h.end_form()}
         <script type="text/javascript">
         $(document).ready(function(){
             $('#username').focus();
         });
         </script>
     </div>
     <!-- end login -->
 </div>

0 comments (0 inline, 0 general)