feat(md): improve styles on mobile + large screen (#9260)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Jun 1, 2021 · 0647665 · 0647665
1 parent 7cfaca1
commit 0647665
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 12 deletions.
diff --git a/app/scripts/modules/core/src/managed/Environments2.less b/app/scripts/modules/core/src/managed/Environments2.less
@@ -3,6 +3,11 @@
   padding: 0 var(--l-spacing);
   --base-horizontal-padding: var(--xl-spacing);
 
+  @media (max-width: 768px) {
+    padding: 0;
+    --base-horizontal-padding: var(--m-spacing);
+  }
+
   a,
   .btn-link {
     color: var(--color-text-link-g1);
@@ -30,4 +35,8 @@
   border: 1px solid var(--color-alto);
   bottom: 4px;
   right: 30px;
+
+  @media (max-width: 768px) {
+    right: 8px;
+  }
 }
diff --git a/app/scripts/modules/core/src/managed/environmentBaseElements/BaseEnvironment.less b/app/scripts/modules/core/src/managed/environmentBaseElements/BaseEnvironment.less
@@ -4,7 +4,6 @@
   &:not(:first-of-type) {
     margin-top: 16px;
   }
-  max-width: 1200px;
   width: 100%;
   border: 1px solid var(--color-cirrus);
   border-radius: @borderRadius;

diff --git a/app/scripts/modules/core/src/managed/overview/artifact/Artifact.less b/app/scripts/modules/core/src/managed/overview/artifact/Artifact.less
@@ -17,6 +17,11 @@
     margin-top: var(--l-spacing);
     position: relative;
     --circle-shift: 6px;
+    --left-padding: 20px;
+
+    @media (max-width: 768px) {
+      --left-padding: 10px;
+    }
 
     .artifact-pending-versions-list {
       padding-left: var(--l-spacing);
@@ -33,7 +38,11 @@
         flex-direction: column;
         padding-right: var(--l-spacing);
         position: relative;
-        padding-left: 48px;
+        padding-left: calc(var(--left-padding) + 28px);
+
+        @media (max-width: 768px) {
+          padding-left: calc(var(--left-padding) + 20px);
+        }
 
         &:not(:last-of-type) {
           padding-bottom: 32px;
@@ -44,7 +53,7 @@
           content: '';
           position: absolute;
           top: 0;
-          left: 24px;
+          left: calc(var(--left-padding) + 4px);
           height: 100%;
           border-left: 2px solid var(--color-accent-g2);
         }
@@ -54,7 +63,7 @@
           content: '';
           position: absolute;
           top: var(--circle-shift);
-          left: 20px;
+          left: var(--left-padding);
           width: 10px;
           height: 10px;
           background: var(--color-accent-g2);
@@ -80,6 +89,10 @@
           top: 0px;
           white-space: nowrap;
           color: var(--color-concrete);
+
+          @media (max-width: 768px) {
+            right: calc(100% - 2px);
+          }
         }
 
         .artifact-pending-version-commit {

diff --git a/app/scripts/modules/core/src/managed/overview/baseStyles.less b/app/scripts/modules/core/src/managed/overview/baseStyles.less
@@ -3,6 +3,10 @@
   grid-template-columns: [icon] 40px [details] 1fr;
   padding: var(--l-spacing) var(--base-horizontal-padding) var(--s-spacing) var(--base-horizontal-padding);
 
+  @media (max-width: 768px) {
+    grid-template-columns: [icon] 30px [details] 1fr;
+  }
+
   .error-message {
     grid-column: 1 / 3;
   }
@@ -13,6 +17,10 @@
     flex-direction: column;
     min-width: 0;
     margin-right: var(--xl-spacing);
+
+    @media (max-width: 768px) {
+      margin-right: var(--m-spacing);
+    }
   }
 
   .row-icon {

diff --git a/app/scripts/modules/core/src/managed/versionsHistory/VersionHeading.tsx b/app/scripts/modules/core/src/managed/versionsHistory/VersionHeading.tsx
@@ -98,7 +98,7 @@ export const VersionHeading = ({ group, chevron }: IVersionHeadingProps) => {
   };
   return (
     <div className="version-heading" onMouseOver={prefetchData}>
-      <div>
+      <div className="version-heading-content">
         {gitMetadata ? (
           <GitLink gitMetadata={gitMetadata} asLink={false} />
         ) : (

diff --git a/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.less b/app/scripts/modules/core/src/managed/versionsHistory/VersionsHistory.less
@@ -6,6 +6,11 @@
     margin-bottom: var(--xl-spacing);
     box-shadow: 1px 3px 6px 0 rgba(0, 0, 0, 0.05);
 
+    @media (max-width: 768px) {
+      padding: var(--m-spacing) var(--s-spacing);
+      margin-bottom: var(--l-spacing);
+    }
+
     .copy-version-link {
       display: none;
     }
@@ -21,6 +26,12 @@
       justify-content: space-between;
       align-items: center;
 
+      .version-heading-content {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+      }
+
       .section-heading-chevron {
         border-radius: 999px;
         padding: 4px;
@@ -48,13 +59,7 @@
     display: flex;
     flex-direction: row;
     margin-top: var(--s-spacing);
-
-    .chip {
-      min-width: 100px;
-      justify-content: center;
-      margin-right: var(--m-spacing);
-      position: relative;
-    }
+    overflow: auto;
 
     .environment-pinned {
       position: absolute;
@@ -76,6 +81,16 @@
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
+    min-width: 100px;
+    justify-content: center;
+    margin-right: var(--m-spacing);
+    position: relative;
+
+    @media (max-width: 768px) {
+      min-width: 60px;
+      padding: var(~'--3xs-spacing') var(--m-spacing);
+      margin-right: var(--s-spacing);
+    }
 
     &.chip-outlined {
       border: 1px solid var(--color-silver);

diff --git a/app/scripts/modules/core/src/presentation/horizontalTabs/HorizontalTabs.less b/app/scripts/modules/core/src/presentation/horizontalTabs/HorizontalTabs.less
@@ -20,6 +20,10 @@
     color: var(--color-concrete);
     text-align: center;
 
+    @media (max-width: 768px) {
+      min-width: 80px;
+    }
+
     &:hover {
       text-decoration: none;
       color: var(--color-dovegray);

diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
@@ -958,6 +958,9 @@ select:invalid {
     margin-left: 4px;
   }
   display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
 
 @rotate-transition: transform 0.15s ease;