ui: make readme header nicer

rhodecode/public/css/readme-box.less

@@ -1,257 +1,266 b''
 /** README styling **/
+
+.readme-title {
+    border: 1px solid @grey6;
+    padding: 10px 5px;
+    font-weight: 600;
+    margin-top: 30px;
+    margin-bottom: -1px;
+}
+
 div.readme_box {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 3px 15px 3px;
 }
 
 div.readme_box h1,
 div.readme_box h2,
 div.readme_box h3,
 div.readme_box h4,
 div.readme_box h5,
 div.readme_box h6 {
     border-bottom: none !important;
     padding: 0 !important;
     overflow: visible !important;
 }
 
 div.readme_box h1,
 div.readme_box h2 {
     border-bottom: 1px #e6e5e5 solid !important;
 }
 
 div.readme_box h1 {
     font-size: 32px;
     margin: 15px 0 15px 0 !important;
     padding-bottom: 5px !important;
 }
 
 div.readme_box h2 {
     font-size: 24px !important;
     margin: 34px 0 10px 0 !important;
     padding-top: 15px !important;
     padding-bottom: 8px !important;
 }
 
 div.readme_box h3 {
     font-size: 18px !important;
     margin: 30px 0 8px 0 !important;
     padding-bottom: 2px !important;
 }
 
 div.readme_box h4 {
     font-size: 13px !important;
     margin: 18px 0 3px 0 !important;
 }
 
 div.readme_box h5 {
     font-size: 12px !important;
     margin: 15px 0 3px 0 !important;
 }
 
 div.readme_box h6 {
     font-size: 12px;
     color: #777777;
     margin: 15px 0 3px 0 !important;
 }
 
 div.readme_box hr {
     border: 0;
     color: #e6e5e5;
     background-color: #e6e5e5;
     height: 3px;
     margin-bottom: 13px;
 }
 
 div.readme_box ol,
 div.readme_box ul,
 div.readme_box p,
 div.readme_box blockquote,
 div.readme_box dl,
 div.readme_box li,
 div.readme_box table {
     margin: 3px 0px 13px 0px !important;
     color: #424242 !important;
     font-size: 13px !important;
     font-family: @text-regular;
     font-weight: normal  !important;
     overflow: visible !important;
     line-height: 140% !important;
 }
 
 div.readme_box pre {
   margin: 3px 0px 13px 0px !important;
   padding: .5em;
   color: #424242 !important;
   font-size: 13px !important;
   overflow: visible !important;
   line-height: 140% !important;
 }
 
 div.readme_box img {
   border-style: none;
   background-color: #fff;
   padding-right: 20px;
   max-width: 100%;
 }
 
 
 div.readme_box strong {
   font-weight: 600;
   margin: 0;
 }
 
 div.readme_box ul,
 div.readme_box ol {
     padding-left: 30px !important;
     margin-top: 0px !important;
     margin-bottom: 18px !important;
 }
 
 div.readme_box ul li,
 div.readme_box ol li {
     list-style: disc !important;
     margin: 6px !important;
     padding: 0 !important;
 }
 
 div.readme_box ol li {
     list-style: decimal !important;
 }
 
 /*
 div.readme_box a,
 div.readme_box a:visited {
     color: #4183C4 !important;
     background-color: inherit;
     text-decoration: none;
 }
 */
 
 
 div.readme_box button {
     font-size: @basefontsize;
     padding: 4px 6px;
     .border-radius(@border-radius);
     border: @border-thickness solid @grey5;
     background-color: @grey6;
 }
 
 div.readme_box code,
 div.readme_box pre {
     font-family: @text-monospace;
     font-size: 11px;
     .border-radius(@border-radius);
     background-color: white;
     color: @grey3;
 }
 
 
 div.readme_box code {
     border: @border-thickness solid @grey6;
     margin: 0 2px;
     padding: 0 5px;
 }
 
 div.readme_box pre {
     border: @border-thickness solid #CBDBEB;
     overflow: auto;
     padding: .5em;
     background-color: #FCFEFF;
 }
 
 div.readme_box pre > code {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
 /** RST STYLE **/
 div.rst-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 3px 15px 3px;
 }
 
 div.rst-block h2 {
     font-weight: normal;
 }
 
 div.rst-block  h1,
 div.rst-block  h2,
 div.rst-block  h3,
 div.rst-block  h4,
 div.rst-block  h5,
 div.rst-block  h6 {
     border-bottom: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     line-height: 1.5em !important;
 }
 
 
 div.rst-block  h1:first-child {
     padding-top: .25em !important;
 }
 
 div.rst-block  h2,
 div.rst-block  h3 {
     margin: 1em 0 !important;
 }
 
 div.rst-block  h2 {
     margin-top: 1.5em !important;
     border-top: 4px solid #e0e0e0 !important;
     padding-top: .5em !important;
 }
 
 div.rst-block  p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
 }
 
 div.rst-block  ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
     clear: both;
 }
 
 div.rst-block  ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
 }
 
 div.rst-block pre,
 div.rst-block code {
     font: 12px "Bitstream Vera Sans Mono","Courier",monospace;
 }
 
 div.rst-block code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
 }
 
 div.rst-block pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
 }
 
 div.rst-block pre {
     margin: 1em 0;
     padding: @padding;
     border: 1px solid @grey6;
     .border-radius(@border-radius);
     overflow: auto;
     font-size: 12px;
     color: #444;
     background-color: @grey7;
 }
  No newline at end of file

