Option to add ribbon to engineblock pages indication which environmen…

…t you're working on When left empty, nothing is shown. The approach may look a bit unwieldy, but this is done so that envirnment specific config can be passed to CSS. This is making it a pure CSS solution that also would work in installs that have a CSP that disables inline styles, that's why we have to enumerate the available colors since you cannot use `attr()` with anything other than `content:`.
OpenConext · Sep 26, 2023 · cdb012c · cdb012c
1 parent b751eac
commit cdb012c
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 1 deletion.
diff --git a/app/config/config.yml b/app/config/config.yml
@@ -77,6 +77,8 @@ twig:
         defaultTitle: "%view_default_title%"
         defaultHeader: "%view_default_header%"
         defaultLogo: "%view_default_logo%"
+        envName: "%env_name%"
+        envRibbonColor: "%env_ribbon_color%"
 
 doctrine:
     dbal:

diff --git a/app/config/parameters.yml.dist b/app/config/parameters.yml.dist
@@ -155,6 +155,8 @@ parameters:
     view_default_logo: /images/logo.png
     view_default_logo_width: 96
     view_default_logo_height: 96
+    env_name: ""
+    env_ribbon_color: ""
 
     ui_return_to_sp_link: false
 

diff --git a/theme/base/stylesheets/components.scss b/theme/base/stylesheets/components.scss
@@ -3,3 +3,4 @@
 @import 'components/spinner';
 @import 'components/success';
 @import 'components/warning';
+@import 'components/ribbon';
diff --git a/theme/base/stylesheets/components/ribbon.scss b/theme/base/stylesheets/components/ribbon.scss
@@ -0,0 +1,30 @@
+body::after {
+    position: fixed;
+    width: 109px;
+    height: 28px;
+    top: 15px;
+    right: -25px;
+    text-align: center;
+    font-size: 16px;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: white;
+    line-height: 30px;
+    transform: rotate(45deg);
+    content: attr(data-envname);
+}
+
+body[data-ribboncolor="red"]::after {
+    background-color: crimson;
+}
+body[data-ribboncolor="orange"]::after {
+    background-color: orange;
+}
+body[data-ribboncolor="pink"]::after {
+    background-color: hotpink;
+}
+body[data-ribboncolor="beige"]::after {
+    background-color: khaki;
+}
+
diff --git a/theme/base/stylesheets/error-page.scss b/theme/base/stylesheets/error-page.scss
@@ -10,5 +10,6 @@
 @import "components/old-not-converted/error-page/feedback-info";
 @import "components/old-not-converted/error-page/footer";
 @import "components/old-not-converted/error-page/horizontal-rule";
+@import "components/ribbon";
 @import 'pages/error-page';
 
diff --git a/theme/base/stylesheets/material.scss b/theme/base/stylesheets/material.scss
@@ -1,2 +1,3 @@
 @import "helpers.scss";
+@import "components/ribbon";
 @import "pages/notConverted";
diff --git a/theme/base/templates/layouts/scripts/default.html.twig b/theme/base/templates/layouts/scripts/default.html.twig
@@ -17,7 +17,7 @@
         <link href="/stylesheets/application.css?v={{ assetsVersion }}" rel="stylesheet">
     {% endspaceless %}{% endblock %}
 </head>
-<body>
+<body{% if envName is defined and envName %} data-envname="{{ envName }}" data-ribboncolor="{{ envRibbonColor }}"{% endif %}>
 {% block nojs %}{% endblock %}
 {% block background %}{% endblock %}