kallithea Changeset - f46709f6fef5

Changeset - f46709f6fef5

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Mads Kiilerich - 8 years ago 2017-06-25 18:49:04
mads@kiilerich.com

style: fix navbar collapsing and make styling more Bootstrappy

3 files changed with 6 insertions and 72 deletions:

kallithea/public/css/contextbar.css

kallithea/public/css/style.css

kallithea/templates/base/base.html

0 comments (0 inline, 0 general)

kallithea/public/css/contextbar.css

➞

Show inline comments

@@ @@ -19,67 +19,48 @@ i[class^='icon-'] { @@
 .icon-diff-M:before {
     font-family: 'kallithea';
     content: '\22a1';
     color: #d0b44c;
 }
 .icon-diff-D:before {
     font-family: 'kallithea';
     content: '\229f';
     color: #bd2c00;
 }
 .icon-diff-A:before {
     font-family: 'kallithea';
     content: '\229e';
     color: #6cc644;
 }
 .icon-diff-R:before {
     font-family: 'kallithea';
     content: '\e81f';
     color: #677a85;
 }
 #content #context-bar {
     position: relative;
     overflow: visible;
     background-color: #577632;
     padding: 0;
     min-height: 36px;
 }
 #content #context-bar .navbar-header {
     display: inline-block;
     color: #FFF;
     margin: 8px 15px 3px;
     padding-bottom: 2px;
 }
 #content #context-bar > .navbar-header > .navbar-brand {
     padding: 0;
 }
 nav.navbar #quick a,
 #content #context-bar,
 #content #context-bar a {
     color: #FFFFFF;
 }
 nav.navbar #quick a:hover,
 #content #context-bar a:hover {
     text-decoration: none;
     background: inherit;
 }
 #content #context-bar .icon {
     display: inline-block;
     width: 16px;
     height: 16px;
     vertical-align: text-bottom;
 }
 .navbar-text {
     margin-top: 0;
     margin-bottom: 0;
 }
@@ @@ -91,59 +72,57 @@ ul#context-pages ul.dropdown-menu > li { @@
 ul#quick ul.dropdown-menu > li:first-child,
 ul#context-pages ul.dropdown-menu > li:first-child {
     border-top: none;
 }
 ul#quick ul.dropdown-menu > li:last-child,
 ul#context-pages ul.dropdown-menu > li:last-child {
     border-bottom: none;
 }
 #breadcrumbs {
     float: left;
     padding: 6px 0 5px 0;
     padding-left: 5px;
     font-weight: bold;
     font-size: 14px;
 }
 #breadcrumbs span {
     font-weight: bold;
     font-size: 1.4em;
 }
 nav.navbar #quick ul,
 #revision-changer,
 #context-pages,
 #context-pages ul {
     background: #3b6998; /* Old browsers */
     background: linear-gradient(to bottom, #577632 0%, #577632 100%); /* W3C */
     background: #577632;
 }
 ul#context-actions {
     display: inline-block;
     float: right;
     border-radius: 4px;
-    background-image: linear-gradient(to bottom, #577632 0%, #577632 100%);
     background: #577632;
 }
 #content ul#context-actions li {
     padding: 0px;
     border-right: 1px solid rgba(0,0,0,0.1);
     border-left: 1px solid rgba(255,255,255,0.1);
 }
 #context-actions a {
     display: block;
     cursor: pointer;
     background: none;
     border: none;
     margin: 0px;
     height: auto;
     padding: 10px 10px 10px 30px;
     background-repeat: no-repeat;
     background-position: 10px 50%;
     font-size: 1em;
 }
 #context-actions a {
     padding: 11px 10px 12px 30px;
 }
