main-page: simplify footer, and expose docs link.

rhodecode/apps/home/tests/test_home.py

@@ -1,179 +1,179 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2010-2020 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 import pytest
 
 import rhodecode
 from rhodecode.model.db import Repository, RepoGroup, User
 from rhodecode.model.meta import Session
 from rhodecode.model.repo import RepoModel
 from rhodecode.model.repo_group import RepoGroupModel
 from rhodecode.model.settings import SettingsModel
 from rhodecode.tests import TestController
 from rhodecode.tests.fixture import Fixture
 from rhodecode.lib import helpers as h
 
 fixture = Fixture()
 
 
 def route_path(name, **kwargs):
     return {
         'home': '/',
         'main_page_repos_data': '/_home_repos',
         'main_page_repo_groups_data': '/_home_repo_groups',
         'repo_group_home': '/{repo_group_name}'
     }[name].format(**kwargs)
 
 
 class TestHomeController(TestController):
 
     def test_index(self):
         self.log_user()
         response = self.app.get(route_path('home'))
         # if global permission is set
         response.mustcontain('New Repository')
 
     def test_index_grid_repos(self, xhr_header):
         self.log_user()
         response = self.app.get(route_path('main_page_repos_data'), extra_environ=xhr_header)
         # search for objects inside the JavaScript JSON
         for obj in Repository.getAll():
             response.mustcontain('<a href=\\"/{}\\">'.format(obj.repo_name))
 
     def test_index_grid_repo_groups(self, xhr_header):
         self.log_user()
         response = self.app.get(route_path('main_page_repo_groups_data'),
                                 extra_environ=xhr_header,)
 
         # search for objects inside the JavaScript JSON
         for obj in RepoGroup.getAll():
             response.mustcontain('<a href=\\"/{}\\">'.format(obj.group_name))
 
     def test_index_grid_repo_groups_without_access(self, xhr_header, user_util):
         user = user_util.create_user(password='qweqwe')
         group_ok = user_util.create_repo_group(owner=user)
         group_id_ok = group_ok.group_id
 
         group_forbidden = user_util.create_repo_group(owner=User.get_first_super_admin())
         group_id_forbidden = group_forbidden.group_id
 
         user_util.grant_user_permission_to_repo_group(group_forbidden, user, 'group.none')
         self.log_user(user.username, 'qweqwe')
 
         self.app.get(route_path('main_page_repo_groups_data'),
                      extra_environ=xhr_header,
                      params={'repo_group_id': group_id_ok}, status=200)
 
         self.app.get(route_path('main_page_repo_groups_data'),
                      extra_environ=xhr_header,
                      params={'repo_group_id': group_id_forbidden}, status=404)
 
     def test_index_contains_statics_with_ver(self):
         from rhodecode.lib.base import calculate_version_hash
 
         self.log_user()
         response = self.app.get(route_path('home'))
 
         rhodecode_version_hash = calculate_version_hash(
             {'beaker.session.secret': 'test-rc-uytcxaz'})
         response.mustcontain('style.css?ver={0}'.format(rhodecode_version_hash))
         response.mustcontain('scripts.min.js?ver={0}'.format(rhodecode_version_hash))
 
     def test_index_contains_backend_specific_details(self, backend, xhr_header):
         self.log_user()
         response = self.app.get(route_path('main_page_repos_data'), extra_environ=xhr_header)
         tip = backend.repo.get_commit().raw_id
 
         # html in javascript variable:
         response.mustcontain(r'<i class=\"icon-%s\"' % (backend.alias, ))
         response.mustcontain(r'href=\"/%s\"' % (backend.repo_name, ))
 
         response.mustcontain("""/%s/changeset/%s""" % (backend.repo_name, tip))
         response.mustcontain("""Added a symlink""")
 
     def test_index_with_anonymous_access_disabled(self):
         with fixture.anon_access(False):
             response = self.app.get(route_path('home'), status=302)
             assert 'login' in response.location
 
     def test_index_page_on_groups_with_wrong_group_id(self, autologin_user, xhr_header):
         group_id = 918123
         self.app.get(
             route_path('main_page_repo_groups_data'),
             params={'repo_group_id': group_id},
             status=404, extra_environ=xhr_header)
 
     def test_index_page_on_groups(self, autologin_user, user_util, xhr_header):
         gr = user_util.create_repo_group()
         repo = user_util.create_repo(parent=gr)
         repo_name = repo.repo_name
         group_id = gr.group_id
 
         response = self.app.get(route_path(
             'repo_group_home', repo_group_name=gr.group_name))
         response.mustcontain('d.repo_group_id = {}'.format(group_id))
 
         response = self.app.get(
             route_path('main_page_repos_data'),
             params={'repo_group_id': group_id},
             extra_environ=xhr_header,)
         response.mustcontain(repo_name)
 
     def test_index_page_on_group_with_trailing_slash(self, autologin_user, user_util, xhr_header):
         gr = user_util.create_repo_group()
         repo = user_util.create_repo(parent=gr)
         repo_name = repo.repo_name
         group_id = gr.group_id
 
         response = self.app.get(route_path(
             'repo_group_home', repo_group_name=gr.group_name+'/'))
         response.mustcontain('d.repo_group_id = {}'.format(group_id))
 
         response = self.app.get(
             route_path('main_page_repos_data'),
             params={'repo_group_id': group_id},
             extra_environ=xhr_header, )
         response.mustcontain(repo_name)
 
     @pytest.mark.parametrize("name, state", [
         ('Disabled', False),
         ('Enabled', True),
     ])
     def test_index_show_version(self, autologin_user, name, state):
-        version_string = 'RhodeCode Enterprise %s' % rhodecode.__version__
+        version_string = 'RhodeCode %s' % rhodecode.__version__
 
         sett = SettingsModel().create_or_update_setting(
             'show_version', state, 'bool')
         Session().add(sett)
         Session().commit()
         SettingsModel().invalidate_settings_cache()
 
         response = self.app.get(route_path('home'))
         if state is True:
             response.mustcontain(version_string)
         if state is False:
             response.mustcontain(no=[version_string])
 
     def test_logout_form_contains_csrf(self, autologin_user, csrf_token):
         response = self.app.get(route_path('home'))
         assert_response = response.assert_response()
         element = assert_response.get_element('.logout [name=csrf_token]')
         assert element.value == csrf_token

rhodecode/public/css/main.less

@@ -1,3060 +1,3067 b''
 //Primary CSS
 
 //--- IMPORTS ------------------//
 
 @import 'helpers';
 @import 'mixins';
 @import 'rcicons';
 @import 'variables';
 @import 'bootstrap-variables';
 @import 'form-bootstrap';
 @import 'codemirror';
 @import 'legacy_code_styles';
 @import 'readme-box';
 @import 'progress-bar';
 
 @import 'type';
 @import 'alerts';
 @import 'buttons';
 @import 'tags';
 @import 'code-block';
 @import 'examples';
 @import 'login';
 @import 'main-content';
 @import 'select2';
 @import 'comments';
 @import 'panels-bootstrap';
 @import 'panels';
 @import 'deform';
 @import 'tooltips';
 @import 'sweetalert2';
 
 
 //--- BASE ------------------//
 .noscript-error {
   top: 0;
   left: 0;
   width: 100%;
   z-index: 101;
   text-align: center;
   font-size: 120%;
   color: white;
   background-color: @alert2;
   padding: 5px 0 5px 0;
   font-weight: @text-semibold-weight;
   font-family: @text-semibold;
 }
 
 html {
     display: table;
     height: 100%;
     width: 100%;
 }
 
 body {
     display: table-cell;
     width: 100%;
 }
 
 //--- LAYOUT ------------------//
 
 .hidden{
 	display: none !important;
 }
 
 .box{
 	float: left;
 	width: 100%;
 }
 
 .browser-header {
     clear: both;
 }
 .main {
   clear: both;
   padding:0 0 @pagepadding;
   height: auto;
 
 	&:after { //clearfix
 		content:"";
 		clear:both;
 		width:100%;
 		display:block;
 	}
 }
 
 .action-link{
 	margin-left: @padding;
 	padding-left: @padding;
 	border-left: @border-thickness solid @border-default-color;
 }
 
 .cursor-pointer {
   cursor: pointer;
 }
 
 input + .action-link, .action-link.first{
 	border-left: none;
 }
 
 .action-link.last{
 	margin-right: @padding;
 	padding-right: @padding;
 }
 
 .action-link.active,
 .action-link.active a{
 	color: @grey4;
 }
 
 .action-link.disabled {
     color: @grey4;
     cursor: inherit;
 }
 
