converted styling to be responsive using vh units

psnider · Apr 5, 2022 · 1501b7b · 1501b7b
1 parent 6833a63
commit 1501b7b
Show file tree

Hide file tree

Showing 51 changed files with 357 additions and 279 deletions.
diff --git a/dist/app.3ad30c1f00b93badac68.bundle.js b/dist/app.3ad30c1f00b93badac68.bundle.js
diff --git a/dist/app.8290711458d178b14ff3.bundle.js b/dist/app.8290711458d178b14ff3.bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.450b9e5fc6deafa566fa.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js"></script><script defer="defer" src="/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.9e9c6bc89f49649635e3.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.abf102d6ed9d6bb32f06.bundle.js"></script><script defer="defer" src="/app.8290711458d178b14ff3.bundle.js"></script></head><body aurelia-app="main"></body></html>
+<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.db86ed36783b23daf9c9.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.bd6bb235580d84aaea0a.bundle.js"></script><script defer="defer" src="/vendors-319a6989.2937262129926ffa8773.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.7ffc9e9adc57bd13ba64.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.febe1f6e5cab24309b9e.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.1e5c46f11392095855ca.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.2d3305a14ba97e76c0fa.bundle.js"></script><script defer="defer" src="/app.3ad30c1f00b93badac68.bundle.js"></script></head><body aurelia-app="main"></body></html>
diff --git a/...untime~app.450b9e5fc6deafa566fa.bundle.js → ...untime~app.db86ed36783b23daf9c9.bundle.js b/...untime~app.450b9e5fc6deafa566fa.bundle.js → ...untime~app.db86ed36783b23daf9c9.bundle.js
diff --git a/dist/vendors-319a6989.2937262129926ffa8773.bundle.js b/dist/vendors-319a6989.2937262129926ffa8773.bundle.js
diff --git a/...80424c5fae4edbd79e3.bundle.js.LICENSE.txt → ...937262129926ffa8773.bundle.js.LICENSE.txt b/...80424c5fae4edbd79e3.bundle.js.LICENSE.txt → ...937262129926ffa8773.bundle.js.LICENSE.txt
diff --git a/dist/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js b/dist/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js
diff --git a/dist/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js b/dist/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js
diff --git a/dist/vendors-3ce50090.febe1f6e5cab24309b9e.bundle.js b/dist/vendors-3ce50090.febe1f6e5cab24309b9e.bundle.js
diff --git a/...s-4e64aa37.9e9c6bc89f49649635e3.bundle.js → ...s-4e64aa37.7ffc9e9adc57bd13ba64.bundle.js b/...s-4e64aa37.9e9c6bc89f49649635e3.bundle.js → ...s-4e64aa37.7ffc9e9adc57bd13ba64.bundle.js
diff --git a/...s-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js → ...s-7e9c6a9f.bd6bb235580d84aaea0a.bundle.js b/...s-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js → ...s-7e9c6a9f.bd6bb235580d84aaea0a.bundle.js
diff --git a/...s-cdd60c62.abf102d6ed9d6bb32f06.bundle.js → ...s-cdd60c62.2d3305a14ba97e76c0fa.bundle.js b/...s-cdd60c62.abf102d6ed9d6bb32f06.bundle.js → ...s-cdd60c62.2d3305a14ba97e76c0fa.bundle.js
diff --git a/dist/vendors-fcadf5bb.1e5c46f11392095855ca.bundle.js b/dist/vendors-fcadf5bb.1e5c46f11392095855ca.bundle.js
diff --git a/dist/vendors-fcadf5bb.1e5c46f11392095855ca.bundle.js.LICENSE.txt b/dist/vendors-fcadf5bb.1e5c46f11392095855ca.bundle.js.LICENSE.txt
@@ -0,0 +1,14 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
diff --git a/dist/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js b/dist/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js
diff --git a/src/AnswerDifficulty.css b/src/AnswerDifficulty.css
@@ -3,13 +3,15 @@
     width: max-content;
     font-family: Spinnaker, Arial, sans-serif;
     color: black;
-    background-color: #76a76c;
-    border: 1px solid #374b33;
+    opacity: 1;
+    background-color: rgb(118, 167, 108);
+    border: thin solid #374b33;
 }
 .word_set_size_span_tag {
     width: max-content;
     font-family: Spinnaker, Arial, sans-serif;
     color: black;
-    background-color: #aed66c;
-    border: 1px solid #4c5e2f;
+    opacity: 1;
+    background-color: rgb(174, 214, 108);
+    border: thin solid #4c5e2f;
 }
