Merge pull request #6 from DilwoarH/mobile-sizes

Mobile sizes
Mosque-Screens · Feb 9, 2019 · 18065ea · 18065ea
2 parents c4b40e0 + b6c491f
commit 18065ea
Show file tree

Hide file tree

Showing 13 changed files with 209 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mosque-screen",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "private": true,
   "main": "public/electron.js",
   "homepage": "https://mosque-screen.netlify.com",

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#000000">
     <meta http-equiv="refresh" content="3600">
     <!--

diff --git a/src/_components/additional-message/additional-message.css b/src/_components/additional-message/additional-message.css
@@ -14,3 +14,23 @@
   font-weight: bold;
   font-size: 1.3em;
 }
+
+@media only screen and (max-width: 600px) {
+  .AdditionalMessageWrapper {
+    font-size: 2em;
+    margin-top: 10px;
+  }
+  .AdditionalMessageWrapper .middle {
+    font-size: 1em;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .AdditionalMessageWrapper {
+    font-size: 2em;
+    margin-top: 10px;
+  }
+  .AdditionalMessageWrapper .middle {
+    font-size: 1em;
+  }
+}
diff --git a/src/_components/branding/branding.js b/src/_components/branding/branding.js
@@ -23,6 +23,14 @@ class Branding extends Component {
         } 50%, ${this.state.secondary_colour} 50%);
         color: ${this.state.primary_text_colour};
       }
+
+      @media only screen and (max-width: 992px) {
+        body {
+          background: linear-gradient(to right, ${
+            this.state.primary_colour
+          } 50%, ${this.state.primary_colour} 50%);
+        }
+      }
       
       /* CLOCK BRANDING */
       .ClockWrapper {

diff --git a/src/_components/clock/clock.css b/src/_components/clock/clock.css
@@ -3,7 +3,6 @@
   width: auto;
   padding: 15px;
   background-color: white;
-  float: left;
   font-weight: 900;
 }
 
@@ -12,3 +11,20 @@
   min-height: 60px;
   color: #0d6554;
 }
+
+@media only screen and (max-width: 600px) {
+  .ClockWrapper {
+    width: 100%;
+    text-align: center;
+  }
+
+  .Clock {
+    font-size: 4em;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .Clock {
+    font-size: 5em;
+  }
+}
diff --git a/src/_components/date/date.css b/src/_components/date/date.css
@@ -3,3 +3,15 @@
   font-size: 4em;
   margin-left: 15px;
 }
+
+@media only screen and (max-width: 600px) {
+  .DateWrapper {
+    font-size: 2em;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .DateWrapper {
+    font-size: 2.5em;
+  }
+}
diff --git a/src/_components/jummah-times/jummah-times.css b/src/_components/jummah-times/jummah-times.css
@@ -26,3 +26,47 @@
   padding-left: 0px;
   font-weight: bold;
 }
+
+@media only screen and (max-width: 600px) {
+  .JummahTimesWrapper {
+    font-size: 1em;
+  }
+
+  .JummahTimesTable {
+    width: 100%;
+    padding-right: 30px;
+    padding-left: 40px;
+  }
+
+  .JummahTimesTable th,
+  .JummahTimesTable td {
+    padding-left: 0;
+    min-width: 0;
+  }
+
+  .JummahTimesTable td {
+    min-width: 0;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .JummahTimesWrapper {
+    font-size: 2em;
+  }
+
+  .JummahTimesTable {
+    width: 100%;
+    padding-right: 30px;
+    padding-left: 40px;
+  }
+
+  .JummahTimesTable th,
+  .JummahTimesTable td {
+    padding-left: 0;
+    min-width: 0;
+  }
+
+  .JummahTimesTable td {
+    min-width: 0;
+  }
+}
diff --git a/src/_components/logo/logo.css b/src/_components/logo/logo.css
@@ -5,3 +5,9 @@
   left: 50%;
   transform: translateX(-50%);
 }
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .LogoWrapper img {
+    width: 100px;
+  }
+}
diff --git a/src/_components/next-jamah-time/next-jamah-time.css b/src/_components/next-jamah-time/next-jamah-time.css
@@ -28,3 +28,20 @@
 .NextJamahTime td:last-child {
   font-weight: bolder;
 }
