Forum Discussion

PerBonomi's avatar
PerBonomi
Boss
7 years ago

Too many tabs? Can't tell Prod and Stage apart anymore?

If you're crazy like me and your tab bar looks like one grey blur because of all the tabs you have open, maybe this is for you.

 

I keep having to click tabs just to see if it's a Prod or Stage page, so I added this to the header. One regular favicon and one colourful one, so I know instantly if a tab is prod or stage.

 

<#attempt>
<#assign current_url = http.request.url/>
<#if current_url?contains("<insert stage-unique url section, e.g. community-stage.site.com>") == true>
<link rel="icon" href="colourful icon">
<#else>
<link rel="icon" href="normal icon">
</#if>
<#recover>
<link rel="icon" href="normal icon">
</#attempt>

FreeMarker
UI & Design
  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    7 years ago

    Neat. Thanks for sharing, PerBonomi.

     

    Here's a related  tweak we use here on the Lithosphere. This will show a different striped background in the admin interface to reduce the amount of changing admin settings on stage and wondering why nothing happens on production 😁

     

    1. Create new component "stripe-stage-admin-background" (or a name of your preference):
      <#if page.name == "BizAppsPage">
 <#if config.getString("phase", "prod") == "stage">
   <style type="text/css"> .BizAppsPage { background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); } </style>
 </#if>
</#if>
    2. Add to last_chance_html:
      <@component id="stripe-stage-admin-background"/>

     

    Resulting admin on stage:

  • Fellsteruk's avatar
    Fellsteruk
    Boss
    7 years ago

    Thanks for sharing... 

    I have a similar problem but with the front end i'm normally testing things in stage whilst responding in production a crude yet effective banner helps keep me true:

    <#if config.getString("phase", "prod") == "stage">
<div id="staging-server-message">
	<h1 style="text-align: center;"> << Welcome to the TalkTalk Staging Server >> </h1>
</div>
</#if>

     I'll be giving your suggestion a go also :) 

     

     

  • ArndR's avatar
    ArndR
    Advisor
    6 years ago

    A very good idea, PerBonomi !
    As I have always a lot of tabs open, I also had the problem that you couldn't tell which tab is Prod and which Stage.

    I added the following to the header analogous to your version:

     

    <#attempt>
  <#if config.getString("phase", "prod") == "stage">
    <link rel="icon" href="${asset.get("/html/assets/favicon-stage.ico")}">
  <#else>
    <link rel="icon" href="${asset.get("/html/assets/favicon.ico")}">
  </#if>
<#recover>
  <link rel="icon" href="${asset.get("/html/assets/favicon.ico")}">
</#attempt>