diff --git a/src/AnswerRow.css b/src/AnswerRow.css
@@ -6,44 +6,35 @@
 
 .answer-title-element {
     background-color: rgba(235, 243, 250, 0.4);
-    border: 1px solid grey;
+    border: thin solid grey;
+    border-radius: 0.2vw;
     display: flex;
     align-items: center;
     justify-content: center;
-
-	text-shadow: -1px 1px 1px #ffffff,
-				  1px 1px 1px #ffffff,
-				  1px -1px 1px #ffffff,
-				  -1px -1px 1px #ffffff;
 }
 
 .answer-text-element {
     background-color: rgba(236, 244, 250, 0.4);
-    border: 1px solid black;
-    border-radius: 3px;
+    border: thin solid black;
+    border-radius: 0.2vw;
     display: flex;
     align-items: center;
     justify-content: center;
-
-	text-shadow: -1px 1px 1px #ffffff,
-				  1px 1px 1px #ffffff,
-				  1px -1px 1px #ffffff,
-				  -1px -1px 1px #ffffff;
 }
 
 .answer-container-element {
     background-color: rgba(236, 244, 250, 0.4);
-    border: 1px solid black;
-    border-radius: 3px;
-    padding: 2px;
+    border: thin solid black;
+    border-radius: 0.2vw;
+    padding: 0.2vw;
 }
 
 .score_tile {
-    font-size: 1em;
-    border-radius: 4px;
-    height: 20px;
-    padding: 2px;
-    margin: 2px;
+    /* border is set by the specific tile type class */
+    border-radius: 0.2vw;
+    height: 1.3vw;
+    padding: 0.1vw;
+    margin: 0.1vw;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -55,6 +46,6 @@
     font-family: Spinnaker, Arial, sans-serif;
     color: black;
     background-color: #d6c66c;
-    border: 1px solid #807642;
+    border: thin solid #807642;
 }
 
diff --git a/src/AnswerScores.css b/src/AnswerScores.css
@@ -1,17 +1,17 @@
 .not_a_word_tile {
-    font-size: 1em;
+    font-size: 1.5vw;     /* formerly 1em; */
 }
 .boggle_score_tile {
-    width: 20px;
+    width: 1.3vw;
     font-family: Arial, Helvetica, sans-serif;
     color: rgb(21, 98, 241);
     background-color: rgb(231, 247, 248);
-    border: 1px solid darkblue;
+    border: thin solid darkblue;
 }
 .scrabble_score_tile {
-    width: 20px;
+    width: 1.3vw;
     font-family: Spinnaker, Arial, sans-serif;
     color: #2A1F1B;
-    background-color: #ce9f73;
-    border: 1px solid rgb(139, 107, 0);
+    background-color: rgb(206, 159, 115, 1);
+    border: thin solid rgb(139, 107, 0);
 }
diff --git a/src/AnswersPanel.css b/src/AnswersPanel.css
@@ -1,19 +1,49 @@
-.answers-panel {
-    height: 100%;
-    width: 100%;
+.answers-container {
+    display: grid; 
+    grid-template-rows: 3fr 3fr 3fr;
+    grid-gap: 0px;
+    row-gap: 0px;
+    padding: 0px;
+    margin: 0px;
+    height: 34vw;
+
+    font-size: 1.5vw;
+	text-shadow: -1px 1px 1px #ffffff,
+				  1px 1px 1px #ffffff,
+				  1px -1px 1px #ffffff,
+				  -1px -1px 1px #ffffff;
+}
+
+.answers-panel-header-container {
+    height: 10%;
+}
+
+.answers-panel-list-container {
+    height: 80%;
 }
 
 .answers-panel-answers {
     height: 100%;
     width: 100%;
-    margin: 5px;
-    padding: 5px;
+    margin: 0.2vw;
+    padding: 0.2vw;
 }
 
 
-
 .text-over-license-plate {
     background-color: rgba(236, 244, 250, 0.4);
+}
+
+.no-answers {
+    margin: 0 auto;
+}
+
+.no-answers-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 34vw;
+
 	text-shadow: -1px 1px 1px #ffffff,
 				  1px 1px 1px #ffffff,
 				  1px -1px 1px #ffffff,

diff --git a/src/AnswersPanel.html b/src/AnswersPanel.html
@@ -1,19 +1,22 @@
 <template>
+    <require from="./css/general.css"></require>
     <require from="./AnswersPanel.css"></require>
     <require from="./AnswersTable"></require>
 
-    <div class="answers-panel">
-        <div if.bind="puzzle_answers.length > 0" >
-            <div style="height:10%;">
+    <div if.bind="puzzle_answers.length > 0" >
+        <div class="answers-container" >
+            <div class="answers-panel-header-container" >
                 <div class="text-over-license-plate" >${answers_counts_text}</div>
                 <div class="text-over-license-plate" >...for a total score of ${total_answers_score} points.</div>    
             </div>
-            <div style="height:440px;">
+            <div class="answers-panel-list-container">
                 <answers-table puzzle_answers.bind="puzzle_answers" ></answers-table>    
-            </div>
+            </div>    
         </div>
-        <div if.bind="puzzle_answers.length == 0"  >
-            <h3 class="text-over-license-plate" >You haven't asked to score any answers to the puzzle yet...</h3>
+    </div>
+    <div if.bind="puzzle_answers.length == 0"  >
+        <div class="no-answers-container" >
+            <h4 class="text-over-license-plate" >You haven't asked to score any answers to the puzzle yet...</h3>
         </div>
     </div>
 

diff --git a/src/AnswersTable.css b/src/AnswersTable.css
@@ -1,3 +1,7 @@
 .scroll-vertically {
     overflow-y: scroll;
-}
+}
+
+.answers-table-size {
+    height: 30vw;
+}
diff --git a/src/AnswersTable.html b/src/AnswersTable.html
@@ -4,8 +4,7 @@
     <require from="./AnswerRow"></require>
 
     <answers-title-row ></answers-title-row>
