diff --git a/src/elm/Pages/Org_/Builds.elm b/src/elm/Pages/Org_/Builds.elm index 730ecdbe9..3c6674bb1 100644 --- 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 index 4626f6191..eca9fd309 100644 --- 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 index 8e5d7231a..8550aaf39 100644 --- 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; -} +} \ No newline at end of file