fix: css issues (#1285)

* fix: css issues * disable stylelint for bootstrap css since we don't want to change this css * fix logo * remove bootstrap 5 css and move coreUI to bundled styles * disable linting of core UI * fix mobile brand header title
eclipse-pass · Aug 1, 2024 · f958f7f · f958f7f
1 parent 2f6064c
commit f958f7f
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 30 deletions.
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -11,9 +11,7 @@ export default class ApplicationController extends Controller {
   @service currentUser;
   @service router;
   @service flashMessages;
-
-  @alias('model.staticConfig')
-  staticConfig;
+  @service('app-static-config') staticConfig;
 
   rootURL = config.rootURL;
 
@@ -32,14 +30,14 @@ export default class ApplicationController extends Controller {
   }
 
   get logoUri() {
-    return get(this, 'brand.logo');
+    return this.staticConfig?._config?.branding?.logo ?? '';
   }
 
   get homepage() {
-    return get(this, 'brand.homepage');
+    return this.staticConfig?._config?.branding?.homepage ?? '';
   }
 
   get contactUrl() {
-    return get(this, 'brand.pages.contactUrl');
+    return this.staticConfig?._config?.branding?.contactUrl ?? '';
   }
 }
diff --git a/app/index.html b/app/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
@@ -11,7 +11,6 @@
     <link rel="icon" href="/app/favicon.png" />
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/pass-ui.css" />
-    <link rel="stylesheet" href="{{rootURL}}coreUI.css" />
 
     {{content-for "head-footer"}}
   </head>

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -1,4 +1,4 @@
-@import url('branding.css');
+@import url('core-ui.css');
 @import url('font-awesome-5-0-13.css');
 @import url('workflow-wrapper.css');
 @import url('workflow-review.css');
@@ -635,7 +635,10 @@ table td {
   line-height: 1.5;
   border-radius: 0;
   /* stylelint-disable-next-line prettier/prettier */
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
   background-color: #418fde !important;
   border-color: #418fde !important;
@@ -656,7 +659,10 @@ table td {
   line-height: 1.5;
   border-radius: 0;
   /* stylelint-disable-next-line prettier/prettier */
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
   color: #151b1e !important;
   background-color: #a4b7c1 !important;

diff --git a/public/coreUI.css → app/styles/core-ui.css b/public/coreUI.css → app/styles/core-ui.css
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
  * @version v1.0.10
@@ -2402,7 +2403,9 @@ pre code {
   background-clip: padding-box;
   border: 1px solid #c2cfd6;
   border-radius: 0;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 
 .form-control::-ms-expand {
@@ -2694,7 +2697,9 @@ select.form-control-lg:not([size], [multiple]),
 
 .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before,
 .custom-control-input.is-valid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgb(77 189 116 / 25%);
+  box-shadow:
+    0 0 0 1px #e4e5e6,
+    0 0 0 0.2rem rgb(77 189 116 / 25%);
 }
 
 .was-validated .custom-file-input:valid ~ .custom-file-label,
@@ -2804,7 +2809,9 @@ select.form-control-lg:not([size], [multiple]),
 
 .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before,
 .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgb(248 108 107 / 25%);
+  box-shadow:
+    0 0 0 1px #e4e5e6,
+    0 0 0 0.2rem rgb(248 108 107 / 25%);
 }
 
 .was-validated .custom-file-input:invalid ~ .custom-file-label,
@@ -2924,7 +2931,10 @@ select.form-control-lg:not([size], [multiple]),
   font-size: 0.875rem;
   line-height: 1.5;
   border-radius: 0;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
 }
 
@@ -5515,7 +5525,9 @@ tbody.collapse.show {
 }
 
 .custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgb(32 168 216 / 25%);
+  box-shadow:
+    0 0 0 1px #e4e5e6,
+    0 0 0 0.2rem rgb(32 168 216 / 25%);
 }
 
 .custom-control-input:active ~ .custom-control-label::before {
@@ -5626,7 +5638,9 @@ tbody.collapse.show {
 .custom-select:focus {
   border-color: #8ad4ee;
   outline: 0;
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 7.5%), 0 0 5px rgb(138 212 238 / 50%);
+  box-shadow:
+    inset 0 1px 2px rgb(0 0 0 / 7.5%),
+    0 0 5px rgb(138 212 238 / 50%);
 }
 
 .custom-select:focus::-ms-value {
@@ -8104,7 +8118,9 @@ button.close {
 .modal.fade .modal-dialog {
   transition: -webkit-transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
+  transition:
+    transform 0.3s ease-out,
+    -webkit-transform 0.3s ease-out;
   transform: translate(0, -25%);
   transform: translate(0, -25%);
 }
@@ -8566,7 +8582,9 @@ button.close {
   width: 100%;
   transition: -webkit-transform 0.6s ease;
   transition: transform 0.6s ease;
-  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
+  transition:
+    transform 0.6s ease,
+    -webkit-transform 0.6s ease;
   backface-visibility: hidden;
   backface-visibility: hidden;
   perspective: 1000px;
@@ -12724,7 +12742,9 @@ body {
 
 .avatars-stack .avatar {
   margin-right: -15px;
-  transition: margin-left 0.25s, margin-right 0.25s;
+  transition:
+    margin-left 0.25s,
+    margin-right 0.25s;
 }
 
 .avatars-stack .avatar:hover {
@@ -16287,7 +16307,9 @@ base-chart.chart {
   background-position: center;
   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  transition:
+    transform 0.3s,
+    -webkit-transform 0.3s;
 }
 
 .sidebar .nav-dropdown.open {
@@ -18522,16 +18544,28 @@ app-root {
 .sidebar,
 .main,
 .aside-menu {
-  transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s;
-  transition: margin-left 0.25s, margin-right 0.25s, width 0.25s, flex 0.25s, -ms-flex 0.25s;
+  transition:
+    margin-left 0.25s,
+    margin-right 0.25s,
+    width 0.25s,
+    flex 0.25s;
+  transition:
+    margin-left 0.25s,
+    margin-right 0.25s,
+    width 0.25s,
+    flex 0.25s,
+    -ms-flex 0.25s;
 }
 
 .sidebar-nav {
   transition: width 0.25s;
 }
 
 .breadcrumb {
-  transition: left 0.25s, right 0.25s, width 0.25s;
+  transition:
+    left 0.25s,
+    right 0.25s,
+    width 0.25s;
 }
 
 @media (width <= 991.98px) {

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -5,12 +5,12 @@
   <header id="brand-header" class="navbar navbar-expand-xs justify-content-center mb-0">
     <div class={{if this.fullWidth "container-fluid" "container"}}>
       <a href="/" class="navbar-brand d-none d-sm-block">
-        <h3 id="brand-header-title" class="font-weight-light">
+        <h3 class="brand-header-title font-weight-light">
           Public Access Submission System
         </h3>
       </a>
       <a href="/" class="navbar-brand custom-color d-xs-block d-sm-none">
-        <h3 class="font-weight-light">
+        <h3 class="brand-header-title font-weight-light">
           P.A.S.S.
         </h3>
       </a>

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -38,7 +38,7 @@ module.exports = function (defaults) {
 
     'ember-bootstrap': {
       bootstrapVersion: 5,
-      importBootstrapCSS: true,
+      importBootstrapCSS: false,
     },
   });
 

diff --git a/public/branding.css b/public/branding.css
@@ -142,7 +142,7 @@ a.text-danger:hover {
   color: white;
 }
 
-#brand-header-title {
+.brand-header-title {
   color: white;
 }
 

diff --git a/tests/index.html b/tests/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -12,7 +12,6 @@
     <link rel="stylesheet" href="{{rootURL}}assets/pass-ui.css" />
     <link rel="stylesheet" href="{{rootURL}}assets/test-support.css" />
     <link rel="icon" href="{{rootURL}}favicon.png" />
-    <link rel="stylesheet" href="{{rootURL}}coreUI.css" />
 
     {{content-for "head-footer"}} {{content-for "test-head-footer"}}
   </head>