-    <div style="height:5px;" ></div>
-    <div ref="data_rows_element" style="height:350px;" class="scroll-vertically" >
+    <div ref="data_rows_element" class="answers-table-size scroll-vertically" >
         <div repeat.for="puzzle_answer of puzzle_answers">
             <answer-row puzzle_answer.bind="puzzle_answer" ></answer-row>
         </div>    

diff --git a/src/AnswersTitleRow.css b/src/AnswersTitleRow.css
@@ -0,0 +1,3 @@
+.answers-title-row {
+    margin-bottom: 0.3vw;
+}
diff --git a/src/AnswersTitleRow.html b/src/AnswersTitleRow.html
@@ -2,7 +2,7 @@
     <require from="./AnswerRow.css"></require>
     <require from="./AnswersTitleRow.css"></require>
 
-    <div class='answer-row-grid'>
+    <div class='answer-row-grid answers-title-row'>
         <div class='answer-title-element'>
             #
         </div>

diff --git a/src/Banner.css b/src/Banner.css
@@ -19,6 +19,11 @@
 
 /* page title */
 .banner-header {
-    font-size: 2em;
+    font-size: 3vw;   /* formerly 2em; */
+}
+
+.banner-icon {
+    width: 2.5vw;
+    height: 2.5vw;
 }
 
diff --git a/src/Banner.html b/src/Banner.html
@@ -8,7 +8,7 @@
             <hamburger-menu></hamburger-menu>
         </div>
         <div class="banner-container">
-            <div class="banner-header" title="built with Aurelia!">Make a Word from a License Plate <img src="../static/aurelia-logo.svg" width="25" height="25" /><img src="../static/Typescript_logo_2020.svg" width="25" height="25" /></div>
+            <div class="banner-header" title="built with Aurelia!">Make a Word from a License Plate <img class="banner-icon" src="../static/aurelia-logo.svg" /><img class="banner-icon" src="../static/Typescript_logo_2020.svg" /></div>
             <system-messages-signboard ></system-messages-signboard>
         </div>
         <div ></div>

diff --git a/src/CurrentGameControls.css b/src/CurrentGameControls.css
@@ -1,35 +1,55 @@
 .current-game-controls-button {
-    border-radius: 4px;
-    font-size: 1.0em;
+    border-radius: 0.4vw;
+    font-size: 1.8vw;     /* formerly 1em; */
 }
