Changed HTML to update GUI as per mockup provided by @camiloferrua.

See the mockups in the documentation folder.
ArtoLabs · Oct 22, 2018 · 7fb5031 · 7fb5031
1 parent 106c7db
commit 7fb5031
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/website/templates/archive.html b/website/templates/archive.html
@@ -4,7 +4,7 @@
     <title>SteemAX - Exchange Archive</title>
     <meta name="description" content="An auto-upvote exchange system for the Steemit blockchain.">
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <link href='https://steemax.trade/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'>
     <link rel="stylesheet" type="text/css" href="https://steemax.trade/css/fonts.css">
     <link rel="stylesheet" media="only screen and (max-width: 6000px) and (min-width: 1000px)" href="https://steemax.trade/css/page_layout.css">
@@ -13,14 +13,15 @@
     <link rel="stylesheet" media="only screen and (max-width: 4000px) and (min-width: 1000px)" href="https://steemax.trade/css/info.css">
     <link rel="stylesheet" media="only screen and (max-width: 999px) and (min-width: 600px)" href="https://steemax.trade/css/info600.css">
     <link rel="stylesheet" media="only screen and (max-width: 599px) and (min-width: 0px)" href="https://steemax.trade/css/info380.css">
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124645211-1"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'UA-124645211-1');
-</script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-124645211-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-124645211-1');
+    </script>
+    <script src="https://steemax.trade/js/steemjs.js"></script>
 </head>
 <body>
     <div class="header">
@@ -31,13 +32,22 @@
             <div class="myvotevalue">ACCOUNT</div>
             <div id="header-button">
                 <a href="https://steemax.trade/login">
-                <button id="ghost-button">Exchange</button>
+                    <button id="ghost-button">Exchange</button>
                 </a>
+                <div id="menu-icon"><a href="javascript" onClick="openMenu(); return false;">
+                    <img src="https://steemax.trade/images/menu.png" border="0" id="hamburger-icon"></a>
+                </div>
             </div>
         </div>
+        <div id="navmenu">
+            <a href="https://steemax.trade"><div class="menuitem">Home</div></a>
+            <a href="https://steemax.info/history"><div class="menuitem">History</div></a>
+            <a href="https://steemax.trade/login"><div class="menuitem">Invite</div></a>
+            <a href="https://discord.gg/97GKVFC"><div class="menuitem">Help (Discord)</div></a>
+	    </div>
     </div>
     <div id="exchange_table">
-    INFOBOX
+INFOBOX
     </div>
 </body>
 </html>
diff --git a/website/templates/archivebox.html b/website/templates/archivebox.html
@@ -1,17 +1,20 @@
-<div class="xbox" style="text-align: center;">
-    <div class="archivebox" style="margin: 0; float: left; width: 20%;">TIMESTAMP</div>
-    <div style="width: calc(75% - 200px); float: left;">
-        <div style="display: inline-block; margin: 0; margin-left: auto; margin-right: auto;">
-            <div class="tooltip" style="float: left;">
-                <div class="archivebox"><a href="https://steemit.com/@ACCOUNT1/IDENT1">@ACCOUNT1</a></div>
+    <div class="xbox">
+        <div class="datetime">DATE
+            <img src="https://steemax.trade/images/clock-icon.png" class="clock-icon">TIME</div>
+        <div class="inviter-left">
+            <div class="tooltip" style="float: right;">
+                <a href="https://steemit.com/@ACCOUNT1/IDENT1">@ACCOUNT1<br>
+                <span class="archive-vote-value">VOTEVALUE1</span></a>
                 <span class="tooltiptext">IDENT1</span>
             </div>
-            <div class="archivebox" style="float: left;">vs.</div>
+        </div>
+        <div class="exchange-icon">
+            <img src="https://steemax.trade/images/exchange-icon.png"></div>
+        <div class="invitee-right">
             <div class="tooltip" style="float: left;">
-                <div class="archivebox"><a href="https://steemit.com/@ACCOUNT2/IDENT2">@ACCOUNT2</a></div>
+                <a href="https://steemit.com/@ACCOUNT2/IDENT2">@ACCOUNT2<br>
+                <span class="archive-vote-value">VOTEVALUE2</span></a>
                 <span class="tooltiptext">IDENT2</span>
             </div>
         </div>
     </div>
-    <div class="archivebox" style="margin: 0; float: right; width: 20%;">VOTEVALUE1 vs VOTEVALUE2</div>
-</div>