From 3638dc13fb6b9001bbe687faab42b895491f5bbc Mon Sep 17 00:00:00 2001 From: Tyler Wendlandt Date: Wed, 5 Oct 2022 13:21:34 -0600 Subject: [PATCH] ui: Wrap service names on show and instance routes (#14771) * Wrap service names on show and instance routes Moves the trailing type/kind/actions to the second row of the header no matter what length the service name is. Wraps service name text. * Change grid format of AppView globally * Add tooltips to the last element of breadcrumbs --- .../app/components/app-view/index.hbs | 16 +++++---- .../app/components/app-view/index.scss | 3 ++ .../app/components/app-view/layout.scss | 33 +++++++++++++------ .../app/components/app-view/skin.scss | 2 +- .../app/components/breadcrumbs/layout.scss | 10 ++++++ .../consul-ui/app/templates/dc/kv/edit.hbs | 3 +- .../consul-ui/app/templates/dc/kv/index.hbs | 4 +-- .../app/templates/dc/services/instance.hbs | 6 ++-- 8 files changed, 54 insertions(+), 23 deletions(-) diff --git a/ui/packages/consul-ui/app/components/app-view/index.hbs b/ui/packages/consul-ui/app/components/app-view/index.hbs index c40e715eba..7ce4444549 100644 --- a/ui/packages/consul-ui/app/components/app-view/index.hbs +++ b/ui/packages/consul-ui/app/components/app-view/index.hbs @@ -13,14 +13,16 @@
- - {{yield}} - -
- - +
+ {{yield}} - + +
+
+ + + {{yield}} +
diff --git a/ui/packages/consul-ui/app/components/app-view/index.scss b/ui/packages/consul-ui/app/components/app-view/index.scss index 6d1d3059c6..430d1de0bb 100644 --- a/ui/packages/consul-ui/app/components/app-view/index.scss +++ b/ui/packages/consul-ui/app/components/app-view/index.scss @@ -10,6 +10,9 @@ %app-view-header .title { @extend %app-view-title; } +%app-view-title .title-left-container { + @extend %app-view-title-left-container; +} %app-view-header .actions { @extend %app-view-actions; } diff --git a/ui/packages/consul-ui/app/components/app-view/layout.scss b/ui/packages/consul-ui/app/components/app-view/layout.scss index f08c050969..76e7e4f230 100644 --- a/ui/packages/consul-ui/app/components/app-view/layout.scss +++ b/ui/packages/consul-ui/app/components/app-view/layout.scss @@ -1,27 +1,40 @@ /* layout */ %app-view-title { - display: flex; - align-items: center; - white-space: nowrap; + display: grid; + grid-template-columns: 1fr auto; + grid-template-areas: "title actions"; position: relative; z-index: 5; } -%app-view-actions { +%app-view-title-left-container { + grid-area: title; display: flex; - align-items: flex-start; - margin-left: auto; + flex-wrap: wrap; + align-items: center; + white-space: normal; } -/* units */ -%app-view-title { - padding-bottom: 0.2em; +%app-view-title-left-container > :first-child { + flex-basis: 100%; } -%app-view-title > :not(:last-child) { + +%app-view-title-left-container > :not(:first-child) { margin-right: 8px; } + %app-view-actions { + grid-area: actions; + align-self: end; + display: flex; + align-items: flex-start; + margin-left: auto; margin-top: 9px; } +/* units */ +%app-view-title { + padding-bottom: 1.4em; +} + /* content */ /* TODO: Think about an %app-form or similar */ %app-view-content form:not(.filter-bar) fieldset { diff --git a/ui/packages/consul-ui/app/components/app-view/skin.scss b/ui/packages/consul-ui/app/components/app-view/skin.scss index d9e85982e2..d9c4c3d451 100644 --- a/ui/packages/consul-ui/app/components/app-view/skin.scss +++ b/ui/packages/consul-ui/app/components/app-view/skin.scss @@ -1,4 +1,4 @@ -%app-view-title > *:first-child { +%app-view-title-left-container > *:first-child { @extend %h100; } %app-view-title { diff --git a/ui/packages/consul-ui/app/components/breadcrumbs/layout.scss b/ui/packages/consul-ui/app/components/breadcrumbs/layout.scss index d24dd0b748..6e17d0cec2 100644 --- a/ui/packages/consul-ui/app/components/breadcrumbs/layout.scss +++ b/ui/packages/consul-ui/app/components/breadcrumbs/layout.scss @@ -1,6 +1,14 @@ +%breadcrumbs { + display: grid; + grid-auto-flow: column; + white-space: nowrap; + overflow: hidden; +} + %breadcrumbs > li { list-style-type: none; display: inline-flex; + overflow: hidden } %breadcrumb-milestone::before { margin-right: 4px; @@ -10,6 +18,8 @@ /* as the separator is a '/' the left margin needs */ /* to be different from the right in order to center it */ margin-left: 6px; + overflow: hidden; + text-overflow: ellipsis; } %breadcrumb::before { margin-right: 8px; diff --git a/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs b/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs index 2bdd511f5e..282b670a40 100644 --- a/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs +++ b/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs @@ -63,6 +63,7 @@ as |parts|}} {{! We push on a '' here so make sure we get a trailing slash/separator }}
  • {{/let}} {{/let}} - \ No newline at end of file + diff --git a/ui/packages/consul-ui/app/templates/dc/kv/index.hbs b/ui/packages/consul-ui/app/templates/dc/kv/index.hbs index 97858ca953..f6e8ed120c 100644 --- a/ui/packages/consul-ui/app/templates/dc/kv/index.hbs +++ b/ui/packages/consul-ui/app/templates/dc/kv/index.hbs @@ -108,7 +108,7 @@ as |sort filters parent items|}}
    1. Key / Values
      2. {{#each (slice 0 -2 (split parent.Key '/')) as |breadcrumb index|}} -
    2. {{breadcrumb}}
      3. +
    3. {{breadcrumb}}
      4. {{/each}}
    @@ -207,4 +207,4 @@ as |sort filters parent items|}} {{/let}} - \ No newline at end of file + diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs index 7c0755fed2..a2ddf18d6b 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs @@ -129,7 +129,9 @@ as |item|}}
    1. All Services
      2. -
    2. Service ({{item.Service.Service}})
      3. +
    3. + Service ({{item.Service.Service}}) +
    @@ -192,4 +194,4 @@ as |item|}} {{/let}} - \ No newline at end of file +