Changeset - 81d20cfa2607
[Not reviewed]
default
0 2 0
Mads Kiilerich - 9 years ago 2017-01-09 00:41:30
mads@kiilerich.com
style: Boostrap-ish markup of footers

Based on work by Dominik Ruf.
2 files changed with 11 insertions and 24 deletions:
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
Show inline comments
 
@@ -1135,407 +1135,398 @@ div.form div.form-horizontal div.form-gr
 
    clear: both;
 
    overflow: hidden;
 
    border-bottom: 1px solid #ddd;
 
    margin: 0 0 10px;
 
    padding: 0 0 10px;
 
}
 

	
 
#content div.panel div.traffic div.legend h6 {
 
    float: left;
 
    border: none;
 
    margin: 0;
 
    padding: 0;
 
}
 

	
 
#content div.panel div.traffic div.legend li {
 
    list-style: none;
 
    float: left;
 
    font-size: 11px;
 
    margin: 0;
 
    padding: 0 8px 0 4px;
 
}
 

	
 
#content div.panel div.traffic div.legend li.visits {
 
    border-left: 12px solid #edc240;
 
}
 

	
 
#content div.panel div.traffic div.legend li.pageviews {
 
    border-left: 12px solid #afd8f8;
 
}
 

	
 
#content div.panel div.traffic table {
 
    width: auto;
 
}
 

	
 
#content div.panel div.traffic table td {
 
    background: transparent;
 
    border: none;
 
    padding: 2px 3px 3px;
 
}
 

	
 
#content div.panel div.traffic table td.legendLabel {
 
    padding: 0 3px 2px;
 
}
 

	
 
#content div.panel #summary {
 
    margin-right: 200px;
 
    min-height: 240px;
 
}
 

	
 
#summary-menu-stats {
 
    float: left;
 
    width: 180px;
 
    position: absolute;
 
    top: 0;
 
    right: 0;
 
}
 

	
 
#summary-menu-stats ul {
 
    margin: 0 10px;
 
    display: block;
 
    background-color: #f9f9f9;
 
    border: 1px solid #d1d1d1;
 
    border-radius: 4px;
 
}
 

	
 
#content #summary-menu-stats li {
 
    border-top: 1px solid #d1d1d1;
 
    padding: 0;
 
}
 

	
 
#content #summary-menu-stats li:hover {
 
    background: #f0f0f0;
 
}
 

	
 
#content #summary-menu-stats li:first-child {
 
    border-top: none;
 
}
 

	
 
#summary-menu-stats a {
 
    display: block;
 
    padding: 12px 10px;
 
    background-repeat: no-repeat;
 
    background-position: 10px 50%;
 
    padding-right: 10px;
 
}
 

	
 
#repo_size_2.loaded {
 
    margin-left: 30px;
 
    display: block;
 
    padding-right: 10px;
 
    padding-bottom: 7px;
 
}
 

	
 
#summary-menu-stats a:hover {
 
    text-decoration: none;
 
}
 

	
 
#summary-menu-stats .badge {
 
    padding: 2px 4px !important;
 
    font-size: 10px;
 
}
 

	
 
#summary .metatag {
 
    display: inline-block;
 
    padding: 3px 5px;
 
    margin-bottom: 3px;
 
    margin-right: 1px;
 
    border-radius: 5px;
 
}
 

	
 
#content div.panel #summary p {
 
    margin-bottom: -5px;
 
    width: 600px;
 
    white-space: pre-wrap;
 
}
 

	
 
#content div.panel #summary p:last-child {
 
    margin-bottom: 9px;
 
}
 

	
 
#content div.panel #summary p:first-of-type {
 
    margin-top: 9px;
 
}
 

	
 
.metatag {
 
    display: inline-block;
 
    margin-right: 1px;
 
    border-radius: 4px 4px 4px 4px;
 

	
 
    border: solid 1px #9CF;
 
    padding: 2px 3px 2px 3px !important;
 
    background-color: #DEF;
 
}
 

	
 
.metatag[data-tag="dead"] {
 
    background-color: #E44;
 
}
 

	
 
.metatag[data-tag="stale"] {
 
    background-color: #EA4;
 
}
 

	
 
