gists: updated styling on gists pages according to the design.

rhodecode/public/css/code-block.less

@@ -418,9 +418,17 b' div.codeblock {'
     }
 
     .gist_url {
-        padding: 0px 0px 10px 0px;
+        padding: 0px 0px 35px 0px;
     }
 
+    .gist-desc {
+        clear: both;
+        margin: 0 0 10px 0;
+        code {
+            white-space: pre-line;
+            line-height: inherit
+        }
+    }
     .author {
         clear: both;
         vertical-align: middle;

rhodecode/public/css/tags.less

@@ -49,6 +49,19 b''
 .tag7 { .border   ( @border-thickness-tags, @color7 ); color:@color7; }
 .tag8 { .border   ( @border-thickness-tags, @color8 ); color:@color8; }
 
+
+.tag-gist-public {
+    .border   (@border-thickness-tags, @color1);
+    color: @color1;
+}
+
+
+.tag-gist-private {
+    .border   (@border-thickness-tags, @color2);
+    color: @color2;
+}
+
+
 .metatag-list {
     margin: 0;
     padding: 0;

rhodecode/templates/admin/gists/gist_show.mako

@@ -1,5 +1,6 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
+<%namespace name="dt" file="/data_table/_dt_elements.mako"/>
 
 <%def name="robots()">
     %if c.gist.gist_type != 'public':
@@ -27,28 +28,21 b''
 <%def name="main()">
 <div class="box">
     <!-- box / title -->
-    <div class="title">
-        ${self.breadcrumbs()}
-    </div>
 
     <div class="table">
         <div id="files_data">
             <div id="codeblock" class="codeblock">
                 <div class="code-header">
                     <div class="gist_url">
+                        <div class="pull-left">
                         <code>
+                            ${dt.gist_type(c.gist.gist_type)}
+                            <span class="tag disabled">${c.gist.gist_access_id}</span>
                             ${c.gist.gist_url()} <span class="icon-clipboard clipboard-action" data-clipboard-text="${c.gist.gist_url()}" title="${_('Copy the url')}"></span>
                         </code>
                     </div>
-                    <div class="stats">
-                       %if c.is_super_admin or c.gist.gist_owner == c.rhodecode_user.user_id:
-                        <div class="remove_gist">
-                            ${h.secure_form(h.route_path('gist_delete', gist_id=c.gist.gist_access_id), request=request)}
-                                ${h.submit('remove_gist', _('Delete'),class_="btn btn-mini btn-danger",onclick="return confirm('"+_('Confirm to delete this Gist')+"');")}
-                            ${h.end_form()}
-                        </div>
-                       %endif
-                        <div class="buttons">
+
+                        <div class="pull-right buttons">
                           ## only owner should see that
                           <a href="#copySource" onclick="return false;" class="btn btn-mini icon-clipboard clipboard-action" data-clipboard-text="${c.files[0].content}">${_('Copy content')}</a>
 
@@ -56,26 +50,31 b''
                             ${h.link_to(_('Edit'), h.route_path('gist_edit', gist_id=c.gist.gist_access_id), class_="btn btn-mini")}
                           %endif
                           ${h.link_to(_('Show as Raw'), h.route_path('gist_show_formatted', gist_id=c.gist.gist_access_id, revision='tip', format='raw'), class_="btn btn-mini")}
+
+                          %if c.is_super_admin or c.gist.gist_owner == c.rhodecode_user.user_id:
+                          <div class="pull-right remove_gist">
+                            ${h.secure_form(h.route_path('gist_delete', gist_id=c.gist.gist_access_id), request=request)}
+                                ${h.submit('remove_gist', _('Delete'),class_="btn btn-mini btn-danger",onclick="return confirm('"+_('Confirm to delete this Gist')+"');")}
+                            ${h.end_form()}
                         </div>
-                        <div class="left" >
-                          %if c.gist.gist_type != 'public':
-                            <span class="tag tag-ok disabled">${_('Private Gist')}</span>
                           %endif
-                          <span> ${c.gist.gist_description}</span>
-                           <span>${_('Expires')}:
+                        </div>
+                    </div>
+
+                    <div class="gist-desc">
+                        <code>${c.gist.gist_description}</code>
+                    </div>
+
+                    <div class="author">
+                        <div title="${h.tooltip(c.file_last_commit.author)}">
+                          ${self.gravatar_with_user(c.file_last_commit.author, 16, tooltip=True)} - ${_('created')} ${h.age_component(c.file_last_commit.date)},
+                          ${_('expires')}:
                            %if c.gist.gist_expires == -1:
                              ${_('never')}
                            %else:
                               ${h.age_component(h.time_to_utcdatetime(c.gist.gist_expires))}
                           %endif
                           </span>
-
-                       </div>
-                    </div>
-
-                    <div class="author">
-                        <div title="${h.tooltip(c.file_last_commit.author)}">
-                          ${self.gravatar_with_user(c.file_last_commit.author, 16, tooltip=True)} - ${_('created')} ${h.age_component(c.file_last_commit.date)}
                         </div>
 
                     </div>
@@ -83,22 +82,22 b''
                 </div>
 
                ## iterate over the files
-               % for file in c.files:
-                <% renderer = c.render and h.renderer_from_filename(file.path, exclude=['.txt', '.TXT'])%>
+               % for gist_file in c.files:
+                <% renderer = c.render and h.renderer_from_filename(gist_file.path, exclude=['.txt', '.TXT'])%>
                 <!--
-                <div id="${h.FID('G', file.path)}" class="stats" >
+                <div id="${h.FID('G', gist_file.path)}" class="stats" >
                     <a href="${c.gist.gist_url()}">¶</a>
-                    <b >${file.path}</b>
+                    <b >${gist_file.path}</b>
                     <div>
-                       ${h.link_to(_('Show as raw'), h.route_path('gist_show_formatted_path', gist_id=c.gist.gist_access_id, revision=file.commit.raw_id, format='raw', f_path=file.path), class_="btn btn-mini")}
+                       ${h.link_to(_('Show as raw'), h.route_path('gist_show_formatted_path', gist_id=c.gist.gist_access_id, revision=gist_file.commit.raw_id, format='raw', f_path=gist_file.path), class_="btn btn-mini")}
                     </div>
                 </div>
                 -->
                 <div class="code-body textarea text-area editor">
                     %if renderer:
-                        ${h.render(file.content, renderer=renderer)}
+                        ${h.render(gist_file.content, renderer=renderer)}
                     %else:
-                        ${h.pygmentize(file,linenos=True,anchorlinenos=True,lineanchors='L',cssclass="code-highlight")}
+                        ${h.pygmentize(gist_file,linenos=True,anchorlinenos=True,lineanchors='L',cssclass="code-highlight")}
                     %endif
                 </div>
                %endfor

rhodecode/templates/data_table/_dt_elements.mako

@@ -338,8 +338,10 b''
 </%def>
 
 <%def name="gist_type(gist_type)">
-    %if gist_type != 'public':
-      <div class="tag">${_('Private')}</div>
+    %if gist_type == 'public':
+        <span class="tag tag-gist-public disabled">${_('Public Gist')}</span>
+    %else:
+        <span class="tag tag-gist-private disabled">${_('Private Gist')}</span>
     %endif
 </%def>