Repo summary box changes

rhodecode/public/css/readme-box.less

@@ -1,257 +1,256 b''
 /** README styling **/
 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;
-  background-color: @grey7;
 }
 
 div.readme_box img {
   border-style: none;
   background-color: #fff;
   padding-right: 20px;
 }
 
 
 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 @grey5;
+    border: @border-thickness solid #CBDBEB;
     overflow: auto;
     padding: .5em;
-    background-color: @grey7;
+    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/public/css/summary.less

@@ -1,292 +1,405 b''
 // summary.less
 // For use in RhodeCode applications;
 // Used for headers and file detail summary screens.
 
 .summary {
-    float: left;
+    clear: both;
+    float: none;
     position: relative;
     width: 100%;
     margin: 0;
     padding: 0;
+    background: #FCFCFC;
+    border: 1px solid #EAEAEA;
+    border-radius: @border-radius;
+    margin-bottom: 20px;
 
     .summary-detail-header {
         float: left;
         display: block;
         width: 100%;
         margin-bottom: @textmargin;
         padding: 0 0 .5em 0;
         border-bottom: @border-thickness solid @border-default-color;
 
         .breadcrumbs {
             float: left;
             display: inline;
             margin: 0;
             padding: 0;
         }
         h4 {
             float: left;
             margin: 0 1em 0 0;
             padding: 0;
             line-height: 1.2em;
             font-size: @basefontsize;
         }
 
         .action_link {
             float: right;
         }
 
         .new-file {
             float: right;
             margin-top: -1.5em;
         }
     }
 
     .summary-detail {
-        float: left;
+        float: none;
         position: relative;
-        width: 73%;
-        margin: 0 3% @space 0;
+        width: 100%;
+        margin: 0;
         padding: 0;
 
         .file_diff_buttons {
             margin-top: @space;
         }
 
         // commit message
         .commit {
           white-space: pre-wrap;
         }
 
         .left-clone {
             float: left;
             height: 30px;
             margin: 0;
             padding: 0;
-            width: 150px;
+            width: 100px;
             font-weight: @text-semibold-weight;
             font-family: @text-semibold;
         }
+        .left-clone select {
+            width: 100px;
+            margin-right: 0;
+            background-color: @grey7;
+            border-color: @grey4;
+            color: #5C5C5C;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
 
         .right-clone {
-            float: right;
+            float: left;
             width: ~"calc(100% - 150px)";
+
+            .clipboard-action {
+                margin-left: -30px;
+            }
         }
 
         .clone_url_input {
-            width: ~"calc(100% - 35px)";
-            padding: 6px 5px;
+            width: ~"calc(100% - 70px)";
+            padding: 6px 30px 6px 10px;
+            height: 14px;
+            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.07);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
         }
 
         &.directory {
             margin-bottom: 0;
         }
 
         .desc {
             white-space: pre-wrap;
         }
         .disabled {
             opacity: .5;
             cursor: inherit;
         }
         .help-block {
             color: inherit;
             margin: 0;
         }
     }
 
     .sidebar-right {
         float: left;
         width: 24%;
         margin: 0;
         padding: 0;
 
         ul {
             margin-left: 0;
             padding-left: 0;
 
             li {
                 list-style-type: none;
             }
         }
     }
 
     #clone_by_name, #clone_by_id{
         display: inline-block;
         margin-left: 0px;
     }
 
     .codeblock {
         border: none;
         background-color: transparent;
     }
 
     .code-body {
         border: @border-thickness solid @border-default-color;
         .border-radius(@border-radius);
     }
