main-page: fixed jumping of text in grid loading.

- new logic starts with everything hidden and global loading marker
- show only those grida that contain data.

rhodecode/public/css/tables.less

@@ -1,542 +1,553 b''
 
 // tables.less
 // For use in RhodeCode application tables;
 // see style guide documentation for guidelines.
 
 // TABLES
 
 .rctable,
 table.rctable,
 table.dataTable {
     clear:both;
     width: 100%;
     margin: 0 auto @padding;
     padding: 0;
     vertical-align: baseline;
     line-height:1.5em;
     border: none;
     outline: none;
     border-collapse: collapse;
     border-spacing: 0;
     color: @grey2;
 
     b {
         font-weight: normal;
     }
 
     em {
         font-weight: bold;
         font-style: normal;
     }
 
     .td-user {
       .rc-user {
         white-space: nowrap;
       }
     }
 
     .td-email {
       white-space: nowrap;
     }
 
     th,
     td {
         height: auto;
         max-width: 20%;
         padding: .65em 0 .65em 1em;
         vertical-align: middle;
         border-bottom: @border-thickness solid @grey5;
         white-space: normal;
 
         &.td-radio,
         &.td-checkbox {
             padding-right: 0;
             text-align: center;
 
             input {
                 margin: 0 1em;
             }
         }
 
         &.truncate-wrap {
             white-space: nowrap !important;
         }
 
         pre {
             margin: 0;
         }
 
         .show_more {
             height: inherit;
         }
     }
 
     .expired td {
         background-color: @grey7;
     }
     .inactive td {
         background-color: @grey6;
     }
     th {
         text-align: left;
         font-weight: @text-semibold-weight;
         font-family: @text-semibold;
     }
 
     .hl {
         td {
             background-color: lighten(@alert4,25%);
         }
     }
 
 // Special Data Cell Types
 // See style guide for desciptions and examples.
 
     td {
 
         &.user {
             padding-left: 1em;
         }
 
         &.td-rss {
             width: 20px;
             min-width: 0;
             margin: 0;
         }
 
         &.quick_repo_menu {
             width: 15px;
             text-align: center;
 
             &:hover {
                 background-color: @grey5;
             }
         }
 
         &.td-icon {
             min-width: 20px;
             width: 20px;
         }
 
         &.td-hash {
             min-width: 80px;
             width: 200px;
 
             .obsolete {
                 text-decoration: line-through;
                 color: lighten(@grey2,25%);
             }
         }
 
         &.td-sha {
             white-space: nowrap;
         }
 
         &.td-graphbox {
             width: 100px;
             max-width: 100px;
             min-width: 100px;
         }
 
         &.td-time {
             width: 160px;
             white-space: nowrap;
         }
 
         &.annotate{
             padding-right: 0;
 
             div.annotatediv{
                 margin: 0 0.7em;
             }
         }
 
         &.tags-col {
             padding-right: 0;
         }
 
         &.td-description {
             min-width: 350px;
 
             &.truncate, .truncate-wrap {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 max-width: 350px;
             }
         }
 
         &.td-grid-name {
             white-space: nowrap;
             min-width: 300px;
         }
 
         &.td-componentname {
             white-space: nowrap;
         }
 
         &.td-name {
 
         }
 
         &.td-journalaction {
             min-width: 300px;
 
             .journal_action_params {
                 // waiting for feedback
             }
         }
 
         &.td-active {
             padding-left: .65em;
         }
 
         &.td-issue-tracker-name {
             width: 180px;
             input {
                 width: 180px;
             }
 
         }
 
         &.td-issue-tracker-regex {
             white-space: nowrap;
 
             min-width: 300px;
             input {
                 min-width: 300px;
             }
 
         }
 
         &.td-url {
             white-space: nowrap;
         }
 
         &.td-comments {
             min-width: 3em;
         }
 
         &.td-buttons {
             padding: .3em 0;
         }
         &.td-align-top {
             vertical-align: text-top
         }
         &.td-action {
             // this is for the remove/delete/edit buttons
             padding-right: 0;
             min-width: 95px;
             text-transform: capitalize;
 
             i {
                 display: none;
             }
         }
 
         // TODO: lisa: this needs to be cleaned up with the buttons
         .grid_edit,
         .grid_delete {
             display: inline-block;
             margin: 0 @padding/3 0 0;
             font-family: @text-light;
 
             i {
                 display: none;
             }
         }
 
         .grid_edit + .grid_delete {
             border-left: @border-thickness solid @grey5;
             padding-left: @padding/2;
         }
 
         &.td-compare {
 
             input {
                 margin-right: 1em;
             }
 
             .compare-radio-button {
                 margin: 0 1em 0 0;
             }
 
 
         }
 
         &.td-tags {
             padding: .5em 1em .5em 0;
             width: 140px;
 
             .tag {
                 margin: 1px;
                 float: left;
             }
         }
 
         .icon-svn, .icon-hg, .icon-git {
             font-size: 1.4em;
         }
 
         &.collapse_commit,
         &.expand_commit {
             padding-right: 0;
             padding-left: 1em;
             cursor: pointer;
             width: 20px;
         }
     }
 
     .perm_admin_row {
         color: @grey4;
         background-color: @grey6;
     }
 
     .noborder {
         border: none;
 
         td {
             border: none;
         }
     }
 }
 .rctable.audit-log {
     td {
                 vertical-align: top;
     }
 }
 
 // TRUNCATING
 // TODO: lisaq: should this possibly be moved out of tables.less?
 // for truncated text
 // used inside of table cells and in code block headers
 .truncate-wrap {
     white-space: nowrap !important;
 
     //truncated text
     .truncate {
         max-width: 450px;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
         -ms-text-overflow: ellipsis;
 
         &.autoexpand {
             width: 120px;
             margin-right: 200px;
         }
     }
     &:hover .truncate.autoexpand {
         overflow: visible;
     }
 
     .tags-truncate {
         width: 150px;
         height: 22px;
         overflow: hidden;
 
         .tag {
             display: inline-block;
         }
 
         &.truncate {
             height: 22px;
             max-height:2em;
             width: 140px;
         }
     }
 }
 
 .apikeys_wrap {
     margin-bottom: @padding;
 
     table.rctable td:first-child {
         width: 340px;
     }
 }
 
 
 
 // SPECIAL CASES
 
 // Repository Followers
 table.rctable.followers_data {
     width: 75%;
     margin: 0;
 }
 
 // Repository List
 // Group Members List
 table.rctable.group_members,
 table#repo_list_table {
     min-width: 600px;
 }
 