-.current-game-controls {
+.current-game-controls-container {
+    display: grid; 
+    grid-template-columns: 38fr 62fr;
+    grid-gap: 0px; 
+
+    /* width: 95%; */
+    /* height: 15%; */
+    margin: 0 auto;
+    /* padding: 1vw; */
+}
+.current-game-controls-container-child {
+    margin: 0.3vw;   
+    padding: 0.3vw;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    width: 95%;
-    height: 15%;
-    margin: 0 auto;
     justify-content: center;
-    flex-flow: row nowrap;
-    padding: 10px;
-    column-gap: 10px;
-    font-size: 1.5em;
-    /* border: 1px solid grey; */
+    /* margin: 0 auto; */
+}
+/* 
+.current-game-controls-time-container {
+    / * padding: 0.5vw; * /
+    font-size: 1.8vw;
+    margin: 0 auto;
 }
+ */
 .current-game-controls-time {
-    flex: 0 0 25%;
-    padding: 5px;
-    /* border: 1px solid grey; */
+    /* flex: 0 0 25%; */
+    /* padding: 0.5vw; */
+    display: inline-block; 
+    font-size: 1.8vw;
+    margin: 0 auto;
 }
+
+.current-game-controls-button {
+    font-size: 1.8vw;
+}
+/*
 .current-game-controls-buttons {
-    flex: 0 0 34%;
-    padding: 5px;
+    / * flex: 0 0 34%; * /
+    / * padding: 0.5vw; * /
 }
 .current-game-controls-hint {
-    flex: 0 0 41%;
-    padding: 5px;
+    / * flex: 0 0 41%; * /
+    / * padding: 0.5vw; * /
 }
-
-.reset-icon-color {
-    color: red;
+ */
+.reset-icon {
+    /* color: red; */
+    height: 1.8vw;
+    width: 1.8vw;
 }
diff --git a/src/CurrentGameControls.html b/src/CurrentGameControls.html
@@ -3,26 +3,29 @@
     <require from="./InProcessIndicator"></require>
 
     <div>
-        <div class="current-game-controls" >
-            <div class="current-game-controls-time">
-                <span>Time Elapsed: </span><span >${hours_minutes_seconds}</span>
+        <div class="current-game-controls-container" >
+            <div class="current-game-controls-container-child">
+                <div class="current-game-controls-time">
+                    <span>Time Elapsed: </span><span >${hours_minutes_seconds}</span>
+                </div>
             </div>
 
-            <div if.bind="request_in_progress_count === 0" >
-                <div class="current-game-controls-buttons" if.bind="!answers_panel_is_open" >
-                    <button type="button" title="or ENTER" class="current-game-controls-button" click.delegate="userRequestedCheckAnswer()" >Score Word</button>
-                    <button type="button" class="current-game-controls-button" click.delegate="userRequestedHint()" >Get a Hint</button>
-                    <button type="button" title="reset text, also by ESC key" class="current-game-controls-button reset-icon-color" click.delegate="resetText()" >🔄</button>
-                    <button type="button" class="current-game-controls-button" click.delegate="showAnswersPanel()" >Show Scores...</button>
-                </div>
-                <div class="current-game-controls-buttons" if.bind="answers_panel_is_open" >
-                    <button type="button" class="current-game-controls-button" click.delegate="hideAnswersPanel()" >Back to word entry...</button>
+            <div class="current-game-controls-container-child">
+                <div if.bind="request_in_progress_count === 0" >
+                    <div if.bind="!answers_panel_is_open" >
+                        <button class="current-game-controls-button" type="button" title="or ENTER" click.delegate="userRequestedCheckAnswer()" >Score Word</button>
+                        <button class="current-game-controls-button" type="button" click.delegate="userRequestedHint()" >Get a Hint</button>
+                        <button class="current-game-controls-button" type="button" title="reset text, also by ESC key" class="reset-icon" click.delegate="resetText()" >🔄</button>
+                        <button class="current-game-controls-button" type="button" click.delegate="showAnswersPanel()" >Show Scores...</button>
+                    </div>
+                    <div if.bind="answers_panel_is_open" >
+                        <button class="current-game-controls-button" type="button" click.delegate="hideAnswersPanel()" >Back to word entry...</button>
+                    </div>
                 </div>
 
-            </div>
-
-            <div if.bind="request_in_progress_count > 0" >
-                <in-process-indicator></in-process-indicator>
+                <div if.bind="request_in_progress_count > 0" >
+                    <in-process-indicator></in-process-indicator>
+                </div>
             </div>
         </div>
     </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.450b9e5fc6deafa566fa.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js"></script><script defer="defer" src="/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.9e9c6bc89f49649635e3.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.abf102d6ed9d6bb32f06.bundle.js"></script><script defer="defer" src="/app.8290711458d178b14ff3.bundle.js"></script></head><body aurelia-app="main"></body></html>
		<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.db86ed36783b23daf9c9.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.bd6bb235580d84aaea0a.bundle.js"></script><script defer="defer" src="/vendors-319a6989.2937262129926ffa8773.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.7ffc9e9adc57bd13ba64.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.febe1f6e5cab24309b9e.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.1e5c46f11392095855ca.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.2d3305a14ba97e76c0fa.bundle.js"></script><script defer="defer" src="/app.3ad30c1f00b93badac68.bundle.js"></script></head><body aurelia-app="main"></body></html>