.metatag[data-tag="featured"] {
 
    background-color: #AEA;
 
}
 

	
 
.metatag[data-tag="requires"] {
 
    background-color: #9CF;
 
}
 

	
 
.metatag[data-tag="recommends"] {
 
    background-color: #BDF;
 
}
 

	
 
.metatag[data-tag="lang"] {
 
    background-color: #FAF474;
 
}
 

	
 
.metatag[data-tag="license"] {
 
    border: solid 1px #9CF;
 
    background-color: #DEF;
 
}
 
.metatag[data-tag="see"] {
 
    border: solid 1px #CBD;
 
    background-color: #EDF;
 
}
 

	
 
a.metatag[data-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: linear-gradient(to bottom, #577632, #577632);
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
 
    border-radius: 4px 4px 4px 4px;
 
}
 

	
 
#footer div#footer-inner p {
 
#footer > span {
 
    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 {
 
#footer .navbar-link {
 
    color: #FFF;
 
}
 

	
 
#login div.panel-heading {
 
    clear: both;
 
    overflow: hidden;
 
    position: relative;
 
    background-color: #577632;
 
    background-repeat: repeat-x;
 
    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.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.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 .buttons {
 
    float: right;
 
}
 

	
 
#login div.form div.links {
 
    clear: both;
 
    overflow: hidden;
 
    margin: 10px 0 0;
 
    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: linear-gradient(to bottom, #577632, #577632);
 

	
 
    z-index: 999;
 
    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;
 
}
 
#quick_login .big_gravatar {
 
    padding: 4px 0px 0px 6px;
 
}
 
#quick_login .notifications {
 
    padding: 2px 0px 0px 6px;
 
    color: #FFFFFF;
 
    font-weight: bold;
 
    line-height: 10px !important;
 
}
 
#quick_login .notifications a,
 
#quick_login .unread a {
 
    color: #FFFFFF;
 
    display: block;
 
    padding: 0px !important;
 
}
 
#quick_login .notifications a:hover,
 
#quick_login .unread a:hover {
 
    background-color: inherit !important;
 
}
 
#quick_login .email,
 
#quick_login .unread {
 
    color: #FFFFFF;
 
    padding: 3px 3px 3px 6px;
 
}
 
#quick_login .links .logout {
 
}
 

	
 
#quick_login div.form div.form-horizontal {
 
    padding-top: 2px;
 
    padding-left: 10px;
 
}
 

	
 
#quick_login div.form div.form-horizontal div.form-group {
 
    padding: 5px;
 
}
 

	
 
#quick_login div.form div.form-horizontal div.form-group > label {
 
    color: #fff;
 
    padding-bottom: 3px;
 
}
 

	
 
#quick_login div.form div.form-horizontal div.form-group > div input {
 
    width: 236px;
 
    background: #FFF;
 
    border-top: 1px solid #b3b3b3;
 
    border-left: 1px solid #b3b3b3;
 
    border-right: 1px solid #eaeaea;
kallithea/templates/base/base.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="root.html"/>
 

	
 
<!-- CONTENT -->
 
<div id="content">
 
    ${self.flash_msg()}
 
    <div id="main">
 
        ${next.main()}
 
    </div>
 
</div>
 
<!-- END CONTENT -->
 

	
 
<!-- FOOTER -->
 
<div id="footer">
 
   <div id="footer-inner" class="title">
 
       <div>
 
           <p class="footer-link pull-left">
 