+#no_grid_data {
+    text-align: center;
+}
+
+#grid_data_loading {
+    text-align: center;
+    font-weight: 600;
+    font-size: 16px;
+    padding: 80px 20px;
+}
+
 // Keyboard mappings
 table.keyboard-mappings {
     th {
         text-align: left;
         font-weight: @text-semibold-weight;
         font-family: @text-semibold;
     }
 }
 
 // Branches, Tags, and Bookmarks
 #obj_list_table.dataTable {
     td.td-time {
         padding-right: 1em;
     }
 }
 
 // User Admin
 .rctable.useremails,
 .rctable.account_emails {
     .tag,
     .btn {
         float: right;
     }
     .btn { //to line up with tags
         margin-right: 1.65em;
     }
 }
 
 // User List
 #user_list_table {
 
     td.td-user {
         min-width: 100px;
     }
 }
 
 // Pull Request List Table
 #pull_request_list_table.dataTable {
 
     //TODO: lisa: This needs to be removed once the description is adjusted
     //            for using an expand_commit button (see issue 765)
      td {
          vertical-align: middle;
      }
 }
 
 // Settings (no border)
 table.rctable.dl-settings {
     td {
         border: none;
         vertical-align: baseline;
     }
 }
 
 
 // Statistics
 table.trending_language_tbl {
     width: 100%;
     line-height: 1em;
 
     td div {
         overflow: visible;
     }
 }
 
 .trending_language_tbl, .trending_language_tbl td {
     border: 0;
     margin: 0;
     padding: 0;
     background: transparent;
 }
 
 .trending_language_tbl, .trending_language_tbl tr {
     border-spacing: 0 3px;
 }
 
 .trending_language {
     position: relative;
     overflow: hidden;
     color: @text-color;
     width: 400px;
 
     .lang-bar {
         z-index: 1;
         overflow: hidden;
         background-color: @rcblue;
         color: #FFF;
         text-decoration: none;
     }
 
 }
 
 // Changesets
 #changesets.rctable {
     th {
         padding: 0 1em 0.65em 0;
     }
 
     // td must be fixed height for graph
     td {
         height: 32px;
         padding: 0 1em 0 0;
         vertical-align: middle;
         white-space: nowrap;
 
         &.td-description {
             white-space: normal;
         }
 
         &.expand_commit {
             padding-right: 0;
             cursor: pointer;
             width: 20px;
         }
     }
 }
 
 // Compare
 table.compare_view_commits {
     margin-top: @space;
 
     td.td-time {
         padding-left: .5em;
     }
 
     // special case to not show hover actions on hidden indicator
     tr.compare_select_hidden:hover {
         cursor: inherit;
 
         td {
             background-color: inherit;
         }
     }
 
     tr:hover {
         cursor: pointer;
 
         td {
             background-color: lighten(@alert4,25%);
         }
     }
 
 
 }
 
 .file_history {
     td.td-actions {
         text-align: right;
     }
 }
 
 
 // Gist List
 #gist_list_table {
     td {
         vertical-align: middle;
 
         div{
             display: inline-block;
             vertical-align: middle;
         }
 
         img{
             vertical-align: middle;
         }
     }
 }

