From dd45186a6818e142fa1d688244627e800f4dd397 Mon Sep 17 00:00:00 2001
From: madalin0b <83428650+madalin0b@users.noreply.github.com>
Date: Tue, 24 Aug 2021 12:02:23 +0200
Subject: [PATCH] small banner left section fix (#1002)

---
 static/css/layout/banner.css |  38 +++--------
 templates/layout.html        | 125 ++++++++++++++++-------------------
 2 files changed, 65 insertions(+), 98 deletions(-)

diff --git a/static/css/layout/banner.css b/static/css/layout/banner.css
index 60eea1a718..f1ede7e800 100644
--- a/static/css/layout/banner.css
+++ b/static/css/layout/banner.css
@@ -3,7 +3,7 @@
   height: 46px;
   z-index: 999;
   width: 100%;
-  min-width: 300px;
+  min-width: 320px;
   background-color: var(--banner-background);
   color: var(--banner-text);
   /* font-size: 90%; */
@@ -27,6 +27,12 @@
   font-weight: 500;
 }
 
+@media (max-width: 1440px) {
+  .currency-symbol {
+    display: none;
+  }
+}
+
 .k-formatted-price {
   display: inline-block;
 }
@@ -35,7 +41,7 @@
   display: none;
 }
 
-@media (min-width: 800px) {
+@media (min-width: 1440px) {
   .k-formatted-price {
     display: none;
   }
@@ -303,24 +309,6 @@ color: var(--banner-text);
   }
 }
 
-.currency-symbol {
-  font-weight: 500;
-}
-
-@media (max-width: 350px) {
-  .currency-symbol {
-    display: none;
-  }
-}
-
-.k-formatted-price {
-  display: inline-block;
-}
-
-.price {
-  display: none;
-}
-
 .currency-dropdown-toggle {
   display: flex;
   align-items: center;
@@ -367,15 +355,7 @@ color: var(--banner-text);
   font-weight: 500;
 }
 
