Added Dark Mode

zekinah · Jul 31, 2020 · a58a241 · a58a241
1 parent 228530f
commit a58a241
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 10 deletions.
diff --git a/admin/view/tab-home.php b/admin/view/tab-home.php
@@ -38,17 +38,17 @@
                                     <li>[zone-covid19 continent="North America"]</li>
                                 </ul><hr>
                                 <ul>
-                                    <li>[zone-covid19 country="US" dark]</li>
-                                    <li>[zone-covid19 continent="North America" dark]</li>
+                                    <li>[zone-covid19 country="US" dark="true"]</li>
+                                    <li>[zone-covid19 continent="North America" dark="true"]</li>
                                 </ul>
                                 <strong class="pull-left">Examples Multiple Output</strong><br>
                                 <ul>
                                     <li>[zone-covid19 country="US,Philippines"]</li>
                                     <li>[zone-covid19 continent="North America, Asia"]</li>
                                 </ul><hr>
                                 <ul>
-                                    <li>[zone-covid19 country="US,Philippines" dark]</li>
-                                    <li>[zone-covid19 continent="North America, Asia" dark]</li>
+                                    <li>[zone-covid19 country="US,Philippines" dark="true"]</li>
+                                    <li>[zone-covid19 continent="North America, Asia" dark="true"]</li>
                                 </ul>
                             </div>
                         </div>
@@ -64,7 +64,7 @@
                                 <strong class="pull-left">Examples</strong><br>
                                 <ul>
                                     <li>[zone-covid19-table]</li>
-                                    <li>[zone-covid19-table dark]</li>
+                                    <li>[zone-covid19-table dark="true"]</li>
                                 </ul>
                             </div>
                         </div>

diff --git a/public/class-pandemic-covid19-public.php b/public/class-pandemic-covid19-public.php
@@ -93,6 +93,7 @@ public function zoneCovidContent( $atts )
 			array(
 				'country' => '',
 				'continent' => '',
+				'dark' => '',
 			),
 			$atts,
 			'zone-covid19'
@@ -136,7 +137,7 @@ public function zoneCovidTableContent( $atts )
 		$tab = '';
 		$atts = shortcode_atts(
 			array(
-				'background' => '',
+				'dark' => '',
 			),
 			$atts,
 			'zone-covid19-table'

diff --git a/public/css/pandemic-covid19-public.css b/public/css/pandemic-covid19-public.css
@@ -107,6 +107,28 @@ h5, h6 {
     transform: rotate(360deg);
   }
 }
+.global .zn-covid19__content {
+    padding: 10px;
+}
 .zn-covid19__content {
     display: none;
+}
+/** Dark Mode */
+.global.dark .zn-covid19__content {
+    background: #23282d;
+}
+.global.dark .zn-covid19__content .title {
+    color: #ffffff;
+}
+.global.dark .zn-covid19__content .subtitle {
+    color: #cbc8c8;
+}
+#zn-covid19.dark .card {
+    background: #23282d;
+}
+#zn-covid19.dark .card .title {
+    color: #ffffff;
+}
+#zn-covid19.dark .card .subtitle {
+    color: #cbc8c8;
 }
diff --git a/public/view/zone-pandemic-covid19-continent.php b/public/view/zone-pandemic-covid19-continent.php
@@ -12,8 +12,12 @@
  * @subpackage Pandemic_Covid19/public/partials
  * 
  */
+$dark = '';
+if($atts['dark']){
+    $dark = 'dark';
+}
 ?>
-<section id="zn-covid19" class="section">
+<section id="zn-covid19" class="section <?=$dark?>">
     <div class="zn-loading"><span class="covid19">🦠</span></div>
     <div class="zn-covid19__content">
         <div id="zn-covid19-continent" class="columns is-multiline"></div>

diff --git a/public/view/zone-pandemic-covid19-country.php b/public/view/zone-pandemic-covid19-country.php
@@ -12,8 +12,12 @@
  * @subpackage Pandemic_Covid19/public/partials
  * 
  */
+$dark = '';
+if($atts['dark']){
+    $dark = 'dark';
+}
 ?>
-<section id="zn-covid19" class="section">
+<section id="zn-covid19" class="section <?=$dark?>">
     <div class="zn-loading"><span class="covid19">🦠</span></div>
     <div class="zn-covid19__content">
         <div id="zn-covid19-country" class="columns is-multiline"></div>

diff --git a/public/view/zone-pandemic-covid19-global.php b/public/view/zone-pandemic-covid19-global.php
@@ -12,8 +12,12 @@
  * @subpackage Pandemic_Covid19/public/partials
  * 
  */
+$dark = '';
+if($atts['dark']){
+    $dark = 'dark';
+}
 ?>
-<section id="zn-covid19" class="section">
+<section id="zn-covid19" class="section global <?=$dark?>">
     <div class="zn-loading"><span class="covid19">🦠</span></div>
     <div class="zn-covid19__content">
         <div class="has-text-centered mb-2">

diff --git a/public/view/zone-pandemic-covid19-table.php b/public/view/zone-pandemic-covid19-table.php
@@ -11,14 +11,18 @@
  * @package    Pandemic_Covid19
  * @subpackage Pandemic_Covid19/public/partials
  */
+$dark = '';
+if($atts['dark']){
+    $dark = 'dark';
+}
 ?>
 <section id="zn-covid19-table" class="section">
     <div class="zn-loading"><span class="covid19">🦠</span></div>
     <div class="zn-covid19__content">
         <div class="has-text-centered mb-3">
             <p class="title is-4">🌎 <?= __('World') ?></p>
         </div>
-        <table id="tbl-covid19data" class="display nowrap" style="width:100%">
+        <table id="tbl-covid19data" class="display nowrap <?=$dark?>" style="width:100%">
             <thead>
                 <tr>
                     <th></th>