+.grey-link-action {
+  cursor: pointer;
+  &:hover {
+      color: @grey2;
+  }
+  color: @grey4;
+}
 
 .clipboard-action {
   cursor: pointer;
   margin-left: 5px;
 
   &:not(.no-grey) {
 
     &:hover {
       color: @grey2;
     }
     color: @grey4;
   }
 }
 
 ul.simple-list{
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 
 .main-content {
 	padding-bottom: @pagepadding;
 }
 
 .wide-mode-wrapper {
     max-width:4000px !important;
 }
 
 .wrapper {
 	position: relative;
 	max-width: @wrapper-maxwidth;
 	margin: 0 auto;
 }
 
 #content {
     clear: both;
     padding: 0 @contentpadding;
 }
 
 .advanced-settings-fields{
 	input{
 		margin-left: @textmargin;
 		margin-right: @padding/2;
 	}
 }
 
 .cs_files_title {
     margin: @pagepadding 0 0;
 }
 
 input.inline[type="file"] {
 	display: inline;
 }
 
 .error_page {
     margin: 10% auto;
 
     h1 {
         color: @grey2;
     }
 
     .alert {
         margin: @padding 0;
     }
 
     .error-branding {
       color: @grey4;
       font-weight: @text-semibold-weight;
       font-family: @text-semibold;
     }
 
     .error_message {
         font-family: @text-regular;
     }
 
     .sidebar {
         min-height: 275px;
         margin: 0;
         padding: 0 0 @sidebarpadding @sidebarpadding;
         border: none;
     }
 
     .main-content {
         position: relative;
         margin: 0 @sidebarpadding @sidebarpadding;
         padding: 0 0 0 @sidebarpadding;
         border-left: @border-thickness solid @grey5;
 
         @media (max-width:767px) {
             clear: both;
             width: 100%;
             margin: 0;
             border: none;
         }
     }
 
     .inner-column {
         float: left;
         width: 29.75%;
         min-height: 150px;
         margin: @sidebarpadding 2% 0 0;
         padding: 0 2% 0 0;
         border-right: @border-thickness solid @grey5;
 
         @media (max-width:767px) {
             clear: both;
             width: 100%;
             border: none;
         }
 
         ul {
             padding-left: 1.25em;
         }
 
         &:last-child {
             margin: @sidebarpadding 0 0;
             border: none;
         }
 
         h4 {
           margin: 0 0 @padding;
           font-weight: @text-semibold-weight;
           font-family: @text-semibold;
         }
     }
 }
 .error-page-logo {
     width: 130px;
     height: 160px;
 }
 
 // HEADER
 .header {
 
     // TODO: johbo: Fix login pages, so that they work without a min-height
     // for the header and then remove the min-height. I chose a smaller value
     // intentionally here to avoid rendering issues in the main navigation.
     min-height: 49px;
     min-width: 1024px;
 
 	position: relative;
 	vertical-align: bottom;
 	padding: 0 @header-padding;
 	background-color: @grey1;
 	color: @grey5;
 
 	.title {
 		overflow: visible;
 	}
 
 	&:before,
 	&:after {
 		content: "";
 		clear: both;
 		width: 100%;
 	}
 
 	// TODO: johbo: Avoids breaking "Repositories" chooser
 	.select2-container .select2-choice .select2-arrow {
 	    display: none;
 	}
 }
 
 #header-inner {
 	&.title {
 		margin: 0;
 	}
 	&:before,
 	&:after {
 		content: "";
 		clear: both;
 	}
 }
 
 // Gists
 #files_data {
     clear: both; //for firefox
     padding-top: 10px;
 }
 
 #gistid {
     margin-right: @padding;
 }
 
 // Global Settings Editor
 .textarea.editor {
 	float: left;
 	position: relative;
 	max-width: @texteditor-width;
 
 	select {
 		position: absolute;
 		top:10px;
 		right:0;
 	}
 
 	.CodeMirror {
 		margin: 0;
 	}
 
 	.help-block {
 		margin: 0 0 @padding;
 		padding:.5em;
 		background-color: @grey6;
         &.pre-formatting {
             white-space: pre;
         }
 	}
 }
 
 ul.auth_plugins {
 	margin: @padding 0 @padding @legend-width;
 	padding: 0;
 
 	li {
 		margin-bottom: @padding;
         line-height: 1em;
 		list-style-type: none;
 
 		.auth_buttons .btn {
 			margin-right: @padding;
 		}
 
 	}
 }
 
 
 // My Account PR list
 
 #show_closed {
     margin: 0 1em 0 0;
 }
 
 #pull_request_list_table {
     .closed {
         background-color: @grey6;
     }
 
     .state-creating,
     .state-updating,
     .state-merging
     {
         background-color: @grey6;
     }
 
     .td-status {
         padding-left: .5em;
     }
     .log-container .truncate {
         height: 2.75em;
         white-space: pre-line;
     }
     table.rctable .user {
         padding-left: 0;
     }
     table.rctable {
         td.td-description,
         .rc-user {
             min-width: auto;
         }
     }
 }
 
 // Pull Requests
 
 .pullrequests_section_head {
   display: block;
   clear: both;
   margin: @padding 0;
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 }
 
 .pr-commit-flow  {
     position: relative;
     font-weight: 600;
 
     .tag {
         display: inline-block;
         margin: 0 1em .5em 0;
     }
 
     .clone-url {
         display: inline-block;
         margin: 0 0 .5em 0;
         padding: 0;
         line-height: 1.2em;
     }
 }
 
 .pr-mergeinfo {
       min-width: 95% !important;
       padding: 0 !important;
       border: 0;
 }
 .pr-mergeinfo-copy {
     padding: 0 0;
 }
 
 .pr-pullinfo {
       min-width: 95% !important;
       padding: 0 !important;
       border: 0;
 }
 .pr-pullinfo-copy {
     padding: 0 0;
 }
 
 .pr-title-input {
   width: 100%;
   font-size: 18px;
   margin:  0 0 4px 0;
   padding: 0;
   line-height: 1.7em;
   color: @text-color;
   letter-spacing: .02em;
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 
   &:hover {
     box-shadow: none;
   }
 }
 
 #pr-title {
   input {
     border: 1px transparent;
     color: black;
     opacity: 1;
     background: #fff;
     font-size: 18px;
   }
 }
 
 .pr-title-closed-tag {
     font-size: 16px;
 }
 
 #pr-desc {
   padding: 10px 0;
 
   .markdown-block {
     padding: 0;
     margin-bottom: -30px;
   }
 }
 
 #pullrequest_title {
     width: 100%;
     box-sizing: border-box;
 }
 
 #pr_open_message {
     border: @border-thickness solid #fff;
     border-radius: @border-radius;
     text-align: left;
     overflow: hidden;
     white-space: pre-line;
 }
 
 .pr-details-title {
     height: 16px
 }
 
 .pr-details-title-author-pref {
     padding-right: 10px
 }
 
 .label-pr-detail {
   display: table-cell;
   width: 120px;
   padding-top: 7.5px;
   padding-bottom: 7.5px;
   padding-right: 7.5px;
 }
 
 .source-details ul {
   padding: 10px 16px;
 }
 
 .source-details-action {
   color: @grey4;
   font-size: 11px
 }
 
 .pr-submit-button {
     float: right;
     margin: 0 0 0 5px;
 }
 
 .pr-spacing-container {
     padding: 20px;
     clear: both
 }
 
 #pr-description-input {
     margin-bottom: 0;
 }
 
 .pr-description-label {
     vertical-align: top;
 }
 
 #open_edit_pullrequest {
   padding: 0;
 }
 
 #close_edit_pullrequest {
 
 }
 
 #delete_pullrequest {
     clear: inherit;
 
   form {
       display: inline;
   }
 
 }
 
 .perms_section_head {
     min-width: 625px;
 
     h2 {
         margin-bottom: 0;
     }
 
     .label-checkbox {
         float: left;
     }
 
     &.field {
         margin: @space 0 @padding;
     }
 
     &:first-child.field {
         margin-top: 0;
 
         .label {
             margin-top: 0;
             padding-top: 0;
         }
 
         .radios {
             padding-top: 0;
         }
     }
 
     .radios {
         position: relative;
         width: 505px;
     }
 }
 
 //--- MODULES ------------------//
 
 
 // Server Announcement
 #server-announcement {
   width: 95%;
   margin: @padding auto;
   padding: @padding;
   border-width: 2px;
   border-style: solid;
   .border-radius(2px);
   font-weight: @text-bold-weight;
   font-family: @text-bold;
 
   &.info    { border-color: @alert4; background-color: @alert4-inner; }
   &.warning { border-color: @alert3; background-color: @alert3-inner; }
   &.error   { border-color: @alert2; background-color: @alert2-inner; }
   &.success { border-color: @alert1; background-color: @alert1-inner; }
   &.neutral { border-color: @grey3; background-color: @grey6; }
 }
 
 // Fixed Sidebar Column
 .sidebar-col-wrapper {
     padding-left: @sidebar-all-width;
 
     .sidebar {
         width: @sidebar-width;
         margin-left: -@sidebar-all-width;
     }
 }
 
 .sidebar-col-wrapper.scw-small {
     padding-left: @sidebar-small-all-width;
 
     .sidebar {
         width: @sidebar-small-width;
         margin-left: -@sidebar-small-all-width;
     }
 }
 
 
 // FOOTER
 #footer {
 	padding: 0;
 	text-align: center;
 	vertical-align: middle;
 	color: @grey2;
     font-size: 11px;
 
 	p {
 		margin: 0;
 		padding: 1em;
 		line-height: 1em;
 	}
 
 	.server-instance { //server instance
 		display: none;
 	}
 
 	.title {
 		float: none;
 		margin: 0 auto;
 	}
 }
 
 button.close {
 	padding: 0;
 	cursor: pointer;
 	background: transparent;
 	border: 0;
 	.box-shadow(none);
 	-webkit-appearance: none;
 }
 
 .close {
 	float: right;
 	font-size: 21px;
 	font-family: @text-bootstrap;
 	line-height: 1em;
 	font-weight: bold;
 	color: @grey2;
 
 	&:hover,
 	&:focus {
 		color: @grey1;
 		text-decoration: none;
 		cursor: pointer;
 	}
 }
 
 // GRID
 .sorting,
 .sorting_desc,
 .sorting_asc {
 	cursor: pointer;
 }
 .sorting_desc:after {
 	content: "\00A0\25B2";
 	font-size: .75em;
 }
 .sorting_asc:after {
 	content: "\00A0\25BC";
 	font-size: .68em;
 }
 
 
 .user_auth_tokens {
 
     &.truncate {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
 	.fields .field .input {
 		margin: 0;
 	}
 
 	input#description {
 		width: 100px;
 		margin: 0;
 	}
 
 	.drop-menu {
 	    // TODO: johbo: Remove this, should work out of the box when
 	    // having multiple inputs inline
 		margin: 0 0 0 5px;
 	}
 }
 #user_list_table {
   .closed {
     background-color: @grey6;
   }
 }
 
 
 input, textarea {
 	&.disabled {
 		opacity: .5;
 	}
 
     &:hover {
         border-color: @grey3;
         box-shadow: @button-shadow;
     }
 
     &:focus {
         border-color: @rcblue;
         box-shadow: @button-shadow;
     }
 }
 
 // remove extra padding in firefox
 input::-moz-focus-inner { border:0; padding:0 }
 
 .adjacent input {
 	margin-bottom: @padding;
 }
 
 .permissions_boxes {
 	display: block;
 }
 
 //FORMS
 
 .medium-inline,
 input#description.medium-inline {
 	display: inline;
 	width: @medium-inline-input-width;
 	min-width: 100px;
 }
 
 select {
 	//reset
 	-webkit-appearance: none;
 	-moz-appearance: none;
 
 	display: inline-block;
 	height: 28px;
 	width: auto;
 	margin: 0 @padding @padding 0;
 	padding: 0 18px 0 8px;
 	line-height:1em;
 	font-size: @basefontsize;
 	border: @border-thickness solid @grey5;
     border-radius: @border-radius;
 	background:white url("../images/dt-arrow-dn.png") no-repeat 100% 50%;
 	color: @grey4;
     box-shadow: @button-shadow;
 
 	&:after {
 		content: "\00A0\25BE";
 	}
 
 	&:focus, &:hover {
 		outline: none;
         border-color: @grey4;
         color: @rcdarkblue;
 	}
 }
 
 option {
 	&:focus {
 		outline: none;
 	}
 }
 
 input,
 textarea {
 	padding: @input-padding;
 	border: @input-border-thickness solid @border-highlight-color;
 	.border-radius (@border-radius);
 	font-family: @text-light;
 	font-size: @basefontsize;
 
 	&.input-sm {
 		padding: 5px;
 	}
 
 	&#description {
 		min-width: @input-description-minwidth;
 		min-height: 1em;
 		padding: 10px;
 	}
 }
 
 .field-sm {
     input,
     textarea {
         padding: 5px;
     }
 }
 
 textarea {
 	display: block;
 	clear: both;
 	width: 100%;
 	min-height: 100px;
 	margin-bottom: @padding;
     .box-sizing(border-box);
     overflow: auto;
 }
 
 label {
 	font-family: @text-light;
 }
 
 // GRAVATARS
 // centers gravatar on username to the right
 
 .gravatar {
     display: inline;
     min-width: 16px;
     min-height: 16px;
     margin: -5px 0;
     padding: 0;
     line-height: 1em;
     box-sizing: content-box;
     border-radius: 50%;
 
     &.gravatar-large {
         margin: -0.5em .25em -0.5em 0;
     }
 
     & + .user {
         display: inline;
         margin: 0;
         padding: 0 0 0 .17em;
         line-height: 1em;
     }
 
     & + .no-margin {
       margin: 0
     }
 
 }
 
 .user-inline-data {
     display: inline-block;
     float: left;
     padding-left: .5em;
     line-height: 1.3em;
 }
 
 .rc-user { // gravatar + user wrapper
     float: left;
     position: relative;
     min-width: 100px;
     max-width: 200px;
     min-height: (@gravatar-size + @border-thickness * 2); // account for border
     display: block;
     padding: 0 0 0 (@gravatar-size  + @basefontsize/4);
 
 
     .gravatar {
         display: block;
         position: absolute;
         top: 0;
         left: 0;
         min-width:  @gravatar-size;
         min-height: @gravatar-size;
         margin: 0;
     }
 
     .user {
         display: block;
         max-width: 175px;
         padding-top: 2px;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 }
 
 .gist-gravatar,
 .journal_container {
     .gravatar-large {
         margin: 0 .5em -10px 0;
     }
 }
 
 .gist-type-fields {
     line-height: 30px;
     height: 30px;
 
     .gist-type-fields-wrapper {
         vertical-align: middle;
         display: inline-block;
         line-height: 25px;
     }
 }
 
 // ADMIN SETTINGS
 
 // Tag Patterns
 .tag_patterns {
 	.tag_input {
 		margin-bottom: @padding;
 	}
 }
 
 .locked_input {
     position: relative;
 
     input {
         display: inline;
         margin: 3px 5px 0px 0px;
     }
 
     br {
         display: none;
     }
 
     .error-message {
         float: left;
         width: 100%;
     }
 
     .lock_input_button {
         display: inline;
     }
 
     .help-block {
         clear: both;
     }
 }
 
 // Notifications
 
 .notifications_buttons {
 	margin: 0 0 @space 0;
 	padding: 0;
 
 	.btn {
 		display: inline-block;
 	}
 }
 
 .notification-list {
 
 	div {
 		vertical-align: middle;
 	}
 
 	.container {
 		display: block;
 		margin: 0 0 @padding 0;
 	}
 
 	.delete-notifications {
 		margin-left: @padding;
 		text-align: right;
         cursor: pointer;
 	}
 
 	.read-notifications {
 		margin-left: @padding/2;
 		text-align: right;
 		width: 35px;
         cursor: pointer;
 	}
 
 	.icon-minus-sign {
 		color: @alert2;
 	}
 
 	.icon-ok-sign {
 		color: @alert1;
 	}
 }
 
 .user_settings {
 	float: left;
 	clear: both;
 	display: block;
 	width: 100%;
 
 	.gravatar_box {
 		margin-bottom: @padding;
 
 		&:after {
 			content: " ";
 			clear: both;
 			width: 100%;
 		}
 	}
 
 	.fields .field {
 		clear: both;
 	}
 }
 
 .advanced_settings {
 	margin-bottom: @space;
 
 	.help-block {
 		margin-left: 0;
 	}
 
 	button + .help-block {
 		margin-top: @padding;
 	}
 }
 
 // admin settings radio buttons and labels
 .label-2 {
 	float: left;
 	width: @label2-width;
 
 	label {
 		color: @grey1;
 	}
 }
 .checkboxes {
 	float: left;
 	width: @checkboxes-width;
 	margin-bottom: @padding;
 
 	.checkbox {
 		width: 100%;
 
 		label {
 			margin: 0;
 			padding: 0;
 		}
 	}
 
 	.checkbox + .checkbox {
 		display: inline-block;
 	}
 
 	label {
 		margin-right: 1em;
 	}
 }
 
 // CHANGELOG
 .container_header {
     float: left;
 	display: block;
 	width: 100%;
 	margin: @padding 0 @padding;
 
     #filter_changelog {
         float: left;
         margin-right: @padding;
     }
 
     .breadcrumbs_light {
         display: inline-block;
     }
 }
 
 .info_box {
 	float: right;
 }
 
 
 
 #graph_content{
 
     // adjust for table headers so that graph renders properly
     //           #graph_nodes padding - table cell padding
     padding-top: (@space - (@basefontsize * 2.4));
 
     &.graph_full_width {
         width: 100%;
         max-width: 100%;
     }
 }
 
 #graph {
 
     .pagination-left {
         float: left;
         clear: both;
     }
 
     .log-container {
         max-width: 345px;
 
         .message{
             max-width: 340px;
         }
     }
 
     .graph-col-wrapper {
 
         #graph_nodes {
             width: 100px;
             position: absolute;
             left: 70px;
             z-index: -1;
         }
     }
 
     .load-more-commits {
         text-align: center;
     }
     .load-more-commits:hover {
         background-color: @grey7;
     }
     .load-more-commits {
       a {
         display: block;
       }
     }
 }
 
 .obsolete-toggle {
     line-height: 30px;
     margin-left: -15px;
 }
 
 #rev_range_container, #rev_range_clear, #rev_range_more {
     margin-top: -5px;
     margin-bottom: -5px;
 }
 
 #filter_changelog {
     float: left;
 }
 
 
 //--- THEME ------------------//
 
 #logo {
 	float: left;
 	margin: 9px 0 0 0;
 
     .header {
     	background-color: transparent;
     }
 
     a {
     	display: inline-block;
     }
 
     img {
     	height:30px;
     }
 }
 
 .logo-wrapper {
 	float:left;
 }
 
 .branding {
 	float: left;
 	padding: 9px 2px;
 	line-height: 1em;
 	font-size: @navigation-fontsize;
 
     a {
       color: @grey5
     }
     @media screen and (max-width: 1200px) {
       display: none;
     }
 }
 
 img {
 	border: none;
 	outline: none;
 }
  user-profile-header
 label {
 
     input[type="checkbox"] {
         margin-right: 1em;
     }
     input[type="radio"] {
         margin-right: 1em;
     }
 }
 
 .review-status {
     &.under_review {
         color: @alert3;
     }
     &.approved {
         color: @alert1;
     }
     &.rejected,
     &.forced_closed{
         color: @alert2;
     }
     &.not_reviewed {
         color: @grey5;
     }
 }
 
 .review-status-under_review {
   color: @alert3;
 }
 .status-tag-under_review {
   border-color: @alert3;
 }
 
 .review-status-approved {
   color: @alert1;
 }
 .status-tag-approved {
   border-color: @alert1;
 }
 
 .review-status-rejected,
 .review-status-forced_closed {
   color: @alert2;
 }
 .status-tag-rejected,
 .status-tag-forced_closed {
   border-color: @alert2;
 }
 
 .review-status-not_reviewed {
   color: @grey5;
 }
 .status-tag-not_reviewed {
   border-color: @grey5;
 }
 
 .test_pattern_preview {
 	margin: @space 0;
 
 	p {
         margin-bottom: 0;
 		border-bottom: @border-thickness solid @border-default-color;
 		color: @grey3;
 	}
 
 	.btn {
 		margin-bottom: @padding;
 	}
 }
 #test_pattern_result {
     display: none;
     &:extend(pre);
     padding: .9em;
     color: @grey3;
     background-color: @grey7;
     border-right: @border-thickness solid @border-default-color;
     border-bottom: @border-thickness solid @border-default-color;
     border-left: @border-thickness solid @border-default-color;
 }
 
 #repo_vcs_settings {
     #inherit_overlay_vcs_default {
         display: none;
     }
     #inherit_overlay_vcs_custom {
         display: custom;
     }
     &.inherited {
         #inherit_overlay_vcs_default {
             display: block;
         }
         #inherit_overlay_vcs_custom {
             display: none;
         }
     }
 }
 
 .issue-tracker-link {
 	color: @rcblue;
 }
 
 // Issue Tracker Table Show/Hide
 #repo_issue_tracker {
     #inherit_overlay {
         display: none;
     }
     #custom_overlay {
         display: custom;
     }
     &.inherited {
         #inherit_overlay {
             display: block;
         }
         #custom_overlay {
             display: none;
         }
     }
 }
 table.issuetracker {
     &.readonly {
         tr, td {
             color: @grey3;
         }
     }
     .edit {
         display: none;
     }
     .editopen {
         .edit {
             display: inline;
         }
         .entry {
             display: none;
         }
     }
     tr td.td-action {
         min-width: 117px;
     }
     td input {
         max-width: none;
         min-width: 30px;
         width: 80%;
     }
     .issuetracker_pref input {
         width: 40%;
     }
     input.edit_issuetracker_update {
         margin-right: 0;
         width: auto;
     }
 }
 
 table.integrations {
     .td-icon {
         width: 20px;
         .integration-icon {
             height: 20px;
             width: 20px;
         }
     }
 }
 
 .integrations {
     a.integration-box {
         color: @text-color;
         &:hover {
             .panel {
                 background: #fbfbfb;
             }
         }
         .integration-icon {
           width: 30px;
           height: 30px;
           margin-right: 20px;
           float: left;
         }
 
         .panel-body {
             padding: 10px;
         }
         .panel {
             margin-bottom: 10px;
         }
         h2 {
             display: inline-block;
             margin: 0;
             min-width: 140px;
         }
     }
     a.integration-box.dummy-integration {
       color: @grey4
     }
 }
 
 //Permissions Settings
 #add_perm {
     margin: 0 0 @padding;
 	cursor: pointer;
 }
 
 .perm_ac {
     input {
         width: 95%;
     }
 }
 
 .autocomplete-suggestions {
     width: auto !important; // overrides autocomplete.js
     min-width: 278px;
     margin: 0;
     border: @border-thickness solid @grey5;
     border-radius: @border-radius;
     color: @grey2;
     background-color: white;
 }
 
 .autocomplete-qfilter-suggestions {
     width: auto !important; // overrides autocomplete.js
     max-height: 100% !important;
     min-width: 376px;
     margin: 0;
     border: @border-thickness solid @grey5;
     color: @grey2;
     background-color: white;
 }
 
 .autocomplete-selected {
     background: #F0F0F0;
 }
 
 .ac-container-wrap {
 	margin: 0;
 	padding: 8px;
 	border-bottom: @border-thickness solid @grey5;
 	list-style-type: none;
 	cursor: pointer;
 
 		&:hover {
 			background-color: @grey7;
 	}
 
 	img {
         height: @gravatar-size;
         width: @gravatar-size;
 		margin-right: 1em;
 	}
 
 	strong {
 		font-weight: normal;
 	}
 }
 
 // Settings Dropdown
 .user-menu .container {
     padding: 0 4px;
     margin: 0;
 }
 
 .user-menu .gravatar {
     cursor: pointer;
 }
 
 .codeblock {
 	margin-bottom: @padding;
     clear: both;
 
     .stats {
         overflow: hidden;
     }
 
     .message{
         textarea{
             margin: 0;
         }
     }
 
     .code-header {
     	.stats {
             line-height: 2em;
 
     		.revision_id {
     			margin-left: 0;
     		}
 			.buttons {
                 padding-right: 0;
 			}
     	}
 
         .item{
             margin-right: 0.5em;
         }
     }
 
     #editor_container {
       position: relative;
       margin: @padding 10px;
     }
 }
 
 #file_history_container {
     display: none;
 }
 
 .file-history-inner {
     margin-bottom: 10px;
 }
 
 // Pull Requests
 .summary-details {
     width: 72%;
 }
 .pr-summary {
     border-bottom: @border-thickness solid @grey5;
     margin-bottom: @space;
 }
 
 .reviewers-title {
   width: 25%;
   min-width: 200px;
 
   &.first-panel {
     margin-top: 34px;
   }
 }
 
 .reviewers {
     width: 25%;
     min-width: 200px;
 }
 .reviewers ul li {
     position: relative;
     width: 100%;
     padding-bottom: 8px;
     list-style-type: none;
 }
 
 .reviewer_entry {
   min-height: 55px;
 }
 
 .reviewers_member {
     width: 100%;
     overflow: auto;
 }
 .reviewer_reason {
     padding-left: 20px;
     line-height: 1.5em;
 }
 .reviewer_status {
     display: inline-block;
     width: 25px;
     min-width: 25px;
     height: 1.2em;
     line-height: 1em;
 }
 
 .reviewer_name {
     display: inline-block;
     max-width: 83%;
     padding-right: 20px;
     vertical-align: middle;
     line-height: 1;
 
     .rc-user {
         min-width: 0;
         margin: -2px 1em 0 0;
     }
 
     .reviewer {
         float: left;
     }
 }
 
 .reviewer_member_mandatory {
     position: absolute;
     left: 15px;
     top: 8px;
     width: 16px;
     font-size: 11px;
     margin: 0;
     padding: 0;
     color: black;
 }
 
 .reviewer_member_mandatory_remove,
 .reviewer_member_remove {
     position: absolute;
     right: 0;
     top: 0;
     width: 16px;
     margin-bottom: 10px;
     padding: 0;
     color: black;
 }
 
 .reviewer_member_mandatory_remove {
   color: @grey4;
 }
 
 .reviewer_member_status {
     margin-top: 5px;
 }
 .pr-summary #summary{
     width: 100%;
 }
 .pr-summary .action_button:hover {
     border: 0;
     cursor: pointer;
 }
 .pr-details-title {
     padding-bottom: 8px;
     border-bottom: @border-thickness solid @grey5;
 
     .action_button.disabled {
         color: @grey4;
         cursor: inherit;
     }
     .action_button {
         color: @rcblue;
     }
 }
 .pr-details-content {
     margin-top: @textmargin - 5;
     margin-bottom: @textmargin - 5;
 }
 
 .pr-reviewer-rules {
    padding: 10px 0px 20px 0px;
 }
 
 .todo-resolved {
   text-decoration: line-through;
 }
 
 .todo-table {
   width: 100%;
 
   td {
     padding: 5px 0px;
   }
 
   .td-todo-number {
     text-align: left;
     white-space: nowrap;
     width: 15%;
   }
 
   .td-todo-gravatar {
     width: 5%;
 
     img {
       margin: -3px 0;
     }
   }
 
 }
 
 .todo-comment-text-wrapper {
   display: inline-grid;
 }
 
 .todo-comment-text {
   margin-left: 5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .group_members {
     margin-top: 0;
     padding: 0;
     list-style: outside none none;
 
     img {
         height: @gravatar-size;
         width: @gravatar-size;
         margin-right: .5em;
         margin-left: 3px;
     }
 
     .to-delete {
         .user {
           text-decoration: line-through;
         }
     }
 }
 
 .compare_view_commits_title {
   .disabled {
     cursor: inherit;
     &:hover{
       background-color: inherit;
       color: inherit;
     }
   }
 }
 
 .subtitle-compare {
   margin: -15px 0px 0px 0px;
 }
 
 // new entry in group_members
 .td-author-new-entry {
   background-color: rgba(red(@alert1), green(@alert1), blue(@alert1), 0.3);
 }
 
 .usergroup_member_remove {
     width: 16px;
     margin-bottom: 10px;
     padding: 0;
     color: black !important;
     cursor: pointer;
 }
 
 .reviewer_ac .ac-input {
     width: 92%;
     margin-bottom: 1em;
 }
 
 .compare_view_commits tr{
     height: 20px;
 }
 .compare_view_commits td {
     vertical-align: top;
     padding-top: 10px;
 }
 .compare_view_commits .author {
     margin-left: 5px;
 }
 
 .compare_view_commits {
   .color-a {
     color: @alert1;
   }
 
   .color-c {
     color: @color3;
   }
 
   .color-r {
     color: @color5;
   }
 
   .color-a-bg {
     background-color: @alert1;
   }
 
   .color-c-bg {
     background-color: @alert3;
   }
 
   .color-r-bg {
     background-color: @alert2;
   }
 
   .color-a-border {
     border: 1px solid @alert1;
   }
 
   .color-c-border {
     border: 1px solid @alert3;
   }
 
   .color-r-border {
     border: 1px solid @alert2;
   }
 
   .commit-change-indicator {
     width: 15px;
     height: 15px;
     position: relative;
     left: 15px;
   }
 
   .commit-change-content {
     text-align: center;
     vertical-align: middle;
     line-height: 15px;
   }
 }
 
 .compare_view_filepath {
     color: @grey1;
 }
 
 .show_more {
     display: inline-block;
     width: 0;
     height: 0;
     vertical-align: middle;
     content: "";
     border: 4px solid;
     border-right-color: transparent;
     border-bottom-color: transparent;
     border-left-color: transparent;
     font-size: 0;
 }
 
 .journal_more .show_more {
     display: inline;
 
     &:after {
         content: none;
     }
 }
 
 .compare_view_commits .collapse_commit:after {
     cursor: pointer;
     content: "\00A0\25B4";
     margin-left: -3px;
     font-size: 17px;
     color: @grey4;
 }
 
 .diff_links {
     margin-left: 8px;
 }
 
 #pull_request_overview {
   div.ancestor {
       margin: -33px 0;
   }
 }
 
 div.ancestor {
 
 }
 
 .cs_icon_td input[type="checkbox"] {
     display: none;
 }
 
 .cs_icon_td .expand_file_icon:after {
     cursor: pointer;
     content: "\00A0\25B6";
     font-size: 12px;
     color: @grey4;
 }
 
 .cs_icon_td .collapse_file_icon:after {
     cursor: pointer;
     content: "\00A0\25BC";
     font-size: 12px;
     color: @grey4;
 }
 
 /*new binary
 NEW_FILENODE = 1
 DEL_FILENODE = 2
 MOD_FILENODE = 3
 RENAMED_FILENODE = 4
 COPIED_FILENODE = 5
 CHMOD_FILENODE = 6
 BIN_FILENODE = 7
 */
 .cs_files_expand {
     font-size: @basefontsize + 5px;
     line-height: 1.8em;
     float: right;
 }
 
 .cs_files_expand span{
     color: @rcblue;
     cursor: pointer;
 }
 .cs_files {
     clear: both;
 	padding-bottom: @padding;
 
     .cur_cs {
         margin: 10px 2px;
         font-weight: bold;
     }
 
     .node {
         float: left;
     }
 
     .changes {
         float: right;
         color: white;
         font-size: @basefontsize - 4px;
         margin-top: 4px;
         opacity: 0.6;
         filter: Alpha(opacity=60); /* IE8 and earlier */
 
         .added {
             background-color: @alert1;
             float: left;
             text-align: center;
         }
 
         .deleted {
             background-color: @alert2;
             float: left;
             text-align: center;
         }
 
         .bin {
             background-color: @alert1;
             text-align: center;
         }
 
         /*new binary*/
         .bin.bin1 {
             background-color: @alert1;
             text-align: center;
         }
 
         /*deleted binary*/
         .bin.bin2 {
             background-color: @alert2;
             text-align: center;
         }
 
         /*mod binary*/
         .bin.bin3 {
             background-color: @grey2;
             text-align: center;
         }
 
         /*rename file*/
         .bin.bin4 {
             background-color: @alert4;
             text-align: center;
         }
 
         /*copied file*/
         .bin.bin5 {
             background-color: @alert4;
             text-align: center;
         }
 
         /*chmod file*/
         .bin.bin6 {
             background-color: @grey2;
             text-align: center;
         }
     }
 }
 
 .cs_files .cs_added, .cs_files .cs_A,
 .cs_files .cs_added, .cs_files .cs_M,
 .cs_files .cs_added, .cs_files .cs_D {
     height: 16px;
     padding-right: 10px;
     margin-top: 7px;
     text-align: left;
 }
 
 .cs_icon_td {
   min-width: 16px;
   width: 16px;
 }
 
 .pull-request-merge {
     border: 1px solid @grey5;
     padding: 10px 0px 20px;
     margin-top: 10px;
     margin-bottom: 20px;
 }
 
 .pull-request-merge-refresh {
   margin: 2px 7px;
   a {
     color: @grey3;
   }
 }
 
 .pull-request-merge ul {
     padding: 0px 0px;
 }
 
 .pull-request-merge li {
     list-style-type: none;
 }
 
 .pull-request-merge .pull-request-wrap {
     height: auto;
     padding: 0px 0px;
     text-align: right;
 }
 
 .pull-request-merge span {
     margin-right: 5px;
 }
 
 .pull-request-merge-actions {
     min-height: 30px;
     padding: 0px 0px;
 }
 
 .pull-request-merge-info {
   padding: 0px 5px 5px 0px;
 }
 
 .merge-status {
   margin-right: 5px;
 }
 
 .merge-message {
     font-size: 1.2em
 }
 
 .merge-message.success i,
 .merge-icon.success i {
     color:@alert1;
 }
 
 .merge-message.warning i,
 .merge-icon.warning i {
   color: @alert3;
 }
 
 .merge-message.error i,
 .merge-icon.error i  {
     color:@alert2;
 }
 
 .pr-versions {
     font-size: 1.1em;
     padding: 7.5px;
 
     table {
 
     }
 
     td {
       line-height: 15px;
     }
 
     .compare-radio-button {
       position: relative;
       top: -3px;
     }
 }
 
 
 #close_pull_request {
     margin-right: 0px;
 }
 
 .empty_data {
     color: @grey4;
 }
 
 #changeset_compare_view_content {
     clear: both;
     width: 100%;
     box-sizing: border-box;
     .border-radius(@border-radius);
 
     .help-block {
         margin: @padding 0;
         color: @text-color;
         &.pre-formatting {
             white-space: pre;
         }
     }
 
     .empty_data {
         margin: @padding 0;
     }
 
     .alert {
         margin-bottom: @space;
     }
 }
 
 .table_disp {
 	.status {
 		width: auto;
 	}
 }
 
 
 .creation_in_progress {
   color: @grey4
 }
 
 .status_box_menu {
     margin: 0;
 }
 
 .notification-table{
 	margin-bottom: @space;
 	display: table;
 	width: 100%;
 
 	.container{
 		display: table-row;
 
 		.notification-header{
 			border-bottom: @border-thickness solid @border-default-color;
 		}
 
 		.notification-subject{
 			display: table-cell;
 		}
 	}
 }
 
 // Notifications
 .notification-header{
 	display: table;
 	width: 100%;
 	padding: floor(@basefontsize/2) 0;
     line-height: 1em;
 
 	.desc, .delete-notifications, .read-notifications{
 		display: table-cell;
 		text-align: left;
 	}
 
 	.delete-notifications, .read-notifications{
 		width: 35px;
 		min-width: 35px; //fixes when only one button is displayed
 	}
 }
 
 .notification-body {
     .markdown-block,
 	.rst-block {
 		padding: @padding 0;
 	}
 
 	.notification-subject {
 		padding: @textmargin 0;
 		border-bottom: @border-thickness solid @border-default-color;
 	}
 }
 
 .notice-messages {
     .markdown-block,
 	.rst-block {
 		padding: 0;
 	}
 }
 
 .notifications_buttons{
 	float: right;
 }
 
 #notification-status{
   display: inline;
 }
 
 // Repositories
 
 #summary.fields{
 	display: table;
 
 	.field{
 		display: table-row;
 
 		.label-summary{
 			display: table-cell;
 			min-width: @label-summary-minwidth;
 			padding-top: @padding/2;
 			padding-bottom: @padding/2;
 			padding-right: @padding/2;
 		}
 
 		.input{
 			display: table-cell;
 			padding: @padding/2;
 
 			input{
 				min-width: 29em;
 				padding:  @padding/4;
 			}
 		}
 		.statistics, .downloads{
 			.disabled{
 				color: @grey4;
 			}
 		}
 	}
 }
 
 #summary{
 	width: 70%;
 }
 
 
 // Journal
 .journal.title {
 	h5 {
 		float: left;
 		margin: 0;
 		width: 70%;
 	}
 
 	ul {
 		float: right;
 		display: inline-block;
 		margin: 0;
 		width: 30%;
 		text-align: right;
 
 		li {
 			display: inline;
 			font-size: @journal-fontsize;
             line-height: 1em;
 
             list-style-type: none;
 		}
 	}
 }
 
 .filterexample {
     position: absolute;
     top: 95px;
     left: @contentpadding;
     color: @rcblue;
     font-size: 11px;
     font-family: @text-regular;
     cursor: help;
 
     &:hover {
         color: @rcdarkblue;
     }
 
     @media (max-width:768px) {
         position: relative;
         top: auto;
         left: auto;
         display: block;
     }
 }
 
 
 #journal{
 	margin-bottom: @space;
 
 	.journal_day{
 		margin-bottom: @textmargin/2;
 		padding-bottom: @textmargin/2;
 		font-size: @journal-fontsize;
 		border-bottom: @border-thickness solid @border-default-color;
 	}
 
 	.journal_container{
 		margin-bottom: @space;
 
 		.journal_user{
 			display: inline-block;
 		}
 		.journal_action_container{
 			display: block;
 			margin-top: @textmargin;
 
 			div{
 				display: inline;
 			}
 
 			div.journal_action_params{
 				display: block;
 			}
 
 			div.journal_repo:after{
 				content: "\A";
 				white-space: pre;
 			}
 
 			div.date{
 				display: block;
 				margin-bottom: @textmargin;
 			}
 		}
 	}
 }
 
 // Files
 .edit-file-title {
     font-size: 16px;
 
     .title-heading {
       padding: 2px;
     }
 }
 
 .edit-file-fieldset {
     margin: @sidebarpadding 0;
 
     .fieldset {
         .left-label {
             width: 13%;
         }
         .right-content {
             width: 87%;
             max-width: 100%;
         }
         .filename-label {
             margin-top: 13px;
         }
         .commit-message-label {
             margin-top: 4px;
         }
         .file-upload-input {
             input {
                 display: none;
             }
           margin-top: 10px;
         }
         .file-upload-label {
           margin-top: 10px;
         }
         p {
             margin-top: 5px;
         }
 
     }
     .custom-path-link {
         margin-left: 5px;
     }
     #commit {
         resize: vertical;
     }
 }
 
 .delete-file-preview {
     max-height: 250px;
 }
 
 .new-file,
 #filter_activate,
 #filter_deactivate {
     float: right;
     margin: 0 0 0 10px;
 }
 
 .file-upload-transaction-wrapper {
     margin-top: 57px;
     clear: both;
 }
 
 .file-upload-transaction-wrapper .error {
     color: @color5;
 }
 
 .file-upload-transaction {
     min-height: 200px;
     padding: 54px;
     border: 1px solid @grey5;
     text-align: center;
     clear: both;
 }
 
 .file-upload-transaction i {
     font-size: 48px
 }
 
 h3.files_location{
     line-height: 2.4em;
 }
 
 .browser-nav {
     width: 100%;
 	display: table;
     margin-bottom: 20px;
 
 	.info_box {
         float: left;
 		display: inline-table;
 		height: 2.5em;
 
         .browser-cur-rev, .info_box_elem {
 			display: table-cell;
 			vertical-align: middle;
 		}
 
         .drop-menu {
             margin: 0 10px;
         }
 
 		.info_box_elem {
 			border-top: @border-thickness solid @grey5;
 			border-bottom: @border-thickness solid @grey5;
             box-shadow: @button-shadow;
 
             #at_rev, a {
                 padding: 0.6em 0.4em;
                 margin: 0;
                 .box-shadow(none);
                 border: 0;
                 height: 12px;
                 color: @grey2;
             }
 
             input#at_rev {
                 max-width: 50px;
                 text-align: center;
             }
 
 			&.previous {
 				border: @border-thickness solid @grey5;
                 border-top-left-radius: @border-radius;
                 border-bottom-left-radius: @border-radius;
 
                 &:hover {
                     border-color: @grey4;
                 }
 
                 .disabled {
                   color: @grey5;
                   cursor: not-allowed;
                   opacity: 0.5;
                 }
 			}
 
 			&.next {
 				border: @border-thickness solid @grey5;
                 border-top-right-radius: @border-radius;
                 border-bottom-right-radius: @border-radius;
 
                 &:hover {
                     border-color: @grey4;
                 }
 
                 .disabled {
                   color: @grey5;
                   cursor: not-allowed;
                   opacity: 0.5;
                 }
 			}
 		}
 
 		.browser-cur-rev {
 
 			span{
                 margin: 0;
 				color: @rcblue;
                 height: 12px;
                 display: inline-block;
                 padding:  0.7em 1em ;
                 border: @border-thickness solid @rcblue;
                 margin-right: @padding;
 			}
 		}
 
 	}
 
     .select-index-number {
         margin: 0 0 0 20px;
         color: @grey3;
     }
 
 	.search_activate {
 		display: table-cell;
 		vertical-align: middle;
 
 		input, label{
 			margin: 0;
 			padding: 0;
 		}
 
 		input{
 			margin-left: @textmargin;
 		}
 
 	}
 }
 
 .browser-cur-rev{
 	margin-bottom: @textmargin;
 }
 
 #node_filter_box_loading{
 	.info_text;
 }
 
 .browser-search {
 	margin: -25px 0px 5px 0px;
 }
 
 .files-quick-filter {
   float: right;
   width: 180px;
   position: relative;
 }
 
 .files-filter-box {
   display: flex;
   padding: 0px;
   border-radius: 3px;
   margin-bottom: 0;
 
   a {
     border: none !important;
   }
 
   li {
     list-style-type: none
   }
 }
 
 .files-filter-box-path {
   line-height: 33px;
   padding: 0;
   width: 20px;
   position: absolute;
   z-index: 11;
   left: 5px;
 }
 
 .files-filter-box-input {
   margin-right: 0;
 
   input {
     border: 1px solid @white;
     padding-left: 25px;
     width: 145px;
 
     &:hover {
         border-color: @grey6;
     }
 
     &:focus {
         border-color: @grey5;
     }
   }
 }
 
 .browser-result{
 	td a{
 		margin-left: 0.5em;
 		display: inline-block;
 
 		em {
           font-weight: @text-bold-weight;
           font-family: @text-bold;
         }
 	}
 }
 
 .browser-highlight{
 	background-color: @grey5-alpha;
 }
 
 
 .edit-file-fieldset #location,
 .edit-file-fieldset #filename {
   display: flex;
   width: -moz-available; /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   border: 0;
 }
 
 .path-items {
   display: flex;
   padding: 0;
   border: 1px solid #eeeeee;
   width: 100%;
   float: left;
 
   .breadcrumb-path {
     line-height: 30px;
     padding: 0 4px;
     white-space: nowrap;
   }
 
   .upload-form {
     margin-top: 46px;
   }
 
   .location-path {
     width: -moz-available; /* WebKit-based browsers will ignore this. */
     width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
     width: fill-available;
 
     .file-name-input {
       padding: 0.5em 0;
     }
 
   }
 
   ul {
     display: flex;
     margin: 0;
     padding: 0;
     width: 100%;
   }
 
   li {
     list-style-type: none;
   }
 
 }
 
 .editor-items {
   height: 40px;
   margin: 10px 0 -17px 10px;
 
   .editor-action {
     cursor: pointer;
   }
 
   .editor-action.active {
     border-bottom: 2px solid #5C5C5C;
   }
 
   li {
     list-style-type: none;
   }
 }
 
 .edit-file-fieldset .message textarea {
   border: 1px solid #eeeeee;
 }
 
 #files_data .codeblock {
   background-color: #F5F5F5;
 }
 
 #editor_preview {
   background: white;
 }
 
 .show-editor {
   padding: 10px;
   background-color: white;
 
 }
 
 .show-preview {
   padding: 10px;
   background-color: white;
   border-left: 1px solid #eeeeee;
 }
 // quick filter
 .grid-quick-filter {
   float: right;
     position: relative;
 }
 
 .grid-filter-box {
   display: flex;
   padding: 0px;
   border-radius: 3px;
   margin-bottom: 0;
 
   a {
     border: none !important;
   }
 
   li {
     list-style-type: none
   }
 }
 
 .grid-filter-box-icon {
   line-height: 33px;
   padding: 0;
   width: 20px;
   position: absolute;
   z-index: 11;
   left: 5px;
 }
 
 .grid-filter-box-input {
   margin-right: 0;
 
   input {
     border: 1px solid @white;
     padding-left: 25px;
     width: 145px;
 
     &:hover {
         border-color: @grey6;
     }
 
     &:focus {
         border-color: @grey5;
     }
   }
 }
 
 
 
 // Search
 
 .search-form{
     #q {
         width: @search-form-width;
     }
 	.fields{
 		margin: 0 0 @space;
 	}
 
 	label{
 		display: inline-block;
 		margin-right: @textmargin;
 		padding-top: 0.25em;
 	}
 
 
 	.results{
 		clear: both;
 		margin: 0 0 @padding;
 	}
 
     .search-tags {
       padding: 5px 0;
     }
 }
 
 div.search-feedback-items {
 	display: inline-block;
 }
 
 div.search-code-body {
     background-color: #ffffff; padding: 5px 0 5px 10px;
     pre {
         .match { background-color: #faffa6;}
         .break { display: block; width: 100%; background-color: #DDE7EF; color: #747474; }
     }
 }
 
 .expand_commit.search {
     .show_more.open {
         height: auto;
         max-height: none;
     }
 }
 
 .search-results {
 
     h2 {
         margin-bottom: 0;
     }
     .codeblock {
         border: none;
         background: transparent;
     }
 
     .codeblock-header {
         border: none;
         background: transparent;
     }
 
     .code-body {
         border: @border-thickness solid @grey6;
         .border-radius(@border-radius);
     }
 
     .td-commit {
         &:extend(pre);
         border-bottom: @border-thickness solid @border-default-color;
     }
 
     .message {
         height: auto;
         max-width: 350px;
         white-space: normal;
         text-overflow: initial;
         overflow: visible;
 
         .match { background-color: #faffa6;}
         .break { background-color: #DDE7EF; width: 100%; color: #747474; display: block; }
     }
 
     .path {
       border-bottom: none !important;
       border-left: 1px solid @grey6 !important;
       border-right: 1px solid @grey6 !important;
     }
 }
 
 table.rctable td.td-search-results div {
     max-width: 100%;
 }
 
 #tip-box, .tip-box{
 	padding: @menupadding/2;
 	display: block;
 	border: @border-thickness solid @border-highlight-color;
 	.border-radius(@border-radius);
 	background-color: white;
     z-index: 99;
     white-space: pre-wrap;
 }
 
 #linktt {
     width: 79px;
 }
 
 #help_kb .modal-content{
 	max-width: 750px;
 	margin: 10% auto;
 
 	table{
 		td,th{
 			border-bottom: none;
 			line-height: 2.5em;
 		}
 		th{
 			padding-bottom: @textmargin/2;
 		}
 		td.keys{
 			text-align: center;
 		}
 	}
 
 	.block-left{
 		width: 45%;
 		margin-right: 5%;
 	}
 	.modal-footer{
 		clear: both;
 	}
 	.key.tag{
 		padding: 0.5em;
 		background-color: @rcblue;
 		color: white;
 		border-color: @rcblue;
 		.box-shadow(none);
 	}
 }
 
 
 
 //--- IMPORTS FOR REFACTORED STYLES ------------------//
 
 @import 'statistics-graph';
 @import 'tables';
 @import 'forms';
 @import 'diff';
 @import 'summary';
 @import 'navigation';
 
 //--- SHOW/HIDE SECTIONS --//
 
 .btn-collapse {
     float: right;
     text-align: right;
     font-family: @text-light;
     font-size: @basefontsize;
     cursor: pointer;
     border: none;
     color: @rcblue;
 }
 
 table.rctable,
 table.dataTable {
     .btn-collapse {
         float: right;
         text-align: right;
     }
 }
 
 table.rctable {
   &.permissions {
 
     th.td-owner {
       padding: 0;
     }
 
     th {
       font-weight: normal;
       padding: 0 5px;
     }
 
   }
 }
 
 
 // TODO: johbo: Fix for IE10, this avoids that we see a border
 // and padding around checkboxes and radio boxes. Move to the right place,
 // or better: Remove this once we did the form refactoring.
 input[type=checkbox],
 input[type=radio] {
     padding: 0;
     border: none;
 }
 
 .toggle-ajax-spinner{
   height: 16px;
   width: 16px;
 }
 
 
 .markup-form .clearfix {
     .border-radius(@border-radius);
     margin: 0px;
 }
 
 .markup-form-area {
     padding: 8px 12px;
     border: 1px solid @grey4;
     .border-radius(@border-radius);
 }
 
 .markup-form-area-header .nav-links {
     display: flex;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     width: 100%;
 }
 
 .markup-form-area-footer {
     display: flex;
 }
 
 .markup-form-area-footer .toolbar {
 
 }
 
 // markup Form
 div.markup-form {
     margin-top: 20px;
 }
 
 .markup-form strong {
     display: block;
     margin-bottom: 15px;
 }
 
 .markup-form textarea {
     width: 100%;
     height: 100px;
     font-family: @text-monospace;
 }
 
 form.markup-form {
     margin-top: 10px;
     margin-left: 10px;
 }
 
 .markup-form .comment-block-ta,
 .markup-form .preview-box {
     .border-radius(@border-radius);
     .box-sizing(border-box);
     background-color: white;
 }
 
 .markup-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: white;
 }
 
 
 .dropzone-wrapper {
   border: 1px solid @grey5;
   padding: 20px;
 }
 
 .dropzone,
 .dropzone-pure {
   border: 2px dashed @grey5;
   border-radius: 5px;
   background: white;
   min-height: 200px;
   padding: 54px;
 
   .dz-message {
     font-weight: 700;
     text-align: center;
     margin: 2em 0;
   }
 
 }
 
 .dz-preview {
   margin: 10px 0 !important;
   position: relative;
   vertical-align: top;
   padding: 10px;
   border-bottom: 1px solid @grey5;
 }
 
 .dz-filename {
   font-weight: 700;
   float: left;
 }
 
 .dz-sending {
   float: right;
 }
 
 .dz-response {
   clear: both
 }
 
 .dz-filename-size {
   float: right
 }
 
 .dz-error-message {
   color: @alert2;
   padding-top: 10px;
   clear: both;
 }
 
 
 .user-hovercard {
   padding: 5px;
 }
 
 .user-hovercard-icon {
   display: inline;
   padding: 0;
   box-sizing: content-box;
   border-radius: 50%;
   float: left;
 }
 
 .user-hovercard-name {
   float: right;
   vertical-align: top;
   padding-left: 10px;
   min-width: 150px;
 }
 
 .user-hovercard-bio {
   clear: both;
   padding-top: 10px;
 }
 
 .user-hovercard-header {
   clear: both;
   min-height: 10px;
 }
 
 .user-hovercard-footer {
   clear: both;
   min-height: 10px;
 }
 
 .user-group-hovercard {
   padding: 5px;
 }
 
 .user-group-hovercard-icon {
   display: inline;
   padding: 0;
   box-sizing: content-box;
   border-radius: 50%;
   float: left;
 }
 
 .user-group-hovercard-name {
   float: left;
   vertical-align: top;
   padding-left: 10px;
   min-width: 150px;
 }
 
 .user-group-hovercard-icon i {
   border: 1px solid @grey4;
   border-radius: 4px;
 }
 
 .user-group-hovercard-bio {
   clear: both;
   padding-top: 10px;
   line-height: 1.0em;
 }
 
 .user-group-hovercard-header {
   clear: both;
   min-height: 10px;
 }
 
 .user-group-hovercard-footer {
   clear: both;
   min-height: 10px;
 }
 
 .pr-hovercard-header {
   clear: both;
   display: block;
   line-height: 20px;
 }
 
 .pr-hovercard-user {
   display: flex;
   align-items: center;
   padding-left: 5px;
 }
 
 .pr-hovercard-title {
   padding-top: 5px;
 }
  No newline at end of file