-@media (min-width: 800px) {
-  .k-formatted-price {
-    display: none;
-  }
-
-  .price {
-    display: inline-block;
-  }
-
+@media (min-width: 900px) {
   .currency-name {
     display: inline-block;
   }
diff --git a/templates/layout.html b/templates/layout.html
index 7cccb68f3e..4b13d19772 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -37,30 +37,26 @@
         <link rel="preload" as="font" href="https://fonts.gstatic.com/s/barlow/v4/7cHqv4kjgoGqM7E3_-gs51os.woff2" crossorigin>
         <link rel="preload" as="font" href="/fonts/Inter-Regular.woff2" crossorigin>
 
-
-
-
-
         <link id="app-style-initial" rel="stylesheet" href="/theme/css/beacon-light.min.css">
         <link id="app-style" rel="stylesheet" href="/css/layout.css">
         <link rel="stylesheet" href="/css/layout/toggle.css">
         <link rel="stylesheet" href="/css/layout/banner.css">
         <link rel="stylesheet" href="/css/layout/herofeed.css">
         <script>
-            var mql = window.matchMedia('(prefers-color-scheme: light)');
-            var lightScheme = mql.matches;
-            var currentTheme = localStorage.getItem('theme');
+            var mql = window.matchMedia('(prefers-color-scheme: light)')
+            var lightScheme = mql.matches
+            var currentTheme = localStorage.getItem('theme')
             var d1 = document.getElementById('app-style')
 
             if (currentTheme !== 'light' && currentTheme !== 'dark') {
                 currentTheme = lightScheme ? 'light' : 'dark'
             }
 
-            document.documentElement.setAttribute('data-theme', currentTheme);
-            localStorage.setItem('theme', currentTheme);
+            document.documentElement.setAttribute('data-theme', currentTheme)
+            localStorage.setItem('theme', currentTheme)
 
             if (currentTheme === 'dark') {
-                d1.insertAdjacentHTML('beforebegin', '<link id="app-theme" rel="stylesheet" type="text/css" href="/theme/css/beacon-' + currentTheme + '.min.css" onload="document.documentElement.style.display = ``">');
+                d1.insertAdjacentHTML('beforebegin', '<link id="app-theme" rel="stylesheet" type="text/css" href="/theme/css/beacon-' + currentTheme + '.min.css" onload="document.documentElement.style.display = ``">')
                 window.addEventListener('load', function () {
                     document.getElementById('app-style-initial').remove()
                 })
@@ -72,26 +68,26 @@
         <script>
             function updateLang(lang) {
                 document.cookie = "language=" + lang + ";samesite=strict;path=/"
-                window.location.reload();
+                window.location.reload()
             }
             function updateCurrency(currency) {
                 document.cookie = "currency=" + currency + ";samesite=strict;path=/"
-                window.location.reload(true);
+                window.location.reload(true)
             }
 
             function getCookie(cname) {
-                var name = cname + "=";
-                var ca = document.cookie.split(';');
+                var name = cname + "="
+                var ca = document.cookie.split(';')
                 for(var i = 0; i < ca.length; i++) {
-                    var c = ca[i];
+                    var c = ca[i]
                     while (c.charAt(0) == ' ') {
-                    c = c.substring(1);
+                        c = c.substring(1)
                     }
                     if (c.indexOf(name) == 0) {
-                    return c.substring(name.length, c.length);
+                        return c.substring(name.length, c.length)
                     }
                 }
-                return "";
+                return ""
             }
 
             window.addEventListener('load', function() {
@@ -157,51 +153,50 @@
         <strong>We're sorry but beaconcha.in doesn't work properly without JavaScript enabled. Please enable it to
             continue.</strong>
     </noscript>
+
     <!-- Banner -->
-    <div {{if or (eq .Active "confirmation") (or (eq .Active "login") (eq .Active "register"))}}style="display:none;"{{end}}
-         class="info-banner-container">
+    <div {{if or (eq .Active "confirmation") (or (eq .Active "login") (eq .Active "register"))}}style="display:none;"{{end}} class="info-banner-container">
         <div class="info-banner-content container">
             <div id="banner-stats" class="info-banner-left">
-                <a style="white-space:nowrap;" class="mr-2" href="/">
+                <a style="white-space: nowrap;" class="mr-2" href="/">
                     <i class="fas fa-home"></i> <span>|</span>
                 </a>
 
-                <div id="banner-epoch" class="info-item d-flex mr-2">
-                    <div class="info-item-header mr-2">
+                <div id="banner-epoch" class="info-item d-flex mr-2 mr-lg-3">
+                    <div class="info-item-header mr-1">
               			<span class="item-icon">
                				 <i class="fas fa-history"></i>
 						</span>
-                        <span class="item-text">Ep<span class="d-none d-md-inline">och</span>:</span>
+                        <span class="d-none d-sm-inline item-text">Ep<span class="d-none d-xl-inline">och</span></span>
                     </div>
-                    <div class="info-item-body">
+                    <div class="info-item-body" data-toggle="tooltip" title="" data-original-title="Epoch">
                         <a id="banner-epoch-data" href="/epoch/{{.CurrentEpoch}}">{{formatAddCommas .CurrentEpoch}}</a>
                     </div>
                 </div>
 
-
                 <div class="d-none d-lg-block">
-                    <div id="banner-slot" class="info-item d-flex mr-2">
-                        <div class="info-item-header mr-2">
+                    <div id="banner-slot" class="info-item d-flex mr-2 mr-lg-3">
+                        <div class="info-item-header mr-1">
 							<span class="item-icon">
 								<i class="fas fa-cubes"></i>
 							</span>
-                            <span class="item-text">Slot:</span>
+                            <span class="item-text">Slot</span>
                         </div>
-                        <div class="info-item-body">
+                        <div class="info-item-body" data-toggle="tooltip" title="" data-original-title="Slot">
                             <a id="banner-slot-data" href="/block/{{.CurrentSlot}}">{{formatAddCommas .CurrentSlot}}</a>
                         </div>
                     </div>
                 </div>
 
                 <div id="banner-eth-price">
-                    <div class="info-item d-flex mr-2">
-                        <div class="info-item-header mr-2">
+                    <div class="info-item d-flex mr-2 mr-lg-3">
+                        <div class="info-item-header mr-1">
 							<span class="item-icon">
 								<i class="fas fa-cubes"></i>
 							</span>
-                            <span class="d-none d-xl-inline item-text">Pr<span class="d-none d-md-inline">ice</span>:</span>
+                            <span class="d-none d-xl-inline item-text">Price</span>
                         </div>
-                        <div class="info-item-body">
+                        <div class="info-item-body" data-toggle="tooltip" title="" data-original-title="Price">
                             <a id="banner-eth-price-data">
                                 <span id="currentCurrencySymbol" class="currency-symbol">{{.CurrentSymbol}}</span>
                                 <span id="initialPrice">{{.CurrentPriceFormatted}}</span>
@@ -214,29 +209,24 @@
 
                 {{if not .ShowSyncingMessage}}
                     {{if gt .FinalizationDelay 3}}
-                        <div id="banner-fin" class="info-item d-flex mr-3">
-                            <div class="info-item-header mr-2 text-warning">
+                        <div id="banner-fin" class="info-item d-flex mr-2 mr-lg-3">
+                            <div class="info-item-header mr-1">
                                 <span class="item-icon">
-                                    <i class="fas fa-exclamation-triangle" data-toggle="tooltip" title=""
-                                       data-original-title="The last finalized epoch was {{.FinalizationDelay}} epochs ago."></i>
-                                </span>
-                                <span class="item-text d-none d-xl-block">
-                                    Finality
+                                    <i class="fas fa-exclamation-triangle" data-toggle="tooltip" title="" data-original-title="The last finalized epoch was {{.FinalizationDelay}} epochs ago"></i>
                                 </span>
                             </div>
                             <div class="info-item-body text-warning">
                                 <span id="banner-fin-data">{{.FinalizationDelay}}</span>
-                                <i class="fas fa-exclamation-triangle item-text" data-toggle="tooltip" title=""
-                                   data-original-title="The last finalized epoch was {{.FinalizationDelay}} epochs ago."></i>
+                                <i class="fas fa-exclamation-triangle item-text" data-toggle="tooltip" title="" data-original-title="Finality: the last finalized epoch was {{.FinalizationDelay}} epochs ago"></i>
                             </div>
                         </div>
                     {{end}}
                 {{end}}
+
                 {{if .ShowSyncingMessage}}
-                    <div id="banner-status" class="info-item d-flex mr-3">
+                    <div id="banner-status" class="info-item d-flex mr-1  mr-lg-3">
                         <div class="info-item-body">
-                            <i class="fas fa-sync" data-toggle="tooltip" title=""
-                               data-original-title="The explorer is currently syncing with the network"></i>
+                            <i class="fas fa-sync" data-toggle="tooltip" title="" data-original-title="The explorer is currently syncing with the network"></i>
                         </div>
                     </div>
                 {{end}}
@@ -846,9 +836,6 @@ <h5>Links</h5>
         </footer>
     </div>
 
-
-
-
     <script src="/js/jquery.min.js"></script>
     <script src="/js/popper.min.js"
             integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
@@ -863,8 +850,8 @@ <h5>Links</h5>
     <script src="/js/layout.js"></script>
     <script src="/js/banner.js"></script>
     <script>
-        var currency = {{.Currency}};
-        var exchangeRate = {{.ExchangeRate}};
+        var currency = {{.Currency}}
+        var exchangeRate = {{.ExchangeRate}}
 
         function slotToTime(slot) {
             var gts = {{.ChainGenesisTimestamp}}
@@ -903,7 +890,7 @@ <h5>Links</h5>
         {{if not .User.Authenticated}}
         <script>
             function hideCookieBanner(){
-                $('#cookie-banner').attr("class", "d-none");
+                $('#cookie-banner').attr("class", "d-none")
             }
             function acceptCookieBanner() {
                     document.cookie = "cookie=accepted;expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/"
@@ -914,10 +901,10 @@ <h5>Links</h5>
                     hideCookieBanner()
             }
             
-            if (document.cookie.indexOf("cookie=accepted")!=-1){
+            if (document.cookie.indexOf("cookie=accepted")!=-1) {
                 hideCookieBanner()
-            }else{
-                $('#cookie-banner').attr("class", "");
+            } else {
+                $('#cookie-banner').attr("class", "")
             }
         </script>
         {{end}}
@@ -931,11 +918,11 @@ <h5>Links</h5>
             <!-- Global site tag (gtag.js) - Google Analytics -->
             
             <script>
-                if (document.cookie.indexOf("cookie=accepted-necessary") == -1){
-                    let src = 'https://www.googletagmanager.com/gtag/js?id={{.Meta.GATag}}';
-                    let a = document.createElement('script');
-                    a.src = src;
-                    document.body.appendChild(a);
+                if (document.cookie.indexOf("cookie=accepted-necessary") == -1) {
+                    let src = 'https://www.googletagmanager.com/gtag/js?id={{.Meta.GATag}}'
+                    let a = document.createElement('script')
+                    a.src = src
+                    document.body.appendChild(a)
                 } 
             </script>
 
@@ -945,30 +932,30 @@ <h5>Links</h5>
                 window.dataLayer = window.dataLayer || [];
 
                 function gtag() {
-                    dataLayer.push(arguments);
+                    dataLayer.push(arguments)
                 }
 
-                gtag('js', new Date());
+                gtag('js', new Date())
 
-                gtag('config', {{.Meta.GATag}});
+                gtag('config', {{.Meta.GATag}})
 
                 function createFunctionWithTimeout(callback, opt_timeout) {
-                    var called = false;
+                    var called = false
 
                     function fn() {
                         if (!called) {
-                            called = true;
-                            callback();
+                            called = true
+                            callback()
                         }
                     }
 
                     setTimeout(fn, opt_timeout || 1000);
-                    return fn;
+                    return fn
                 }
 
                 function handleOutboundLinkClicks(event) {
                     var link = event.currentTarget.href
-                    event.preventDefault();
+                    event.preventDefault()
 
                     var fallback = setTimeout(function () {
                         window.location = link
@@ -988,7 +975,7 @@ <h5>Links</h5>
                 var outbounds = document.querySelectorAll('[ga-outbound]')
 
                 for (var i = 0; i < outbounds.length; i++) {
-                    var element = outbounds[i];
+                    var element = outbounds[i]
                     element.addEventListener('click', handleOutboundLinkClicks)
                 }