Center the loading clock

OriginProtocol · Aug 23, 2018 · 5df9da0 · 5df9da0
1 parent c3729ae
commit 5df9da0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/public/dev.html b/public/dev.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="favicon.ico">
     <title>Origin Protocol Demo DApp</title>
-
     <script>
       // If URL query string contains "?translator=true", run Crowdin's In Context Translation
       // https://support.crowdin.com/in-context-localization/
@@ -20,6 +19,10 @@
     </script>
   </head>
   <body>
-    <div id="root" class="d-flex flex-column">&#128337;<!--Unicode Clock--></div>
+    <div id="root" class="d-flex flex-column">
+      <div class="loading-clock d-flex justify-content-center align-items-center">
+        &#128337;<!--Unicode Clock-->
+      </div>  
+    </div>
   </body>
 </html>
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="favicon.ico">
     <title>Origin Protocol Demo DApp</title>
-
     <script>
       // If URL query string contains "?translator=true", run Crowdin's In Context Translation
       // https://support.crowdin.com/in-context-localization/
@@ -20,45 +19,48 @@
     </script>
   </head>
   <body>
-    <div id="root" class="d-flex flex-column">&#128337;<!--Unicode Clock--></div>
-  <script type="text/javascript">
-    /* Google Analytics */
-    (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','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-106384880-1', 'auto');
-    ga('send', 'pageview');
-
-    /* FB pixel */
-    !function(f,b,e,v,n,t,s)
-    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
-    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
-    n.queue=[];t=b.createElement(e);t.async=!0;
-    t.src=v;s=b.getElementsByTagName(e)[0];
-    s.parentNode.insertBefore(t,s)}(window, document,'script',
-    'https://connect.facebook.net/en_US/fbevents.js');
-    fbq('init', '1637426076553052');
-    fbq('track', 'PageView');
+    <div id="root" class="d-flex flex-column">
+      <div class="loading-clock d-flex justify-content-center align-items-center">
+        &#128337;<!--Unicode Clock-->
+      </div>  
+    </div>
+    <script type="text/javascript">
+      /* Google Analytics */
+      (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','https://www.google-analytics.com/analytics.js','ga');
 
-    /* <![CDATA[ */
-    var google_conversion_id = 825554032;
-    var google_custom_params = window.google_tag_params;
-    var google_remarketing_only = true;
-    /* ]]> */
-  </script>
+      ga('create', 'UA-106384880-1', 'auto');
+      ga('send', 'pageview');
 
-  <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
-  </script>
-  <noscript>
-  <div style="display:inline;">
-  <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/825554032/?guid=ON&amp;script=0"/>
-  </div>
-  </noscript>
-
-  <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1637426076553052&ev=PageView&noscript=1"/></noscript>
+      /* FB pixel */
+      !function(f,b,e,v,n,t,s)
+      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+      n.queue=[];t=b.createElement(e);t.async=!0;
+      t.src=v;s=b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t,s)}(window, document,'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+      fbq('init', '1637426076553052');
+      fbq('track', 'PageView');
 
+      /* <![CDATA[ */
+      var google_conversion_id = 825554032;
+      var google_custom_params = window.google_tag_params;
+      var google_remarketing_only = true;
+      /* ]]> */
+    </script>
+    <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
+    </script>
+    <noscript>
+      <div style="display:inline;">
+        <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/825554032/?guid=ON&amp;script=0"/>
+      </div>
+    </noscript>
+    <noscript>
+      <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1637426076553052&ev=PageView&noscript=1"/>
+    </noscript>
   </body>
 </html>
diff --git a/src/css/app.css b/src/css/app.css
@@ -18,6 +18,11 @@ body {
   line-height: 1.5;
 }
 
+.loading-clock {
+  height: 100vh;
+  width: 100vw;
+}
+
 /* sticky footer sibling */
 main {
   flex: 1 0 auto;