Repo summary box changes

rhodecode/public/css/readme-box.less

@@ -88,7 +88,6 b' div.readme_box pre {'
   font-size: 13px !important;
   overflow: visible !important;
   line-height: 140% !important;
-  background-color: @grey7;
 }
 
 div.readme_box img {
@@ -156,10 +155,10 b' div.readme_box code {'
 }
 
 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 {

rhodecode/public/css/summary.less

@@ -3,11 +3,16 b''
 // 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;
@@ -42,10 +47,10 b''
     }
 
     .summary-detail {
-        float: left;
+        float: none;
         position: relative;
-        width: 73%;
-        margin: 0 3% @space 0;
+        width: 100%;
+        margin: 0;
         padding: 0;
 
         .file_diff_buttons {
@@ -62,19 +67,37 b''
             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 {
@@ -124,18 +147,32 b''
         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;
 
@@ -158,9 +195,7 b''
 .fieldset {
 
     .left-label { // similar to form legend
-        float: left;
         display: block;
-        width: 25%;
         margin: 0;
         padding: 0;
         font-weight: @text-semibold-weight;
@@ -168,16 +203,27 b''
     }
 
     .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 {
@@ -188,6 +234,22 b''
         .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;
@@ -223,11 +285,38 b''
 }
 
 // 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,
@@ -236,6 +325,7 b''
     }
 }
 
+
 .submodule {
     .summary-detail {
         width: 100%;
@@ -290,3 +380,26 b''
 
 }
 
+.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,29 +1,49 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>
@@ -32,19 +52,8 b''
     <% 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>
@@ -54,6 +63,7 b''
                     % endif
                 </select>
             </div>
+
             <div class="right-clone">
                 <%
                     maybe_disabled = ''
@@ -79,14 +89,9 b''
                 % 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">
@@ -105,19 +110,30 b''
                 ## 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>
@@ -125,9 +141,8 b''
 
         <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
@@ -148,9 +163,8 b''
 
         <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)}
@@ -161,9 +175,8 b''
         % 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">
@@ -193,9 +206,8 b''
         ## 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">
@@ -214,18 +226,34 b''
           </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

@@ -9,21 +9,6 b''
 
 <%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)}
@@ -32,9 +17,12 b''
 
 <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">

rhodecode/templates/summary/summary_commits.mako

@@ -106,19 +106,16 b''
 %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
@@ -126,10 +123,9 b''
 ${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}
@@ -139,7 +135,6 b' hg push ${c.clone_repo_url}'
       %endif
       </pre>
     </div>
-  </div>
   %endif
 </div>
 %endif