Merge pull request #12 from lacimarsik/lm/fixes-for-ie

Fixes for IE (Diacritics problem, calendar problem)
lacimarsik · Sep 22, 2018 · d8f3240 · d8f3240
2 parents 25c2fd8 + 147078d
commit d8f3240
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 2 deletions.
diff --git a/wp-content/themes/Parallax-One/customizer_defaults.php b/wp-content/themes/Parallax-One/customizer_defaults.php
@@ -329,6 +329,7 @@ class DefCalendar {
   public static $mode = 'condensed';
   public static $this_week = 'This week';
   public static $next_week = 'Next week';
+  public static $fallback = false;
 };
 
 /********************************************************/

diff --git a/wp-content/themes/Parallax-One/inc/customizer.php b/wp-content/themes/Parallax-One/inc/customizer.php
@@ -1849,6 +1849,20 @@ function parallax_one_customize_register( $wp_customize ) {
     'priority'    => 1
   ));
 
+  /* Calendar fallback */
+
+  $wp_customize->add_setting('parallax_one_calendar_fallback', array(
+      'default' => DefCalendar::$fallback,
+      'sanitize_callback' => 'parallax_one_sanitize_text'
+      ));
+  $wp_customize->add_control(
+      'parallax_one_calendar_fallback', array(
+      'type' => 'checkbox',
+      'label' => __('Use fallback image from Image section (if calendar cannot be loaded, e.g. on Internet Explorer)?', 'parallax-one'),
+      'section' => 'calendar_section',
+      'priority' => 4,
+  ));
+
   /* Calendar show/hide */
 
   $wp_customize->add_setting('parallax_one_calendar_show', array('sanitize_callback' => 'parallax_one_sanitize_text'));

diff --git a/wp-content/themes/Parallax-One/sections/parallax_one_calendar_section.php b/wp-content/themes/Parallax-One/sections/parallax_one_calendar_section.php
@@ -7,7 +7,7 @@
 $calendar_mode = get_theme_mod('calendar_mode', DefCalendar::$mode);
 $calendar_this_week = get_theme_mod('calendar_this_week', DefCalendar::$this_week);
 $calendar_next_week = get_theme_mod('calendar_next_week', DefCalendar::$next_week);
-
+$calendar_fallback = get_theme_mod('parallax_one_calendar_fallback', DefCalendar::$fallback);
 ?>
 
 <script src="<?= get_bloginfo("template_url"); ?>/inc/calendar/frontend/app.js"></script>
@@ -59,6 +59,18 @@
               ng-repeat="calendar in calendars" 
               ng-show="calendar.weekIndex === weekIndex">
           </for-water-calendar>
+          <div class="for-water-calendar-ie" style="display: none;">
+<?php
+                $static_image = get_theme_mod('image_section_static_image', parallax_get_file(DefImage::$static_image));
+                if (isset($static_image) && (!empty($static_image)) && isset($calendar_fallback) && ($calendar_fallback == true)) {
+                  echo '<div class="image-section-static-image"><img src="' . $static_image . '" /></div>';
+                } else {
+?>
+                    <div style="padding-bottom: 20px;">Unfortunately, Internet Explorer / Edge cannot render the calendar properly. Please use Google Chrome or Mozilla Firefox to display the calendar.</div>
+<?php
+                }
+?>
+              </div>
           <div id="cal-switches">
             <calendar-week-switch></calendar-week-switch>
           </div>
@@ -78,4 +90,4 @@
       </div>
     </div>
   </div>
-</section>
+</section>
diff --git a/wp-content/themes/Parallax-One/style.css b/wp-content/themes/Parallax-One/style.css
@@ -1887,6 +1887,20 @@ section#calendar {
     padding-bottom: 20px;
 }
 
+div.for-water-calendar-ie {
+	display: none;
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+	/* IE10+ CSS styles go here */
+	div.for-water-calendar {
+		display: none !important;
+	}
+	div.for-water-calendar-ie {
+		display: block !important;
+	}
+}
+
 /*---------------------------------------
    3.1 SECTION: HOME / HEADER         
 -----------------------------------------*/
@@ -5597,6 +5611,26 @@ p#video-caption {
 	}
 }
 
+/*---------------------------------------
+  3.19 FIXES FOR IE
+-----------------------------------------*/
+
+/* Unfortunately, font may get broken on IE if diacritics is in use, e.g. /prague/dance/cz
+A proper fix would be not using @import to import Avenir fonts, and using e.g. <link> in html.
+But as this fix was not tested and needs some trial&error, in the meantime the below hack is suggested, that uses sans-serif as something that looks nice.
+TODO: Implement a proper fix using <link>, or try to refactor how we use font-family: Avenir throughout this CSS, so that this fix does not need to name so many elements
+*/
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {     /* IE10+ CSS styles go here */   
+	html:lang(cs-CZ) h1,h2,h3,h4,h5,h6, html:lang(cs-CZ) body, html:lang(cs-CZ) p, html:lang(cs-CZ) div, html:lang(cs-CZ) span {
+		font-family: sans-serif !important;
+	}
+	html:lang(cs-CZ) #intro-under-construction, html:lang(cs-CZ) #intro-under-construction span {
+		font-family: sans-serif !important;
+		font-weight: 200 !important;
+	}
+}
+
 /*---------------------------------------
    4. DEFAULT COLORS
 -----------------------------------------*/