MozReview: Quick try at a 'redesign' (Bug 1056377). r?smacleod,glob,gps,mcote,salva draft
authorDavid Walsh <dwalsh@mozilla.com>
Mon, 09 May 2016 15:11:23 -0500
changeset 8078 e6b62eaa3686e617371c132026752fe13d8a3fa9
parent 8077 e391b4b78fa2a589f105a51e507072bae39922a7
child 8080 d9391906438f2ce66a87f35ea727a906b016982c
child 8086 da0a4986689db6a76cd88595b90874d6af0f58bf
push id808
push userbmo:dwalsh@mozilla.com
push dateMon, 09 May 2016 20:11:54 +0000
reviewerssmacleod, glob, gps, mcote, salva
bugs1056377
MozReview: Quick try at a 'redesign' (Bug 1056377). r?smacleod,glob,gps,mcote,salva MozReview-Commit-ID: 12dwgbbsowM
pylib/mozreview/mozreview/static/mozreview/css/common.less
pylib/mozreview/mozreview/static/mozreview/js/default.js
--- 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');
 });