Merge pull request #29 from wikimedia/ui-fixes-T206712

Various UI fixes after QA review
wikimedia · Dec 6, 2018 · d45c6e0 · d45c6e0
2 parents 78a9f57 + 1eb44e8
commit d45c6e0
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 112 deletions.
diff --git a/assets/app.less b/assets/app.less
@@ -8,6 +8,7 @@
 
 html,
 body {
+    margin: 0;
     height: 100%;
 }
 
@@ -57,6 +58,10 @@ footer {
             width: 128px;
             display: flex;
             align-items: center;
+            font-size: smaller;
+            color: #7f7f7f;
+            font-variant: small-caps;
+            line-height: 1rem;
         }
         .toolforge-logo {
             padding-right: 4px;
@@ -73,54 +78,11 @@ footer {
     }
 }
 
-main,
-aside.tutorial {
-    margin: 1.5rem auto;
-    max-width: 1140px;
-    padding: 1rem;
-}
-
 main {
+    padding: 1rem;
     background-color: @background-color-base;
 }
 
-aside.tutorial {
-    border-radius: @border-radius-base;
-    border: 1px solid @border-color-base;
-    ol {
-        max-width: @width-breakpoint-desktop;
-        list-style-type: none;
-        display: flex;
-        margin: auto;
-    }
-    li {
-        font-size: 1rem;
-        flex: 1;
-        display: flex;
-        align-items: center;
-    }
-    p.image {
-        flex: 1;
-        img {
-            height: 50px;
-        }
-    }
-    p.words {
-        flex: 3;
-        strong {
-            display: block;
-        }
-        span {
-            color: @wmui-color-base20;
-        }
-    }
-    p.arrow {
-        flex: 1;
-        color: @wmui-color-accent30;
-        font-size: 2rem;
-    }
-}
-
 .inline-list {
     li::before {
         content: " · ";

diff --git a/assets/search.less b/assets/search.less
@@ -2,9 +2,54 @@
 
 body.search {
 
+  main,
+  aside.tutorial {
+    max-width: 1140px;
+    margin: 1.5rem auto;
+    padding: 1rem;
+  }
+
   main form {
     max-width: 950px;
     margin: 3rem auto;
   }
 
+  aside.tutorial {
+    border-radius: @border-radius-base;
+    border: 1px solid @border-color-base;
+    margin: 1.5rem auto;
+    ol {
+      max-width: @width-breakpoint-desktop;
+      list-style-type: none;
+      display: flex;
+      margin: auto;
+    }
+    li {
+      font-size: 1rem;
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+    p.image {
+      flex: 1;
+      img {
+        height: 50px;
+      }
+    }
+    p.words {
+      flex: 3;
+      strong {
+        display: block;
+      }
+      span {
+        color: @wmui-color-base20;
+      }
+    }
+    p.arrow {
+      flex: 1;
+      color: @wmui-color-accent30;
+      font-size: 2rem;
+    }
+  }
+
 }
diff --git a/assets/translate.less b/assets/translate.less
@@ -16,17 +16,18 @@ body.translate {
   }
 
   main {
-    max-width: @width-breakpoint-desktop-extrawide;
 
     form {
+      padding: 2rem 5rem;
       display: flex;
       align-items: flex-start;
 
       .form-column,
       .image-column {
         flex-grow: 1;
+        width: 50%;
       }
-      
+
       .form-column .language-selectors,
       .image-column .buttons {
         margin-bottom: 2rem;
@@ -39,17 +40,15 @@ body.translate {
           display: flex;
           align-items: center;
           .source-lang-widget {
-            flex-grow: 2;
+            flex: 2;
             text-align: left;
-            width: 100%;
           }
           .source-to-target-label {
-            flex-grow: 1;
+            flex-grow: 2;
             text-align: center;
           }
           .target-lang-widget {
-            flex-grow: 2;
-            width: 100%;
+            flex: 2;
             button {
               text-align: left;
               width: 100%;
@@ -58,6 +57,10 @@ body.translate {
           }
         }
 
+        .oo-ui-fieldLayout {
+          margin-bottom: 1.5rem;
+        }
+
       }
 
       .image-column {
@@ -69,12 +72,14 @@ body.translate {
           flex-direction: row-reverse;
           align-items: center;
           .oo-ui-widget {
+            margin-right: 0;
           }
           .download-or-upload {
             margin: 0 1rem 0 0.8rem;
           }
         }
         img {
+          margin-top: 1rem;
           max-width: 100%;
         }
       }

diff --git a/public/assets/app.63864239.css → public/assets/app.2bb56d7b.css b/public/assets/app.63864239.css → public/assets/app.2bb56d7b.css
@@ -5261,6 +5261,7 @@ a:focus {
 }
 html,
 body {
+  margin: 0;
   height: 100%;
 }
 body {
@@ -5302,6 +5303,10 @@ footer .toolforge a {
   width: 128px;
   display: flex;
   align-items: center;
+  font-size: smaller;
+  color: #7f7f7f;
+  font-variant: small-caps;
+  line-height: 1rem;
 }
 footer .toolforge .toolforge-logo {
   padding-right: 4px;
@@ -5315,68 +5320,70 @@ footer .toolforge a:hover .toolforge-logo {
 footer .info {
   text-align: right;
 }
-main,
-aside.tutorial {
-  margin: 1.5rem auto;
+main {
+  padding: 1rem;
+  background-color: #fff;
+}
+.inline-list li::before {
+  content: " \B7   ";
+}
+.inline-list li:first-child::before {
+  content: none;
+}
+.inline-list li {
+  display: inline;
+}
+/**
+ * WikimediaUI Base v0.12.0
+ * Wikimedia Foundation user interface base variables
+ */
+body.search main,
+body.search aside.tutorial {
   max-width: 1140px;
+  margin: 1.5rem auto;
   padding: 1rem;
 }
-main {
-  background-color: #fff;
+body.search main form {
+  max-width: 950px;
+  margin: 3rem auto;
 }
-aside.tutorial {
+body.search aside.tutorial {
   border-radius: 2px;
   border: 1px solid #a2a9b1;
+  margin: 1.5rem auto;
 }
-aside.tutorial ol {
+body.search aside.tutorial ol {
   max-width: 1000px;
   list-style-type: none;
   display: flex;
   margin: auto;
 }
-aside.tutorial li {
+body.search aside.tutorial li {
   font-size: 1rem;
   flex: 1;
   display: flex;
   align-items: center;
 }
-aside.tutorial p.image {
+body.search aside.tutorial p.image {
   flex: 1;
 }
-aside.tutorial p.image img {
+body.search aside.tutorial p.image img {
   height: 50px;
 }
-aside.tutorial p.words {
+body.search aside.tutorial p.words {
   flex: 3;
 }
-aside.tutorial p.words strong {
+body.search aside.tutorial p.words strong {
   display: block;
 }
-aside.tutorial p.words span {
+body.search aside.tutorial p.words span {
   color: #54595d;
 }
-aside.tutorial p.arrow {
+body.search aside.tutorial p.arrow {
   flex: 1;
   color: #2a4b8d;
   font-size: 2rem;
 }
-.inline-list li::before {
-  content: " \B7   ";
-}
-.inline-list li:first-child::before {
-  content: none;
-}
-.inline-list li {
-  display: inline;
-}
-/**
- * WikimediaUI Base v0.12.0
- * Wikimedia Foundation user interface base variables
- */
-body.search main form {
-  max-width: 950px;
-  margin: 3rem auto;
-}
 /**
  * WikimediaUI Base v0.12.0
  * Wikimedia Foundation user interface base variables
@@ -5393,16 +5400,15 @@ body.translate header h1 {
   font-size: 1.5rem;
   letter-spacing: 1px;
 }
-body.translate main {
-  max-width: 2000px;
-}
 body.translate main form {
+  padding: 2rem 5rem;
   display: flex;
   align-items: flex-start;
 }
 body.translate main form .form-column,
 body.translate main form .image-column {
   flex-grow: 1;
+  width: 50%;
 }
 body.translate main form .form-column .language-selectors,
 body.translate main form .image-column .buttons {
@@ -5416,23 +5422,24 @@ body.translate main form .form-column .language-selectors {
   align-items: center;
 }
 body.translate main form .form-column .language-selectors .source-lang-widget {
-  flex-grow: 2;
+  flex: 2;
   text-align: left;
-  width: 100%;
 }
 body.translate main form .form-column .language-selectors .source-to-target-label {
-  flex-grow: 1;
+  flex-grow: 2;
   text-align: center;
 }
 body.translate main form .form-column .language-selectors .target-lang-widget {
-  flex-grow: 2;
-  width: 100%;
+  flex: 2;
 }
 body.translate main form .form-column .language-selectors .target-lang-widget button {
   text-align: left;
   width: 100%;
   font-weight: normal;
 }
+body.translate main form .form-column .oo-ui-fieldLayout {
+  margin-bottom: 1.5rem;
+}
 body.translate main form .image-column {
   position: sticky;
   top: 1rem;
@@ -5443,9 +5450,13 @@ body.translate main form .image-column .buttons {
   flex-direction: row-reverse;
   align-items: center;
 }
+body.translate main form .image-column .buttons .oo-ui-widget {
+  margin-right: 0;
+}
 body.translate main form .image-column .buttons .download-or-upload {
   margin: 0 1rem 0 0.8rem;
 }
 body.translate main form .image-column img {
+  margin-top: 1rem;
   max-width: 100%;
 }
diff --git a/public/assets/manifest.json b/public/assets/manifest.json
@@ -1,6 +1,6 @@
 {
   "assets/app.js": "assets/app.09c15a8a.js",
-  "assets/app.css": "assets/app.63864239.css",
+  "assets/app.css": "assets/app.2bb56d7b.css",
   "assets/images/help-ltr-progressive.svg": "assets/images/help-ltr-progressive.bb2e7c4b.svg",
   "assets/images/logo-Wikimedia-Discovery.png": "assets/images/logo-Wikimedia-Discovery.0ec7a6e6.png",
   "assets/images/logo-CC-invert.svg": "assets/images/logo-CC-invert.0f97343c.svg",