kallithea Changeset - 2f008f0153c7

Changeset - 2f008f0153c7

Parent rev.

Child rev.

[Not reviewed]

default

0 8 0

Mads Kiilerich - 9 years ago 2016-11-10 16:10:41
madski@unity3d.com

style: put all datatable widgets on one line above the table

This makes tables look less messy - especially on the repogroups page where
there are 2 datatables.

We put all the info above the template so it is visible and stays in the same
place, no matter how many entries are shown or if filtering change the number.

TODO: We should probably get a wrapper around datatable instead of repeating
this so many times ...

8 files changed with 37 insertions and 10 deletions:

kallithea/public/css/style.css

kallithea/templates/admin/my_account/my_account_repos.html

kallithea/templates/admin/my_account/my_account_watched.html

kallithea/templates/admin/repo_groups/repo_groups.html

kallithea/templates/admin/repos/repos.html

kallithea/templates/admin/user_groups/user_groups.html

kallithea/templates/admin/users/users.html

kallithea/templates/index_base.html

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -4539,36 +4539,53 @@ body table.dataTable thead .sorting { @@
   background-image: none;
+}
 body table.dataTable thead .sorting_asc {
   background-image: none;
+}
 body table.dataTable thead .sorting_desc {
   background-image: none;
+}
 body table.dataTable thead .sorting_asc_disabled {
   background-image: none;
+}
 body table.dataTable thead .sorting_desc_disabled {
   background-image: none;
+}
 body table.dataTable thead .sorting_asc::after {
   font-family: "kallithea";
   content: "\23f6";
+}
 body table.dataTable thead .sorting_desc::after {
   font-family: "kallithea";
   content: "\23f7";
+}
 .dataTables_wrapper .dataTables_length {
   float: right !important;
+}
 .dataTables_wrapper .dataTables_filter {
 .dataTables_wrapper .dataTables_left {
   float: left !important;
+}
 .dataTables_wrapper .dataTables_right {
   float: right;
+}
 .dataTables_wrapper .dataTables_right > div {
   padding-left: 30px;
+}
 .dataTables_wrapper .dataTables_info {
   clear: none;
   padding-top: 1em;
+}
 .dataTables_wrapper .dataTables_paginate {
   padding-top: 0;
+}
 .dataTables_wrapper .dataTables_paginate > a.paginate_button {
   padding-top: 1em;
   border: 0 !important;
+}
 .text-muted {
     color: #777777;
+}

kallithea/templates/admin/my_account/my_account_repos.html

➞

Show inline comments

 <div style="font-size: 20px; color: #666666; padding: 0px 0px 10px 0px">${_('Repositories You Own')}</div>
 <div class="table">
     <table id="datatable_list_wrap"></table>
 </div>
 <script>
   var data = ${c.data|n};
   var myDataTable = $("#datatable_list_wrap").DataTable({
         data: data.records,
         columns: [
             {data: "raw_name", "visible": false, searchable: false},
             {data: "name", "orderData": 1, title: "${_('Name')}"},
             {data: "last_rev_raw", "visible": false, searchable: false},
             {data: "last_changeset", "orderData": 3, title: "${_('Tip')}", searchable: false},
             {data: "action", title: "${_('Action')}", sortable: false, searchable: false}
         ],
         order: [[2, "asc"]],
         dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
         pageLength: 100
     });
 </script>

kallithea/templates/admin/my_account/my_account_watched.html

➞

Show inline comments

 <div style="font-size: 20px; color: #666666; padding: 0px 0px 10px 0px">${_('Repositories You are Watching')}</div>
 <div class="table">
     <table id="datatable_list_wrap"></table>
 </div>
 <script>
   var data = ${c.data|n};
   var myDataTable = $("#datatable_list_wrap").DataTable({
         data: data.records,
         columns: [
             {data: "raw_name", "visible": false, searchable: false},
             {data: "name", "orderData": 1, title: "${_('Name')}"},
             {data: "last_rev_raw", "visible": false, searchable: false},
             {data: "last_changeset", "orderData": 3, title: "${_('Tip')}", searchable: false},
         ],
         order: [[2, "asc"]],
         dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
         pageLength: 100
     });
 </script>

kallithea/templates/admin/repo_groups/repo_groups.html

➞

Show inline comments

@@ @@ -24,29 +24,30 @@ @@
              <li>
                <a href="${h.url('new_repos_group')}" class="btn btn-success btn-xs"><i class="icon-plus"></i> ${_('Add Repository Group')}</a>
              </li>
             %endif
         </ul>
     </div>
     <!-- end box / title -->
     <div class="table">
         <table id="datatable_list_wrap"></table>
     </div>
 </div>
 <script>
   var data = ${c.data|n};
   var myDataTable = $("#datatable_list_wrap").DataTable({
         data: data.records,
         columns: [
             {data: "raw_name", visible: false, searchable: false},
             {data: "group_name", orderData: 0, title: "${_('Name')}"},
             {data: "desc", title: "${_('Description')}", searchable: false},
             {data: "repos", title: "${_('Number of Top-level Repositories')}", searchable: false},
             {data: "owner", title: "${_('Owner')}", searchable: false},
             {data: "action", title: "${_('Action')}", sortable: false, searchable: false}
         ],
         drawCallback: updateRowCountCallback($("#repo_group_count")),
         dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
         pageLength: 100
     });
 </script>
 </%def>

kallithea/templates/admin/repos/repos.html

➞

Show inline comments

@@ @@ -23,29 +23,30 @@ @@
           </li>
          %endif
         </ul>
     </div>
     <div class="table">
         <table id="datatable_list_wrap"></table>
     </div>
 </div>
 <script>
   var data = ${c.data|n};
   var myDataTable = $("#datatable_list_wrap").DataTable({
         data: data.records,
         columns: [
             {data: "raw_name", visible: false, searchable: false},
             {data: "name", orderData: 1, title: "${_('Name')}"},
             {data: "desc", title: "${_('Description')}", searchable: false},
             {data: "last_rev_raw", visible: false, searchable: false},
             {data: "last_changeset", orderData: 4, title: "${_('Tip')}", searchable: false},
             {data: "owner", title: "${_('Owner')}", searchable: false},
             {data: "state", title: "${_('State')}", searchable: false},
             {data: "action", title: "${_('Action')}", sortable: false, searchable: false}
         ],
         drawCallback: updateRowCountCallback($("#repo_count")),
         dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
         pageLength: 100
     });
 </script>
 </%def>

kallithea/templates/admin/user_groups/user_groups.html

➞

Show inline comments

@@ @@ -24,28 +24,29 @@ @@
             <a href="${h.url('new_users_group')}" class="btn btn-success btn-sm"><i class="icon-plus"></i> ${_('Add User Group')}</a>
           </li>
         %endif
         </ul>
     </div>
     <!-- end box / title -->
     <div class="table">
         <table id="datatable_list_wrap"></table>
     </div>
 </div>
 <script>
     var data = ${c.data|n};
     var $dataTable = $("#datatable_list_wrap").DataTable({
         data: data.records,
         columns: [
             {data: "raw_name", visible: false, searchable: false},
             {data: "group_name", title: "${_('Name')}", orderData: 0},
             {data: "desc", title: "${_('Description')}", searchable: false},
             {data: "members", title: "${_('Members')}", searchable: false},
             {data: "active", title: "${_('Active')}", searchable: false, 'sType': 'str'},
             {data: "owner", title: "${_('Owner')}", searchable: false},
             {data: "action", title: "${_('Action')}", searchable: false, sortable: false}
         ],
         order: [[1, "asc"]],
         dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
         pageLength: 100
     });
 </script>
 </%def>

kallithea/templates/admin/users/users.html

➞

Show inline comments

@@ @@ -27,29 +27,30 @@ @@
     <!-- end box / title -->
     <div class="table">
         <table id="datatable_list_wrap"></table>
     </div>
 </div>
 <script>
     var data = ${c.data|n};
     var $dataTable = $("#datatable_list_wrap").DataTable({
         data: data.records,
         columns: [
             {data: "gravatar", sortable: false, searchable: false},
             {data: "username", title: "${_('Username')}"},
             {data: "firstname", title: "${_('First Name')}"},
             {data: "lastname", title: "${_('Last Name')}"},
             {data: "last_login_raw", visible: false, searchable: false},
             {data: "last_login", title: "${_('Last Login')}", orderData: 4, searchable: false},
             {data: "active", title: "${_('Active')}", searchable: false, 'sType': 'str'},
             {data: "admin", title: "${_('Admin')}", searchable: false, 'sType': 'str'},
             {data: "extern_type", title: "${_('Auth Type')}", searchable: false},
             {data: "action", title: "${_('Action')}", searchable: false, sortable: false}
         ],
         order: [[1, "asc"]],
         drawCallback: updateRowCountCallback($("#user_count")),
         dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
         pageLength: 100
     });
 </script>
 </%def>

kallithea/templates/index_base.html

➞

Show inline comments

@@ @@ -22,87 +22,91 @@ @@
                     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'can write into group index page')
                     group_write = h.HasRepoGroupPermissionAny('group.write')(gr_name, 'can write into group index page')
                 %>
                 %if h.HasPermissionAny('hg.admin','hg.create.repository')() or (group_admin or (group_write and create_on_write)):
                   %if c.group:
                         <a href="${h.url('new_repo',parent_group=c.group.group_id)}" class="btn btn-default btn-xs"><i class="icon-plus"></i> ${_('Add Repository')}</a>
                         %if h.HasPermissionAny('hg.admin')() or h.HasRepoGroupPermissionAny('group.admin')(c.group.group_name):
                             <a href="${h.url('new_repos_group', parent_group=c.group.group_id)}" class="btn btn-default btn-xs"><i class="icon-plus"></i> ${_('Add Repository Group')}</a>
                         %endif
                   %else:
                     <a href="${h.url('new_repo')}" class="btn btn-default btn-xs"><i class="icon-plus"></i> ${_('Add Repository')}</a>
                     %if h.HasPermissionAny('hg.admin')():
                         <a href="${h.url('new_repos_group')}" class="btn btn-default btn-xs"><i class="icon-plus"></i> ${_('Add Repository Group')}</a>
                     %endif
                   %endif
                 %endif
                 %if c.group and h.HasRepoGroupPermissionAny('group.admin')(c.group.group_name):
                     <a href="${h.url('edit_repo_group',group_name=c.group.group_name)}" title="${_('You have admin right to this group, and can edit it')}" class="btn btn-default btn-xs"><i class="icon-pencil"></i> ${_('Edit Repository Group')}</a>
                 %endif
                 </li>
               </ul>
             %endif
         </div>
         <!-- end box / title -->
         %if c.groups:
         <div class="table">
            % if c.groups:
             <div id='groups_list_wrap'>
               <table id="groups_list">
                   <thead>
                       <tr>
                           <th class="left">${_('Repository Group Name')}</th>
                           <th class="left">${_('Description')}</th>
                           ##<th class="left">${_('Number of Repositories')}</th>
                       </tr>
                   </thead>
                   ## REPO GROUPS
                   % for gr in c.groups:
                     <tr>
                         <td>
                             <div class="dt_repo">
                               <a href="${url('repos_group_home',group_name=gr.group_name)}">
                                 <i class="icon-folder"></i>
                                 <span class="dt_repo_name">${gr.name}</span>
                               </a>
                             </div>
                         </td>
                         <td>${h.urlify_text(gr.group_description, stylize=c.visual.stylify_metatags)}</td>
                         ## this is commented out since for multi nested repos can be HEAVY!
                         ## in number of executed queries during traversing uncomment at will
                         ##<td><b>${gr.repositories_recursive_count}</b></td>
                     </tr>
                   % endfor
               </table>
             </div>