rhodecode/templates/files/files_browser.mako

@@ -1,83 +1,84 b''
 
 <div id="codeblock" class="browserblock">
     <div class="browser-header">
         <div class="browser-nav">
 
             <div class="info_box">
 
               <div class="info_box_elem previous">
                   <a id="prev_commit_link" data-commit-id="${c.prev_commit.raw_id}" class=" ${('disabled' if c.url_prev == '#' else '')}" href="${c.url_prev}" title="${_('Previous commit')}"><i class="icon-left"></i></a>
               </div>
 
               ${h.hidden('refs_filter')}
 
               <div class="info_box_elem next">
                   <a id="next_commit_link" data-commit-id="${c.next_commit.raw_id}" class=" ${('disabled' if c.url_next == '#' else '')}" href="${c.url_next}" title="${_('Next commit')}"><i class="icon-right"></i></a>
               </div>
             </div>
 
             % if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
               <div>
                 <a class="btn btn-primary new-file" href="${h.route_path('repo_files_upload_file',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
                     ${_('Upload File')}
                 </a>
                 <a class="btn btn-primary new-file" href="${h.route_path('repo_files_add_file',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
                     ${_('Add File')}
                 </a>
               </div>
             % endif
 
             % if c.enable_downloads:
               <% at_path = '{}'.format(request.GET.get('at') or c.commit.raw_id[:6]) %>
               <div class="btn btn-default new-file">
                   % if c.f_path == '/':
                     <a href="${h.route_path('repo_archivefile',repo_name=c.repo_name, fname='{}.zip'.format(c.commit.raw_id))}">
                         ${_('Download full tree ZIP')}
                     </a>
                   % else:
                     <a href="${h.route_path('repo_archivefile',repo_name=c.repo_name, fname='{}.zip'.format(c.commit.raw_id), _query={'at_path':c.f_path})}">
                         ${_('Download this tree ZIP')}
                     </a>
                   % endif
               </div>
             % endif
 
             <div class="files-quick-filter">
                 <ul class="files-filter-box">
                     <li class="files-filter-box-path">
                         <i class="icon-search"></i>
                     </li>
                     <li class="files-filter-box-input">
                         <input onkeydown="NodeFilter.initFilter(event)" class="init" type="text" placeholder="Quick filter" name="filter" size="25" id="node_filter" autocomplete="off">
                     </li>
                 </ul>
             </div>
         </div>
 
     </div>
 
     ## file tree is computed from caches, and filled in
     <div id="file-tree">
     ${c.file_tree |n}
     </div>
 
     %if c.readme_data:
     <div id="readme" class="anchor">
     <div class="box">
