simplify CSS class for embiggening time

mrjones-plip · Oct 10, 2021 · e3aa850 · e3aa850
2 parents f0de05e + 08cf375
commit e3aa850
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/html/YANPIWS.js b/html/YANPIWS.js
@@ -29,21 +29,14 @@ function loadXMLDoc(URL, targetId, callback) {
 }
 
 /**
- * handle resizing clock to big then small
+ * handle resizing clock to big then small 
+ * by toggling between big_time and small_time classes
  */
-// todo - use class for defaultSize, remove from signature
 function setClockSize(state, defaultSize){
     if (state == 'big'){
-        // todo - put all this in a class and then just add and remove class
-        $('#time').css('font-size', '127pt').css('text-align', 'center').css('width', '100%');
-        $('#date').css('text-align', 'center').css('width', '100%');
-        $('.big_clock_hide').hide();
+        $('.small_time').addClass("big_time").removeClass("small_time");
     } else {
-        // todo - put all this in a class and then just add and remove class
-        $('#time').css('font-size', defaultSize + 'pt').css('text-align', 'left').css('width', 'inherit');
-        $('#date').css('text-align', 'left').css('width', 'inherit');
-        $('.big_clock_hide').show();
-        console.log('using small size: ' + defaultSize);
+        $('.big_time').addClass("small_time").removeClass("big_time");
     }
 }
 

diff --git a/html/index.php b/html/index.php
@@ -50,10 +50,12 @@
 <div class="col">
     <div class="row"></div>
     <div class="row ">
-        <div id="wind_now" class="wind_now big_clock_hide"></div>
-        <div  id="datetime">
-            <div id='time'></div>
-            <div id='date'></div>
+        <div id='datetimewind'>
+            <div id="wind_now" class="wind_now small_time big_clock_hide"></div>     
+            <div id='datetime'>
+                <div id='time' class='small_time'></div>
+                <div id='date' class='small_time'></div>
+            </div>
         </div>
     </div>
     <div class="row suntimes big_clock_hide">
@@ -66,14 +68,13 @@
 <span id="last_ajax"></span>
 <script>
     var clockState = 'small';
-    clockState = $( "#datetime" ).click(function() {
+    $( "#datetime" ).click(function() {
         if (clockState == 'small'){
             clockState = 'big';
         } else {
             clockState = 'small';
         }
         setClockSize(clockState, <?= $YANPIWS['font_time_date_wind']?>);
-        return clockState;
     });
     function refreshAll() {
         //          Endpoint    data        DOM Location    callback

diff --git a/html/styles.css.php b/html/styles.css.php
@@ -84,26 +84,53 @@
     width:25px;
     padding-left:20px;
 }
-#date, #time, .label, .wind_now {
+
+.label, .wind_now {
     font-size:<?= $YANPIWS['font_time_date_wind']?>pt;
     font-weight: bold;
 }
 
+.big_time {
+    font-size: 127pt;
+    text-align: center;
+    width: 100%;
+}
+
+.small_time {
+    font-size: <?= $YANPIWS['font_time_date_wind']?>pt;
+    text-align: left;
+    width: fit-content;
+    padding: 5px;
+    display: inline-block;
+}
+
+.big_clock_hide.big_time {
+    display: none;
+}
+
 .label {
     text-transform: uppercase;
-    font-size: <?= $YANPIWS['font_temp_label']?>pt;
 }
-#date, #time{
-    float: left;
+#date, #time, #wind_now{
+    font-weight: bold;
 }
+
 #time:hover{
     cursor: pointer;
 }
 .wind_now {
+    width: fit-content;
+    display: inline-block;
     float: right;
+    padding-left: 30px;
+}
+
+#datetime {
+    display: block;
 }
+
 #date {
-    padding-left: 20px;
+    padding-left: 30px;
 }
 .lowt {
     color: #476b6b;