Make the toolbar look a little bit neater. (#2093)

mdn · Dec 15, 2020 · 6e84c79 · 6e84c79
1 parent 8deaa25
commit 6e84c79
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -94,7 +94,7 @@ your preferred editor/IDE. For example, in the root:
 
 Now clicking certain links will open files directly in the currently open
 VSCode IDE. To test it, view any document on `http://localhost:3000` and
-click the "Edit in your editor" button.
+click the "Open in your editor" button.
 
 ### How the server works
 

diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -106,18 +106,22 @@ export function App(appProps) {
                   }
                 />
                 <Route
-                  path="/_create/*"
+                  path="/_edit/*"
                   element={
                     <StandardLayout>
-                      <DocumentCreate />
+                      <DocumentEdit />
                     </StandardLayout>
                   }
                 />
+
+                {/* The following two are not "enabled". I.e. no link to them.
+                    See https://github.com/mdn/yari/issues/1614
+                 */}
                 <Route
-                  path="/_edit/*"
+                  path="/_create/*"
                   element={
                     <StandardLayout>
-                      <DocumentEdit />
+                      <DocumentCreate />
                     </StandardLayout>
                   }
                 />
@@ -129,6 +133,7 @@ export function App(appProps) {
                     </StandardLayout>
                   }
                 />
+
                 {/*
                 This route exclusively exists for development on the <PageNotFound>
                 component itself.

diff --git a/client/src/document/toolbar/edit-actions.scss b/client/src/document/toolbar/edit-actions.scss
@@ -1,16 +1,20 @@
 @import "~@mdn/minimalist/sass/vars/layout";
 
 .edit-actions {
-  text-align: center;
+  align-items: center;
   display: flex;
-  align-items: baseline;
-
-  p.editor-opening-error {
-    font-weight: bold;
-  }
+  justify-content: space-between;
+  // width: 100%;
 
   li {
-    margin-left: $base-spacing;
     margin-right: $base-spacing;
+
+    .button {
+      max-width: unset;
+    }
+  }
+
+  p.editor-opening-error {
+    font-weight: bold;
   }
 }
diff --git a/client/src/document/toolbar/edit-actions.tsx b/client/src/document/toolbar/edit-actions.tsx
@@ -56,41 +56,35 @@ export function EditActions({ folder }: { folder: string }) {
 
   return (
     <ul className="edit-actions">
-      <li>
-        <a href={`https://developer.mozilla.org/${locale}/docs/${slug}`}>
-          View on MDN
-        </a>
-      </li>
-
-      <li>
-        <Link to={location.pathname.replace("/docs/", "/_edit/")}>
-          Quick-edit
-        </Link>
-      </li>
       <li>
         <button
           type="button"
+          className="button"
           title={`Folder: ${folder}`}
           onClick={openInEditorHandler}
         >
-          Edit in your <b>editor</b>
+          Open in your <b>editor</b>
         </button>
       </li>
+
       <li>
-        <Link to={location.pathname.replace("/docs/", "/_manage/")}>
-          Manage document
-        </Link>
+        <a
+          href={`https://developer.mozilla.org/${locale}/docs/${slug}`}
+          className="button"
+        >
+          View on MDN
+        </a>
       </li>
+
       <li>
         <Link
-          to={`${location.pathname.replace(
-            "/docs/",
-            "/_create/"
-          )}?initial_slug=${encodeURIComponent(slug)}`}
+          to={location.pathname.replace("/docs/", "/_edit/")}
+          className="button"
         >
-          Create new document
+          Quick-edit
         </Link>
       </li>
+
       {editorOpeningError ? (
         <p className="error-message editor-opening-error">
           <b>Error opening page in your editor!</b>

diff --git a/client/src/document/toolbar/flaws.scss b/client/src/document/toolbar/flaws.scss
@@ -1,6 +1,16 @@
+.toggle-show-flaws {
+  button.button {
+    display: inline-block;
+  }
+}
+
 #document-flaws {
   margin: 20px;
 
+  button.toggle-show-flaws {
+    display: inline;
+  }
+
   details {
     margin-bottom: 20px;
   }

diff --git a/client/src/document/toolbar/flaws.tsx b/client/src/document/toolbar/flaws.tsx
@@ -137,14 +137,15 @@ export function ToggleDocumentFlaws({ doc }: { doc: Doc }) {
     .sort((a, b) => b.count - a.count);
 
   return (
-    <div id={FLAWS_HASH.slice(1)} ref={rootElement}>
+    <div
+      id={FLAWS_HASH.slice(1)}
+      ref={rootElement}
+      className="toggle-show-flaws"
+    >
       {flawsCounts.length > 0 ? (
-        <button type="submit" onClick={toggle}>
-          {show
-            ? "Hide flaws"
-            : `Show flaws (${flawsCounts
-                .map((flaw) => flaw.count)
-                .join(" + ")})`}
+        <button type="button" className="button" onClick={toggle}>
+          {show ? "Hide flaws" : "Show flaws"} (
+          {flawsCounts.reduce((acc, flaw) => flaw.count + acc, 0)})
         </button>
       ) : (
         <p>
@@ -153,8 +154,7 @@ export function ToggleDocumentFlaws({ doc }: { doc: Doc }) {
             🍾
           </span>
         </p>
-      )}
-
+      )}{" "}
       {show ? (
         <Flaws doc={doc} flaws={flawsCounts} />
       ) : (
@@ -289,6 +289,7 @@ function FixableFlawsAction({ count }: { count: number }) {
       )}
       <button
         type="button"
+        className="button"
         onClick={async () => {
           setFixing((prev) => !prev);
           await fix();
@@ -303,12 +304,12 @@ function FixableFlawsAction({ count }: { count: number }) {
 
 function FixableFlawBadge() {
   return (
-    <small className="macro-fixable" title="This flaw is fixable.">
+    <span className="macro-fixable" title="This flaw is fixable.">
       Fixable{" "}
       <span role="img" aria-label="Thumbs up">
         👍🏼
       </span>
-    </small>
+    </span>
   );
 }
 

diff --git a/client/src/document/toolbar/index.scss b/client/src/document/toolbar/index.scss
@@ -2,12 +2,25 @@
 @import "~@mdn/minimalist/sass/vars/layout";
 
 .toolbar {
-  padding: 0 $base-spacing;
-  border: 1px solid $red-300;
-}
+  margin: 0 auto;
+  padding: $base-unit;
+
+  // This is the same we use for the `.titlebar-container h1`
+  @media #{$mq-tablet-and-up} {
+    max-width: $max-width-default;
+    padding: $base-unit $base-spacing;
+  }
+
+  .toolbar-first-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-.toolbar-first-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+    .edit-actions {
+      padding: $base-unit 0;
+      li {
+        margin-left: 0;
+      }
+    }
+  }
 }
diff --git a/server/index.js b/server/index.js
@@ -256,7 +256,7 @@ app.listen(PORT, () => {
     console.warn(
       chalk.yellow(
         "Warning! You have not set an EDITOR environment variable. " +
-          'Using the "Edit in your editor" button will probably fail.'
+          'Using the "Open in your editor" button will probably fail.'
       )
     );
   }