@@ @@ -169,88 +148,83 @@ nav.navbar #quick li a.menu_link:focus, @@
 #content #context-actions li:first-child {
     border-left: none;
     border-radius: 4px 0 0px 4px;
 }
 #content #context-actions li:last-child {
     border-right: none;
     border-radius: 0 4px 4px 0;
 }
 #content #context-actions .icon {
     margin: auto;
     margin-bottom: 5px;
     display: block;
     clear: both;
     float: none;
 }
 #content #context-pages .follow .show-following,
 #content #context-pages .following .show-follow {
     display: none;
 }
 #context-pages {
     border-left: 1px solid rgba(0,0,0,0.1);
     margin-right: 15px;
 }
 #content #context-pages .icon {
     margin-right: 5px;
 }
 nav.navbar #quick li,
 nav.navbar #quick_login .pull-right,
 #content #context-pages li {
     border-right: 1px solid rgba(0,0,0,0.1);
     border-left: 1px solid rgba(255,255,255,0.1);
     padding: 0;
 }
 .nav .open > a {
     background: inherit !important;
 }
 nav.navbar #quick li:last-child,
 #content #context-pages li:last-child {
     border-right: none;
 }
 nav.navbar #quick > li:first-child {
     border-left: none;
 }
 nav.navbar #quick > li:first-child > a {
     border-radius: 4px 0 0 4px;
 }
 nav.navbar #quick > li > a,
 nav.navbar #quick .select2-container .select2-choice .select2-chosen,
 #context-pages > li > a,
 #context-pages .select2-container .select2-choice .select2-chosen,
 x#context-pages .dropdown-menu a {
-    padding: 0px 10px 1px 10px;
+    padding: 0px 15px 1px 15px;
     line-height: 43px;
 }
 nav.navbar #quick a.thin,
 #context-pages a.thin,
 #context-pages .dropdown-menu a.thin {
     line-height: 28px !important;
 }
 nav.navbar #quick a#quick_login_link {
     padding-left: 0px;
 }
 nav.navbar #quick a {
     overflow: hidden;
 }
 #context-pages a.dropdown-toggle:after {
     position: absolute;
     float: right;
     padding-left: 5px;
     padding-right: 5px;
 }
 #revision-changer:before {

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -157,52 +157,51 @@ h5:hover > a.permalink, @@
 h6:hover > a.permalink,
 div:hover > a.permalink,
 div:hover > span > a.permalink {
     visibility: visible;
+}
 .radio-inline,
 .checkbox-inline {
     vertical-align: inherit;
+}
 .navbar-inverse {
     border: none;
+}
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
     background-color: inherit;
+}
 nav.navbar .navbar-brand:hover,
 nav.navbar .navbar-brand {
     font-size: 20px;
     padding-top: 12px;
     color: white !important;
     float: left;
     height: 44px;
     line-height: 44px;
+}
 nav.navbar ul#logged-user {
     margin-bottom: 5px !important;
     border-radius: 0px 0px 8px 8px;
     height: 37px;
     background-color: #577632;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #577632, #577632);
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
+}
 nav.navbar ul#logged-user li {
     list-style: none;
     float: left;
     margin: 8px 0 0;
     padding: 4px 12px;
     border-left: 1px solid #576622;
+}
 nav.navbar ul#logged-user li.first {
     border-left: none;
     margin: 4px;
+}
@@ @@ -237,114 +236,75 @@ nav.navbar ul#logged-user li.highlight a @@
 nav.navbar ul#logged-user li.highlight a:hover {
     color: #FFF;
+}
 nav.navbar {
     min-height: 44px;
     background-color: #577632;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
+}
 .header-pos-fix,
 .anchor {
     margin-top: -46px;
     padding-top: 46px;
+}
 nav.navbar #home a {
     height: 40px;
     width: 46px;
     display: block;
     background-position: 0 0;
     margin: 0;
     padding: 0;
+}
 nav.navbar #home a:hover {
     background-position: 0 -40px;
+}
 nav.navbar #logo {
     float: left;
     position: absolute;
     padding-left: 10px;
+}
 nav.navbar #logo > .navbar-brand {
     padding: 0 15px;
+}
 nav.navbar #logo > .navbar-brand > img {
-    padding-top: 5px;
+    margin-top: -9px;
     margin-right: 5px;
+}
 nav.navbar #logo h1 {
     color: #FFF;
     font-size: 20px;
     margin: 12px 0 0 13px;
     padding: 0;
+}
 nav.navbar #logo a {
     color: #fff;
     text-decoration: none;
+}
 nav.navbar #logo a:hover {
     color: #bfe3ff;
+}
 nav.navbar #quick {
     margin-right: 10px;
+}
 nav.navbar #quick li .icon {
     padding-left: 10px;
     display: inline;
