pull-requests: fixed layout to be more similar to the designed one.

rhodecode/public/css/buttons.less

@@ -1,424 +1,444 b''
 
 
 //BUTTONS
 button,
 .btn,
 input[type="button"] {
     -webkit-appearance: none;
     display: inline-block;
     margin: 0 @padding/3 0 0;
     padding: @button-padding;
     text-align: center;
     font-size: @basefontsize;
     line-height: 1em;
     font-family: @text-light;
     text-decoration: none;
     text-shadow: none;
     color: @grey2;
     background-color: white;
     background-image: none;
     border: none;
     .border ( @border-thickness-buttons, @grey5 );
     .border-radius (@border-radius);
     cursor: pointer;
     white-space: nowrap;
     -webkit-transition: background .3s,color .3s;
        -moz-transition: background .3s,color .3s;
          -o-transition: background .3s,color .3s;
             transition: background .3s,color .3s;
             box-shadow: @button-shadow;
     -webkit-box-shadow: @button-shadow;
 
 
 
     a {
         display: block;
         margin: 0;
         padding: 0;
         color: inherit;
         text-decoration: none;
 
         &:hover {
             text-decoration: none;
         }
     }
 
     &:focus,
     &:active {
         outline:none;
     }
     &:hover {
         color: @rcdarkblue;
         background-color: @white;
         .border ( @border-thickness, @grey4 );
     }
 
     .icon-remove-sign {
         display: none;
     }
 
     //disabled buttons
     //last; overrides any other styles
     &:disabled {
         opacity: .7;
         cursor: auto;
         background-color: white;
         color: @grey4;
         text-shadow: none;
     }
 
     &.no-margin {
         margin: 0 0 0 0;
     }
 
 }
 
 
 .btn-default {
     border: @border-thickness solid @grey5;
     background-image: none;
     color: @grey2;
 
     a {
         color: @grey2;
     }
 
     &:hover,
     &.active {
         color: @rcdarkblue;
         background-color: @white;
         .border ( @border-thickness, @grey4 );
 
         a {
             color: @grey2;
         }
     }
     &:disabled {
         .border ( @border-thickness-buttons, @grey5 );
         background-color: transparent;
     }
 }
 
 .btn-primary,
 .btn-small, /* TODO: anderson: remove .btn-small to not mix with the new btn-sm */
 .btn-success {
     .border ( @border-thickness, @rcblue );
     background-color: @rcblue;
     color: white;
 
     a {
         color: white;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @rcdarkblue );
         color: white;
         background-color: @rcdarkblue;
 
         a {
             color: white;
         }
     }
     &:disabled {
         background-color: @rcblue;
     }
 }
 
 .btn-secondary {
     &:extend(.btn-default);
 
     background-color: white;
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-default:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
     }
 
     &:disabled {
         color: @rcblue;
         background-color: white;
     }
 }
 
 .btn-warning,
 .btn-danger,
 .revoke_perm,
 .btn-x,
 .form .action_button.btn-x   {
     .border ( @border-thickness, @alert2 );
     background-color: white;
     color: @alert2;
 
     a {
         color: @alert2;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @alert2 );
         color: white;
         background-color: @alert2;
 
         a {
             color: white;
         }
     }
 
     i {
         display:none;
     }
 
     &:disabled {
         background-color: white;
         color: @alert2;
     }
 }
 
 .btn-approved-status {
     .border ( @border-thickness, @alert1 );
     background-color: white;
     color: @alert1;
 
 }
 
 .btn-rejected-status {
     .border ( @border-thickness, @alert2 );
     background-color: white;
     color: @alert2;
 }
 
 .btn-sm,
 .btn-mini,
 .field-sm .btn {
     padding: @padding/3;
 }
 
 .btn-xs {
     padding: @padding/4;
 }
 
 .btn-lg {
     padding: @padding * 1.2;
 }
 
 .btn-group {
     display: inline-block;
     .btn {
         float: left;
         margin: 0 0 0 -1px;
     }
 }
 
 .btn-link {
     background: transparent;
     border: none;
     padding: 0;
     color: @rcblue;
 
     &:hover {
         background: transparent;
         border: none;
         color: @rcdarkblue;
     }
 
     //disabled buttons
     //last; overrides any other styles
     &:disabled {
         opacity: .7;
         cursor: auto;
         background-color: white;
         color: @grey4;
         text-shadow: none;
     }
 
     // TODO: johbo: Check if we can avoid this, indicates that the structure
     // is not yet good.
     // lisa: The button CSS reflects the button HTML; both need a cleanup.
     &.btn-danger {
         color: @alert2;
 
         &:hover {
             color: darken(@alert2,30%);
         }
 
         &:disabled {
             color: @alert2;
         }
     }
 }
 
 .btn-social {
     &:extend(.btn-default);
     margin: 5px 5px 5px 0px;
     min-width: 160px;
 }
 
 // TODO: johbo: check these exceptions
 
 .links {
 
     .btn + .btn {
         margin-top: @padding;
     }
 }
 
 
 .action_button {
     display:inline;
     margin: 0;
     padding: 0 1em 0 0;
     font-size: inherit;
     color: @rcblue;
     border: none;
     border-radius: 0;
     background-color: transparent;
 
     &.last-item {
         border: none;
         padding: 0 0 0 0;
     }
 
     &:last-child {
         border: none;
         padding: 0 0 0 0;
     }
 
     &:hover {
         color: @rcdarkblue;
         background-color: transparent;
         border: none;
     }
 }
 .grid_delete {
     .action_button {
         border: none;
     }
 }
 
 
 // TODO: johbo: Form button tweaks, check if we can use the classes instead
 input[type="submit"] {
     &:extend(.btn-primary);
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-primary:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
 
         &:disabled {
             color: @rcblue;
             background-color: transparent;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @rcblue );
         background-color: @rcblue;
         color: white;
         opacity: 0.5;
     }
 }
 
 input[type="reset"] {
     &:extend(.btn-default);
 
     // TODO: johbo: Check if this tweak can be avoided.
     background: transparent;
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-default:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
 
         &:disabled {
             border: none;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @rcblue );
         background-color: white;
         color: @rcblue;
     }
 }
 
 input[type="submit"],
 input[type="reset"] {
     &.btn-danger {
         &:extend(.btn-danger);
 
         &:focus {
             outline: 0;
         }
 
         &:hover {
             &:extend(.btn-danger:hover);
         }
 
         &.btn-link {
             &:extend(.btn-link);
             color: @alert2;
 
             &:hover {
                 color: darken(@alert2,30%);
             }
         }
 
         &:disabled {
             color: @alert2;
             background-color: white;
         }
     }
     &.btn-danger-action {
         .border ( @border-thickness, @alert2 );
         background-color: @alert2;
         color: white;
 
         a {
             color: white;
         }
 
         &:hover {
             background-color: darken(@alert2,20%);
         }
 
         &.active {
             .border ( @border-thickness, @alert2 );
             color: white;
             background-color: @alert2;
 
             a {
                 color: white;
             }
         }
 
         &:disabled {
             background-color: white;
             color: @alert2;
         }
     }
 }
 