rhodecode/templates/index_base.mako

@@ -1,223 +1,231 b''
 <%inherit file="/base/base.mako"/>
 
 
 <%def name="menu_bar_subnav()">
   % if c.repo_group:
     ${self.repo_group_menu(active='home')}
   % endif
 </%def>
 
 
 <%def name="main()">
    <div class="box">
         <!-- box / title -->
         <div class="title">
 
         </div>
+
         <!-- end box / title -->
         <div id="no_grid_data" class="table" style="display: none">
-            <h2 class="no-object-border">
+            <h2>
                  ${_('No repositories or repositories groups exists here.')}
             </h2>
         </div>
 
+        <div id="grid_data_loading" class="table" style="display: none">
+            <i class="icon-spin animate-spin"></i>
+            ${_('loading...')}
+        </div>
+
         <div class="table">
-            <div id="groups_list_wrap" style="min-height: 200px;">
+            <div id="groups_list_wrap" style="min-height: 200px;display: none">
                 <table id="group_list_table" class="display" style="width: 100%;"></table>
             </div>
         </div>
 
         <div class="table">
-            <div id="repos_list_wrap" style="min-height: 200px;">
+            <div id="repos_list_wrap" style="min-height: 200px;display: none">
                 <table id="repo_list_table" class="display" style="width: 100%;"></table>
             </div>
         </div>
 
     </div>