<div id="footer" class="footer navbar navbar-inverse">
 
    <span class="navbar-text pull-left">
 
               ${_('Server instance: %s') % c.instance_id if c.instance_id else ''}
 
           </p>
 
           <p class="footer-link pull-right">
 
    </span>
 
    <span class="navbar-text pull-right">
 
               This site is powered by
 
               %if c.visual.show_version:
 
                   <a href="${h.url('kallithea_project_url')}" target="_blank">Kallithea</a> ${c.kallithea_version},
 
            <a class="navbar-link" href="${h.url('kallithea_project_url')}" target="_blank">Kallithea</a> ${c.kallithea_version},
 
               %else:
 
                   <a href="${h.url('kallithea_project_url')}" target="_blank">Kallithea</a>,
 
            <a class="navbar-link" href="${h.url('kallithea_project_url')}" target="_blank">Kallithea</a>,
 
               %endif
 
               which is
 
               <a href="${h.canonical_url('about')}#copyright">&copy; 2010&ndash;2017 by various authors &amp; licensed under GPLv3</a>.
 
        <a class="navbar-link" href="${h.canonical_url('about')}#copyright">&copy; 2010&ndash;2017 by various authors &amp; licensed under GPLv3</a>.
 
               %if c.issues_url:
 
                   &ndash; <a href="${c.issues_url}" target="_blank">${_('Support')}</a>
 
            &ndash; <a class="navbar-link" href="${c.issues_url}" target="_blank">${_('Support')}</a>
 
               %endif
 
           </p>
 
       </div>
 
   </div>
 
    </span>
 
</div>
 

	
 
<!-- END FOOTER -->
 

	
 
### MAKO DEFS ###
 

	
 
<%block name="branding_title">
 
    %if c.site_name:
 
    &middot; ${c.site_name}
 
    %endif
 
</%block>
 

	
 
<%def name="flash_msg()">
 
    <%include file="/base/flash_msg.html"/>
 
</%def>
 

	
 
<%def name="breadcrumbs()">
 
    <div class="breadcrumbs">
 
    ${self.breadcrumbs_links()}
 
    </div>
 
</%def>
 

	
 
<%def name="admin_menu()">
 
  <ul class="dropdown-menu" role="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>
 
      <li><a href="${h.url('users')}"><i class="icon-user"></i> ${_('Users')}</a></li>
 
      <li><a href="${h.url('users_groups')}"><i class="icon-users"></i> ${_('User Groups')}</a></li>
 
      <li><a href="${h.url('admin_permissions')}"><i class="icon-block"></i> ${_('Default Permissions')}</a></li>
 
      <li><a href="${h.url('auth_home')}"><i class="icon-key"></i> ${_('Authentication')}</a></li>
 
      <li><a href="${h.url('defaults')}"><i class="icon-wrench"></i> ${_('Repository Defaults')}</a></li>
 
      <li class="last"><a href="${h.url('admin_settings')}"><i class="icon-gear"></i> ${_('Settings')}</a></li>
 
  </ul>
 

	
 
</%def>
 

	
 

	
 
## admin menu used for people that have some admin resources
 
<%def name="admin_menu_simple(repositories=None, repository_groups=None, user_groups=None)">
 
  <ul class="dropdown-menu" role="menu">
 
   %if repositories:
 
      <li><a href="${h.url('repos')}"><i class="icon-database"></i> ${_('Repositories')}</a></li>
 
   %endif
 
   %if repository_groups:
 
      <li><a href="${h.url('repos_groups')}"><i class="icon-folder"></i> ${_('Repository Groups')}</a></li>
 
   %endif
 
   %if user_groups:
 
      <li><a href="${h.url('users_groups')}"><i class="icon-users"></i> ${_('User Groups')}</a></li>
 
   %endif
 
  </ul>
 
</%def>
 

	
 
<%def name="repotag(repo)">
 
  %if h.is_hg(repo):
 
    <span class="repotag" title="${_('Mercurial repository')}">hg</span>
 
  %endif
 
  %if h.is_git(repo):
 
    <span class="repotag" title="${_('Git repository')}">git</span>
 
  %endif
 
</%def>
 

	
 