+
+    .btn-collapse {
+        clear: both;
+        float: none;
+        background: #F7F7F7;
+        text-align: center;
+        color: #949494;
+        font-size: 11px;
+
+        &:hover {
+            background: #f1f1f1;
+            color: #2B2B2D;
+        }
+    }
 }
 
 // this is used outside of just the summary
 .fieldset, // similar to form fieldset
 .summary .sidebar-right-content { // these have to match
     clear: both;
-    float: left;
+    float: none;
     position: relative;
     display:block;
     width: 100%;
     min-height: 1em;
-    margin-bottom: @textmargin;
+    margin-bottom: 10px;
     padding: 0;
     line-height: 1.2em;
 
     &:after { // clearfix
         content: "";
         clear: both;
         width: 100%;
         height: 1em;
     }
 }
 
 .summary .sidebar-right-content {
     margin-bottom: @space;
 
     .rc-user {
         min-width: 0;
     }
 }
 
 .fieldset {
 
     .left-label { // similar to form legend
-        float: left;
         display: block;
-        width: 25%;
         margin: 0;
         padding: 0;
         font-weight: @text-semibold-weight;
         font-family: @text-semibold;
     }
 
     .left-label-summary {
-        .left-label;
-        width: 150px;
+        padding-left: 20px;
+        margin-bottom: 5px;
+
+        p {
+            margin-bottom: 5px;
+            color: @grey1;
+        }
+    }
+
+    .left-content {
+        width: ~"calc(50% - 20px)";
+        float: left;
+        margin: 15px 0 15px 20px;
     }
 
     .right-content { // similar to form fields
         float: left;
         display: block;
-        width: 75%;
-        margin: 0 0 0 -15%;
-        padding: 0 0 0 15%;
+        width: ~"calc(50% - 20px)";
+        text-align: right;
+        margin: 15px 20px 15px 0;
 
         .truncate-wrap,
         .truncate {
             max-width: 100%;
             width: 100%;
         }
 
         .commit-long {
             overflow-x: auto;
         }
+
+        .commit-info {
+            margin-top: 7px;
+        }
+
+        .tag, .tagtag, .branchtag, .booktag, .metatag, .perm_tag {
+            background:transparent;
+            border: none;
+            box-shadow: none;
+            margin-left: 10px;
+            font-size: 13px;
+        }
+
+        .tag span, .tag i {
+            color: @grey1;
+        }
     }
     .commit.truncate-wrap {
         overflow:hidden;
         text-overflow: ellipsis;
     }
 }
 
 // expand commit message
 #message_expand {
     clear: both;
     display: block;
     color: @rcblue;
     cursor: pointer;
 }
 
 #trimmed_message_box {
     max-height: floor(2 * @basefontsize * 1.2);  // 2 lines * line-height
     overflow: hidden;
 }
 
 // show/hide comments button
 .show-inline-comments {
     display: inline;
     cursor: pointer;
 
     .comments-show { display: inline; }
     .comments-hide { display: none; }
 
     &.comments-visible {
         .comments-show { display: none; }
         .comments-hide { display: inline; }
     }
 }
 
 // Quick Start section
+
+.empty-repo {
+    border: 1px solid #EAEAEA;
+    border-bottom: 0;
+    border-radius: @border-radius;
+    padding: 0 20px;
+}
+
+.empty-repo h3, .quick_start p {
+    margin-bottom: 10px;
+}
+
+.quick_start pre {
+    background: #FCFEFF;
+    border: 1px solid #CBDBEB;
+    box-shadow: @button-shadow;
+    padding: 10px 15px;
+    border-radius: 4px;
+    color: @grey2;
+}
+
+.clearfix {
+    clear: both;
+}
+
 .quick_start {
-    float: left;
     display: block;
     position: relative;
-    width: 100%;
+    border: 1px solid #EAEAEA;
+    border-top: 0;
+    border-radius: @border-radius;
+    padding: 0 20px;
 
     // adds some space to make copy and paste easier
     .left-label,
     .right-content {
         line-height: 1.6em;
     }
 }
 
+
 .submodule {
     .summary-detail {
         width: 100%;
 
         .btn-collapse {
             display: none;
         }
     }
 }
 
 .codeblock-header {
     float: left;
     display: block;
     width: 100%;
     margin: 0;
     padding: @space 0 10px 0;
     border-top: @border-thickness solid @border-default-color;
 
     .stats {
         float: left;
     }
     .stats-filename {
         font-size: 120%;
     }
     .stats-first-item {
         padding: 0px 0px 0px 3px;
     }
 
     .buttons {
         float: right;
         text-align: right;
         color: @grey4;
     }
 
     .file-container {
         display: inline-block;
         width: 100%;
     }
 
 }
 
 #summary-menu-stats {
 
     .stats-bullet {
         color: @grey3;
         min-width: 3em;
     }
 
     .repo-size {
         margin-bottom: .5em;
     }
 
 }
 
