From 61c799447b1a25f9bf839cbda82597dcb87dbca9 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Mon, 3 Jul 2017 15:18:47 +0000
Subject: [PATCH] Improved banner CSS

---
 src/web/html/index.html                | 42 +++++++++++++++-----------
 src/web/stylesheets/layout/_banner.css |  8 ++---
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index 0d2d4246..62c560fd 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -32,6 +32,8 @@
         <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
 
         <script type="application/javascript">
+            "use strict";
+
             // Load theme before the preloader is shown
             document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme;
 
@@ -87,23 +89,29 @@
         </div>
         <div id="content-wrapper">
             <div id="banner">
-                <% if (htmlWebpackPlugin.options.inline) { %>
-                    <span style="float: left; margin-left: 10px;">Compile time: <%= htmlWebpackPlugin.options.compileTime %></span>
-                <% } else { %>
-                    <a href="cyberchef.htm" style="float: left; margin-left: 10px; margin-right: 80px;" download>Download CyberChef<img aria-hidden="true" src="<%- require('../static/images/download-24x24.png') %>" alt="Download Icon"/></a>
-                <% } %>
-                <span id="notice">
-                    <script type="text/javascript">
-                        // Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
-                        if (navigator.userAgent && navigator.userAgent.match(/MSIE \d\d?\./)) {
-                            document.write("Internet Explorer is not supported, please use Firefox or Chrome instead");
-                            alert("Internet Explorer is not supported, please use Firefox or Chrome instead");
-                        }
-                    </script>
-                    <noscript>JavaScript is not enabled. Good luck.</noscript>
-                </span>
-                <a href="#" id="support" class="banner-right" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
-                <a href="#" id="options" class="banner-right">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
+                <div class="col-md-4" style="text-align: left; padding-left: 10px;">
+                    <% if (htmlWebpackPlugin.options.inline) { %>
+                        <span>Version <%= htmlWebpackPlugin.options.version %></span>
+                    <% } else { %>
+                        <a href="cyberchef.htm" download>Download CyberChef<img aria-hidden="true" src="<%- require('../static/images/download-24x24.png') %>" alt="Download Icon"/></a>
+                    <% } %>
+                </div>
+                <div class="col-md-4" style="text-align: center;">
+                    <span id="notice">
+                        <script type="text/javascript">
+                            // Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
+                            if (navigator.userAgent && navigator.userAgent.match(/MSIE \d\d?\./)) {
+                                document.write("Internet Explorer is not supported, please use Firefox or Chrome instead");
+                                alert("Internet Explorer is not supported, please use Firefox or Chrome instead");
+                            }
+                        </script>
+                        <noscript>JavaScript is not enabled. Good luck.</noscript>
+                    </span>
+                </div>
+                <div class="col-md-4" style="text-align: right; padding-right: 0;">
+                    <a href="#" id="options">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
+                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
+                </div>
             </div>
             <div id="workspace-wrapper">
                 <div id="operations" class="split split-horizontal no-select">
diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css
index df994ea5..cb902157 100644
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -10,19 +10,15 @@
     position: absolute;
     height: 30px;
     width: 100%;
-    text-align: center;
     line-height: 30px;
     border-bottom: 1px solid var(--primary-border-colour);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
 }
 
-.banner-right {
-    float: right;
-    margin-right: 10px;
-}
-
 #banner img {
     margin-bottom: 2px;
     margin-left: 8px;
+    padding-right: 10px;
 }
+