MozReview: Quick try at a 'redesign' (
Bug 1056377). r?smacleod,glob,gps,mcote,salva
draft
MozReview: Quick try at a 'redesign' (
Bug 1056377). r?smacleod,glob,gps,mcote,salva
MozReview-Commit-ID: 12dwgbbsowM
--- a/pylib/mozreview/mozreview/static/mozreview/css/common.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/common.less
@@ -1,3 +1,265 @@
+
#accountnav li {
visibility: hidden;
}
+
+/*
+ Redesign below
+*/
+
+body {
+ background: #EAEFF2;
+ font-size: 12px;
+ font-family: 'Open Sans', Arial, sans-serif;
+ padding-top: 8px;
+}
+
+
+/* TODO: Pull this from our own resources/CDN */
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
+
+
+/* Logo and Title */
+#headerbar {
+ #title {
+ font-weight: bold;
+ font-size: 140%;
+ }
+
+ #logo {
+ width: 56px;
+ }
+}
+
+@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
+ #headerbar #logo {
+ width: 32px;
+ }
+}
+
+/* Account Navigation */
+#accountnav li {
+ /* background colors on hover; set twice for reviewable-page :( */
+ &:hover,
+ &:hover > a,
+ ul,
+ ul:hover,
+ .reviewable-page &:hover,
+ .reviewable-page & ul {
+ background: #fff;
+ border-color: #fff;
+ }
+
+ ul {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ min-width: 150px;
+ border-color: #D4DDe4;
+ }
+
+ &:hover ul,
+ .reviewable-page &:hover ul {
+ margin-top: -1px;
+ border-color:#eaeff2;
+ }
+
+ .reviewable-page &:hover ul li:hover a,
+ &:hover ul li:hover a {
+ background: #D4DDe4;
+ }
+}
+
+/* Main Navigation */
+#navbar {
+ border-bottom: 0;
+
+ a {
+ color: #002147;
+ }
+}
+
+#navbar-container {
+ padding-bottom: 10px;
+}
+
+#topbar,
+#navbar-container,
+.reviewable-page #topbar,
+.reviewable-page #navbar-container {
+ background: inherit !important;
+}
+
+.reviewable-page #navbar-container,
+#navbar-container {
+ border-bottom: 1px solid #D4DDE4;
+}
+
+
+/* Search Bar */
+#headerbar #search input,
+.reviewable-page #headerbar #search input {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ padding: 3px 6px;
+ border-color: #bbb;
+}
+
+
+/* Data Grids */
+#page-container #page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row,
+#page-container #page_sidebar .page-sidebar-items li.active .page-sidebar-row {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+
+#page-container #page_sidebar .page-sidebar-items li.active .page-sidebar-row,
+#page-container #page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row {
+ border: 0 !important;
+}
+
+body.datagrid-page #page-container .datagrid-main {
+ border: 0 !important;
+}
+
+body.datagrid-page #page-container .datagrid-head,
+body.datagrid-page #page-container .datagrid-body .datagrid-headers {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+
+#page-container #page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row {
+ border-color: transparent !important;
+ background: rgba(255, 255, 255, 0.6);
+}
+
+#page-container .datagrid-header, .datagrid-header-drag.datagrid-header {
+ background: #D4DDE4;
+}
+
+body.datagrid-page #page-container .datagrid-main {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+
+body.datagrid-page #page-container .datagrid-header:first-child {
+ border-top-left-radius: 0;
+}
+
+body.datagrid-page #page-container .datagrid-header:last-child {
+ border-top-right-radius: 0;
+}
+
+body.datagrid-page #page-container .datagrid-head,
+body.datagrid-page #page-container .datagrid-body .datagrid-headers {
+ border-bottom: 0;
+}
+
+.datagrid tr.datagrid-empty-row {
+ visibility: hidden;
+}
+
+.datagrid-titlebox ul li a {
+ color: #777;
+}
+
+#page-container #page_sidebar .page-sidebar-items li .page-sidebar-row {
+ font-size: 14px;
+}
+
+body.datagrid-page #page-container .datagrid tbody td, body.datagrid-page #page-container .datagrid tbody th,
+.datagrid-header {
+ padding: 10px;
+}
+
+body.datagrid-page #page-container .datagrid tbody tr:hover {
+ background: #EAEFF2;
+}
+
+body.datagrid-page #page-container .datagrid-wrapper .datagrid-titlebox {
+ margin-left: 0;
+}
+
+/* Review Requests */
+.review-request {
+ .main {
+ background: #fff;
+ border: 0;
+ }
+
+ .content .field-container > pre {
+ border: 1px dashed #999;
+ }
+}
+
+/* Review Actions Bar */
+.actions-container, .actions.page-tabs {
+ background: #D4DDe4;
+ border: 0;
+}
+
+.actions-container {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+
+.review-request-header,
+.actions.page-tabs li {
+ border-bottom: 0;
+}
+
+.actions.page-tabs li.active {
+ border: 0;
+}
+
+.actions.page-tabs {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+
+.actions li.has-menu:hover,
+.actions a:hover,
+.actions .menu,
+.actions-left li:hover {
+ background-color: #D4DDE4;
+}
+
+.actions .menu a:hover {
+ background-color: #eaeff2;
+}
+
+.actions .menu {
+ background: inherit;
+ border: 0;
+}
+.actions .menu li {
+ background: inherit;
+}
+
+/* Review Banners */
+.banner {
+ border-bottom: 0;
+}
+
+/* Review Comments */
+.box, .box-inner {
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+}
+
+#reviews {
+ .review .box-inner {
+ border: 1px #D4DDE4 solid;
+ }
+
+ .box:before {
+ border-right-color: #D4DDE4;
+ }
+}
--- a/pylib/mozreview/mozreview/static/mozreview/js/default.js
+++ b/pylib/mozreview/mozreview/static/mozreview/js/default.js
@@ -1,8 +1,12 @@
$(document).ready(function() {
// Hide "New Review Request" link
$('#navbar a[href="/r/new/"]').parent('li').hide();
// Fix logout url
$("a[href='/account/logout/']").attr("href", "/mozreview/logout/");
$("#accountnav li").css("visibility", "visible");
+
+ /* DW attempt at a redesign */
+ $('#logo').attr('src', 'http://people.mozilla.org/~faaborg/files/shiretoko/firefoxIcon/firefox-512-noshadow.png');
+ $('#headerbar #title').html('Mozilla Review Board');
});