rhodecode/templates/base/base.mako

@@ -1,1201 +1,1210 b''
 ## -*- coding: utf-8 -*-
 
 <%!
     ## base64 filter e.g ${ example | base64 }
     def base64(text):
         import base64
         from rhodecode.lib.helpers import safe_str
         return base64.encodestring(safe_str(text))
 %>
 
 <%inherit file="root.mako"/>
 
 <%include file="/ejs_templates/templates.html"/>
 
 <div class="outerwrapper">
   <!-- HEADER -->
   <div class="header">
       <div id="header-inner" class="wrapper">
           <div id="logo">
               <div class="logo-wrapper">
                   <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-60x60.png')}" alt="RhodeCode"/></a>
               </div>
               % if c.rhodecode_name:
                <div class="branding">
                    <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                </div>
               % endif
           </div>
           <!-- MENU BAR NAV -->
           ${self.menu_bar_nav()}
           <!-- END MENU BAR NAV -->
       </div>
   </div>
   ${self.menu_bar_subnav()}
   <!-- END HEADER -->
 
   <!-- CONTENT -->
   <div id="content" class="wrapper">
 
       <rhodecode-toast id="notifications"></rhodecode-toast>
 
       <div class="main">
           ${next.main()}
       </div>
   </div>
   <!-- END CONTENT -->
 
 </div>
 <!-- FOOTER -->
 <div id="footer">
    <div id="footer-inner" class="title wrapper">
        <div>