-            <hr/>
+        </div>
             % endif
+        <div class="table">
             <table id="repos_list_wrap"></table>
         </div>
     </div>
       <script>
         $('#groups_list').DataTable({pageLength: 100});
         $('#groups_list').DataTable({
             dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
             pageLength: 100
         });
         var data = ${c.data|n},
             $dataTable = $("#repos_list_wrap").DataTable({
                 data: data.records,
                 columns: [
                     {data: "raw_name", visible: false, searchable: false},
                     {title: "${_('Repository Name')}", data: "name", orderData: 1, render: {
                         filter: function(data) {
                             return $(data).find(".dt_repo_name").text();
+                        }
                     }},
                     {data: "desc", title: "${_('Description')}", searchable: false},
                     {data: "last_change_iso", visible: false, searchable: false},
                     {data: "last_change", title: "${_('Last Change')}", orderData: 4, searchable: false},
                     {data: "last_rev_raw", visible: false, searchable: false},
                     {data: "last_changeset", title: "${_('Tip')}", orderData: 6, searchable: false},
                     {data: "owner", title: "${_('Owner')}", searchable: false},
                     {data: "atom", sortable: false}
                 ],
                 order: [[1, "asc"]],
                 dom: '<"dataTables_left"f><"dataTables_right"ilp>t',
                 pageLength: 100
             });
       </script>

0 comments (0 inline, 0 general)