+.rctable.repo_summary {
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    border-collapse: inherit;
+    border-bottom: 0;
+
+    th {
+        background: @grey7;
+        border-bottom: 0;
+    }
+
+    td {
+        border-color: #eaeaea;
+    }
+
+    td.td-status {
+        padding-left: 10px;
+    }
+}
+
+
+
+

rhodecode/templates/summary/components.mako

@@ -1,231 +1,259 b''
 <%def name="refs_counters(branches, closed_branches, tags, bookmarks)">
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
-      <i class="icon-branch"></i>${_ungettext(
-      '%(num)s Branch','%(num)s Branches', len(branches)) % {'num': len(branches)}}</a>
+      <i class="icon-branch"></i>
+      % if len(branches) == 1:
+          <span>${len(branches)}</span> ${_('Branch')}
+      % else:
+          <span>${len(branches)}</span> ${_('Branches')}
+      % endif
+    </a>
     </span>
 
     %if closed_branches:
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
-      <i class="icon-branch"></i>${_ungettext(
-      '%(num)s Closed Branch', '%(num)s Closed Branches', len(closed_branches)) % {'num': len(closed_branches)}}</a>
+      <i class="icon-branch"></i>
+      % if len(closed_branches) == 1:
+          <span>${len(closed_branches)}</span> ${_('Closed Branch')}
+      % else:
+          <span>${len(closed_branches)}</span> ${_('Closed Branches')}
+      % endif
+      </a>
     </span>
     %endif
 
     <span class="tagtag tag">
     <a href="${h.route_path('tags_home',repo_name=c.repo_name)}" class="childs">
-        <i class="icon-tag"></i>${_ungettext(
-        '%(num)s Tag', '%(num)s Tags', len(tags)) % {'num': len(tags)}}</a>
+        <i class="icon-tag"></i>
+        % if len(tags) == 1:
+            <span>${len(tags)}</span> ${_('Tag')}
+        % else:
+            <span>${len(tags)}</span> ${_('Tags')}
+        % endif
+        </a>
     </span>
 
     %if bookmarks:
     <span class="booktag tag">
     <a href="${h.route_path('bookmarks_home',repo_name=c.repo_name)}" class="childs">
-        <i class="icon-bookmark"></i>${_ungettext(
-        '%(num)s Bookmark', '%(num)s Bookmarks', len(bookmarks)) % {'num': len(bookmarks)}}</a>
+        <i class="icon-bookmark"></i>
+        % if len(bookmarks) == 1:
+            <span>${len(bookmarks)}</span> ${_('Bookmark')}
+        % else:
+            <span>${len(bookmarks)}</span> ${_('Bookmarks')}
+        % endif
+        </a>
     </span>
     %endif
 </%def>
 
 <%def name="summary_detail(breadcrumbs_links, show_downloads=True)">
     <% summary = lambda n:{False:'summary-short'}.get(n) %>
 
     <div id="summary-menu-stats" class="summary-detail">
-        <div class="summary-detail-header">
-            <div class="breadcrumbs files_location">
-                <h4>
-                  ${breadcrumbs_links}
-                </h4>
-            </div>
-            <div id="summary_details_expand" class="btn-collapse" data-toggle="summary-details">
-                ${_('Show More')}
-            </div>
-        </div>
-
         <div class="fieldset">
-
+          <div class="left-content">
             <div class="left-clone">
                 <select id="clone_option" name="clone_option">
                     <option value="http" selected="selected">HTTP</option>
                     <option value="http_id">HTTP UID</option>
                     % if c.ssh_enabled:
                         <option value="ssh">SSH</option>
                     % endif
                 </select>
             </div>
+
             <div class="right-clone">
                 <%
                     maybe_disabled = ''
                     if h.is_svn_without_proxy(c.rhodecode_db_repo):
                         maybe_disabled = 'disabled'
                 %>
 
                 <span id="clone_option_http">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url}" title="${_('Copy the clone url')}"></i>
                 </span>
 
                 <span style="display: none;" id="clone_option_http_id">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url_id}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_id}" title="${_('Copy the clone by id url')}"></i>
                 </span>
 
                 <span style="display: none;" id="clone_option_ssh">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url_ssh}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_ssh}" title="${_('Copy the clone by ssh url')}"></i>
                 </span>
 
                 % if maybe_disabled:
                     <p class="help-block">${_('SVN Protocol is disabled. To enable it, see the')} <a href="${h.route_url('enterprise_svn_setup')}" target="_blank">${_('documentation here')}</a>.</p>
                 % endif