+           <% sid = 'block' if request.GET.get('showrcid') else 'none' %>
+
            <p class="footer-link-right">
+               <a class="grey-link-action" href="${h.route_path('home', _query={'showrcid': 1})}">
+               RhodeCode
                % if c.visual.show_version:
-                   RhodeCode Enterprise ${c.rhodecode_version} ${c.rhodecode_edition}
+                   ${c.rhodecode_version}
                % endif
-               &copy; 2010-${h.datetime.today().year}, <a href="${h.route_url('rhodecode_official')}" target="_blank">RhodeCode GmbH</a>. All rights reserved.
+               ${c.rhodecode_edition}
+               </a> |
+
                % if c.visual.rhodecode_support_url:
-                  <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
+                  <a class="grey-link-action" href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a> |
+                  <a class="grey-link-action" href="https://docs.rhodecode.com" target="_blank">${_('Documentation')}</a>
                % endif
+
            </p>
-           <% sid = 'block' if request.GET.get('showrcid') else 'none' %>
+
            <p class="server-instance" style="display:${sid}">
                ## display hidden instance ID if specially defined
+               &copy; 2010-${h.datetime.today().year}, <a href="${h.route_url('rhodecode_official')}" target="_blank">RhodeCode GmbH</a>. All rights reserved.
                % if c.rhodecode_instanceid:
                    ${_('RhodeCode instance id: {}').format(c.rhodecode_instanceid)}
                % endif
            </p>
        </div>
    </div>
 </div>
 
 <!-- END FOOTER -->
 
 ### MAKO DEFS ###
 
 <%def name="menu_bar_subnav()">
 </%def>
 
 <%def name="breadcrumbs(class_='breadcrumbs')">
     <div class="${class_}">
     ${self.breadcrumbs_links()}
     </div>
 </%def>
 
 <%def name="admin_menu(active=None)">
 
   <div id="context-bar">
     <div class="wrapper">
       <div class="title">
         <div class="title-content">
           <div class="title-main">
             % if c.is_super_admin:
                 ${_('Super-admin Panel')}
             % else:
                 ${_('Delegated Admin Panel')}
             % endif
           </div>
         </div>
       </div>
 
     <ul id="context-pages" class="navigation horizontal-list">
 
         ## super-admin case
         % if c.is_super_admin:
           <li class="${h.is_active('audit_logs', active)}"><a href="${h.route_path('admin_audit_logs')}">${_('Admin audit logs')}</a></li>
           <li class="${h.is_active('repositories', active)}"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
           <li class="${h.is_active('repository_groups', active)}"><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
           <li class="${h.is_active('users', active)}"><a href="${h.route_path('users')}">${_('Users')}</a></li>
           <li class="${h.is_active('user_groups', active)}"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
           <li class="${h.is_active('permissions', active)}"><a href="${h.route_path('admin_permissions_application')}">${_('Permissions')}</a></li>
           <li class="${h.is_active('authentication', active)}"><a href="${h.route_path('auth_home', traverse='')}">${_('Authentication')}</a></li>
           <li class="${h.is_active('integrations', active)}"><a href="${h.route_path('global_integrations_home')}">${_('Integrations')}</a></li>
           <li class="${h.is_active('defaults', active)}"><a href="${h.route_path('admin_defaults_repositories')}">${_('Defaults')}</a></li>
           <li class="${h.is_active('settings', active)}"><a href="${h.route_path('admin_settings')}">${_('Settings')}</a></li>
 
         ## delegated admin
         % elif c.is_delegated_admin:
            <%
            repositories=c.auth_user.repositories_admin or c.can_create_repo
            repository_groups=c.auth_user.repository_groups_admin or c.can_create_repo_group
            user_groups=c.auth_user.user_groups_admin or c.can_create_user_group
            %>
 
            %if repositories:
               <li class="${h.is_active('repositories', active)} local-admin-repos"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
            %endif
            %if repository_groups:
               <li class="${h.is_active('repository_groups', active)} local-admin-repo-groups"><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
            %endif
            %if user_groups:
               <li class="${h.is_active('user_groups', active)} local-admin-user-groups"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
            %endif
         % endif
     </ul>
 
     </div>
     <div class="clear"></div>
   </div>
 </%def>
 
 <%def name="dt_info_panel(elements)">
     <dl class="dl-horizontal">
     %for dt, dd, title, show_items in elements:
       <dt>${dt}:</dt>
       <dd title="${h.tooltip(title)}">
       %if callable(dd):
           ## allow lazy evaluation of elements
           ${dd()}
       %else:
           ${dd}
       %endif
       %if show_items:
           <span class="btn-collapse" data-toggle="item-${h.md5_safe(dt)[:6]}-details">${_('Show More')} </span>
       %endif
       </dd>
 
       %if show_items:
           <div class="collapsable-content" data-toggle="item-${h.md5_safe(dt)[:6]}-details" style="display: none">
           %for item in show_items:
               <dt></dt>
               <dd>${item}</dd>
           %endfor
           </div>
       %endif
 
     %endfor
     </dl>
 </%def>
 
 <%def name="tr_info_entry(element)">
     <% key, val, title, show_items = element %>
 
     <tr>
         <td style="vertical-align: top">${key}</td>
         <td title="${h.tooltip(title)}">
           %if callable(val):
               ## allow lazy evaluation of elements
               ${val()}
           %else:
               ${val}
           %endif
           %if show_items:
               <div class="collapsable-content" data-toggle="item-${h.md5_safe(val)[:6]}-details" style="display: none">
               % for item in show_items:
                   <dt></dt>
                   <dd>${item}</dd>
               % endfor
               </div>
           %endif
         </td>
         <td style="vertical-align: top">
           %if show_items:
               <span class="btn-collapse" data-toggle="item-${h.md5_safe(val)[:6]}-details">${_('Show More')} </span>
           %endif
         </td>
     </tr>
 
 </%def>
 
 <%def name="gravatar(email, size=16, tooltip=False, tooltip_alt=None, user=None, extra_class=None)">
   <%
     if size > 16:
         gravatar_class = ['gravatar','gravatar-large']
     else:
         gravatar_class = ['gravatar']
 
     data_hovercard_url = ''
     data_hovercard_alt = tooltip_alt.replace('<', '&lt;').replace('>', '&gt;') if tooltip_alt else ''
 
     if tooltip:
         gravatar_class += ['tooltip-hovercard']
     if extra_class:
         gravatar_class += extra_class
     if tooltip and user:
         if user.username == h.DEFAULT_USER:
             gravatar_class.pop(-1)
         else:
             data_hovercard_url = request.route_path('hovercard_user', user_id=getattr(user, 'user_id', ''))
     gravatar_class = ' '.join(gravatar_class)
 
   %>
   <%doc>
     TODO: johbo: For now we serve double size images to make it smooth
     for retina. This is how it worked until now. Should be replaced
     with a better solution at some point.
   </%doc>
 
   <img class="${gravatar_class}" height="${size}" width="${size}" data-hovercard-url="${data_hovercard_url}" data-hovercard-alt="${data_hovercard_alt}" src="${h.gravatar_url(email, size * 2)}" />
 </%def>
 
 
 <%def name="gravatar_with_user(contact, size=16, show_disabled=False, tooltip=False, _class='rc-user')">
   <%
       email = h.email_or_none(contact)
       rc_user = h.discover_user(contact)
   %>
 
   <div class="${_class}">
     ${self.gravatar(email, size, tooltip=tooltip, tooltip_alt=contact, user=rc_user)}
     <span class="${('user user-disabled' if show_disabled else 'user')}"> ${h.link_to_user(rc_user or contact)}</span>
   </div>
 </%def>
 
 
 <%def name="user_group_icon(user_group=None, size=16, tooltip=False)">
   <%
     if (size > 16):
         gravatar_class = 'icon-user-group-alt'
     else:
         gravatar_class = 'icon-user-group-alt'
 
     if tooltip:
         gravatar_class += ' tooltip-hovercard'
 
     data_hovercard_url = request.route_path('hovercard_user_group', user_group_id=user_group.users_group_id)
   %>
   <%doc>
     TODO: johbo: For now we serve double size images to make it smooth
     for retina. This is how it worked until now. Should be replaced
     with a better solution at some point.
   </%doc>
 
   <i style="font-size: ${size}px" class="${gravatar_class} x-icon-size-${size}" data-hovercard-url="${data_hovercard_url}"></i>
 </%def>
 
 <%def name="repo_page_title(repo_instance)">
 <div class="title-content repo-title">
 
     <div class="title-main">
         ## SVN/HG/GIT icons
         %if h.is_hg(repo_instance):
             <i class="icon-hg"></i>
         %endif
         %if h.is_git(repo_instance):
             <i class="icon-git"></i>
         %endif
         %if h.is_svn(repo_instance):
             <i class="icon-svn"></i>
         %endif
 
         ## public/private
         %if repo_instance.private:
             <i class="icon-repo-private"></i>
         %else:
             <i class="icon-repo-public"></i>
         %endif
 
         ## repo name with group name
         ${h.breadcrumb_repo_link(repo_instance)}
 
         ## Context Actions
         <div class="pull-right">
             %if c.rhodecode_user.username != h.DEFAULT_USER:
                 <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_uid, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
 
                 <a href="#WatchRepo" onclick="toggleFollowingRepo(this, templateContext.repo_id); return false" title="${_('Watch this Repository and actions on it in your personalized journal')}" class="btn btn-sm ${('watching' if c.repository_is_user_following else '')}">
                     % if c.repository_is_user_following:
                         <i class="icon-eye-off"></i>${_('Unwatch')}
                     % else:
                         <i class="icon-eye"></i>${_('Watch')}
                     % endif
 
                 </a>
             %else:
                 <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_uid)}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
             %endif
         </div>
 
     </div>
 
     ## FORKED
     %if repo_instance.fork:
     <p class="discreet">
         <i class="icon-code-fork"></i> ${_('Fork of')}
         ${h.link_to_if(c.has_origin_repo_read_perm,repo_instance.fork.repo_name, h.route_path('repo_summary', repo_name=repo_instance.fork.repo_name))}
     </p>
     %endif
 
     ## IMPORTED FROM REMOTE
     %if repo_instance.clone_uri:
     <p class="discreet">
        <i class="icon-code-fork"></i> ${_('Clone from')}
        <a href="${h.safe_str(h.hide_credentials(repo_instance.clone_uri))}">${h.hide_credentials(repo_instance.clone_uri)}</a>
     </p>
     %endif
 
     ## LOCKING STATUS
      %if repo_instance.locked[0]:
        <p class="locking_locked discreet">
            <i class="icon-repo-lock"></i>
            ${_('Repository locked by %(user)s') % {'user': h.person_by_id(repo_instance.locked[0])}}
        </p>
      %elif repo_instance.enable_locking:
          <p class="locking_unlocked discreet">
              <i class="icon-repo-unlock"></i>
              ${_('Repository not locked. Pull repository to lock it.')}
          </p>
      %endif
 
 </div>
 </%def>
 
 <%def name="repo_menu(active=None)">
     <%
     ## determine if we have "any" option available
     can_lock = h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name) and c.rhodecode_db_repo.enable_locking
     has_actions = can_lock
 
     %>
     % if c.rhodecode_db_repo.archived:
     <div class="alert alert-warning text-center">
         <strong>${_('This repository has been archived. It is now read-only.')}</strong>
     </div>
     % endif
 
   <!--- REPO CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
 
       <div class="title">
           ${self.repo_page_title(c.rhodecode_db_repo)}
       </div>
 
       <ul id="context-pages" class="navigation horizontal-list">
         <li class="${h.is_active('summary', active)}"><a class="menulink" href="${h.route_path('repo_summary', repo_name=c.repo_name)}"><div class="menulabel">${_('Summary')}</div></a></li>
         <li class="${h.is_active('commits', active)}"><a class="menulink" href="${h.route_path('repo_commits', repo_name=c.repo_name)}"><div class="menulabel">${_('Commits')}</div></a></li>
         <li class="${h.is_active('files', active)}"><a class="menulink" href="${h.repo_files_by_ref_url(c.repo_name, c.rhodecode_db_repo.repo_type, f_path='', ref_name=c.rhodecode_db_repo.landing_ref_name, commit_id='tip', query={'at':c.rhodecode_db_repo.landing_ref_name})}"><div class="menulabel">${_('Files')}</div></a></li>
         <li class="${h.is_active('compare', active)}"><a class="menulink" href="${h.route_path('repo_compare_select',repo_name=c.repo_name)}"><div class="menulabel">${_('Compare')}</div></a></li>
 
         ## TODO: anderson: ideally it would have a function on the scm_instance "enable_pullrequest() and enable_fork()"
         %if c.rhodecode_db_repo.repo_type in ['git','hg']:
           <li class="${h.is_active('showpullrequest', active)}">
             <a class="menulink" href="${h.route_path('pullrequest_show_all', repo_name=c.repo_name)}" title="${h.tooltip(_('Show Pull Requests for %s') % c.repo_name)}">
               <div class="menulabel">
                   ${_('Pull Requests')} <span class="menulink-counter">${c.repository_pull_requests}</span>
               </div>
             </a>
           </li>
         %endif
 
         <li class="${h.is_active('artifacts', active)}">
             <a class="menulink" href="${h.route_path('repo_artifacts_list',repo_name=c.repo_name)}">
                 <div class="menulabel">
                     ${_('Artifacts')}  <span class="menulink-counter">${c.repository_artifacts}</span>
                 </div>
             </a>
         </li>
 
         %if h.HasRepoPermissionAll('repository.admin')(c.repo_name):
             <li class="${h.is_active('settings', active)}"><a class="menulink" href="${h.route_path('edit_repo',repo_name=c.repo_name)}"><div class="menulabel">${_('Repository Settings')}</div></a></li>
         %endif
 
         <li class="${h.is_active('options', active)}">
           % if has_actions:
             <a class="menulink dropdown">
               <div class="menulabel">${_('Options')}<div class="show_more"></div></div>
             </a>
             <ul class="submenu">
                 %if can_lock:
                     %if c.rhodecode_db_repo.locked[0]:
                       <li><a class="locking_del" href="${h.route_path('repo_edit_toggle_locking',repo_name=c.repo_name)}">${_('Unlock Repository')}</a></li>
                     %else:
                       <li><a class="locking_add" href="${h.route_path('repo_edit_toggle_locking',repo_name=c.repo_name)}">${_('Lock Repository')}</a></li>
                     %endif
                 %endif
             </ul>
           % endif
         </li>
 
       </ul>
     </div>
     <div class="clear"></div>
   </div>
 
   <!--- REPO END CONTEXT BAR -->
 
 </%def>
 
 <%def name="repo_group_page_title(repo_group_instance)">
 <div class="title-content">
     <div class="title-main">
         ## Repository Group icon
         <i class="icon-repo-group"></i>
 
         ## repo name with group name
         ${h.breadcrumb_repo_group_link(repo_group_instance)}
     </div>
 
     <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
     <div class="repo-group-desc discreet">
     ${dt.repo_group_desc(repo_group_instance.description_safe, repo_group_instance.personal, c.visual.stylify_metatags)}
     </div>
 
 </div>
 </%def>
 
 
 <%def name="repo_group_menu(active=None)">
     <%
     gr_name = c.repo_group.group_name if c.repo_group else None
     # create repositories with write permission on group is set to true
     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'group admin index page')
 
     %>
 
 
   <!--- REPO GROUP CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
       <div class="title">
           ${self.repo_group_page_title(c.repo_group)}
       </div>
 
       <ul id="context-pages" class="navigation horizontal-list">
         <li class="${h.is_active('home', active)}">
             <a class="menulink" href="${h.route_path('repo_group_home', repo_group_name=c.repo_group.group_name)}"><div class="menulabel">${_('Group Home')}</div></a>
         </li>
         % if c.is_super_admin or group_admin:
             <li class="${h.is_active('settings', active)}">
                 <a class="menulink" href="${h.route_path('edit_repo_group',repo_group_name=c.repo_group.group_name)}" title="${_('You have admin right to this group, and can edit it')}"><div class="menulabel">${_('Group Settings')}</div></a>
             </li>
         % endif
 
       </ul>
     </div>
     <div class="clear"></div>
   </div>
 
   <!--- REPO GROUP CONTEXT BAR -->
 
 </%def>
 
 
 <%def name="usermenu(active=False)">
     <%
     not_anonymous = c.rhodecode_user.username != h.DEFAULT_USER
 
     gr_name = c.repo_group.group_name if (hasattr(c, 'repo_group') and c.repo_group) else None
     # create repositories with write permission on group is set to true
 
     can_fork = c.is_super_admin or h.HasPermissionAny('hg.fork.repository')()
     create_on_write = h.HasPermissionAny('hg.create.write_on_repogroup.true')()
     group_write = h.HasRepoGroupPermissionAny('group.write')(gr_name, 'can write into group index page')
     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'group admin index page')
 
     can_create_repos = c.is_super_admin or c.can_create_repo
     can_create_repo_groups = c.is_super_admin or c.can_create_repo_group
 
     can_create_repos_in_group = c.is_super_admin or group_admin or (group_write and create_on_write)
     can_create_repo_groups_in_group = c.is_super_admin or group_admin
     %>
 
     % if not_anonymous:
     <%
     default_target_group = dict()
     if c.rhodecode_user.personal_repo_group:
         default_target_group = dict(parent_group=c.rhodecode_user.personal_repo_group.group_id)
     %>
 
     ## create action
     <li>
        <a href="#create-actions" onclick="return false;" class="menulink childs">
         <i class="tooltip icon-plus-circled" title="${_('Create')}"></i>
        </a>
 
        <div class="action-menu submenu">
 
         <ol>
             ## scope of within a repository
             % if hasattr(c, 'rhodecode_db_repo') and c.rhodecode_db_repo:
                 <li class="submenu-title">${_('This Repository')}</li>
                 <li>
                     <a href="${h.route_path('pullrequest_new',repo_name=c.repo_name)}">${_('Create Pull Request')}</a>
                 </li>
                 % if can_fork:
                 <li>
                     <a href="${h.route_path('repo_fork_new',repo_name=c.repo_name,_query=default_target_group)}">${_('Fork this repository')}</a>
                 </li>
                 % endif
             % endif
 
             ## scope of within repository groups
             % if hasattr(c, 'repo_group') and c.repo_group and (can_create_repos_in_group or can_create_repo_groups_in_group):
                 <li class="submenu-title">${_('This Repository Group')}</li>
 
                 % if can_create_repos_in_group:
                     <li>
                     <a href="${h.route_path('repo_new',_query=dict(parent_group=c.repo_group.group_id))}">${_('New Repository')}</a>
                     </li>
                 % endif
 
                 % if can_create_repo_groups_in_group:
                     <li>
                         <a href="${h.route_path('repo_group_new',_query=dict(parent_group=c.repo_group.group_id))}">${_(u'New Repository Group')}</a>
                     </li>
                 % endif
             % endif
 
             ## personal group
             % if c.rhodecode_user.personal_repo_group:
                 <li class="submenu-title">Personal Group</li>
 
                 <li>
                 <a href="${h.route_path('repo_new',_query=dict(parent_group=c.rhodecode_user.personal_repo_group.group_id))}" >${_('New Repository')} </a>
                 </li>
 
                 <li>
                 <a href="${h.route_path('repo_group_new',_query=dict(parent_group=c.rhodecode_user.personal_repo_group.group_id))}">${_('New Repository Group')} </a>
                 </li>
             % endif
 
             ## Global actions
             <li class="submenu-title">RhodeCode</li>
             % if can_create_repos:
                 <li>
                 <a href="${h.route_path('repo_new')}" >${_('New Repository')}</a>
                 </li>
             % endif
 
             % if can_create_repo_groups:
                 <li>
                 <a href="${h.route_path('repo_group_new')}" >${_(u'New Repository Group')}</a>
                 </li>
             % endif
 
             <li>
                 <a href="${h.route_path('gists_new')}">${_(u'New Gist')}</a>
             </li>
 
         </ol>
 
        </div>
     </li>
 
     ## notifications
     <li>
        <a class="${('empty' if c.unread_notifications == 0 else '')}" href="${h.route_path('notifications_show_all')}">
            ${c.unread_notifications}
        </a>
     </li>
    % endif
 
     ## USER MENU
     <li id="quick_login_li" class="${'active' if active else ''}">
         % if c.rhodecode_user.username == h.DEFAULT_USER:
           <a id="quick_login_link" class="menulink childs" href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">
             ${gravatar(c.rhodecode_user.email, 20)}
             <span class="user">
                 <span>${_('Sign in')}</span>
             </span>
           </a>
         % else:
           ## logged in user
           <a id="quick_login_link" class="menulink childs">
             ${gravatar(c.rhodecode_user.email, 20)}
             <span class="user">
                 <span class="menu_link_user">${c.rhodecode_user.username}</span>
                 <div class="show_more"></div>
             </span>
           </a>
           ## subnav with menu for logged in user
           <div class="user-menu submenu">
               <div id="quick_login">
                 %if c.rhodecode_user.username != h.DEFAULT_USER:
                     <div class="">
                         <div class="big_gravatar">${gravatar(c.rhodecode_user.email, 48)}</div>
                         <div class="full_name">${c.rhodecode_user.full_name_or_username}</div>
                         <div class="email">${c.rhodecode_user.email}</div>
                     </div>
                     <div class="">
                     <ol class="links">
                       <li>${h.link_to(_(u'My account'),h.route_path('my_account_profile'))}</li>
                       % if c.rhodecode_user.personal_repo_group:
                       <li>${h.link_to(_(u'My personal group'), h.route_path('repo_group_home', repo_group_name=c.rhodecode_user.personal_repo_group.group_name))}</li>
                       % endif
                       <li>${h.link_to(_(u'Pull Requests'), h.route_path('my_account_pullrequests'))}</li>
 
                       % if c.debug_style:
                       <li>
                           <a class="menulink" title="${_('Style')}" href="${h.route_path('debug_style_home')}">
                             <div class="menulabel">${_('[Style]')}</div>
                           </a>
                       </li>
                       % endif
 
                       ## bookmark-items
                       <li class="bookmark-items">
                           ${_('Bookmarks')}
                           <div class="pull-right">
                               <a href="${h.route_path('my_account_bookmarks')}">
 
                                   <i class="icon-cog"></i>
                               </a>
                           </div>
                       </li>
                       % if not c.bookmark_items:
                           <li>
                               <a href="${h.route_path('my_account_bookmarks')}">${_('No Bookmarks yet.')}</a>
                           </li>
                       % endif
                       % for item in c.bookmark_items:
                       <li>
                           % if item.repository:
                               <div>
                                 <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 % if item.repository.repo_type == 'hg':
                                     <i class="icon-hg" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % elif item.repository.repo_type == 'git':
                                     <i class="icon-git" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % elif item.repository.repo_type == 'svn':
                                     <i class="icon-svn" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % endif
                                 ${(item.title or h.shorter(item.repository.repo_name, 30))}
                               </a>
                               </div>
                           % elif item.repository_group:
                               <div>
                                 <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 <i class="icon-repo-group" title="${_('Repository group')}" style="font-size: 14px"></i>
                                 ${(item.title or h.shorter(item.repository_group.group_name, 30))}
                               </a>
                               </div>
                           % else:
                               <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 ${item.title}
                               </a>
                           % endif
                       </li>
                       % endfor
 
                       <li class="logout">
                       ${h.secure_form(h.route_path('logout'), request=request)}
                           ${h.submit('log_out', _(u'Sign Out'),class_="btn btn-primary")}
                       ${h.end_form()}
                       </li>
                     </ol>
                     </div>
                 %endif
               </div>
           </div>
 
         % endif
     </li>
 </%def>
 
 <%def name="menu_items(active=None)">
     <%
         notice_messages, notice_level = c.rhodecode_user.get_notice_messages()
         notice_display = 'none' if len(notice_messages) == 0 else ''
     %>
 <style>
 
 </style>
 
     <ul id="quick" class="main_nav navigation horizontal-list">
        ## notice box for important system messages
        <li style="display: ${notice_display}">
           <a class="notice-box" href="#openNotice" onclick="$('.notice-messages-container').toggle(); return false">
             <div class="menulabel-notice ${notice_level}" >
                 ${len(notice_messages)}
             </div>
           </a>
        </li>
         <div class="notice-messages-container" style="display: none">
         <div class="notice-messages">
             <table class="rctable">
             % for notice in notice_messages:
                 <tr id="notice-message-${notice['msg_id']}" class="notice-message-${notice['level']}">
                     <td style="vertical-align: text-top; width: 20px">
                         <i class="tooltip icon-info notice-color-${notice['level']}" title="${notice['level']}"></i>
                     </td>
                     <td>
                         <span><i class="icon-plus-squared cursor-pointer" onclick="$('#notice-${notice['msg_id']}').toggle()"></i> </span>
                         ${notice['subject']}
 
                         <div id="notice-${notice['msg_id']}" style="display: none">
                             ${h.render(notice['body'], renderer='markdown')}
                         </div>
                     </td>
                     <td style="vertical-align: text-top; width: 35px;">
                         <a class="tooltip" title="${_('dismiss')}" href="#dismiss" onclick="dismissNotice(${notice['msg_id']});return false">
                             <i class="icon-remove icon-filled-red"></i>
                         </a>
                     </td>
                 </tr>
 
             % endfor
             </table>
         </div>
         </div>
         ## Main filter
        <li>
         <div class="menulabel main_filter_box">
             <div class="main_filter_input_box">
                 <ul class="searchItems">
 
                     <li class="searchTag searchTagIcon">
                         <i class="icon-search"></i>
                     </li>
 
                     % if c.template_context['search_context']['repo_id']:
                         <li class="searchTag searchTagFilter searchTagHidable" >
                         ##<a href="${h.route_path('search_repo',repo_name=c.template_context['search_context']['repo_name'])}">
                             <span class="tag">
                                 This repo
                                 <a href="#removeGoToFilter" onclick="removeGoToFilter(); return false"><i class="icon-cancel-circled"></i></a>
                             </span>
                         ##</a>
                         </li>
                     % elif c.template_context['search_context']['repo_group_id']:
                         <li class="searchTag searchTagFilter searchTagHidable">
                         ##<a href="${h.route_path('search_repo_group',repo_group_name=c.template_context['search_context']['repo_group_name'])}">
                             <span class="tag">
                                 This group
                                 <a href="#removeGoToFilter" onclick="removeGoToFilter(); return false"><i class="icon-cancel-circled"></i></a>
                             </span>
                         ##</a>
                         </li>
                     % endif
 
                     <li class="searchTagInput">
                         <input class="main_filter_input" id="main_filter" size="25" type="text" name="main_filter" placeholder="${_('search / go to...')}" value="" />
                     </li>
                     <li class="searchTag searchTagHelp">
                         <a href="#showFilterHelp" onclick="showMainFilterBox(); return false">?</a>
                     </li>
                 </ul>
             </div>
         </div>
 
         <div id="main_filter_help" style="display: none">
 - Use '/' key to quickly access this field.
 
 - Enter a name of repository, or repository group for quick search.
 
 - Prefix query to allow special search:
 
    user:admin, to search for usernames, always global
 
    user_group:devops, to search for user groups, always global
 
    pr:303, to search for pull request number, title, or description, always global
 
    commit:efced4, to search for commits, scoped to repositories or groups
 
    file:models.py, to search for file paths, scoped to repositories or groups
 
 % if c.template_context['search_context']['repo_id']:
    For advanced full text search visit: <a href="${h.route_path('search_repo',repo_name=c.template_context['search_context']['repo_name'])}">repository search</a>
 % elif c.template_context['search_context']['repo_group_id']:
    For advanced full text search visit: <a href="${h.route_path('search_repo_group',repo_group_name=c.template_context['search_context']['repo_group_name'])}">repository group search</a>
 % else:
    For advanced full text search visit: <a href="${h.route_path('search')}">global search</a>
 % endif
         </div>
        </li>
 
       ## ROOT MENU
         <li class="${h.is_active('home', active)}">
           <a class="menulink" title="${_('Home')}" href="${h.route_path('home')}">
             <div class="menulabel">${_('Home')}</div>
           </a>
         </li>
 
       %if c.rhodecode_user.username != h.DEFAULT_USER:
         <li class="${h.is_active('journal', active)}">
           <a class="menulink" title="${_('Show activity journal')}" href="${h.route_path('journal')}">
             <div class="menulabel">${_('Journal')}</div>
           </a>
         </li>
       %else:
         <li class="${h.is_active('journal', active)}">
           <a class="menulink" title="${_('Show Public activity journal')}" href="${h.route_path('journal_public')}">
             <div class="menulabel">${_('Public journal')}</div>
           </a>
         </li>
       %endif
 
         <li class="${h.is_active('gists', active)}">
           <a class="menulink childs" title="${_('Show Gists')}" href="${h.route_path('gists_show')}">
             <div class="menulabel">${_('Gists')}</div>
           </a>
         </li>
 
         % if c.is_super_admin or c.is_delegated_admin:
         <li class="${h.is_active('admin', active)}">
           <a class="menulink childs" title="${_('Admin settings')}" href="${h.route_path('admin_home')}">
             <div class="menulabel">${_('Admin')} </div>
           </a>
         </li>
         % endif
 
       ## render extra user menu
       ${usermenu(active=(active=='my_account'))}
 
     </ul>
 
     <script type="text/javascript">
         var visualShowPublicIcon = "${c.visual.show_public_icon}" == "True";
 
         var formatRepoResult = function(result, container, query, escapeMarkup) {
             return function(data, escapeMarkup) {
                 if (!data.repo_id){
                   return data.text; // optgroup text Repositories
                 }
 
                 var tmpl = '';
                 var repoType = data['repo_type'];
                 var repoName = data['text'];
 
                 if(data && data.type == 'repo'){
                     if(repoType === 'hg'){
                         tmpl += '<i class="icon-hg"></i> ';
                     }
                     else if(repoType === 'git'){
                         tmpl += '<i class="icon-git"></i> ';
                     }
                     else if(repoType === 'svn'){
                         tmpl += '<i class="icon-svn"></i> ';
                     }
                     if(data['private']){
                         tmpl += '<i class="icon-lock" ></i> ';
                     }
                     else if(visualShowPublicIcon){
                         tmpl += '<i class="icon-unlock-alt"></i> ';
                     }
                 }
                 tmpl += escapeMarkup(repoName);
                 return tmpl;
 
             }(result, escapeMarkup);
         };
 
         var formatRepoGroupResult = function(result, container, query, escapeMarkup) {
             return function(data, escapeMarkup) {
                 if (!data.repo_group_id){
                   return data.text; // optgroup text Repositories
                 }
 
                 var tmpl = '';
                 var repoGroupName = data['text'];
 
                 if(data){
 
                     tmpl += '<i class="icon-repo-group"></i> ';
 
                 }
                 tmpl += escapeMarkup(repoGroupName);
                 return tmpl;
 
             }(result, escapeMarkup);
         };
 
         var escapeRegExChars = function (value) {
             return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
         };
 
         var getRepoIcon = function(repo_type) {
             if (repo_type === 'hg') {
                 return '<i class="icon-hg"></i> ';
             }
             else if (repo_type === 'git') {
                 return '<i class="icon-git"></i> ';
             }
             else if (repo_type === 'svn') {
                 return '<i class="icon-svn"></i> ';
             }
             return ''
         };
 
         var autocompleteMainFilterFormatResult = function (data, value, org_formatter) {
 
             if (value.split(':').length === 2) {
                 value = value.split(':')[1]
             }
 
             var searchType = data['type'];
             var searchSubType = data['subtype'];
             var valueDisplay = data['value_display'];
             var valueIcon = data['value_icon'];
 
             var pattern = '(' + escapeRegExChars(value) + ')';
 
             valueDisplay = Select2.util.escapeMarkup(valueDisplay);
 
             // highlight match
             if (searchType != 'text') {
                 valueDisplay = valueDisplay.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
             }
 
             var icon = '';
 
             if (searchType === 'hint') {
                 icon += '<i class="icon-repo-group"></i> ';
             }
             // full text search/hints
             else if (searchType === 'search') {
                 if (valueIcon === undefined) {
                     icon += '<i class="icon-more"></i> ';
                 } else {
                     icon += valueIcon + ' ';
                 }
 
                 if (searchSubType !== undefined && searchSubType == 'repo') {
                     valueDisplay += '<div class="pull-right tag">repository</div>';
                 }
                 else if (searchSubType !== undefined && searchSubType == 'repo_group') {
                     valueDisplay += '<div class="pull-right tag">repo group</div>';
                 }
             }
             // repository
             else if (searchType === 'repo') {
 
                 var repoIcon = getRepoIcon(data['repo_type']);
                 icon += repoIcon;
 
                 if (data['private']) {
                     icon += '<i class="icon-lock" ></i> ';
                 }
                 else if (visualShowPublicIcon) {
                     icon += '<i class="icon-unlock-alt"></i> ';
                 }
             }
             // repository groups
             else if (searchType === 'repo_group') {
                 icon += '<i class="icon-repo-group"></i> ';
             }
             // user group
             else if (searchType === 'user_group') {
                 icon += '<i class="icon-group"></i> ';
             }
             // user
             else if (searchType === 'user') {
                 icon += '<img class="gravatar" src="{0}"/>'.format(data['icon_link']);
             }
             // pull request
             else if (searchType === 'pull_request') {
                 icon += '<i class="icon-merge"></i> ';
             }
             // commit
             else if (searchType === 'commit') {
                 var repo_data = data['repo_data'];
                 var repoIcon = getRepoIcon(repo_data['repository_type']);
                 if (repoIcon) {
                     icon += repoIcon;
                 } else {
                     icon += '<i class="icon-tag"></i>';
                 }
             }
             // file
             else if (searchType === 'file') {
                 var repo_data = data['repo_data'];
                 var repoIcon = getRepoIcon(repo_data['repository_type']);
                 if (repoIcon) {
                     icon += repoIcon;
                 } else {
                     icon += '<i class="icon-tag"></i>';
                 }
             }
             // generic text
             else if (searchType === 'text') {
                 icon = '';
             }
 
             var tmpl = '<div class="ac-container-wrap">{0}{1}</div>';
             return tmpl.format(icon, valueDisplay);
         };
 
         var handleSelect = function(element, suggestion) {
             if (suggestion.type === "hint") {
                 // we skip action
                 $('#main_filter').focus();
             }
             else if (suggestion.type === "text") {
                 // we skip action
                 $('#main_filter').focus();
 
             } else {
               window.location = suggestion['url'];
             }
         };
 
         var autocompleteMainFilterResult = function (suggestion, originalQuery, queryLowerCase) {
             if (queryLowerCase.split(':').length === 2) {
                 queryLowerCase = queryLowerCase.split(':')[1]
             }
             if (suggestion.type === "text") {
                 // special case we don't want to "skip" display for
                 return true
             }
             return suggestion.value_display.toLowerCase().indexOf(queryLowerCase) !== -1;
         };
 
         var cleanContext = {
             repo_view_type: null,
 
             repo_id: null,
             repo_name: "",
 
             repo_group_id: null,
             repo_group_name: null
         };
         var removeGoToFilter = function () {
             $('.searchTagHidable').hide();
             $('#main_filter').autocomplete(
                 'setOptions', {params:{search_context: cleanContext}});
         };
 
         $('#main_filter').autocomplete({
             serviceUrl: pyroutes.url('goto_switcher_data'),
             params: {
                 "search_context": templateContext.search_context
             },
             minChars:2,
             maxHeight:400,
             deferRequestBy: 300, //miliseconds
             tabDisabled: true,
             autoSelectFirst: false,
             containerClass: 'autocomplete-qfilter-suggestions',
             formatResult: autocompleteMainFilterFormatResult,
             lookupFilter: autocompleteMainFilterResult,
             onSelect: function (element, suggestion) {
                 handleSelect(element, suggestion);
                 return false;
             },
             onSearchError: function (element, query, jqXHR, textStatus, errorThrown) {
                 if (jqXHR !== 'abort') {
                     var message = formatErrorMessage(jqXHR, textStatus, errorThrown);
                     SwalNoAnimation.fire({
                         icon: 'error',
                         title: _gettext('Error during search operation'),
                         html: '<span style="white-space: pre-line">{0}</span>'.format(message),
                     }).then(function(result) {
                         window.location.reload();
                     })
                 }
             },
             onSearchStart: function (params) {
                 $('.searchTag.searchTagIcon').html('<i class="icon-spin animate-spin"></i>')
             },
             onSearchComplete: function (query, suggestions) {
                 $('.searchTag.searchTagIcon').html('<i class="icon-search"></i>')
             },
         });
 
         showMainFilterBox = function () {
             $('#main_filter_help').toggle();
         };
 
         $('#main_filter').on('keydown.autocomplete', function (e) {
 
             var BACKSPACE = 8;
             var el = $(e.currentTarget);
             if(e.which === BACKSPACE){
                 var inputVal = el.val();
                 if (inputVal === ""){
                     removeGoToFilter()
                 }
             }
         });
 
         var dismissNotice = function(noticeId) {
 
             var url = pyroutes.url('user_notice_dismiss',
                     {"user_id": templateContext.rhodecode_user.user_id});
 
             var postData = {
                 'csrf_token': CSRF_TOKEN,
                 'notice_id': noticeId,
             };
 
             var success = function(response) {
                 $('#notice-message-' + noticeId).remove();
                 return false;
             };
             var failure = function(data, textStatus, xhr) {
                 alert("error processing request: " + textStatus);
                 return false;
             };
             ajaxPOST(url, postData, success, failure);
         }
     </script>
     <script src="${h.asset('js/rhodecode/base/keyboard-bindings.js', ver=c.rhodecode_version_hash)}"></script>
 </%def>
 
 <div class="modal" id="help_kb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">${_('Keyboard shortcuts')}</h4>
         </div>
         <div class="modal-body">
               <div class="block-left">
                 <table class="keyboard-mappings">
                     <tbody>
                   <tr>
                     <th></th>
                     <th>${_('Site-wide shortcuts')}</th>
                   </tr>
                   <%
                      elems = [
                          ('/', 'Use quick search box'),
                          ('g h', 'Goto home page'),
                          ('g g', 'Goto my private gists page'),
                          ('g G', 'Goto my public gists page'),
                          ('g 0-9', 'Goto bookmarked items from 0-9'),
                          ('n r', 'New repository page'),
                          ('n g', 'New gist page'),
                      ]
                   %>
                   %for key, desc in elems:
                   <tr>
                     <td class="keys">
                       <span class="key tag">${key}</span>
                     </td>
                     <td>${desc}</td>
                   </tr>
                 %endfor
                 </tbody>
                   </table>
               </div>
               <div class="block-left">
                 <table class="keyboard-mappings">
                 <tbody>
                   <tr>
                     <th></th>
                     <th>${_('Repositories')}</th>
                   </tr>
                   <%
                      elems = [
                          ('g s', 'Goto summary page'),
                          ('g c', 'Goto changelog page'),
                          ('g f', 'Goto files page'),
                          ('g F', 'Goto files page with file search activated'),
                          ('g p', 'Goto pull requests page'),
                          ('g o', 'Goto repository settings'),
                          ('g O', 'Goto repository access permissions settings'),
                      ]
                   %>
                   %for key, desc in elems:
                   <tr>
                     <td class="keys">
                       <span class="key tag">${key}</span>
                     </td>
                     <td>${desc}</td>
                   </tr>
                 %endfor
                 </tbody>
               </table>
             </div>
         </div>
         <div class="modal-footer">
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->