More improvements on the game version selector

EpocDotFr · Aug 16, 2017 · 9f65c8b · 9f65c8b
1 parent 3179421
commit 9f65c8b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 27 deletions.
diff --git a/static/css/app.css b/static/css/app.css
@@ -106,39 +106,35 @@ fieldset {
 /************************************************************************
  * Header */
 
-header {
+header,
+header .content {
+   display: table;
+}
+
+header .content {
     border-left: 0.1rem solid #34457e;
     border-right: 0.1rem solid #34457e;
     border-bottom: 0.1rem solid #34457e;
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
     background-color: #0e3163;
-    display: table;
 }
 
-header > * {
+header > *,
+header .content > * {
     display: table-cell;
-}
-
-header .vertical-middle {
     vertical-align: middle;
 }
 
-header h1 {
+header .content h1 {
     font-family: monospace, monospace;
 }
 
-header a,
-header a:hover {
+header .content a,
+header .content a:hover {
     text-decoration: none;
 }
 
-header .game-version-selector img.inactive {
-    filter: gray;
-    -webkit-filter: grayscale(1);
-    filter: grayscale(1);
-}
-
 /************************************************************************
  * Buttons */
 

diff --git a/static/images/the_escapists_2_logo.png b/static/images/the_escapists_2_logo.png
diff --git a/static/images/logo.png → static/images/the_escapists_icon.png b/static/images/logo.png → static/images/the_escapists_icon.png
diff --git a/static/images/the_escapists_logo.png b/static/images/the_escapists_logo.png
diff --git a/templates/layout.html b/templates/layout.html
@@ -17,22 +17,36 @@
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
 </head>
 <body class="man pls prs pbs">
-    <header class="mbs pas center w700p">
-        <div class="vertical-middle txtleft">
-            <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='images/logo.png') }}"></a>
-        </div>
+    <header class="mbs center">
         <div>
-            <div class="txtcenter">
-                <h1 class="man"><a href="{{ url_for('home') }}">Craft N' Escape</a></h1>
-            </div>
-            <div class="txtcenter small">
-                <em>Because everyone loves it when a plan comes together</em>
+            <div class="content pas">
+                <div class="txtleft prs">
+                    <a href="{{ url_for('home') }}"><img src="{{ url_for('static', filename='images/the_escapists_icon.png') }}"></a>
+                </div>
+                <div>
+                    <div class="txtcenter">
+                        <h1 class="man"><a href="{{ url_for('home') }}">Craft N' Escape</a></h1>
+                    </div>
+                    <div class="txtcenter small">
+                        <em>Because everyone loves it when a plan comes together</em>
+                    </div>
+                </div>
             </div>
         </div>
         {% if is_local() %}
-            <div class="vertical-middle txtright game-version-selector">
-                <a href="{{ url_for('home') }}"><img src="http://via.placeholder.com/140x60.png?text=The+Escapists" {% if game_version != 1 %}class="inactive" title="Click to use The Escapists"{% endif %}></a>
-                <a href="{{ url_for('home', game_version=2) }}"><img src="http://via.placeholder.com/140x60.png?text=The+Escapists+2" {% if game_version != 2 %}class="inactive" title="Click to use The Escapists 2"{% endif %}></a>
+            <div class="pls txtcenter">
+                {% if game_version == 1 %}
+                    {% set game_selector_link = url_for('home', game_version=2) %}
+                    {% set game_logo = 'the_escapists_logo.png' %}
+                    {% set game_switch_name = 'The Escapists 2' %}
+                {% elif game_version == 2 %}
+                    {% set game_selector_link = url_for('home') %}
+                    {% set game_logo = 'the_escapists_2_logo.png' %}
+                    {% set game_switch_name = 'The Escapists' %}
+                {% endif %}
+
+                <div><img src="{{ url_for('static', filename='images/' + game_logo) }}"></div>
+                <div class="small"><a href="{{ game_selector_link }}">Switch to {{ game_switch_name }}</a></div>
             </div>
         {% endif %}
     </header>