-
             </div>
         </div>
 
-        <div class="fieldset">
-          <div class="left-label-summary">
-            &nbsp;
-          </div>
           <div class="right-content">
             <div class="commit-info">
                 <div class="tags">
                 <% commit_rev = c.rhodecode_db_repo.changeset_cache.get('revision') %>
                 % if c.rhodecode_repo:
                     ${refs_counters(
                         c.rhodecode_repo.branches,
                         c.rhodecode_repo.branches_closed,
                         c.rhodecode_repo.tags,
                         c.rhodecode_repo.bookmarks)}
                 % else:
                     ## missing requirements can make c.rhodecode_repo None
                     ${refs_counters([], [], [], [])}
                 % endif
 
                 ## commits
                 <span class="tag">
                   % if commit_rev == -1:
-                      ${_ungettext('%(num)s Commit', '%(num)s Commits', 0) % {'num': 0}}
+                      <i class="icon-tag"></i>
+                      % if commit_rev == -1:
+                            <span>0</span> ${_('Commit')}
+                        % else:
+                            <span>0</span> ${_('Commits')}
+                        % endif
                   % else:
                       <a href="${h.route_path('repo_changelog', repo_name=c.repo_name)}">
-                        ${_ungettext('%(num)s Commit', '%(num)s Commits', commit_rev) % {'num': commit_rev}}</a>
+                        <i class="icon-tag"></i>
+                        % if commit_rev == 1:
+                            <span>${commit_rev}</span> ${_('Commit')}
+                        % else:
+                            <span>${commit_rev}</span> ${_('Commits')}
+                        % endif
+                        </a>
                   % endif
                 </span>
 
                 ## forks
                 <span class="tag">
                   <a title="${_('Number of Repository Forks')}" href="${h.route_path('repo_forks_show_all', repo_name=c.repo_name)}">
-                     ${c.repository_forks} ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>
+                     <i class="icon-code-fork"></i>
+                     <span>${c.repository_forks}</span> ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>
                 </span>
-
                 </div>
             </div>
           </div>
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
-            ${_('Repository size')}:
-          </div>
-          <div class="right-content">
+            <p>${_('Repository size')}</p>
+
             <div class="commit-info">
                 <div class="tags">
                    ## repo size
                     % if commit_rev == -1:
                           <span class="stats-bullet">0 B</span>
                     % else:
                           <span>
                               <a href="#showSize" onclick="calculateSize(); $(this).hide(); return false" id="show-repo-size">Show repository size</a>
                           </span>
                           <span class="stats-bullet" id="repo_size_container" style="display:none">
                               ${_('Calculating Repository Size...')}
                           </span>
                     % endif
                 </div>
             </div>
           </div>
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
-            ${_('Description')}:
-          </div>
-          <div class="right-content">
+            <p>${_('Description')}</p>
+
             <div class="input ${summary(c.show_stats)}">
                 <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
                 ${dt.repo_desc(c.rhodecode_db_repo.description_safe, c.visual.stylify_metatags)}
             </div>
           </div>
         </div>
 
         % if show_downloads:
           <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
             <div class="left-label-summary">
