From 12aaacff59b7a7ec68fbf26634014e07f46096ab Mon Sep 17 00:00:00 2001 From: Amy Chen Date: Thu, 22 Dec 2022 13:30:58 -0800 Subject: [PATCH 1/4] TN-3209 profile display styling fixes (#4271) Co-authored-by: Amy Chen --- portal/static/less/eproms.less | 2 +- portal/static/less/topnav.less | 92 ++++++++++++++------ portal/templates/portal_wrapper.html | 31 ++++--- portal/templates/profile/profile_macros.html | 26 +++--- 4 files changed, 98 insertions(+), 53 deletions(-) diff --git a/portal/static/less/eproms.less b/portal/static/less/eproms.less index 448851a857..0212bcf2f5 100644 --- a/portal/static/less/eproms.less +++ b/portal/static/less/eproms.less @@ -3960,7 +3960,7 @@ section.header { .choice { margin-bottom: 12px; display: flex; - flex-wrap: wrap; + align-items: flex-start; .text { margin-left: 8px; } diff --git a/portal/static/less/topnav.less b/portal/static/less/topnav.less index d9f5ce65c3..c7a2cd44fd 100644 --- a/portal/static/less/topnav.less +++ b/portal/static/less/topnav.less @@ -114,15 +114,35 @@ max-width: 100%; background-color: @defaultBackgroundColor; background-image: url('../img/header_background.jpg'); - height: 135px; + height: 136px; background-size: cover; margin: 0; - padding: 30px; + padding: 16px 24px; } #tnthNavMainContainer { - max-width: 720px; position: relative; margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + #tnthLogo { + flex: 1; + } + #tnthTopLinks { + width: 35%; + } + .spacer { + width: 35%; + } + .text-container { + color: #FFF; + display: none; + } + @media (min-width: 992px) { + .text-container { + display: block; + } + } } #tnthNavXs { display: none; @@ -178,14 +198,14 @@ } @media (min-width: 699px) { #tnthNavXs { - min-height: 72px; + min-height: 86px; + padding: 16px; } } /** Logo **/ #tnthLogo { - width: 500px; - margin: 4px auto; + margin: 16px auto; transition: margin 10ms ease-in; text-align: center; } @@ -205,18 +225,23 @@ } } #tnthTopLinks { - position: absolute; - top: 0; - left: 0; + line-height: 1.65; + white-space: normal; } /** Buttons **/ .tnth-btn-group { position: relative; - display: inline-block; - vertical-align: middle; // match .btn alignment given font-size hack above + display: flex; + flex-direction: column; + align-items: center; margin-left: 0.2em; } +@media (min-width: 786px) { + .tnth-btn-group { + flex-direction: row; + } +} .tnth-nav-btn { display: inline-block; height: inherit; @@ -237,11 +262,20 @@ } } #tnthUserBtn { -padding: 0 6px; + padding: 0 6px; + display: flex; + align-items: center; + .menu-text { + display: inline-block; + margin-right: 4px; + } + .profile-img { + margin-left: 12px; + } } @media (min-width: 992px) { #tnthUserBtn { - padding: 0 14px 0 0; + padding: 0 16px 0 0; height: inherit; } } @@ -353,6 +387,23 @@ padding: 0 6px; .welcome-text { display: block; margin: 0.2em 0; + white-space: normal; + word-break: break-word; + .prompt { + display: inline-block; + } +} +@media (min-width: 992px) { + .welcome-text { + .prompt { + display: block; + } + } +} +@media (min-width: 1600px) { + .welcome-text { + white-space: nowrap; + } } @media all and (-ms-high-contrast: none),(-ms-high-contrast: active) { /* IE10+ */ @@ -446,7 +497,7 @@ padding: 0 6px; #tnthNavXs { display: block; } -@media (min-width: 768px) { +@media (min-width: 992px) { #tnthNavMain { display: block; } @@ -460,19 +511,8 @@ padding: 0 6px; } } @media (min-width: 992px) { - #tnthNavMainContainer { - max-width: 940px; - } #tnthNavWrapper img { margin: 0 0.5em; - vertical-align: middle; - } -} -@media (min-width: 1220px) { - #tnthNavMainContainer { - max-width: 100%; - } - .welcome-text { - display: inline-block; + vertical-align: top; } } diff --git a/portal/templates/portal_wrapper.html b/portal/templates/portal_wrapper.html index 0b2b5dad1e..81003c420a 100644 --- a/portal/templates/portal_wrapper.html +++ b/portal/templates/portal_wrapper.html @@ -50,14 +50,6 @@
- + +
-
{{ _("MENU") }} {{_('Profile image')}}
+
{{ _("MENU") }} {{_('Profile image')}}
{% if enable_links %}{% endif %} {{_('TrueNTH logo')}} {% if enable_links %}{% endif %} diff --git a/portal/templates/profile/profile_macros.html b/portal/templates/profile/profile_macros.html index 24282dd3cb..04c0ce87af 100644 --- a/portal/templates/profile/profile_macros.html +++ b/portal/templates/profile/profile_macros.html @@ -931,18 +931,20 @@
{{_("Actions Required ( v-if="item.type == 'boolean'">
-
- - -