diff --git a/CHANGELOG.md b/CHANGELOG.md index 98a99399bd..f02790caed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). ### Fixed - Fixed Traffic Router crs/stats to prevent overflow and to correctly record the time used in averages. - [#5893](https://github.com/apache/trafficcontrol/issues/5893) - A self signed certificate is created when an HTTPS delivery service is created or an HTTP delivery service is updated to HTTPS. +- [#6255](https://github.com/apache/trafficcontrol/issues/6255) - Unreadable Prod Mode CDN Notifications in Traffic Portal ### Changed - Updated `t3c` to request less unnecessary deliveryservice-server assignment and invalidation jobs data via new query params supported by Traffic Ops diff --git a/traffic_portal/app/src/common/modules/chart/_chart.scss b/traffic_portal/app/src/common/modules/chart/_chart.scss index f9b38c17b9..72e48b3578 100644 --- a/traffic_portal/app/src/common/modules/chart/_chart.scss +++ b/traffic_portal/app/src/common/modules/chart/_chart.scss @@ -27,10 +27,11 @@ } } +/* is this used anywhere? Possibly content dynamically inserted by a library? */ .x_content { div.legend { table { - width: initial !important; + width: initial; } } } @@ -47,6 +48,3 @@ } } - - - diff --git a/traffic_portal/app/src/common/modules/header/HeaderController.js b/traffic_portal/app/src/common/modules/header/HeaderController.js index 37082a0c61..98f003f773 100644 --- a/traffic_portal/app/src/common/modules/header/HeaderController.js +++ b/traffic_portal/app/src/common/modules/header/HeaderController.js @@ -17,6 +17,13 @@ * under the License. */ +const defaultBannerColor = "#EDEDED"; +const defaultSidebarColor = "#2A3F54"; +const defaultTextColor = "#515356"; + +const prodTextColor = "white"; +const prodBannerColor = "#B22222"; + var HeaderController = function($rootScope, $scope, $state, $uibModal, $location, $anchorScroll, locationUtils, permissionUtils, authService, trafficPortalService, changeLogService, cdnService, changeLogModel, userModel, propertiesModel) { let getCDNs = function(notifications) { @@ -35,7 +42,15 @@ var HeaderController = function($rootScope, $scope, $state, $uibModal, $location $scope.enviroName = (propertiesModel.properties.environment) ? propertiesModel.properties.environment.name : ''; - $scope.isProd = (propertiesModel.properties.environment) ? propertiesModel.properties.environment.isProd : false; + if (propertiesModel.properties.environment && propertiesModel.properties.environment.isProd) { + document.documentElement.style.setProperty("--banner-color", prodBannerColor); + document.documentElement.style.setProperty("--sidebar-color", prodBannerColor); + document.documentElement.style.setProperty("--banner-text-color", prodTextColor); + } else { + document.documentElement.style.setProperty("--banne-color", defaultBannerColor); + document.documentElement.style.setProperty("--sidebar-color", defaultSidebarColor); + document.documentElement.style.setProperty("--banner-text-color", defaultTextColor); + } /* we don't want real time changes to the user showing up. we want the ability to revert changes if necessary. thus, we will only update this on save. see userModel::userUpdated event below. diff --git a/traffic_portal/app/src/common/modules/header/_header.scss b/traffic_portal/app/src/common/modules/header/_header.scss index 21f3f18957..b2972f6334 100644 --- a/traffic_portal/app/src/common/modules/header/_header.scss +++ b/traffic_portal/app/src/common/modules/header/_header.scss @@ -1,6 +1,4 @@ /* - - Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,135 +10,143 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. - */ -body.nav-sm .main_container .top_nav { - padding: 0 !important; - display: block; - margin-left: 70px; - z-index: 2; -} - -#alertsButton, #userButton { - &:hover, &:focus { - text-decoration: none; - } -} - -.main_container .top_nav { - padding: 0 !important; - display: block; - padding: 10px 20px 0; - margin-left: 230px; -} - -.top_nav .navbar-right { - margin: 0; - width: 70%; - float: right; -} - -.top_nav .navbar-right li { - display: inline-block; - float: right; -} - -.top_nav .dropdown-menu { - min-width: 220px; -} - -.top_nav .dropdown-menu li { - width: 100%; -} - -.top_nav .dropdown-menu li a { - width: 100%; - padding: 12px 20px; -} - -.top_nav li a i { - font-size: 15px -} - -.navbar { - margin-bottom: 0 -} - -.navbar-header { - background: #34495E; -} - -.navbar-right { - margin-right: 0; -} -.navbar-static-top { - position: fixed; - top: 0; - width: 100%; +:root { + --banner-color: #EDEDED; + --sidebar-color: #2A3F54; + --banner-text-color: #515356; +} + +@media (min-width: 480px) { + #header { + position: static + } +} + +#header { + float: left; + background: var(--banner-color); + border-bottom: 1px solid #D9DEE4; + margin-bottom: 10px; + width: 100%; + position: relative; + + .navbar-right { + margin: 0; + width: 70%; + float: right; + + li { + display: inline-block; + } + } + + .dropdown-menu { + min-width: 220px; + + li { + width: 100%; + + a { + width: 100%; + padding: 12px 20px; + } + } + } + + li a i { + font-size: 15px; + } + + .btn-link { + margin-bottom: 5px; + color: var(--banner-text-color); + + &:hover { + text-decoration: none; + } + } + + .uib-dropdown-menu { + padding: 0; + .btn-link { + color: #337ab7; + } + } + + .toggle { + float: left; + margin: 0; + padding-top: 16px; + padding-bottom: 16px; + width: 70px; + + a { + padding: 15px 15px 0; + margin: 0; + + i { + font-size: 26px; + } + } + } } -.navbar-brand, -.navbar-nav>li>.btn-group>.btn-link { - margin-bottom: 5px -} - -.nav.navbar-nav>li>.btn-group>.btn-link { - color: #515356; -} - -.nav.top_menu>li>a { - position: relative; - display: block; - padding: 10px 15px; - color: #34495E; -} - -.nav>li>a:hover, -.nav>li>a:focus { - background-color: transparent; -} - -.toggle { - float: left; - margin: 0; - padding-top: 16px; - padding-bottom: 16px; - width: 70px; -} - -.toggle a { - padding: 15px 15px 0; - margin: 0; -} - -.toggle a i { - font-size: 26px; -} - -.enviro-banner { - float: left; - border-radius: 0; - height: 57px; - text-align: center; -} - -.enviro-banner.prod { - background: #B22222; -} - -.notification.btn-link:hover { - text-decoration: none; -} - -@media (max-width: 991px) { - - body.nav-md .container.body .top_nav { - width: 100%; - margin: 0; - } - +#alertsButton, #userButton { + &:hover, &:focus { + text-decoration: none; + } +} + +#enviro-banner { + background: transparent; + float: left; + border-radius: 0; + margin-bottom: 0; + height: 57px; + text-align: center; + + span { + text-overflow: ellipsis; + overflow: hidden; + font-weight: 400; + font-size: 18px; + width: 100%; + color: var(--banner-text-color); + margin-left: 0; + line-height: 59px; + display: block; + height: 55px; + margin: 0; + padding-left: 10px; + text-transform: uppercase; + } +} + +.nav_title { + width: 230px; + float: left; + background: var(--sidebar-color); + border-radius: 0; + height: 57px; + text-align: center; +} + +.navbar-nav { + + .open .dropdown-menu { + position: absolute; + background: #fff; + margin-top: 0; + border: 1px solid #D9DEE4; + box-shadow: none; + right: 0; + left: auto; + width: 220px; + + &.msg_list { + width: 300px; + } + } } - - - diff --git a/traffic_portal/app/src/common/modules/header/header.tpl.html b/traffic_portal/app/src/common/modules/header/header.tpl.html index 31adc90664..8143f66030 100644 --- a/traffic_portal/app/src/common/modules/header/header.tpl.html +++ b/traffic_portal/app/src/common/modules/header/header.tpl.html @@ -17,13 +17,13 @@ under the License. --> -