feat: optional ribbon

config/settings.yml

@@ -122,3 +122,4 @@ user-defaults:
   warning-days:     1209600
 
 instance-id: "_env:INSTANCE_ID:instance"
+ribbon: "_env:RIBBON:"

src/Foundation.hs

@@ -1664,6 +1664,8 @@ siteLayout' headingOverride widget = do
       hasPageActions = hasPrimaryPageActions || hasSecondaryPageActions
       hasSecondaryPageActions = any (is _PageActionSecondary) $ toListOf (traverse . _1 . _menuItemType) menuTypes
       hasPrimaryPageActions = any (is _PageActionPrime) $ toListOf (traverse . _1 . _menuItemType) menuTypes
+      contentRibbon :: Maybe Widget
+      contentRibbon = fmap toWidget appRibbon
 
   MsgRenderer mr <- getMsgRenderer
   let

src/Settings.hs

@@ -138,6 +138,7 @@ data AppSettings = AppSettings
     , appAuthPWHash             :: PWHashConf
 
     , appInitialInstanceID      :: Maybe (Either FilePath UUID)
+    , appRibbon                 :: Maybe Text
     } deriving (Show)
 
 data LogSettings = LogSettings
@@ -419,6 +420,8 @@ instance FromJSON AppSettings where
             _       -> return ()
           return val'
 
+        appRibbon                 <- assertM (not . Text.null) . fmap Text.strip <$> o.:? "ribbon"
+
         return AppSettings {..}
 
 makeClassy_ ''AppSettings

start.sh

@@ -10,6 +10,7 @@ export LOG_ALL=${LOG_ALL:-false}
 export LOGLEVEL=${LOGLEVEL:-info}
 export DUMMY_LOGIN=${DUMMY_LOGIN:-true}
 export ALLOW_DEPRECATED=${ALLOW_DEPRECATED:-true}
+export RIBBON=${RIBBON:-Localhost}
 
 move-back() {
     mv -v .stack-work .stack-work-run

templates/default-layout.hamlet

@@ -5,6 +5,10 @@ $if not isModal
   <!-- navigation -->
   ^{navbar}
 
+  $maybe ribbon <- contentRibbon
+    <div .ribbon>
+      ^{ribbon}
+
 <div .main>
 
   <div .main__content uw-poc>

templates/default-layout.lucius

@@ -694,3 +694,27 @@ section {
 .form--inline {
   display: inline-block;
 }
+
+
+.ribbon {
+  position: fixed;
+  top: calc(40px + var(--header-height));
+  right: -63px;
+  transform: rotate(45deg);
+  width: 250px;
+  background: var(--color-error);
+  text-align: center;
+  color: var(--color-lightwhite);
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 2em;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+  z-index: 19;
+  pointer-events: none;
+}
+
+@media (max-height: 500px) {
+  .ribbon {
+    top: calc(25px + var(--header-height-collapsed));
+  }
+}