+
+@media only screen and (max-width: 600px) {
+  .NextJamahTime {
+    font-size: 2em;
+    margin-top: 10px;
+    padding-left: 0;
+  }
+
+  .NextJamahTime td {
+    min-width: 0;
+  }
+
+  .NextJamahTime td,
+  .NextJamahTime th {
+    margin: 0;
+  }
+}
diff --git a/src/_components/prayer-times-week-ahead/prayer-times-week-ahead.css b/src/_components/prayer-times-week-ahead/prayer-times-week-ahead.css
@@ -32,3 +32,27 @@
   color: white;
   font-weight: bolder;
 }
+
+@media only screen and (max-width: 600px) {
+  .PrayerTimesWeekAhead thead tr th {
+    font-size: 1em;
+  }
+
+  .PrayerTimesWeekAhead td {
+    font-size: 0.5em;
+    text-align: center;
+    padding: 0px;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .PrayerTimesWeekAhead thead tr th {
+    font-size: 2em;
+  }
+
+  .PrayerTimesWeekAhead td {
+    font-size: 1.5em;
+    text-align: center;
+    padding: 4px;
+  }
+}
diff --git a/src/_components/prayer-times/prayer-times.css b/src/_components/prayer-times/prayer-times.css
@@ -49,3 +49,36 @@
 .PrayerTimes td:last-child.normal-text {
   font-weight: normal;
 }
+
+@media only screen and (max-width: 600px) {
+  .PrayerTimes {
+    font-size: 1em;
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .PrayerTimes th:last-child {
+    padding-left: 0;
+  }
+
+  .PrayerTimes td {
+    min-width: 10px;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .PrayerTimes {
+    font-size: 2em;
+    margin-left: 0;
+    width: 100%;
+    padding: 30px;
+  }
+
+  .PrayerTimes th:last-child {
+    padding-left: 0;
+  }
+
+  .PrayerTimes td {
+    min-width: 10px;
+  }
+}
diff --git a/src/_components/sunrise-and-zawwal/sunrise-and-zawwal.css b/src/_components/sunrise-and-zawwal/sunrise-and-zawwal.css
@@ -18,3 +18,25 @@
   text-align: right;
   padding-left: 115px;
 }
+
+@media only screen and (max-width: 600px) {
+  .SunriseAndZawwalWrapper {
+    font-size: 1em;
+  }
+
+  .SunriseAndZawwalTable th,
+  .SunriseAndZawwalTable td {
+    padding-left: 0;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1024px) {
+  .SunriseAndZawwalWrapper {
+    font-size: 2em;
+  }
+
+  .SunriseAndZawwalTable th,
+  .SunriseAndZawwalTable td {
+    padding-left: 100px;
+  }
+}
diff --git a/src/config.json b/src/config.json
@@ -1,17 +1,14 @@
 {
-  "buildNumber": "v1.0.1",
+  "buildNumber": "v2.0.0",
   "sliderMode": "slider",
   "slideTimeout": 8000,
   "googleSlides": {
-    "url":
-      "https://docs.google.com/presentation/d/e/2PACX-1vSSB03g_s9gl75eiKZJPtfa2czRlBorDVFpYFbMOPqGEGD-06jxJP3wRRfNzeWCkGcKmE81U1OtvTkZ/embed?start=true&loop=false&delayms=8000",
+    "url": "https://docs.google.com/presentation/d/e/2PACX-1vSSB03g_s9gl75eiKZJPtfa2czRlBorDVFpYFbMOPqGEGD-06jxJP3wRRfNzeWCkGcKmE81U1OtvTkZ/embed?start=true&loop=false&delayms=8000",
     "numberOfSlides": 5
   },
   "googleSheets": {
-    "prayerData":
-      "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2084513295&single=true&output=csv",
-    "appConfig":
-      "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2071841746&single=true&output=csv",
+    "prayerData": "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2084513295&single=true&output=csv",
+    "appConfig": "https://docs.google.com/spreadsheets/d/e/2PACX-1vRHjHMDmua4IqpnSiAsLVUJEPtZDcJhziBHivD1fmWJu-StuxpPv-VRzBqX8bcC5499pZ9vBUeD_K5G/pub?gid=2071841746&single=true&output=csv",
     "refreshRate": 1
   }
 }