Move model overview CTA and update title

canonical · Aug 8, 2023 · a6cae89 · a6cae89
1 parent 8f46b34
commit a6cae89
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 35 deletions.
diff --git a/static/js/brand-store/components/Model/Model.tsx b/static/js/brand-store/components/Model/Model.tsx
@@ -82,10 +82,15 @@ function Model() {
       <div className="p-panel">
         <div className="p-panel__content">
           <div className="u-fixed-width">
-            <Link to={`/admin/${id}/models`}>&lsaquo;&nbsp;Models</Link>
-          </div>
-          <div className="u-fixed-width">
-            <h1>{model_id}</h1>
+            <nav className="p-breadcrumbs" aria-label="Breadcrumbs">
+              <ol className="p-breadcrumbs__items u-no-margin--bottom">
+                <li className="p-breadcrumbs__item">
+                  <Link to={`/admin/${id}/models`}>&lsaquo;&nbsp;Models</Link>
+                </li>
+                <li className="p-breadcrumbs__item">{model_id}</li>
+              </ol>
+            </nav>
+            <h1 className="u-off-screen">{model_id}</h1>
           </div>
           <div className="u-fixed-width">
             <ModelNav sectionName="overview" />
@@ -114,11 +119,31 @@ function Model() {
               </Notification>
             </div>
           )}
+          <div className="u-fixed-width u-align--right">
+            <Button
+              type="button"
+              onClick={() => {
+                setNewApiKey("");
+              }}
+            >
+              Revert
+            </Button>
+            <Button
+              type="submit"
+              appearance="positive"
+              className="u-no-margin--right"
+              disabled={!newApiKey}
+              form="save-model-form"
+            >
+              Save
+            </Button>
+          </div>
           <Row>
             <Col size={8}>
               {currentModel && (
                 <form
                   className="p-form p-form--stacked"
+                  id="save-model-form"
                   onSubmit={(event) => {
                     event.preventDefault();
                     mutation.mutate(newApiKey);
@@ -236,25 +261,6 @@ function Model() {
                       </Row>
                     </div>
                   )}
-                  <hr style={{ marginTop: "1rem", marginBottom: "1rem" }} />
-                  <div className="u-align--right">
-                    <Button
-                      type="button"
-                      onClick={() => {
-                        setNewApiKey("");
-                      }}
-                    >
-                      Revert
-                    </Button>
-                    <Button
-                      type="submit"
-                      appearance="positive"
-                      className="u-no-margin--right"
-                      disabled={!newApiKey}
-                    >
-                      Save
-                    </Button>
-                  </div>
                 </form>
               )}
             </Col>

diff --git a/static/js/brand-store/components/Model/Policies.tsx b/static/js/brand-store/components/Model/Policies.tsx
@@ -72,10 +72,15 @@ function Policies() {
         <div className="p-panel">
           <div className="p-panel__content">
             <div className="u-fixed-width">
-              <Link to={`/admin/${id}/models`}>&lsaquo;&nbsp;Models</Link>
-            </div>
-            <div className="u-fixed-width">
-              <h1>{model_id}</h1>
+              <nav className="p-breadcrumbs" aria-label="Breadcrumbs">
+                <ol className="p-breadcrumbs__items u-no-margin--bottom">
+                  <li className="p-breadcrumbs__item">
+                    <Link to={`/admin/${id}/models`}>&lsaquo;&nbsp;Models</Link>
+                  </li>
+                  <li className="p-breadcrumbs__item">{model_id}</li>
+                </ol>
+              </nav>
+              <h1 className="u-off-screen">{model_id}</h1>
             </div>
             <div className="u-fixed-width">
               <ModelNav sectionName="policies" />

diff --git a/static/sass/_snapcraft_p-breadcrumbs.scss b/static/sass/_snapcraft_p-breadcrumbs.scss
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -116,8 +116,6 @@ $color-social-icon-foreground: $color-light;
 @include snapcraft-p-multiselect;
 @import "patterns_first-snap-flow";
 @include snapcraft-p-first-snap-flow;
-@import "snapcraft_p-breadcrumbs";
-@include snapcraft-p-breadcrumbs;
 @import "snapcraft-publicise";
 @include snapcraft-publicise;
 @import "snapcraft-publisher";
@@ -455,3 +453,7 @@ code {
 .p-navigation__row.is-full-width {
   max-width: 100%;
 }
+
+.p-breadcrumbs__item:not(:first-of-type)::before {
+  margin-left: -0.5rem;
+}