changeset 5949:3578484a86d2

style: make markup more Bootstrap-compatible Use Bootstrap classes for dropdowns. Use explicit Bootstrap-style carets instead of :after preudoclass. Use Bootstrap class for badges. Introduce Bootstrap data-toggle properties - currently unused.
author Andrew Shadura <andrew@shadura.me>
date Fri, 27 May 2016 11:43:17 +0200
parents 7d0052c68a6f
children c1af4d89a737
files kallithea/public/css/contextbar.css kallithea/public/css/style.css kallithea/templates/base/base.html kallithea/templates/summary/summary.html
diffstat 4 files changed, 34 insertions(+), 60 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/css/contextbar.css	Mon May 30 15:44:36 2016 +0200
+++ b/kallithea/public/css/contextbar.css	Fri May 27 11:43:17 2016 +0200
@@ -249,7 +249,7 @@
 
 #header #header-inner #quick a,
 #context-pages a,
-#context-pages .admin_menu a {
+#context-pages .dropdown-menu a {
     display: block;
     padding: 0px 10px 1px 10px;
     line-height: 35px;
@@ -257,7 +257,7 @@
 
 #header #header-inner #quick a.thin,
 #context-pages a.thin,
-#context-pages .admin_menu a.thin {
+#context-pages .dropdown-menu a.thin {
     line-height: 28px !important;
 }
 
@@ -268,17 +268,7 @@
 #header #header-inner #quick a {
     overflow: hidden;
 }
-#quick a.childs:after,
-#revision-changer:before,
-#context-pages a.childs:after,
-#context-pages a.dropdown:after {
-    font-family: 'kallithea';
-    content: ' \23f7';
-}
-#context-pages a.childs {
-    padding-right: 30px;
-}
-#context-pages a.childs:after {
+#context-pages a.dropdown-toggle:after {
     position: absolute;
     float: right;
     padding-left: 5px;
--- a/kallithea/public/css/style.css	Mon May 30 15:44:36 2016 +0200
+++ b/kallithea/public/css/style.css	Fri May 27 11:43:17 2016 +0200
@@ -498,8 +498,6 @@
 }
 
 td.quick_repo_menu.active:before {
-    font-family: "kallithea";
-    content: "\23f7";           /* triangle-down */
     margin-left: 1px;
     padding-right: 1px;
 }
@@ -1634,11 +1632,8 @@
     text-decoration: none;
 }
 
-#summary-menu-stats a span {
-    background-color: #DEDEDE;
-    color: #888 !important;
-    border-radius: 4px;
-    padding: 2px 4px;
+#summary-menu-stats .badge {
+    padding: 2px 4px !important;
     font-size: 10px;
 }
 
@@ -3516,6 +3511,11 @@
     display: block;
 }
 
+.caret:after {
+    font-family: 'kallithea';
+    content: ' \23f7';           /* triangle-down */
+}
+
 .repo-switcher .select2-choice {
     padding: 0px 8px 1px !important;
     display: block;
@@ -3535,11 +3535,6 @@
     display: none !important;
 }
 
-.repo-switcher .select2-chosen:after {
-    font-family: 'kallithea';
-    content: ' \23f7';
-}
-
 .repo-switcher-dropdown.select2-drop.select2-drop-active {
     box-shadow: none;
     color: #fff;
@@ -4340,8 +4335,7 @@
     padding: 0px 0px 4px 16px;
 }
 
