diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss index 33c7d91b87..042e026ae2 100644 --- a/ui-v2/app/styles/base/components/tooltip/layout.scss +++ b/ui-v2/app/styles/base/components/tooltip/layout.scss @@ -42,7 +42,14 @@ } /* TODO: Try and use the same vertical positioning all tooltips */ /* this is only for pseudo tooltips be want to avoid */ -/* specifiying pseudo in this file */ +/* specifying pseudo in this file */ %tooltip::after { bottom: calc(100% - 7px); } +%tooltip-bottom::before { + bottom: auto; + top: calc(100% + 7px); +} +%tooltip-bottom::after { + bottom: -12px; +} diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss index 04c19a939e..6663e84b2d 100644 --- a/ui-v2/app/styles/base/components/tooltip/skin.scss +++ b/ui-v2/app/styles/base/components/tooltip/skin.scss @@ -3,12 +3,21 @@ color: $white; background-color: $gray-500; } + +/* borders here are used to draw a triangle in CSS */ +/* the are not actual borders */ + %tooltip-tail { background-color: transparent !important; border-left: 9px solid transparent; border-right: 9px solid transparent; + border-top: 18px solid $gray-500; } +%tooltip-bottom::after { + border-top: 0; + border-bottom: 18px solid $gray-500; +} %tooltip-bubble { font-weight: normal; border-radius: $decor-radius-200; diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 9d6403b5c4..7c2955f6e1 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -4,14 +4,17 @@ main { @extend %app-view; } +%app-view > div > header { + @extend %app-view-header; +} %app-view > div > div { - @extend %app-content; + @extend %app-view-content; } %app-view header form { @extend %filter-bar; } @media #{$--lt-spacious-page-header} { - %app-view header .actions { + %app-view-header .actions { margin-top: 9px; } } @@ -30,8 +33,8 @@ main { %app-view h1 em { color: $gray-600; } -%app-view header .actions a, -%app-view header .actions button { +%app-view-header .actions a, +%app-view-header .actions button { @extend %button-compact; } %app-content div > dl { @@ -39,10 +42,10 @@ main { } [role='tabpanel'] > p:only-child, .template-error > div, -%app-content > p:only-child, +%app-view-content > p:only-child, %app-view > div.disabled > div, %app-view.empty > div { - @extend %app-content-empty; + @extend %app-view-content-empty; } [role='tabpanel'] > *:first-child { margin-top: 1.25em; diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss index 0eae559a23..a36dbefa5f 100644 --- a/ui-v2/app/styles/components/app-view/layout.scss +++ b/ui-v2/app/styles/components/app-view/layout.scss @@ -1,67 +1,67 @@ /* layout */ -%app-view header > div:last-of-type > div:first-child { +%app-view-header > div:last-of-type > div:first-child { flex-grow: 1; } %app-view { position: relative; } -%app-view header .actions { +%app-view-header .actions { float: right; display: flex; align-items: flex-start; margin-top: 9px; } -%app-view header dl { +%app-view-header dl { float: left; margin-top: 25px; margin-right: 50px; margin-bottom: 20px; } -%app-view header dt { +%app-view-header dt { font-weight: bold; } /* units */ %app-view { margin-top: 50px; } -%app-view header + div > *:first-child { +%app-view-header + div > *:first-child { margin-top: 1.8em; } %app-view h2 { padding-bottom: 0.2em; margin-bottom: 0.2em; } -%app-view header .actions > *:not(:last-child) { +%app-view-header .actions > *:not(:last-child) { margin-right: 12px; } // content -%app-content div > dl > dt { +%app-view-content div > dl > dt { position: absolute; } -%app-content div > dl { +%app-view-content div > dl { position: relative; } -%app-content-empty { +%app-view-content-empty { margin-top: 0; padding: 50px; text-align: center; } -%app-content form:not(:last-child) { +%app-view-content form:not(:last-child) { margin-bottom: 2.2em; } -%app-content div > dl > dt { +%app-view-content div > dl > dt { width: 140px; } -%app-content div > dl > dd { +%app-view-content div > dl > dd { padding-left: 140px; } -%app-content div > dl > * { +%app-view-content div > dl > * { min-height: 1em; margin-bottom: 0.4em; } // TODO: Think about an %app-form or similar -%app-content fieldset:not(.freetext-filter) { +%app-view-content fieldset:not(.freetext-filter) { padding-bottom: 0.3em; margin-bottom: 2em; } diff --git a/ui-v2/app/styles/components/healthcheck-output.scss b/ui-v2/app/styles/components/healthcheck-output.scss index 6c3ccb5ed3..d9e19fdeb5 100644 --- a/ui-v2/app/styles/components/healthcheck-output.scss +++ b/ui-v2/app/styles/components/healthcheck-output.scss @@ -2,3 +2,10 @@ .healthcheck-output { @extend %healthcheck-output; } +%healthcheck-output em::before { + width: 250px; + /* TODO: All tooltips previously used */ + /* nowrap, they shouldn't */ + white-space: normal !important; +} +/**/ diff --git a/ui-v2/app/styles/components/healthcheck-output/layout.scss b/ui-v2/app/styles/components/healthcheck-output/layout.scss index 629ef0fe9a..8917913eaa 100644 --- a/ui-v2/app/styles/components/healthcheck-output/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss @@ -12,45 +12,54 @@ %healthcheck-output > div { flex: 1 1 auto; } +%healthcheck-output header, +%healthcheck-output dl:last-of-type { + width: 100%; +} %healthcheck-output header { margin-bottom: 0.9em; } -%healthcheck-output dl:not(:last-of-type) { - float: left; - width: 25%; - margin-right: 2%; +%healthcheck-output > div { + // 100% minus the width of the icon space (26) + width: calc(100% - 26px); + display: flex; + flex-wrap: wrap; + justify-content: space-between; } -%healthcheck-output dl:nth-of-type(3) { - width: 46%; - margin-right: 0; -} -%healthcheck-output dl:not(:last-of-type) dd { - word-break: break-all; -} -%healthcheck-output dt { - margin-bottom: 0; -} -%healthcheck-output dl:last-of-type { - clear: both; - margin-bottom: 0; -} -%healthcheck-output dl:last-of-type dt { - margin-bottom: 0.3em; -} -%healthcheck-output dl:last-of-type dd { - position: relative; +%healthcheck-output dl { + min-width: 110px; } %healthcheck-output dl > * { - float: none; display: block; width: auto; position: static; padding-left: 0; } +%healthcheck-output dt { + margin-bottom: 0; +} +%healthcheck-output dd { + position: relative; +} + +%healthcheck-output dl:nth-last-of-type(2) { + width: 50%; +} +%healthcheck-output dl:last-of-type { + margin-bottom: 0; +} +%healthcheck-output dl:last-of-type dt { + margin-bottom: 0.3em; +} + %healthcheck-output pre { padding: 12px; padding-right: 40px; white-space: pre-wrap; + position: relative; +} +%healthcheck-output pre code { + word-wrap: break-word; } %healthcheck-output .with-feedback { position: absolute; @@ -67,9 +76,10 @@ %healthcheck-output::before { margin-right: 8px; } + %healthcheck-output dl:nth-last-of-type(2) { + width: 100%; + } %healthcheck-output dl:not(:last-of-type) { - float: none; - width: auto; margin-right: 0; } } diff --git a/ui-v2/app/styles/components/healthcheck-output/skin.scss b/ui-v2/app/styles/components/healthcheck-output/skin.scss index ba90f3fc58..33b20f5135 100644 --- a/ui-v2/app/styles/components/healthcheck-output/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-output/skin.scss @@ -14,6 +14,14 @@ margin-right: 8px; } } +%healthcheck-output dd em { + @extend %pill; + /*TODO: Should this be merged into %pill? */ + cursor: default; + font-style: normal; + margin-top: -2px; + margin-left: 0.5em; +} %healthcheck-output.passing::before { @extend %with-check-circle-fill-color-icon; } diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss index c2f7be881d..ad6f8003c2 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -45,6 +45,7 @@ th span em { font-style: normal; white-space: normal !important; } +/**/ /* ideally these would be in route css files, but left here as they */ /* accomplish the same thing (hide non-essential columns for tables) */ diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss index da5a034506..3f8f616100 100644 --- a/ui-v2/app/styles/components/tabular-collection.scss +++ b/ui-v2/app/styles/components/tabular-collection.scss @@ -95,6 +95,9 @@ html.template-token.template-list main table tr th { html.template-node.template-show main table.sessions tr { @extend %node-sessions-row; } +html.template-instance.template-show main table.exposedpaths tr { + @extend %instance-paths-row; +} // this will get auto calculated later in tabular-collection.js // keeping this here for reference // %services-row > * { @@ -110,6 +113,22 @@ html.template-node.template-show main table.sessions tr { %instances-row > * { width: calc(100% / 5); } +// instance-paths are for exposed paths +// we make the columns that need as much space as possible +// as wide as possible so 50% each minus enough room +// for the 3 port columns - we probably need a max of 55px +// for each port column so 55 * 3 = 165 +// so column 1 and 5 are 50% - 165 each +// the 3 remaining columns split the 165 thats left between them +%instance-paths-row > *:nth-child(1), +%instance-paths-row > *:nth-child(5) { + width: calc(50% - 165px) !important; +} +%instance-paths-row > *:nth-child(2), +%instance-paths-row > *:nth-child(3), +%instance-paths-row > *:nth-child(4) { + width: 110px !important; +} %tokens-row > *:first-child, %tokens-minimal-row > *:not(last-child), %tokens-row > *:nth-child(2), diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss index ccb1911573..6e8e878690 100644 --- a/ui-v2/app/styles/routes/dc/service/index.scss +++ b/ui-v2/app/styles/routes/dc/service/index.scss @@ -1,5 +1,9 @@ +/* TODO: need to standardize on the selectors used here */ +/* I would guess at the time of writing this we shojuld prefer */ +/* classes */ html.template-instance.template-show #addresses table tr, html.template-instance.template-show #upstreams table tr, -html.template-instance.template-show #meta-data table tr { +html.template-instance.template-show #meta-data table tr, +html.template-instance.template-show table.exposedpaths tr { cursor: default; } diff --git a/ui-v2/app/templates/components/healthcheck-list.hbs b/ui-v2/app/templates/components/healthcheck-list.hbs index 3bdf5ee21b..a3a24c9955 100644 --- a/ui-v2/app/templates/components/healthcheck-list.hbs +++ b/ui-v2/app/templates/components/healthcheck-list.hbs @@ -1,10 +1,10 @@