datagrids: don't expand over the site width.

rhodecode/public/css/tables.less

@@ -1,504 +1,504 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;
     }
 
     th,
     td {
         height: auto;
         max-width: 20%;
         padding: .65em 1em .65em 0;
         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;
     }
 
     .td-radio + .td-owner {
         padding-left: 1em;
     }
 
 
     th {
         text-align: left;
         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-hash {
             min-width: 80px;
             width: 200px;
 
             .obsolete {
                 text-decoration: line-through;
                 color: lighten(@grey2,25%);
             }
         }
 
         &.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: 450px;
+                max-width: 350px;
             }
         }
 
         &.td-componentname {
             white-space: nowrap;
         }
 
         &.td-name {
 
         }
 
         &.td-journalaction {
             min-width: 300px;
 
             .journal_action_params {
                 // waiting for feedback
             }
         }
 
         &.td-active {
             padding-left: .65em;
         }
 
         &.td-url {
             white-space: nowrap;
         }
 
         &.td-comments {
             min-width: 3em;
         }
 
         &.td-buttons {
             padding: .3em 0;
         }
 
         &.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;
         }
     }
 
     .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;
 }
 
 // Keyboard mappings
 table.keyboard-mappings {
     th {
         text-align: left;
         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;
     width: 100%;
     height: 19px;
     overflow: hidden;
     background-color: @grey6;
 
     span, b{
         position: absolute;
         display: block;
         height: 12px;
         margin-bottom: 0px;
         white-space: pre;
         padding: floor(@basefontsize/4);
         top: 0;
         left: 0;
     }
 
     span{
         color: @text-color;
         z-index: 0;
         min-width: 20px;
     }
 
     b {
         z-index: 1;
         overflow: hidden;
         background-color: @rcblue;
         color: #FFF;
         text-decoration: none;
     }
 
 }
 
 // Changesets
 #changesets.rctable {
 
     // 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;
         }
     }
 }
 
 // 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,141 +1,141 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="main()">
    <div class="box">
         <!-- box / title -->
         <div class="title">
             <div class="block-left breadcrumbs">
               ${self.breadcrumbs()}
               <span id="match_container" style="display:none"><span id="match_count">0</span> ${_('matches')}</span>
             </div>
             %if c.rhodecode_user.username != h.DEFAULT_USER:
               <div class="block-right">
                 <%
                     is_admin = h.HasPermissionAny('hg.admin')('can create repos index page')
                     create_repo = h.HasPermissionAny('hg.create.repository')('can create repository index page')
                     create_repo_group = h.HasPermissionAny('hg.repogroup.create.true')('can create repository groups index page')
                     create_user_group = h.HasPermissionAny('hg.usergroup.create.true')('can create user groups index page')
 
                     gr_name = c.repo_group.group_name if c.repo_group else None
                     # create repositories with write permission on group is set to true
                     create_on_write = h.HasPermissionAny('hg.create.write_on_repogroup.true')()
                     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'group admin index page')
                     group_write = h.HasRepoGroupPermissionAny('group.write')(gr_name, 'can write into group index page')
                 %>
 
                 %if not c.repo_group:
                     ## no repository group context here
                     %if is_admin or create_repo:
                         <a href="${h.route_path('repo_new')}" class="btn btn-small btn-success btn-primary">${_('Add Repository')}</a>
                     %endif
 
                     %if is_admin or create_repo_group:
                         <a href="${h.route_path('repo_group_new')}" class="btn btn-small btn-default">${_(u'Add Repository Group')}</a>
                     %endif
                 %else:
                     ##we're inside other repository group other terms apply
                     %if is_admin or group_admin or (group_write and create_on_write):
                         <a href="${h.route_path('repo_new',_query=dict(parent_group=c.repo_group.group_id))}" class="btn btn-small btn-success btn-primary">${_('Add Repository')}</a>
                     %endif
                     %if is_admin or group_admin:
                         <a href="${h.route_path('repo_group_new',_query=dict(parent_group=c.repo_group.group_id))}" class="btn btn-small btn-default">${_(u'Add Repository Group')}</a>
                     %endif
                     %if is_admin or group_admin:
                         <a href="${h.route_path('edit_repo_group',repo_group_name=c.repo_group.group_name)}" title="${_('You have admin right to this group, and can edit it')}" class="btn btn-small btn-primary">${_('Edit Repository Group')}</a>
                     %endif
                 %endif
               </div>
             %endif
         </div>
         <!-- end box / title -->
         <div class="table">
             <div id="groups_list_wrap">
-                <table id="group_list_table" class="display"></table>
+                <table id="group_list_table" class="display" style="width: 100%"></table>
             </div>
         </div>
 
         <div class="table">
             <div id="repos_list_wrap">
-                <table id="repo_list_table" class="display"></table>
+                <table id="repo_list_table" class="display" style="width: 100%"></table>
             </div>
         </div>
 
        ## no repository groups and repos present, show something to the users
        % if c.repo_groups_data == '[]' and c.repos_data == '[]':
         <div class="table">
             <h2 class="no-object-border">
                  ${_('No repositories or repositories groups exists here.')}
             </h2>
         </div>
        % endif
 
     </div>
     <script>
       $(document).ready(function() {
 
         // repo group list
         % if c.repo_groups_data != '[]':
         $('#group_list_table').DataTable({
           data: ${c.repo_groups_data|n},
           dom: 'rtp',
           pageLength: ${c.visual.dashboard_items},
           order: [[ 0, "asc" ]],
           columns: [
              { data: {"_": "name",
                       "sort": "name_raw"}, title: "${_('Name')}", className: "td-componentname" },
              { data: 'menu', "bSortable": false, className: "quick_repo_menu" },
              { data: {"_": "desc",
                       "sort": "desc"}, title: "${_('Description')}", className: "td-description" },
              { data: {"_": "last_change",
                       "sort": "last_change_raw",
                       "type": Number}, title: "${_('Last Change')}", className: "td-time" },
              { data: {"_": "owner",
                       "sort": "owner"}, title: "${_('Owner')}", className: "td-user" }
           ],
           language: {
             paginate: DEFAULT_GRID_PAGINATION,
             emptyTable: _gettext("No repository groups available yet.")
           },
           "drawCallback": function( settings, json ) {
               timeagoActivate();
               quick_repo_menu();
           }
         });
         % endif
 
         // repo list
         % if c.repos_data != '[]':
         $('#repo_list_table').DataTable({
           data: ${c.repos_data|n},
           dom: 'rtp',
           order: [[ 0, "asc" ]],
           pageLength: ${c.visual.dashboard_items},
           columns: [
              { data: {"_": "name",
                       "sort": "name_raw"}, title: "${_('Name')}", className: "truncate-wrap td-componentname" },
              { data: 'menu', "bSortable": false, className: "quick_repo_menu" },
              { data: {"_": "desc",
                       "sort": "desc"}, title: "${_('Description')}", className: "td-description" },
              { data: {"_": "last_change",
                       "sort": "last_change_raw",
                       "type": Number}, title: "${_('Last Change')}", className: "td-time" },
              { data: {"_": "last_changeset",
                       "sort": "last_changeset_raw",
                       "type": Number}, title: "${_('Commit')}", className: "td-hash" },
              { data: {"_": "owner",
                       "sort": "owner"}, title: "${_('Owner')}", className: "td-user" }
           ],
           language: {
               paginate: DEFAULT_GRID_PAGINATION,
               emptyTable: _gettext("No repositories available yet.")
           },
           "drawCallback": function( settings, json ) {
               timeagoActivate();
               quick_repo_menu();
           }
         });
         % endif
 
       });
     </script>
 </%def>