+
+.button-links {
+    float: left;
+    display: inline;
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
+    text-align: right;
+
+    li {
+
+
+    }
+
+    li.active {
+        background-color: @grey6;
+        .border ( @border-thickness, @grey4 );
+    }
+
+}

rhodecode/templates/pullrequests/pullrequests.mako

@@ -1,142 +1,142 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('%s Pull Requests') % c.repo_name}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='showpullrequest')}
 </%def>
 
 
 <%def name="main()">
+    <style>
+
+    </style>
+
 <div class="box">
-  <div class="title">
-      <ul class="links">
+    <div class="title">
+    <ul class="button-links">
+      <li class="btn ${('active' if c.active=='open' else '')}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,         _query={'source':0})}">${_('Opened')}</a></li>
+      <li class="btn ${('active' if c.active=='my' else '')}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,           _query={'source':0,'my':1})}">${_('Opened by me')}</a></li>
+      <li class="btn ${('active' if c.active=='awaiting' else '')}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,     _query={'source':0,'awaiting_review':1})}">${_('Awaiting review')}</a></li>
+      <li class="btn ${('active' if c.active=='awaiting_my' else '')}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,  _query={'source':0,'awaiting_my_review':1})}">${_('Awaiting my review')}</a></li>
+      <li class="btn ${('active' if c.active=='closed' else '')}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,       _query={'source':0,'closed':1})}">${_('Closed')}</a></li>
+      <li class="btn ${('active' if c.active=='source' else '')}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,       _query={'source':1})}">${_('From this repo')}</a></li>
+    </ul>
+
+    <ul class="links">
+        % if c.rhodecode_user.username != h.DEFAULT_USER:
         <li>
-           %if c.rhodecode_user.username != h.DEFAULT_USER:
             <span>
                 <a id="open_new_pull_request" class="btn btn-small btn-success" href="${h.route_path('pullrequest_new',repo_name=c.repo_name)}">
                     ${_('Open new Pull Request')}
                 </a>
             </span>
-           %endif
         </li>