+
     <script>
     $(document).ready(function () {
+        var noRepoData = null;
+        var noGroupData = null;
+        var $gridDataLoading = $('#grid_data_loading');
 
-        // repo group list
+        // global show loading of hidden grids
+        $(document).on('preInit.dt', function (e, settings) {
+            $gridDataLoading.show();
+        });
+
+        ## repo group list
         var $groupListTable = $('#group_list_table');
 
+        $groupListTable.on('xhr.dt', function (e, settings, json, xhr) {
+            $gridDataLoading.hide();
+        });
         $groupListTable.DataTable({
             processing: true,
             serverSide: true,
             ajax: {
                 "url": "${h.route_path('main_page_repo_groups_data')}",
                 "data": function (d) {
                     % if c.repo_group:
                         d.repo_group_id = ${c.repo_group.group_id}
                     % endif
                 }
             },
             dom: 'rtp',
             pageLength: ${c.visual.dashboard_items},
             order: [[0, "asc"]],
             columns: [
                 {
                     data: {
                         "_": "name",
                         "sort": "name"
                     }, title: "${_('Name')}", className: "truncate-wrap td-grid-name"
                 },
                 {
                     data: 'menu', "bSortable": false, className: "quick_repo_menu"
                 },
                 {
                     data: {
                         "_": "desc",
                         "sort": "desc"
                     }, title: "${_('Description')}", className: "td-description"
                 },
                 {
                     data: {
                         "_": "last_change",
                         "sort": "last_change",
                         "type": Number
                     }, title: "${_('Last Change')}", className: "td-time"
                 },
                 {
                     data: {
                         "_": "last_changeset",
                         "sort": "last_changeset_raw",
                         "type": Number
                     }, title: "", className: "td-hash", orderable: false
                 },
                 {
                     data: {
                         "_": "owner",
                         "sort": "owner"
                     }, title: "${_('Owner')}", className: "td-user"
                 }
             ],
             language: {
                 paginate: DEFAULT_GRID_PAGINATION,
                 sProcessing: _gettext('loading...'),
                 emptyTable: _gettext("No repository groups present.")
             },
             "drawCallback": function (settings, json) {
+
                 // hide grid if it's empty
                 if (settings.fnRecordsDisplay() === 0) {
-                    $('#groups_list_wrap').hide();
+                    noGroupData = true;
                     // both hidden, show no-data
-                    if ($('#repos_list_wrap').is(':hidden')) {
+                    if (noRepoData === true) {
                         $('#no_grid_data').show();
                     }
                 } else {
                     $('#groups_list_wrap').show();
                 }
 
                 timeagoActivate();
                 tooltipActivate();
                 quick_repo_menu();
                 // hide pagination for single page
                 if (settings._iDisplayLength >= settings.fnRecordsDisplay()) {
                     $(settings.nTableWrapper).find('.dataTables_paginate').hide();
                 }
 
             },
         });
 
-        $groupListTable.on('xhr.dt', function (e, settings, json, xhr) {
-            $groupListTable.css('opacity', 1);
-        });
 
-        $groupListTable.on('preXhr.dt', function (e, settings, data) {
-            $groupListTable.css('opacity', 0.3);
-        });
-
-
-        ##  // repo list
+        ##  repo list
         var $repoListTable = $('#repo_list_table');
 
+        $repoListTable.on('xhr.dt', function (e, settings, json, xhr) {
+            $gridDataLoading.hide();
+        });
         $repoListTable.DataTable({
             processing: true,
             serverSide: true,
             ajax: {
                 "url": "${h.route_path('main_page_repos_data')}",
                 "data": function (d) {
                     % if c.repo_group:
                         d.repo_group_id = ${c.repo_group.group_id}
                     % endif
                 }
             },
             order: [[0, "asc"]],
             dom: 'rtp',
             pageLength: ${c.visual.dashboard_items},
             columns: [
                 {
                     data: {
                         "_": "name",
                         "sort": "name"
                     }, title: "${_('Name')}", className: "truncate-wrap td-grid-name"
                 },
                 {
                     data: 'menu', "bSortable": false, className: "quick_repo_menu"
                 },
                 {
                     data: {
                         "_": "desc",
                         "sort": "desc"
                     }, title: "${_('Description')}", className: "td-description"
                 },
                 {
                     data: {
                         "_": "last_change",
                         "sort": "last_change",
                         "type": Number
                     }, title: "${_('Last Change')}", className: "td-time"
                 },
                 {
                     data: {
                         "_": "last_changeset",
                         "sort": "last_changeset_raw",
                         "type": Number
                     }, title: "${_('Commit')}", className: "td-hash", orderable: false
                 },
                  {
                     data: {
                         "_": "owner",
                         "sort": "owner"
                     }, title: "${_('Owner')}", className: "td-user"
                 }
             ],
             language: {
                 paginate: DEFAULT_GRID_PAGINATION,
                 sProcessing: _gettext('loading...'),
                 emptyTable: _gettext("No repositories present.")
             },
             "drawCallback": function (settings, json) {
+
                 // hide grid if it's empty
                 if (settings.fnRecordsDisplay() == 0) {
-                    $('#repos_list_wrap').hide()
+                    noRepoData = true;
+
                     // both hidden, show no-data
-                    if ($('#groups_list_wrap').is(':hidden')) {
+                    if (noGroupData === true) {
                         $('#no_grid_data').show()
                     }
                 } else {
                     $('#repos_list_wrap').show()
                 }
 
                 timeagoActivate();
                 tooltipActivate();
                 quick_repo_menu();
                 // hide pagination for single page
                 if (settings._iDisplayLength >= settings.fnRecordsDisplay()) {
                     $(settings.nTableWrapper).find('.dataTables_paginate').hide();
                 }
 
             },
         });
 
-        $repoListTable.on('xhr.dt', function (e, settings, json, xhr) {
-            $repoListTable.css('opacity', 1);
-        });
-
-        $repoListTable.on('preXhr.dt', function (e, settings, data) {
-            $repoListTable.css('opacity', 0.3);
-        });
-
     });
     </script>
 </%def>