+}
 .form-group > label {
     float: left;
+}
 .form-horizontal .form-group {
     margin-right: 0 !important;
     margin-left: 0 !important;
+}
 label {
     font-weight: inherit;
+}
 label.control-label {
     font-weight: bold;
+}
 #content nav.navbar .navbar-brand {
     height: inherit;
     line-height: inherit;
+}
 .groups_breadcrumbs a {
     color: #fff;
+}
 .groups_breadcrumbs a:hover {
     color: #bfe3ff;
     text-decoration: none;
+}
 .dt_repo {
     white-space: nowrap;
     color: #577632;
+}
 .dt_repo_pending {
     opacity: 0.5;
+}
 .dt_repo i.icon-keyhole-circled,
 .dt_repo i.icon-globe
+{
     font-size: 16px;
     vertical-align: -2px;
     margin: 0px 1px 0px 3px;

kallithea/templates/base/base.html

➞

Show inline comments

@@ @@ -100,49 +100,49 @@ @@
         ## public/private
         %if c.db_repo.private:
           <i class="icon-keyhole-circled"></i>
         %else:
           <i class="icon-globe"></i>
         %endif
         %for group in c.db_repo.groups_with_parents:
           ${h.link_to(group.name, url('repos_group_home', group_name=group.group_name), class_='navbar-link')}
           &raquo;
         %endfor
         ${h.link_to(c.db_repo.just_name, url('summary_home', repo_name=c.db_repo.repo_name), class_='navbar-link')}
         %if current == 'createfork':
          - ${_('Create Fork')}
         %endif
       </div>
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#context-pages" aria-expanded="false">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
     </div>
     <ul id="context-pages" class="nav navbar-nav navbar-right">
+    <ul id="context-pages" class="nav navbar-nav navbar-right navbar-collapse collapse">
         <li class="${'active' if current == 'summary' else ''}" data-context="summary"><a href="${h.url('summary_home', repo_name=c.repo_name)}"><i class="icon-doc-text"></i> ${_('Summary')}</a></li>
         %if rev:
         <li class="${'active' if current == 'changelog' else ''}" data-context="changelog"><a href="${h.url('changelog_file_home', repo_name=c.repo_name, revision=rev, f_path='')}"><i class="icon-clock"></i> ${_('Changelog')}</a></li>
         %else:
         <li class="${'active' if current == 'changelog' else ''}" data-context="changelog"><a href="${h.url('changelog_home', repo_name=c.repo_name)}"><i class="icon-clock"></i> ${_('Changelog')}</a></li>
         %endif
         <li class="${'active' if current == 'files' else ''}" data-context="files"><a href="${h.url('files_home', repo_name=c.repo_name, revision=rev or 'tip')}"><i class="icon-doc-inv"></i> ${_('Files')}</a></li>
         <li class="${'active' if current == 'switch-to' else ''}" data-context="switch-to">
           <input id="branch_switcher" name="branch_switcher" type="hidden">
         </li>
         <li class="${'active' if current == 'options' else ''} dropdown" data-context="options">
              %if h.HasRepoPermissionLevel('admin')(c.repo_name):
                <a href="${h.url('edit_repo',repo_name=c.repo_name)}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true"><i class="icon-wrench"></i> ${_('Options')} <i class="navbar-caret"></i></a>
              %else:
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true"><i class="icon-wrench"></i> ${_('Options')} <i class="navbar-caret"></i></a>
              %endif
           <ul class="dropdown-menu" role="menu" aria-hidden="true">
              %if h.HasRepoPermissionLevel('admin')(c.repo_name):
                    <li><a href="${h.url('edit_repo',repo_name=c.repo_name)}"><i class="icon-gear"></i> ${_('Settings')}</a></li>
              %endif
               %if c.db_repo.fork:
                <li><a href="${h.url('compare_url',repo_name=c.db_repo.fork.repo_name,org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1], other_repo=c.repo_name,other_ref_type='branch' if request.GET.get('branch') else c.db_repo.landing_rev[0],other_ref_name=request.GET.get('branch') or c.db_repo.landing_rev[1], merge=1)}">
                    <i class="icon-git-compare"></i> ${_('Compare Fork')}</a></li>
               %endif

0 comments (0 inline, 0 general)