feat(markup): add IE notice

Added IE notice and changed the markup a bit so notices would stack. Also moved loading indicator so it would sit on top of the preview image. Signed-off-by: Aleksuei Riabtsev <aleksuei.riabtsev@ec.gc.ca>
RAMP-PCAR · Jul 6, 2015 · 8ccc923 · 8ccc923
1 parent 6070ae0
commit 8ccc923
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/site/includes/mapexport.hbs b/site/includes/mapexport.hbs
@@ -3,16 +3,22 @@
     <div class="modal-body">
         <div class="row">
             <div class="map-export-preview">
+                <div class="map-export-image">
+                    <img class="blurred-5" src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" crossorigin="anonymous" alt="">
+                </div>
                 <div class="map-export-stretcher" role="presentation">
-                    <section class="map-export-notice alert alert-danger">
-                        <h3>{{t "mapExport.error.generalTitle"}}</h3>
-                        <p>{{t "mapExport.error.generalMessage"}}</p>
-                    </section>
+                    <div class="map-export-notice-container">
+                        <section class="map-export-notice notice-error alert alert-danger">
+                            <h3>{{t "mapExport.error.generalTitle"}}</h3>
+                            <p>{{t "mapExport.error.generalMessage"}}</p>
+                        </section>
+                        <section class="map-export-notice notice-ie alert alert-warning">
+                            <h3>{{t "mapExport.ie.generalTitle"}}</h3>
+                            <p>{{t "mapExport.ie.generalMessage"}}</p>
+                        </section>
+                    </div>
                     {{>loadingsimple}}
                 </div>
-                <div class="map-export-image">
-                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" crossorigin="anonymous" alt="">
-                </div>
             </div>
             <div class="map-export-controls">
                 <header>

diff --git a/src/css/effects/animation-effects.less b/src/css/effects/animation-effects.less
@@ -13,6 +13,10 @@
     font-weight: bold;
     display: inline;
 
+    span {
+        position: relative;
+    }
+
     ul {
         display: inline-block;
         margin: 0 0 0 0;

diff --git a/src/css/toolbar/map-export.less b/src/css/toolbar/map-export.less
@@ -73,20 +73,26 @@
             vertical-align: middle;
         }
 
-        .map-export-notice {
+        .map-export-notice-container {
             position: relative;
-            display: none;
-            text-align: left;
+            display: inline-block;
             vertical-align: top;
-            margin-bottom: 0;
+            top: 1px;
+
+            .map-export-notice {
+                position: relative;
+                display: none;
+                text-align: left;
+                vertical-align: top;
+                margin-bottom: 0;
+                width: 100%;
+            }
         }
 
-        .sk-spinner.sk-spinner-chasing-dots {
-            display: inline-block;
-            margin: 0 auto;
-            //width: 70px;
-            //height: 70px;
-            vertical-align: middle;
+        .loading-simple {
+            top: -50%;
+            position: relative;
+            display: block;
         }
     }
 
@@ -99,7 +105,6 @@
         left: 15px;
         overflow: hidden;
         //padding: 1px;
-
         img {
             width: 100%;
         }
@@ -128,7 +133,7 @@
             border-radius: 0;
             display: none;
         }
-        
+
         .toggle.button-pressed {
             box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
         }
@@ -139,7 +144,6 @@
             /*width: 100%;
             display: block;
             margin-bottom: 10px;*/
-
             &.btn-download {
                 text-align: left;
             }