Prechádzať zdrojové kódy

Updated CSS for small screens, added wind chill records

There were still some bugs with how the history tables, NOAA table and NOAA climate summaries was handle on smaller device screens. I believe I fixed those issues on screens with a width of 400 px or larger.

I also added wind chill to all time records table in Summary.html. The records already existed through the $alltime Weewx Tag so just needed to add the html to the page.
Josh Smith 8 rokov pred
rodič
commit
d4f5f5c3e6
3 zmenil súbory, kde vykonal 208 pridanie a 186 odobranie
  1. 21 9
      css/main.css
  2. 18 6
      summary.html.tmpl
  3. 169 171
      text.php.tmpl

+ 21 - 9
css/main.css

@@ -780,9 +780,9 @@ ul.topnav li.icon {
 
 @media (max-width: 1209px) and (min-width: 1010px) {
   .container {
-    width: 920px !important; }
+    width: 1020px !important; } /* fixed sizes from 920px to 1020px */
     .container .left {
-      width: 290px !important;
+      width: 390px !important;		/* fixed sizes from 290px to 390px */
       margin-right: 0.8em !important; }
     .container .right {
       width: 580px !important; }
@@ -792,7 +792,21 @@ ul.topnav li.icon {
     max-width: 100% !important; }
 
   img.small {
-    max-width: 100% !important; } }
+    max-width: 100% !important; }
+
+/*Makes small font size for history tables*/
+  div.tablefix {
+     font-size: 0.8em; }
+
+/*Makes small font size for NOAA Monthly Reports table*/
+  div.noaatable {
+     font-size: 0.8em; }
+/*Makes small font size for NOAA Monthly Reports in text.php*/
+  pre.noaareport {
+     font-size: 0.8em; 
+     font-family: monospace; }
+
+}
 
 @media (max-width: 1009px) {
   .container {
@@ -802,7 +816,6 @@ ul.topnav li.icon {
       margin: 0 !important; }
     .container .right {
       width: 100% !important; }
-    /*added center tag container for the text.php page. */
     .container .center {
       width: 100% !important;
       margin: 0 !important; }
@@ -822,11 +835,10 @@ ul.topnav li.icon {
 
   .card {
     margin: 1em 0; }
-   
-/*card width for summaries page history tables*/
-  #tablefix.card {
-    width: 100%;
-    font-size: 0.7em; }
+
+/*Makes small font size for history tables*/
+  div.tablefix {
+     font-size: 0.6em; }
 
 /*Makes small font size for NOAA Monthly Reports table*/
   div.noaatable {

+ 18 - 6
summary.html.tmpl

@@ -58,7 +58,7 @@
                         <tr><td><b>Software:</b></td><td><a href="http://weewx.com/" target="_blank" >WeeWX v$station.version</a></td></tr>
                         <tr><td><b>Weewx uptime:</b></td><td>$station.uptime</td></tr>
                         <tr><td><b>Server uptime:</b></td><td>$station.os_uptime</td></tr>
-			<tr><td><b>Station IDs:</b></td><td><a href="http://www.findu.com/cgi-bin/wxpage.cgi?call=$Extras.cwop&last=24" >$Extras.cwop</a> | <a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=pws:$Extras.wunderground&MR=1" >$Extras.wunderground</a></td></tr>
+			<tr><td><b>Station IDs:</b></td><td><a href="http://www.findu.com/cgi-bin/wxpage.cgi?call=$Extras.cwop&last=24" target="_blank">$Extras.cwop</a> | <a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=pws:$Extras.wunderground&MR=1" target="_blank">$Extras.wunderground</a></td></tr>
                     </table>
                 </div>
 
@@ -100,6 +100,8 @@
 			<tr><td>Min</td><td>$alltime.barometer.min</td><td>$alltime.barometer.mintime</td></tr>
 			<tr><td colspan="3"><br>Wind Speed</td></tr>
 			<tr><td>Max</td><td>$alltime.wind.max</td><td>$alltime.wind.maxtime</td></tr>
+			<tr><td colspan="3"><br>Wind Chill</td></tr>
+			<tr><td></td><td>$alltime.windchill.min</td><td>$alltime.windchill.mintime</td></tr>
             		<tr><td colspan="3"><br>House Temperatures</td></tr>
 			<tr><td>Max</td><td>$alltime.inTemp.max</td><td>$alltime.inTemp.maxtime</td></tr>
 			<tr><td>Min</td><td>$alltime.inTemp.min</td><td>$alltime.inTemp.mintime</td></tr>
@@ -109,9 +111,11 @@
                     </table>
                 </div>
 
-		<div class="card" id="tablefix">
+		<div class="card">
                     <h1><i class="fa fa-table m-grau" ></i> Number of Days with Observations</h1>
+			<div class="tablefix">
                     	$temp_count_table
+			</div>
                 </div>
 
 	   </div>
@@ -124,24 +128,32 @@
 			</div>
                 </div>
 
-		<div class="card" id="tablefix">
+		<div class="card">
                     <h1><i class="fa fa-thermometer-half" ></i> Average Temperature by Month</h1>
+			<div class="tablefix">
                     	$avg_temp_table
+			</div>
                 </div>
 		
-		<div class="card" id="tablefix">
+		<div class="card">
                     <h1><i class="fa fa-umbrella m-blau" ></i> Total Monthly Rainfall </h1>
+			<div class="tablefix">
                     	$rain_sum_table
+			</div>
                 </div>
 
-		<div class="card" id="tablefix">
+		<div class="card">
                     <h1><i class="fa fa-umbrella m-blau" ></i> Number of Days it Rained (>=0.02")</h1>
+			<div class="tablefix">
                     	$rain_table
+			</div>
                 </div>
 
-		<div class="card" id="tablefix">
+		<div class="card">
                     <h1><i class="fa fa-thermometer-half m-rot" ></i> Average House Temperature by Month</h1>
+			<div class="tablefix">
                     	$avg_htemp_table
+			</div>
                 </div>
 	   </div>
         </div>

+ 169 - 171
text.php.tmpl

@@ -1,171 +1,169 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head itemscope itemtype="http://schema.org/Website">
-
-<?php
-//Gets file name from url
-
-if(empty(\$_REQUEST["report"])) { 
-     //if empty then grab the latest years report
-     \$year = date("Y");
-     \$report = "NOAA/NOAA-".\$year.".txt";
-  } else {  
-     \$report = filter_var(\$_REQUEST["report"],FILTER_SANITIZE_URL);
-}
-
-//Get labels for meta and page titles
-\$labels = split("[-.]", \$report);
-\$count = count(\$labels);
-
-if (\$count == 3){
-	\$title = \$labels[1];
-}
-
-if (\$count == 4){
-	\$title = date("F Y", mktime(0, 0, 0, \$labels[2], 1, \$labels[1]));
-}
-?>
-
-    <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<meta http-equiv="Refresh" content="180">
-        <meta name="description" content="$station.location Weather Station ($Extras.cwop) - weather web site powered by WeeWX">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="profile" href="http://gmpg.org/xfn/11" />
-	#if $Extras.has_key('web_url')
-	<link rel="canonical" href="$Extras.web_url/summary.html"/>
-	#end if   
-<?php        
-        echo"<title>$station.location ($Extras.cwop) Climate Summary for \$title </title>";
-?>
-        <!-- Open Graph -->
-        <meta property="og:site_name" content="$station.location Summaries and Records" />
-	<meta property="og:title" content="Climate Summaries"/>
-	#if $Extras.has_key('web_url')
-	<meta property="og:url" content="$Extras.web_url/summary.html"/>
-	#end if
-        <meta property="og:description" content="Climate Summaries for $station.location - weather web site powered by WeeWX" />
-	<meta property="og:type" content="website" />
-
-        <!-- Icons -->
-        <link rel="icon" href="favicon.ico" type="image/png">
-	<link rel="apple-touch-icon" href="touch-icon.png"/>
-        
-        <!-- Styles -->
-        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
-	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-        <link rel="stylesheet" href="css/main.css">
-        
-        <!-- Skripte -->
-        <script src="js/modernizr-2.6.2.min.js"></script>
-	<script src="js/checkdiff.js"></script>
-        
-  </head>
-
-  <body>
-    <!-- Menu navbar -->
-    <header>
-            <div class="container-fix" >
-                <div class="h-left" >
-                <h1><i class="fa fa-cloud" ></i> $station.location </h1>
-                <p>$station.latitude[0]&deg; $station.latitude[1]' $station.latitude[2] | $station.longitude[0]&deg; $station.longitude[1]' $station.longitude[2] | $station.altitude | <a href="https://www.google.com/maps/?q=$station.location" target="_blank" ><i class="fa fa-map-marker" ></i> Show on map</a></p>
-<?php
-          echo "<h2>Climate Summary \$title</h2>";
-?>
-                <p><i class="fa fa-clock-o" ></i> $current.dateTime $current.dateTime.format("%Z")</p>
-		<p id="freshweather" class="m-orange"></p>
-		<script type="text/javascript">
-                      window.onload = checkDiff("$current.dateTime ($current.dateTime.format('%Z'))");
-                </script>
-                </div>
-                
-                <div class="h-right" >
-                    <table>
-                        <tr><td><b>Station:</b></td><td>$station.hardware</td></tr>
-                        <tr><td><b>Software:</b></td><td><a href="http://weewx.com/" target="_blank" >WeeWX v$station.version</a></td></tr>
-                        <tr><td><b>Weewx uptime:</b></td><td>$station.uptime</td></tr>
-                        <tr><td><b>Server uptime:</b></td><td>$station.os_uptime</td></tr>
-			<tr><td><b>Station IDs:</b></td><td><a href="http://www.findu.com/cgi-bin/wxpage.cgi?call=$Extras.cwop&last=24" >$Extras.cwop</a> | <a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=pws:$Extras.wunderground&MR=1" >$Extras.wunderground</a></td></tr>
-                    </table>
-                </div>
-
-                <nav>
-                    <ul class="topnav" id="myTopnav">
-			<li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars" ></i></a></li>
-                        <li><a href="/" >Current</a></li>
-                        <li><a href="week.html" >Week</a></li>
-                        <li><a href="month.html" >Month</a></li>
-                        <li><a href="year.html" >Year</a></li>
-			<li><a href="station.html" >Station</a></li>
-			<li class="active" ><a href="summary.html" >Summaries</a></li>
-                        <li><a href="RSS/weewx_rss.xml" ><i class="fa fa-rss" ></i></a></li>
-                    </ul>
-                </nav>
-            </div>
-     </header>
-    <!-- Main container -->  
-     <div class="main" >
-        <div class="container" >
-	   <div class="center" >
-	       <div class="card">
-		
-<?php
-
-    		if(file_exists(\$report)){
-			//echo "<p>";
-			echo "<pre class=\"noaareport\">";
-      			echo file_get_contents(\$report);
-			echo "</pre>";
-			//echo "</p>";
-    		}
-?>  
-               </div>
-	   </div>   
-        </div>
-    </div>
-        
-        <footer>
-            <div class="container-fix">
-	    <center>
-		#if $Extras.has_key('you')
-            	<i class="fa fa-pied-piper-pp"> </i><a href=mailto:$Extras.email> $Extras.you</a> 
-            	#end if
-		&sdot;
-	    	Copyright <i class="fa fa-copyright"></i> $latest.dateTime.format("%Y") 
-	   	<br>
-	    	Design by <a href="http://blauesledersofa.de">blaues Ledersofa</a>
-	    	&sdot; 
-            	Powered by<i class="fa fa-cog fa-spin fa-fw" aria-hidden="true"></i><a href="http://weewx.com/" target="_blank">WeeWX</a> 
-            	&sdot; 
-		Icons from <i class="fa fa-font-awesome" aria-hidden="true"></i><a href="http://fontawesome.io" target="_blank"> Font Awesome</a>
-	    </center>
-	    </div>
-        </footer>
-
-        #if $Extras.has_key('googleAnalyticsId')
-        <!-- Google Analytics -->
-        <script>
-            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-            
-            ga('create', '$Extras.googleAnalyticsId', 'auto');
-            ga('send', 'pageview');
-        </script>
-        #end if
-
-<!-- Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon -->
-	<script>
-		function myFunction() {
-    			var x = document.getElementById("myTopnav");
-    			if (x.className === "topnav") {
-       			 	x.className += " responsive";
-    			} else {
-        			x.className = "topnav";
-    			}
-		}
-	</script>
-    </body>
-</html>
-
+<!DOCTYPE html>
+<html lang="en">
+  <head itemscope itemtype="http://schema.org/Website">
+
+<?php
+//Gets file name from url
+
+if(empty(\$_REQUEST["report"])) { 
+     //if empty then grab the latest years report
+     \$year = date("Y");
+     \$report = "NOAA/NOAA-".\$year.".txt";
+  } else {  
+     \$report = filter_var(\$_REQUEST["report"],FILTER_SANITIZE_URL);
+}
+
+//Get labels for meta and page titles
+\$labels = split("[-.]", \$report);
+\$count = count(\$labels);
+
+if (\$count == 3){
+	\$title = \$labels[1];
+}
+
+if (\$count == 4){
+	\$title = date("F Y", mktime(0, 0, 0, \$labels[2], 1, \$labels[1]));
+}
+?>
+
+    <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta http-equiv="Refresh" content="180">
+        <meta name="description" content="$station.location Weather Station ($Extras.cwop) - weather web site powered by WeeWX">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="profile" href="http://gmpg.org/xfn/11" />
+	#if $Extras.has_key('web_url')
+	<link rel="canonical" href="$Extras.web_url/summary.html"/>
+	#end if   
+<?php        
+        echo"<title>$station.location ($Extras.cwop) Climate Summary for \$title </title>";
+?>
+        <!-- Open Graph -->
+        <meta property="og:site_name" content="$station.location Summaries and Records" />
+	<meta property="og:title" content="Climate Summaries"/>
+	#if $Extras.has_key('web_url')
+	<meta property="og:url" content="$Extras.web_url/summary.html"/>
+	#end if
+        <meta property="og:description" content="Climate Summaries for $station.location - weather web site powered by WeeWX" />
+	<meta property="og:type" content="website" />
+
+        <!-- Icons -->
+        <link rel="icon" href="favicon.ico" type="image/png">
+	<link rel="apple-touch-icon" href="touch-icon.png"/>
+        
+        <!-- Styles -->
+        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
+	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="css/main.css">
+        
+        <!-- Skripte -->
+        <script src="js/modernizr-2.6.2.min.js"></script>
+	<script src="js/checkdiff.js"></script>
+        
+  </head>
+
+  <body>
+    <!-- Menu navbar -->
+    <header>
+            <div class="container-fix" >
+                <div class="h-left" >
+                <h1><i class="fa fa-cloud" ></i> $station.location </h1>
+                <p>$station.latitude[0]&deg; $station.latitude[1]' $station.latitude[2] | $station.longitude[0]&deg; $station.longitude[1]' $station.longitude[2] | $station.altitude | <a href="https://www.google.com/maps/?q=$station.location" target="_blank" ><i class="fa fa-map-marker" ></i> Show on map</a></p>
+<?php
+          echo "<h2>Climate Summary \$title</h2>";
+?>
+                <p><i class="fa fa-clock-o" ></i> $current.dateTime $current.dateTime.format("%Z")</p>
+		<p id="freshweather" class="m-orange"></p>
+		<script type="text/javascript">
+                      window.onload = checkDiff("$current.dateTime ($current.dateTime.format('%Z'))");
+                </script>
+                </div>
+                
+                <div class="h-right" >
+                    <table>
+                        <tr><td><b>Station:</b></td><td>$station.hardware</td></tr>
+                        <tr><td><b>Software:</b></td><td><a href="http://weewx.com/" target="_blank" >WeeWX v$station.version</a></td></tr>
+                        <tr><td><b>Weewx uptime:</b></td><td>$station.uptime</td></tr>
+                        <tr><td><b>Server uptime:</b></td><td>$station.os_uptime</td></tr>
+			<tr><td><b>Station IDs:</b></td><td><a href="http://www.findu.com/cgi-bin/wxpage.cgi?call=$Extras.cwop&last=24" target="_blank">$Extras.cwop</a> | <a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=pws:$Extras.wunderground&MR=1" target="_blank">$Extras.wunderground</a></td></tr>
+                    </table>
+                </div>
+
+                <nav>
+                    <ul class="topnav" id="myTopnav">
+			<li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars" ></i></a></li>
+                        <li><a href="/" >Current</a></li>
+                        <li><a href="week.html" >Week</a></li>
+                        <li><a href="month.html" >Month</a></li>
+                        <li><a href="year.html" >Year</a></li>
+			<li><a href="station.html" >Station</a></li>
+			<li class="active" ><a href="summary.html" >Summaries</a></li>
+                        <li><a href="RSS/weewx_rss.xml" ><i class="fa fa-rss" ></i></a></li>
+                    </ul>
+                </nav>
+            </div>
+     </header>
+    <!-- Main container -->  
+     <div class="main" >
+        <div class="container" >
+	   <div class="center" >
+	       <div class="card">
+		
+<?php
+
+    		if(file_exists(\$report)){
+			echo "<pre class=\"noaareport\">";
+      			echo file_get_contents(\$report);
+			echo "</pre>";
+    		}
+?>  
+               </div>
+	   </div>   
+        </div>
+    </div>
+        
+        <footer>
+            <div class="container-fix">
+	    <center>
+		#if $Extras.has_key('you')
+            	<i class="fa fa-pied-piper-pp"> </i><a href=mailto:$Extras.email> $Extras.you</a> 
+            	#end if
+		&sdot;
+	    	Copyright <i class="fa fa-copyright"></i> $latest.dateTime.format("%Y") 
+	   	<br>
+	    	Design by <a href="http://blauesledersofa.de">blaues Ledersofa</a>
+	    	&sdot; 
+            	Powered by<i class="fa fa-cog fa-spin fa-fw" aria-hidden="true"></i><a href="http://weewx.com/" target="_blank">WeeWX</a> 
+            	&sdot; 
+		Icons from <i class="fa fa-font-awesome" aria-hidden="true"></i><a href="http://fontawesome.io" target="_blank"> Font Awesome</a>
+	    </center>
+	    </div>
+        </footer>
+
+        #if $Extras.has_key('googleAnalyticsId')
+        <!-- Google Analytics -->
+        <script>
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+            
+            ga('create', '$Extras.googleAnalyticsId', 'auto');
+            ga('send', 'pageview');
+        </script>
+        #end if
+
+<!-- Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon -->
+	<script>
+		function myFunction() {
+    			var x = document.getElementById("myTopnav");
+    			if (x.className === "topnav") {
+       			 	x.className += " responsive";
+    			} else {
+        			x.className = "topnav";
+    			}
+		}
+	</script>
+    </body>
+</html>
+