-      </ul>
+        % endif
+    </ul>
 
     ${self.breadcrumbs()}
-  </div>
-
-  <div class="sidebar-col-wrapper">
-    ##main
-    <div class="sidebar">
-        <ul class="nav nav-pills nav-stacked">
-          <li class="${'active' if c.active=='open' else ''}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,         _query={'source':0})}">${_('Opened')}</a></li>
-          <li class="${'active' if c.active=='my' else ''}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,           _query={'source':0,'my':1})}">${_('Opened by me')}</a></li>
-          <li class="${'active' if c.active=='awaiting' else ''}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,     _query={'source':0,'awaiting_review':1})}">${_('Awaiting review')}</a></li>
-          <li class="${'active' if c.active=='awaiting_my' else ''}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,  _query={'source':0,'awaiting_my_review':1})}">${_('Awaiting my review')}</a></li>
-          <li class="${'active' if c.active=='closed' else ''}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,       _query={'source':0,'closed':1})}">${_('Closed')}</a></li>
-          <li class="${'active' if c.active=='source' else ''}"><a href="${h.route_path('pullrequest_show_all',repo_name=c.repo_name,       _query={'source':1})}">${_('From this repo')}</a></li>
-        </ul>
     </div>
 
     <div class="main-content-full-width">
       <div class="panel panel-default">
         <div class="panel-heading">
           <h3 class="panel-title">
               %if c.source:
                   ${_('Pull Requests from %(repo_name)s repository') % {'repo_name': c.repo_name}}
               %elif c.closed:
                   ${_('Closed Pull Requests to repository %(repo_name)s') % {'repo_name': c.repo_name}}
               %elif c.my:
                   ${_('Pull Requests to %(repo_name)s repository opened by me') % {'repo_name': c.repo_name}}
               %elif c.awaiting_review:
                   ${_('Pull Requests to %(repo_name)s repository awaiting review') % {'repo_name': c.repo_name}}
               %elif c.awaiting_my_review:
                   ${_('Pull Requests to %(repo_name)s repository awaiting my review') % {'repo_name': c.repo_name}}
               %else:
                   ${_('Pull Requests to %(repo_name)s repository') % {'repo_name': c.repo_name}}
               %endif
           </h3>
         </div>
         <div class="panel-body panel-body-min-height">
           <table id="pull_request_list_table" class="display"></table>
         </div>
       </div>
     </div>
-  </div>
+
 </div>
 
 <script type="text/javascript">
 $(document).ready(function() {
 
     var $pullRequestListTable = $('#pull_request_list_table');
 
     // object list
     $pullRequestListTable.DataTable({
       processing: true,
       serverSide: true,
       ajax: {
           "url": "${h.route_path('pullrequest_show_all_data', repo_name=c.repo_name)}",
           "data": function (d) {
               d.source = "${c.source}";
               d.closed = "${c.closed}";
               d.my = "${c.my}";
               d.awaiting_review = "${c.awaiting_review}";
               d.awaiting_my_review = "${c.awaiting_my_review}";
           }
       },
       dom: 'rtp',
       pageLength: ${c.visual.dashboard_items},
       order: [[ 1, "desc" ]],
       columns: [
          { data: {"_": "status",
                   "sort": "status"}, title: "", className: "td-status", orderable: false},
          { data: {"_": "name",
                   "sort": "name_raw"}, title: "${_('Name')}", className: "td-componentname", "type": "num" },
          { data: {"_": "author",
                   "sort": "author_raw"}, title: "${_('Author')}", className: "td-user", orderable: false },
          { data: {"_": "title",
                   "sort": "title"}, title: "${_('Title')}", className: "td-description" },
          { data: {"_": "comments",
                   "sort": "comments_raw"}, title: "", className: "td-comments", orderable: false},
          { data: {"_": "updated_on",
                   "sort": "updated_on_raw"}, title: "${_('Last Update')}", className: "td-time" }
       ],
       language: {
             paginate: DEFAULT_GRID_PAGINATION,
             sProcessing: _gettext('loading...'),
             emptyTable: _gettext("No pull requests available yet.")
       },
       "drawCallback": function( settings, json ) {
           timeagoActivate();
       },
       "createdRow": function ( row, data, index ) {
           if (data['closed']) {
             $(row).addClass('closed');
           }
       }
     });
 
     $pullRequestListTable.on('xhr.dt', function(e, settings, json, xhr){
         $pullRequestListTable.css('opacity', 1);
     });
 
     $pullRequestListTable.on('preXhr.dt', function(e, settings, data){
         $pullRequestListTable.css('opacity', 0.3);
     });
 
 });
 
 </script>
 </%def>