-              ${_('Downloads')}:
-            </div>
-            <div class="right-content">
+              <p>${_('Downloads')}</p>
+
               <div class="input ${summary(c.show_stats)} downloads">
                 % if c.rhodecode_repo and len(c.rhodecode_repo.commit_ids) == 0:
                   <span class="disabled">
                     ${_('There are no downloads yet')}
                   </span>
                 % elif not c.enable_downloads:
                     <span class="disabled">
                         ${_('Downloads are disabled for this repository')}.
                     </span>
                     % if c.is_super_admin:
                        ${h.link_to(_('Enable downloads'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_downloads'))}
                     % endif
                 % else:
                     <span class="enabled">
                         <a id="archive_link" class="btn btn-small" href="${h.route_path('repo_archivefile',repo_name=c.rhodecode_db_repo.repo_name,fname='tip.zip')}">
                             <i class="icon-archive"></i> tip.zip
                             ## replaced by some JS on select
                         </a>
                     </span>
                     ${h.hidden('download_options')}
                 % endif
               </div>
             </div>
           </div>
         % endif
 
         ## Statistics
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
-            ${_('Statistics')}:
-          </div>
-          <div class="right-content">
+            <p>${_('Statistics')}</p>
+
             <div class="input ${summary(c.show_stats)} statistics">
               % if c.show_stats:
                 <div id="lang_stats" class="enabled">
                     ${_('Calculating Code Statistics...')}
                 </div>
               % else:
                   <span class="disabled">
                       ${_('Statistics are disabled for this repository')}.
                   </span>
                   % if c.is_super_admin:
                      ${h.link_to(_('Enable statistics'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_statistics'))}
                   % endif
               % endif
             </div>
 
           </div>
         </div>
 
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
+            <p>${_('Owner')}</p>
+
+
+          </div>
+        </div>
+
+        ## Context Action
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
+            %if c.rhodecode_user.username != h.DEFAULT_USER:
+                <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
+            %else:
+                <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name)}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
+            %endif
+          </div>
+        </div>
+
     </div><!--end summary-detail-->
+
+    <div id="summary_details_expand" class="btn-collapse" data-toggle="summary-details">
+            ${_('Show More')}
+    </div>
 </%def>
 
 <%def name="summary_stats(gravatar_function)">
-    <div class="sidebar-right">
-      <div class="summary-detail-header">
-        <h4 class="item">
-             ${_('Owner')}
-        </h4>
-      </div>
-      <div class="sidebar-right-content">
+  <div class="">
         ${gravatar_function(c.rhodecode_db_repo.user.email, 16)}
       </div>
-    </div><!--end sidebar-right-->
 </%def>

rhodecode/templates/summary/summary.mako

@@ -1,127 +1,115 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 class="title">
-    ## Context Action
-    <div>
-        <ul class="links icon-only-links block-right">
-            <li>
-                %if c.rhodecode_user.username != h.DEFAULT_USER:
-                    <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
-                %else:
-                    <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name)}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
-                %endif
-            </li>
-        </ul>
-    </div>
-</div>
-
 <div id="repo-summary" class="summary">
     ${components.summary_detail(breadcrumbs_links=self.breadcrumbs_links(), show_downloads=True)}
     ${components.summary_stats(gravatar_function=self.gravatar_with_user)}
 </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="clearfix"></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">
             <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 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('<i class="icon-archive"></i> {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>

rhodecode/templates/summary/summary_commits.mako

@@ -1,145 +1,140 b''
 ## -*- coding: utf-8 -*-
 <%namespace name="base" file="/base/base.mako"/>
 %if c.repo_commits:
 <table class="rctable repo_summary table_disp">
     <tr>
 
         <th class="status" colspan="2"></th>
         <th>${_('Commit')}</th>
         <th>${_('Commit message')}</th>
         <th>${_('Age')}</th>
         <th>${_('Author')}</th>
         <th>${_('Refs')}</th>
     </tr>
 
 ## to speed up lookups cache some functions before the loop
 <%
     active_patterns = h.get_active_pattern_entries(c.repo_name)
     urlify_commit_message = h.partial(h.urlify_commit_message, active_pattern_entries=active_patterns)
 %>
 %for cnt,cs in enumerate(c.repo_commits):
     <tr class="parity${cnt%2}">
 
         <td class="td-status">
             %if c.statuses.get(cs.raw_id):
                 <div class="changeset-status-ico shortlog">
                     %if c.statuses.get(cs.raw_id)[2]:
                     <a class="tooltip" title="${_('Commit status: %s\nClick to open associated pull request #%s') % (c.statuses.get(cs.raw_id)[0], c.statuses.get(cs.raw_id)[2])}" href="${h.route_path('pullrequest_show',repo_name=c.statuses.get(cs.raw_id)[3],pull_request_id=c.statuses.get(cs.raw_id)[2])}">
                         <div class="${'flag_status {}'.format(c.statuses.get(cs.raw_id)[0])}"></div>
                     </a>
                     %else:
                     <a class="tooltip" title="${_('Commit status: {}').format(h.commit_status_lbl(c.statuses.get(cs.raw_id)[0]))}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=cs.raw_id,_anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
                         <div class="${'flag_status {}'.format(c.statuses.get(cs.raw_id)[0])}"></div>
                     </a>
                     %endif
                 </div>
             %else:
                 <div class="tooltip flag_status not_reviewed" title="${_('Commit status: Not Reviewed')}"></div>
             %endif
         </td>
         <td class="td-comments">
             %if c.comments.get(cs.raw_id,[]):
             <a title="${_('Commit has comments')}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=cs.raw_id,_anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
                 <i class="icon-comment"></i> ${len(c.comments[cs.raw_id])}
             </a>
             %endif
         </td>
         <td class="td-commit">
             <code>
                 <a href="${h.route_path('repo_commit', repo_name=c.repo_name, commit_id=cs.raw_id)}">${h.show_id(cs)}</a>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${cs.raw_id}" title="${_('Copy the full commit id')}"></i>
             </code>
         </td>
 
         <td class="td-description mid">
           <div class="log-container truncate-wrap">
               <div class="message truncate" id="c-${cs.raw_id}">${urlify_commit_message(cs.message, c.repo_name)}</div>
           </div>
         </td>
 
         <td class="td-time">
             ${h.age_component(cs.date)}
         </td>
         <td class="td-user author">
             ${base.gravatar_with_user(cs.author)}
         </td>
 
         <td class="td-tags">
           <div class="autoexpand">
             %if h.is_hg(c.rhodecode_repo):
                 %for book in cs.bookmarks:
                      <span class="booktag tag" title="${h.tooltip(_('Bookmark %s') % book)}">
                      <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=cs.raw_id, _query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
                      </span>
                 %endfor
             %endif
             ## tags
             %for tag in cs.tags:
              <span class="tagtag tag" title="${h.tooltip(_('Tag %s') % tag)}">
              <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=cs.raw_id, _query=dict(at=tag))}"><i class="icon-tag"></i>${h.shorter(tag)}</a>
              </span>
             %endfor
 
             ## branch
             %if cs.branch:
              <span class="branchtag tag" title="${h.tooltip(_('Branch %s') % cs.branch)}">
               <a href="${h.route_path('repo_changelog',repo_name=c.repo_name,_query=dict(branch=cs.branch))}"><i class="icon-code-fork"></i>${h.shorter(cs.branch)}</a>
              </span>
             %endif
           </div>
         </td>
     </tr>
 %endfor
 
 </table>
 
 <script type="text/javascript">
   $(document).pjax('#shortlog_data .pager_link','#shortlog_data', {timeout: 2000, scrollTo: false, push: false});
   $(document).on('pjax:success', function(){ timeagoActivate(); });
 </script>
 
 <div class="pagination-wh pagination-left">
 ${c.repo_commits.pager('$link_previous ~2~ $link_next')}
 </div>
 %else:
 
 %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
 <div class="quick_start">
   <div class="fieldset">
-    <div class="left-label">${_('Add or upload files directly via RhodeCode:')}</div>
-    <div class="right-content">
+    <p><b>${_('Add or upload files directly via RhodeCode:')}</b></p>
       <div id="add_node_id" class="add_node">
           <a href="${h.route_path('repo_files_add_file',repo_name=c.repo_name,commit_id=0, f_path='', _anchor='edit')}" class="btn btn-default">${_('Add New File')}</a>
       </div>
-    </div>
     %endif
   </div>
 
   %if not h.is_svn(c.rhodecode_repo):
   <div class="fieldset">
-    <div class="left-label">${_('Push new repo:')}</div>
-    <div class="right-content">
+    <p><b>${_('Push new repo:')}</b></p>
       <pre>
 ${c.rhodecode_repo.alias} clone ${c.clone_repo_url}
 ${c.rhodecode_repo.alias} add README # add first file
 ${c.rhodecode_repo.alias} commit -m "Initial" # commit with message
 ${c.rhodecode_repo.alias} push ${'origin master' if h.is_git(c.rhodecode_repo) else ''} # push changes back
       </pre>
     </div>
-  </div>
+
   <div class="fieldset">
-    <div class="left-label">${_('Existing repository?')}</div>
-    <div class="right-content">
+    <p><b>${_('Existing repository?')}</b></p>
       <pre>
       %if h.is_git(c.rhodecode_repo):
 git remote add origin ${c.clone_repo_url}
 git push -u origin master
       %else:
 hg push ${c.clone_repo_url}
       %endif
       </pre>
     </div>
-  </div>
   %endif
 </div>
 %endif