-#context-pages .pull-request span,
-.menu_link_notifications {
+.badge {
     padding: 4px 4px !important;
     text-align: center;
     color: #888 !important;
@@ -4349,16 +4343,6 @@
     border-radius: 4px !important;
 }
 
-#context-pages .forks span,
-.menu_link_notifications {
-    padding: 4px 4px !important;
-    text-align: center;
-    color: #888 !important;
-    background-color: #DEDEDE !important;
-    border-radius: 4px !important;
-}
-
-
 .notification-header {
     padding-top: 6px;
 }
--- a/kallithea/templates/base/base.html	Mon May 30 15:44:36 2016 +0200
+++ b/kallithea/templates/base/base.html	Fri May 27 11:43:17 2016 +0200
@@ -55,7 +55,7 @@
 </%def>
 
 <%def name="admin_menu()">
-  <ul class="admin_menu">
+  <ul class="dropdown-menu">
       <li><a href="${h.url('admin_home')}"><i class="icon-book"></i> ${_('Admin Journal')}</a></li>
       <li><a href="${h.url('repos')}"><i class="icon-database"></i> ${_('Repositories')}</a></li>
       <li><a href="${h.url('repos_groups')}"><i class="icon-folder"></i> ${_('Repository Groups')}</a></li>
@@ -72,7 +72,7 @@
 
 ## admin menu used for people that have some admin resources
 <%def name="admin_menu_simple(repositories=None, repository_groups=None, user_groups=None)">
-  <ul>
+  <ul class="dropdown-menu">
    %if repositories:
       <li><a href="${h.url('repos')}"><i class="icon-database"></i> ${_('Repositories')}</a></li>
    %endif
@@ -139,11 +139,11 @@
         </li>
         <li ${is_current('options')} data-context="options">
              %if h.HasRepoPermissionAll('repository.admin')(c.repo_name):
-               <a href="${h.url('edit_repo',repo_name=c.repo_name)}" class="dropdown"><i class="icon-wrench"></i> ${_('Options')}</a>
+               <a href="${h.url('edit_repo',repo_name=c.repo_name)}" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-wrench"></i> ${_('Options')} <i class="caret"></i></a>
              %else:
-               <a href="#" class="dropdown"><i class="icon-wrench"></i> ${_('Options')}</a>
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-wrench"></i> ${_('Options')} <i class="caret"></i></a>
              %endif
-          <ul>
+          <ul class="dropdown-menu">
              %if h.HasRepoPermissionAll('repository.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
@@ -179,7 +179,7 @@
         <li ${is_current('showpullrequest')} data-context="showpullrequest">
           <a href="${h.url('pullrequest_show_all',repo_name=c.repo_name)}" title="${_('Show Pull Requests for %s') % c.repo_name}"> <i class="icon-git-pull-request"></i> ${_('Pull Requests')}
             %if c.repository_pull_requests:
-              <span>${c.repository_pull_requests}</span>
+              <span class="badge">${c.repository_pull_requests}</span>
             %endif
           </a>
         </li>
@@ -190,7 +190,7 @@
       var bcache = {};
 
       $("#branch_switcher").select2({
-          placeholder: '<i class="icon-exchange"></i> ${_('Switch To')}',
+          placeholder: '<i class="icon-exchange"></i> ${_('Switch To')} <span class="caret"></span>',
           dropdownAutoWidth: true,
           sortResults: prefixFirstSort,
           formatResult: function(obj) {
@@ -313,11 +313,11 @@
         </a>
       </li>
     %endif
-      <li ${is_current('gists')}>
-        <a class="menu_link childs" title="${_('Show public gists')}"  href="${h.url('gists')}">
-          <i class="icon-clippy"></i> ${_('Gists')}
+      <li ${is_current('gists')} class="dropdown">
+        <a class="menu_link dropdown-toggle" data-toggle="dropdown" title="${_('Show public gists')}"  href="${h.url('gists')}">
+          <i class="icon-clippy"></i> ${_('Gists')} <span class="caret"></span>
         </a>
-          <ul class="admin_menu">
+          <ul class="dropdown-menu">
             <li><a href="${h.url('new_gist', public=1)}"><i class="icon-paste"></i> ${_('Create New Gist')}</a></li>
             <li><a href="${h.url('gists')}"><i class="icon-globe"></i> ${_('All Public Gists')}</a></li>
             %if c.authuser.username != 'default':
@@ -332,15 +332,15 @@
         </a>
     </li>
     % if h.HasPermissionAll('hg.admin')('access admin main page'):
-      <li ${is_current('admin')}>
-        <a class="menu_link childs" title="${_('Admin')}" href="${h.url('admin_home')}">
-          <i class="icon-gear"></i> ${_('Admin')}
+      <li ${is_current('admin')} class="dropdown">
+        <a class="menu_link dropdown-toggle" data-toggle="dropdown" title="${_('Admin')}" href="${h.url('admin_home')}">
+          <i class="icon-gear"></i> ${_('Admin')} <span class="caret"></span>
         </a>
         ${admin_menu()}
       </li>
     % elif c.authuser.repositories_admin or c.authuser.repository_groups_admin or c.authuser.user_groups_admin:
-    <li ${is_current('admin')}>
-        <a class="menu_link childs" title="${_('Admin')}">
+    <li ${is_current('admin')} class="dropdown">
+        <a class="menu_link dropdown-toggle" data-toggle="dropdown" title="${_('Admin')}">
           <i class="icon-gear"></i> ${_('Admin')}
         </a>
         ${admin_menu_simple(c.authuser.repositories_admin,
@@ -353,14 +353,14 @@
       <a class="menu_link" title="${_('My Pull Requests')}" href="${h.url('my_pullrequests')}">
         <i class="icon-git-pull-request"></i> ${_('My Pull Requests')}
         %if c.my_pr_count != 0:
-          <span class="menu_link_notifications">${c.my_pr_count}</span>
+          <span class="badge">${c.my_pr_count}</span>
         %endif
       </a>
     </li>
 
     ## USER MENU
-    <li>
-      <a class="menu_link childs" id="quick_login_link"
+    <li class="dropdown">
+      <a class="menu_link dropdown-toggle" data-toggle="dropdown" id="quick_login_link"
         %if c.authuser.username != 'default':
           href="${h.url('notifications')}"
         %endif
@@ -369,7 +369,7 @@
           %if c.authuser.username != 'default':
             <span class="menu_link_user">${c.authuser.username}</span>
             %if c.unread_notifications != 0:
-              <span class="menu_link_notifications">${c.unread_notifications}</span>
+              <span class="badge">${c.unread_notifications}</span>
             %endif
           %else:
               <span>${_('Not Logged In')}</span>
@@ -472,7 +472,7 @@
             }
 
             $("#repo_switcher").select2({
-                placeholder: '<i class="icon-database"></i> ${_('Repositories')}',
+                placeholder: '<i class="icon-database"></i> ${_('Repositories')} <span class="caret"></span>',
                 dropdownAutoWidth: true,
                 sortResults: prefixFirstSort,
                 formatResult: format,
--- a/kallithea/templates/summary/summary.html	Mon May 30 15:44:36 2016 +0200
+++ b/kallithea/templates/summary/summary.html	Fri May 27 11:43:17 2016 +0200
@@ -139,13 +139,13 @@
             <li>
                <a title="${_('Followers')}" href="${h.url('repo_followers_home',repo_name=c.repo_name)}">
                 <i class="icon-heart"></i> ${_('Followers')}
-                <span class="stats-bullet" id="current_followers_count">${c.repository_followers}</span>
+                <span class="badge" id="current_followers_count">${c.repository_followers}</span>
               </a>
             </li>
             <li>
               <a title="${_('Forks')}" href="${h.url('repo_forks_home',repo_name=c.repo_name)}">
                 <i class="icon-fork"></i> ${_('Forks')}
-                <span class="stats-bullet">${c.repository_forks}</span>
+                <span class="badge">${c.repository_forks}</span>
               </a>
             </li>