<%def name="repo_context_bar(current=None, rev=None)">
 
  <% rev = None if rev == 'tip' else rev %>
 
  <!--- CONTEXT BAR -->
 
  <div id="context-bar" class="panel panel-primary">
 
      <h2>
 
        ${repotag(c.db_repo)}
 

	
 
        ## 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))}
 
          &raquo;
 
        %endfor
 
        ${h.link_to(c.db_repo.just_name, url('summary_home', repo_name=c.db_repo.repo_name))}
 

	
 
        %if current == 'createfork':
 
         - ${_('Create Fork')}
 
        %endif
 
      </h2>
 
      <ul id="context-pages" class="horizontal-list">
 
        <li class="${'current' 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="${'current' 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="${'current' 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="${'current' 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="${'current' if current == 'switch-to' else ''}" data-context="switch-to">
 
          <input id="branch_switcher" name="branch_switcher" type="hidden">
 
        </li>
 
        <li class="${'current' if current == 'options' else ''} dropdown" data-context="options">
 
             %if h.HasRepoPermissionAny('repository.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="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="caret"></i></a>
 
             %endif
 
          <ul class="dropdown-menu" role="menu" aria-hidden="yes">
 
             %if h.HasRepoPermissionAny('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
 
              %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
 
              <li><a href="${h.url('compare_home',repo_name=c.repo_name)}"><i class="icon-git-compare"></i> ${_('Compare')}</a></li>
 

	
 
              <li><a href="${h.url('search_repo',repo_name=c.repo_name)}"><i class="icon-search"></i> ${_('Search')}</a></li>
 

	
 
              %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name) and c.db_repo.enable_locking:
 
                %if c.db_repo.locked[0]:
 
                  <li><a href="${h.url('toggle_locking', repo_name=c.repo_name)}"><i class="icon-lock"></i> ${_('Unlock')}</a></li>
 
                %else:
 
                  <li><a href="${h.url('toggle_locking', repo_name=c.repo_name)}"><i class="icon-lock-open-alt"></i> ${_('Lock')}</li>
 
                %endif
 
              %endif
 
              ## TODO: this check feels wrong, it would be better to have a check for permissions
 
              ## also it feels like a job for the controller
 
              %if c.authuser.username != 'default':
 
                  <li>
 
                   <a class="${'following' if c.repository_following else 'follow'}" onclick="toggleFollowingRepo(this, ${c.db_repo.repo_id});">
 
                    <span class="show-follow"><i class="icon-heart-empty"></i> ${_('Follow')}</span>
 
                    <span class="show-following"><i class="icon-heart"></i> ${_('Unfollow')}</span>
 
                   </a>
 
                  </li>
 
                  <li><a href="${h.url('repo_fork_home',repo_name=c.repo_name)}"><i class="icon-git-pull-request"></i> ${_('Fork')}</a></li>
 
                  <li><a href="${h.url('pullrequest_home',repo_name=c.repo_name)}"><i class="icon-git-pull-request"></i> ${_('Create Pull Request')}</a></li>
 
              %endif
 
             </ul>
 
        </li>
 
        <li class="${'current' if current == 'showpullrequest' else ''}" 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 class="badge">${c.repository_pull_requests}</span>
 
            %endif
 
          </a>
 
        </li>
 
      </ul>
 
  </div>
 
  <script type="text/javascript">
 
    $(document).ready(function() {
 
      var bcache = {};
 

	
 
      $("#branch_switcher").select2({
 
          placeholder: '<i class="icon-exchange"></i> ${_('Switch To')} <span class="caret"></span>',
 
          dropdownAutoWidth: true,
 
          sortResults: prefixFirstSort,
 
          formatResult: function(obj) {
 
              return obj.text;
 
          },
 
          formatSelection: function(obj) {
 
              return obj.text;
 
          },
 
          formatNoMatches: function(term) {
 
              return "${_('No matches found')}";
 
          },
 
          escapeMarkup: function(m) {
 
              // don't escape our custom placeholder
 
              if (m.substr(0, 29) == '<i class="icon-exchange"></i>') {
 
                  return m;
 
              }
 

	
 
              return Select2.util.escapeMarkup(m);
 
          },
 
          containerCssClass: "repo-switcher",
 
          dropdownCssClass: "repo-switcher-dropdown",
 
          query: function(query) {
 
              var key = 'cache';
 
              var cached = bcache[key];
 
              if (cached) {
 
                  var data = {
 
                      results: []
 
                  };
 
                  // filter results
 
                  $.each(cached.results, function() {
 
                      var section = this.text;
 
                      var children = [];
 
                      $.each(this.children, function() {
 
                          if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
 
                              children.push({
 
                                  'id': this.id,
 
                                  'text': this.text,
 
                                  'type': this.type,
 
                                  'obj': this.obj
 
                              });
 
                          }
 
                      });
0 comments (0 inline, 0 general)