refactor: fix builds pager alignment

go-vela · Feb 2, 2024 · 54f796e · 54f796e
1 parent cd26163
commit 54f796e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 55 deletions.
diff --git a/src/elm/Pages/Org_/Builds.elm b/src/elm/Pages/Org_/Builds.elm
@@ -12,7 +12,8 @@ import Components.Builds
 import Components.Pager
 import Dict
 import Effect exposing (Effect)
-import Html exposing (text)
+import Html exposing (caption, span, text)
+import Html.Attributes exposing (class)
 import Http
 import Http.Detailed
 import Layouts
@@ -276,13 +277,18 @@ view shared route model =
     in
     { title = "Builds"
     , body =
-        [ Components.Builds.viewHeader
+        [ caption
+            [ class "builds-caption"
+            ]
+            [ span [] []
+            , Components.Pager.view model.pager Components.Pager.defaultLabels GotoPage
+            ]
+        , Components.Builds.viewHeader
             { maybeEvent = Dict.get "event" route.query
             , showFullTimestamps = model.showFullTimestamps
             , filterByEvent = FilterByEvent
             , showHideFullTimestamps = ShowHideFullTimestamps
             }
-        , Components.Pager.viewIfNeeded model.pager Components.Pager.defaultLabels GotoPage model.builds
         , Components.Builds.view shared
             { msgs = msgs
             , builds = model.builds

diff --git a/src/elm/Pages/Org_/Repo_.elm b/src/elm/Pages/Org_/Repo_.elm
@@ -12,6 +12,8 @@ import Components.Builds
 import Components.Pager
 import Dict
 import Effect exposing (Effect)
+import Html exposing (caption, span)
+import Html.Attributes exposing (class)
 import Http
 import Http.Detailed
 import Layouts
@@ -25,7 +27,7 @@ import Route.Path
 import Shared
 import Time
 import Utils.Errors
-import Utils.Favorites as Favorites exposing (UpdateType(..))
+import Utils.Favorites exposing (UpdateType(..))
 import Utils.Helpers as Util
 import Utils.Interval as Interval
 import Vela
@@ -302,13 +304,18 @@ view shared route model =
     in
     { title = "Builds"
     , body =
-        [ Components.Builds.viewHeader
+        [ caption
+            [ class "builds-caption"
+            ]
+            [ span [] []
+            , Components.Pager.view model.pager Components.Pager.defaultLabels GotoPage
+            ]
+        , Components.Builds.viewHeader
             { maybeEvent = Dict.get "event" route.query
             , showFullTimestamps = model.showFullTimestamps
             , filterByEvent = FilterByEvent
             , showHideFullTimestamps = ShowHideFullTimestamps
             }
-        , Components.Pager.viewIfNeeded model.pager Components.Pager.defaultLabels GotoPage model.builds
         , Components.Builds.view shared
             { msgs = msgs
             , builds = model.builds

diff --git a/src/scss/_main.scss b/src/scss/_main.scss
@@ -36,27 +36,23 @@ header {
   justify-content: space-between;
   padding: 1em var(--horizontal-pad);
 
-  background: radial-gradient(
-    circle at 50% -200%,
-    var(--color-bg-light) -7%,
-    transparent 50%
-  );
+  background: radial-gradient(circle at 50% -200%,
+      var(--color-bg-light) -7%,
+      transparent 50%);
   border-top-width: 0;
   border-bottom: var(--line-width) solid;
   border-left-width: 0;
-  border-image-source: linear-gradient(
-    to right,
-    var(--color-secondary) 55%,
-    transparent 55%,
-    transparent 58%,
-    var(--color-secondary) 58%,
-    var(--color-secondary) 69%,
-    transparent 69%,
-    transparent 75%,
-    var(--color-primary) 75%,
-    var(--color-primary) 76%,
-    transparent 76%
-  );
+  border-image-source: linear-gradient(to right,
+      var(--color-secondary) 55%,
+      transparent 55%,
+      transparent 58%,
+      var(--color-secondary) 58%,
+      var(--color-secondary) 69%,
+      transparent 69%,
+      transparent 75%,
+      var(--color-primary) 75%,
+      var(--color-primary) 76%,
+      transparent 76%);
   border-image-slice: 1;
 }
 
@@ -270,15 +266,13 @@ nav {
 
   border-top: var(--line-width) solid;
   border-left: var(--line-width) solid;
-  border-image-source: linear-gradient(
-    to right,
-    var(--color-bg-light) 75%,
-    transparent 75%,
-    transparent 77%,
-    var(--color-bg-light) 77%,
-    var(--color-bg-light) 84%,
-    transparent 84%
-  );
+  border-image-source: linear-gradient(to right,
+      var(--color-bg-light) 75%,
+      transparent 75%,
+      transparent 77%,
+      var(--color-bg-light) 77%,
+      var(--color-bg-light) 84%,
+      transparent 84%);
   border-image-slice: 1;
 
   svg {
@@ -306,13 +300,11 @@ nav {
   bottom: 0;
   left: 0;
 
-  background-image: linear-gradient(
-    90deg,
-    hsl(0, 0%, 34%, 0) 0,
-    hsl(0, 0%, 34%, 0.2) 20%,
-    hsl(0, 0%, 34%, 0.5) 60%,
-    hsl(0, 0%, 34%, 0)
-  );
+  background-image: linear-gradient(90deg,
+      hsl(0, 0%, 34%, 0) 0,
+      hsl(0, 0%, 34%, 0.2) 20%,
+      hsl(0, 0%, 34%, 0.5) 60%,
+      hsl(0, 0%, 34%, 0));
   transform: translateX(-100%);
 
   animation: shimmer 2s infinite;
@@ -443,6 +435,14 @@ details.build-toggle {
   flex-direction: column;
 }
 
+.builds-caption {
+  margin: 0.75em 0 1.2rem;
+  justify-content: space-between;
+  padding-left: 1rem;
+  display: flex;
+}
+
+
 .hidden-spacer {
   visibility: hidden;
 }
@@ -952,12 +952,10 @@ details.build-toggle {
 }
 
 .flowline-left {
-  background: linear-gradient(
-    90deg,
-    hsla(0, 0%, 0%, 0) calc(2.25em - 1px),
-    var(--color-flowline) calc(2.25em),
-    hsla(0, 0%, 0%, 0) calc(2.25em + 1px)
-  );
+  background: linear-gradient(90deg,
+      hsla(0, 0%, 0%, 0) calc(2.25em - 1px),
+      var(--color-flowline) calc(2.25em),
+      hsla(0, 0%, 0%, 0) calc(2.25em + 1px));
 }
 
 .step.flowline-left:last-child,
@@ -1050,7 +1048,7 @@ details.build-toggle {
   }
 }
 
-.logs code > div {
+.logs code>div {
   white-space: pre-wrap;
 }
 
@@ -1060,7 +1058,7 @@ details.build-toggle {
   flex-direction: row;
   padding-right: 3rem;
 
-  > code {
+  >code {
     flex: 1;
     margin-left: 1em;
   }
@@ -1424,7 +1422,7 @@ details.build-toggle {
   background-color: var(--color-bg);
   border: none;
 
-  + .button {
+  +.button {
     margin-left: 0.5rem;
   }
 }
@@ -1434,7 +1432,7 @@ details.build-toggle {
 }
 
 /* stylelint-disable selector-max-specificity */
-.help.details[open] .summary + *:first-of-type {
+.help.details[open] .summary+*:first-of-type {
   margin-top: 0.25rem;
 }
 
@@ -1445,7 +1443,7 @@ details.build-toggle {
   justify-content: flex-end;
   margin: 1rem 0.5rem 0 1rem;
 
-  > a {
+  >a {
     margin-left: 1rem;
   }
 }
@@ -1457,7 +1455,7 @@ details.build-toggle {
   margin-top: 8px;
   margin-right: 8px;
 
-  > a {
+  >a {
     margin-left: 6px;
 
     text-align: right;
@@ -1693,8 +1691,8 @@ details.build-toggle {
   justify-content: flex-end;
 }
 
-.button.-secret-delete-confirm
-,.button .-repo-disable-confirm {
+.button.-secret-delete-confirm,
+.button .-repo-disable-confirm {
   color: var(--color-red);
 
   background-color: var(--color-bg);
@@ -1749,4 +1747,4 @@ details.build-toggle {
 
 .overflow-auto {
   overflow: auto;
-}
+}