gists: fixed UI based on latest changes

rhodecode/public/css/main.less

@@ -2423,15 +2423,53 b' h3.files_location{'
   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;
+    }
+  }
+}
 
 
 

rhodecode/templates/admin/gists/index.mako

@@ -14,19 +14,7 b''
     %endif
 </%def>
 
-<%def name="breadcrumbs_links()">
-    <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
-    %if c.show_private and not c.show_public:
-        ${_('Private Gists for user %s') % c.rhodecode_user.username}
-    %elif c.show_public and not c.show_private:
-        ${_('Public Gists for user %s') % c.rhodecode_user.username}
-    %elif c.show_public and c.show_private:
-        ${_('All Gists for user %s') % c.rhodecode_user.username}
-    %else:
-        ${_('All Public Gists')}
-    %endif
-    -  <span id="gists_count">0</span>
-</%def>
+<%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='gists')}
@@ -35,43 +23,52 b''
 
 
 <%def name="main()">
+
 <div class="box">
   <div class="title">
-      ${self.breadcrumbs(class_="breadcrumbs block-left")}
+
+    <ul class="button-links">
+      % if c.is_super_admin:
+        <li class="btn ${'active' if c.active=='all' else ''}"><a href="${h.route_path('gists_show', _query={'all': 1})}">${_('All gists')}</a></li>
+      %endif
+      <li class="btn ${'active' if c.active=='public' else ''}"><a href="${h.route_path('gists_show')}">${_('All public')}</a></li>
       %if c.rhodecode_user.username != h.DEFAULT_USER:
-      <ul class="links block-right">
-        <li>
-           <a href="${h.route_path('gists_new')}" class="btn btn-primary">${_(u'Create New Gist')}</a>
-        </li>
-      </ul>
+        <li class="btn ${'active' if c.active=='my_all' else ''}"><a href="${h.route_path('gists_show', _query={'public':1, 'private': 1})}">${_('My gists')}</a></li>
+        <li class="btn ${'active' if c.active=='my_private' else ''}"><a href="${h.route_path('gists_show', _query={'private': 1})}">${_('My private')}</a></li>
+        <li class="btn ${'active' if c.active=='my_public' else ''}"><a href="${h.route_path('gists_show', _query={'public': 1})}">${_('My public')}</a></li>
       %endif
-  </div>
-
+    </ul>
 
-  <div class="sidebar-col-wrapper scw-small">
-    ##main
-    <div class="sidebar">
-        <ul class="nav nav-pills nav-stacked">
-          % if c.is_super_admin:
-            <li class="${'active' if c.active=='all' else ''}"><a href="${h.route_path('gists_show', _query={'all': 1})}">${_('All gists')}</a></li>
-          %endif
-          <li class="${'active' if c.active=='public' else ''}"><a href="${h.route_path('gists_show')}">${_('All public')}</a></li>
-          %if c.rhodecode_user.username != h.DEFAULT_USER:
-            <li class="${'active' if c.active=='my_all' else ''}"><a href="${h.route_path('gists_show', _query={'public':1, 'private': 1})}">${_('My gists')}</a></li>
-            <li class="${'active' if c.active=='my_private' else ''}"><a href="${h.route_path('gists_show', _query={'private': 1})}">${_('My private')}</a></li>
-            <li class="${'active' if c.active=='my_public' else ''}"><a href="${h.route_path('gists_show', _query={'public': 1})}">${_('My public')}</a></li>
-          %endif
+    % if c.rhodecode_user.username != h.DEFAULT_USER:
+        <div class="pull-right">
+            <a class="btn btn-primary" href="${h.route_path('gists_new')}" >
+                ${_(u'Create New Gist')}
+            </a>
+        </div>
+    % endif
+
+    <div class="grid-quick-filter">
+        <ul class="grid-filter-box">
+            <li class="grid-filter-box-icon">
+                <i class="icon-search"></i>
+            </li>
+            <li class="grid-filter-box-input">
+                <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
+            </li>
         </ul>
     </div>
 
-    <div class="main-content">
+  </div>
+
+    <div class="main-content-full-width">
         <div id="repos_list_wrap">
             <table id="gist_list_table" class="display"></table>
         </div>
     </div>
-  </div>
+
 </div>
-<script>
+
+<script type="text/javascript">
 $(document).ready(function() {
 
     var get_datatable_count = function(){