-        <div class="title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_rev[0], c.rhodecode_db_repo.landing_rev[1]))}">
-            <h3 class="breadcrumbs">
+        <div class="readme-title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_rev[0], c.rhodecode_db_repo.landing_rev[1]))}">
+            <div>
+                <i class="icon-file-text"></i>
                 <a href="${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.rhodecode_db_repo.landing_rev[1],f_path=c.readme_file)}">
                     ${c.readme_file}
                 </a>
-            </h3>
+            </div>
         </div>
         <div class="readme codeblock">
           <div class="readme_box">
             ${c.readme_data|n}
           </div>
         </div>
     </div>
     </div>
     %endif
 
 </div>

rhodecode/templates/summary/summary.mako

@@ -1,116 +1,118 b''
 <%inherit file="/summary/summary_base.mako"/>
 
 <%namespace name="components" file="/summary/components.mako"/>
 
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='summary')}
 </%def>
 
 <%def name="main()">
 
 <div id="repo-summary" class="summary">
     ${components.summary_detail(breadcrumbs_links=self.breadcrumbs_links(), show_downloads=True)}
 </div><!--end repo-summary-->
 
 
 <div class="box">
         %if not c.repo_commits:
             <div class="empty-repo">
                 <div class="title">
                   <h3>${_('Quick start')}</h3>
                 </div>
                 <div class="clear-fix"></div>
             </div>
          %endif
         <div class="table">
             <div id="shortlog_data">
                 <%include file='summary_commits.mako'/>
             </div>
         </div>
 </div>
 
 %if c.readme_data:
 <div id="readme" class="anchor">
 <div class="box">
-    <div class="title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_rev[0], c.rhodecode_db_repo.landing_rev[1]))}">
-        <h3 class="breadcrumbs">
+
+    <div class="readme-title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_rev[0], c.rhodecode_db_repo.landing_rev[1]))}">
+        <div>
+            <i class="icon-file-text"></i>
             <a href="${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.rhodecode_db_repo.landing_rev[1],f_path=c.readme_file)}">
                 ${c.readme_file}
             </a>
-        </h3>
+        </div>
     </div>
     <div class="readme codeblock">
       <div class="readme_box">
         ${c.readme_data|n}
       </div>
     </div>
 </div>
 </div>
 %endif
 
 <script type="text/javascript">
 $(document).ready(function(){
 
     var showCloneField = function(clone_url_format){
         $.each(['http', 'http_id', 'ssh'], function (idx, val) {
             if(val === clone_url_format){
                 $('#clone_option_' + val).show();
                 $('#clone_option').val(val)
             } else {
                 $('#clone_option_' + val).hide();
             }
         });
     };
     // default taken from session
     showCloneField(templateContext.session_attrs.clone_url_format);
 
     $('#clone_option').on('change', function(e) {
         var selected = $(this).val();
 
         storeUserSessionAttr('rc_user_session_attr.clone_url_format', selected);
         showCloneField(selected)
     });
 
     var initialCommitData = {
         id: null,
         text: 'tip',
         type: 'tag',
         raw_id: null,
         files_url: null
     };
 
     select2RefSwitcher('#download_options', initialCommitData);
 
     // on change of download options
     $('#download_options').on('change', function(e) {
         // format of Object {text: "v0.0.3", type: "tag", id: "rev"}
         var ext = '.zip';
         var selected_cs = e.added;
         var fname = e.added.raw_id + ext;
         var href = pyroutes.url('repo_archivefile', {'repo_name': templateContext.repo_name, 'fname':fname});
         // set new label
         $('#archive_link').html('{0}{1}'.format(escapeHtml(e.added.text), ext));
 
         // set new url to button,
         $('#archive_link').attr('href', href)
     });
 
 
     // calculate size of repository
     calculateSize = function () {
 
         var callback = function (data) {
             % if c.show_stats:
                 showRepoStats('lang_stats', data);
             % endif
         };
 
         showRepoSize('repo_size_container', templateContext.repo_name, templateContext.repo_landing_commit, callback);
 
     }
 
 })
 </script>
 
 </%def>