New layout and UX for trading view on mobile

docs/css/main.css

@@ -682,9 +682,9 @@ sm-checkbox {
   width: 100%;
   justify-content: center;
   overflow-y: auto;
-  padding: 0 1.5rem;
 }
 #pages_container > * {
+  padding: 0 1.5rem;
   min-width: min(26rem, 100%);
 }
 
@@ -781,21 +781,12 @@ sm-checkbox {
 }
 
 #asset_page {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-#asset_page__nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 0;
-}
-#asset_page__nav .icon-only {
-  margin-left: -0.7rem;
-}
-
 #trade_form {
   height: 100%;
 }
@@ -1280,11 +1271,61 @@ sm-checkbox {
     transform: translateY(50%) scale(1.2);
   }
 
+  #asset_list_wrapper {
+    padding: 0 1.5rem;
+  }
+
   .listed-asset {
     border-radius: 0;
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
 
+  #exchange {
+    margin: 0;
+    padding: 0;
+  }
+
+  #chart_header {
+    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    margin-left: -0.7rem;
+  }
+
+  #trade_panel_backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-color: rgba(var(--text-color), 0.16);
+    -webkit-backdrop-filter: blur(0.5rem);
+            backdrop-filter: blur(0.5rem);
+    z-index: 3;
+  }
+
+  #show_trade_panel {
+    position: absolute;
+    border-radius: 2rem;
+    bottom: 0;
+    align-self: center;
+    margin-bottom: 1rem;
+    z-index: 5;
+  }
+
+  #trade_form {
+    position: fixed;
+    height: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-top: auto;
+    width: auto;
+    z-index: 10;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
+  }
+
   #price_chart_container {
     flex: 1;
   }
@@ -1365,6 +1406,10 @@ sm-checkbox {
   #pages_container {
     grid-area: pages;
   }
+  #pages_container > * {
+    margin: 0 1.5rem;
+    padding: 2rem;
+  }
 
   .is-signed-in #exchange {
     display: flex;
@@ -1399,7 +1444,7 @@ sm-checkbox {
     position: absolute;
     width: 0.25rem;
     border-radius: 0 0.2rem 0.2rem 0;
-    height: 50%;
+    height: 2rem;
     background-color: var(--accent-color);
   }
 }
@@ -1449,10 +1494,6 @@ sm-checkbox {
     grid-template-columns: minmax(0, 1fr) 20rem;
   }
 
-  #asset_page__nav {
-    grid-column: 1/-1;
-  }
-
   #portfolio {
     gap: 1rem 2rem;
     grid-template-columns: 20rem 24rem;

docs/css/main.scss

@@ -643,8 +643,8 @@ sm-checkbox {
   width: 100%;
   justify-content: center;
   overflow-y: auto;
-  padding: 0 1.5rem;
   & > * {
+    padding: 0 1.5rem;
     min-width: min(26rem, 100%);
   }
 }
@@ -738,19 +738,11 @@ sm-checkbox {
   height: 100%;
 }
 #asset_page {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-#asset_page__nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 0;
-  .icon-only {
-    margin-left: -0.7rem;
-  }
-}
 #trade_form {
   height: 100%;
   &::part(form) {
@@ -765,7 +757,6 @@ sm-checkbox {
     margin-top: auto;
   }
 }
-
 #my_orders,
 #market {
   width: min(46rem, 100%);
@@ -1139,10 +1130,53 @@ sm-checkbox {
       transform: translateY(50%) scale(1.2);
     }
   }
+  #asset_list_wrapper {
+    padding: 0 1.5rem;
+  }
   .listed-asset {
     border-radius: 0;
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
+  #exchange {
+    margin: 0;
+    padding: 0;
+  }
+  #chart_header {
+    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    margin-left: -0.7rem;
+  }
+  #trade_panel_backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-color: rgba(var(--text-color), 0.16);
+    backdrop-filter: blur(0.5rem);
+    z-index: 3;
+  }
+  #show_trade_panel {
+    position: absolute;
+    border-radius: 2rem;
+    bottom: 0;
+    align-self: center;
+    margin-bottom: 1rem;
+    z-index: 5;
+  }
+  #trade_form {
+    position: fixed;
+    height: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-top: auto;
+    width: auto;
+    z-index: 10;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
+  }
   #price_chart_container {
     flex: 1;
   }
@@ -1210,6 +1244,10 @@ sm-checkbox {
   }
   #pages_container {
     grid-area: pages;
+    & > * {
+      margin: 0 1.5rem;
+      padding: 2rem;
+    }
   }
   .is-signed-in {
     #exchange {
@@ -1241,7 +1279,7 @@ sm-checkbox {
         position: absolute;
         width: 0.25rem;
         border-radius: 0 0.2rem 0.2rem 0;
-        height: 50%;
+        height: 2rem;
         background-color: var(--accent-color);
       }
     }
@@ -1292,9 +1330,6 @@ sm-checkbox {
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;
   }
-  #asset_page__nav {
-    grid-column: 1/-1;
-  }
   #portfolio {
     gap: 1rem 2rem;
     grid-template-columns: 20rem 24rem;

docs/index.html

@@ -120,22 +120,18 @@
                         <ul id="listed_assets" class="user-content hide"></ul>
                     </div>
                     <div id="asset_page" class="hide-on-mobile">
-                        <nav id="asset_page__nav" class="hide-on-desktop">
+                        <div id="price_chart_container" class="flex direction-column gap-0-5">
-                            <a href="#/exchange" class="button icon-only">
+                            <div id="chart_header" class="flex align-center space-between">
-                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                                <div class="flex align-center">
-                                    width="24px" fill="#000000">
+                                    <a href="#/exchange" class="button icon-only hide-on-desktop flex align-center">
+                                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
+                                            viewBox="0 0 24 24" width="24px" fill="#000000">
                                             <path d="M0 0h24v24H0V0z" fill="none" />
                                             <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                                         </svg>
                                     </a>
-                            <strip-select id="trading_view_switcher">
-                                <strip-option value="trade" selected>Trade</strip-option>
-                                <strip-option value="chart">Chart</strip-option>
-                            </strip-select>
-                        </nav>
-                        <div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile">
-                            <div id="chart_header" class="flex align-center space-between">
                                     <H4 id="chart_asset"></H4>
+                                </div>
                                 <strip-select id="price_duration_selector">
                                     <strip-option value="hour" title="1 Hour price interval" selected>Hour
                                     </strip-option>
@@ -146,7 +142,16 @@
                                 <div id="price_history_chart"></div>
                             </div>
                         </div>
-                        <sm-form id="trade_form">
+                        <sm-form id="trade_form" class="hide-on-mobile">
+                            <button class="popup__header__close hide-on-desktop" style="margin-right: auto;"
+                                onclick="hideTradePanel()">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
+                                    height="24">
+                                    <path fill="none" d="M0 0h24v24H0z" />
+                                    <path
+                                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                                </svg>
+                            </button>
                             <div class="flex space-between align-center">
                                 <h4 id="traded_asset">Trade FLO</h4>
                                 <strip-select id="trade_type_selector" class="tab">
@@ -194,6 +199,9 @@
                                 </sm-button>
                             </div>
                         </sm-form>
+                        <div id="trade_panel_backdrop" onclick="hideTradePanel()" class="hide-on-mobile"></div>
+                        <button id="show_trade_panel" class="button button--primary hide-on-desktop cta"
+                            onclick="showTradePanel()">Buy / Sell</button>
                     </div>
                 </section>
             </div>
@@ -1778,16 +1786,44 @@
         }
 
         document.addEventListener('themechange', setChartTheme)
-
+        function showTradePanel() {
-        getRef('trading_view_switcher').addEventListener('change', e => {
-            if (e.target.value === 'trade') {
-                getRef('price_chart_container').classList.add('hide-on-mobile')
             getRef('trade_form').classList.remove('hide-on-mobile')
-            } else {
+            getRef('trade_form').animate([
-                getRef('trade_form').classList.add('hide-on-mobile')
+                { transform: 'translateY(100%)' },
-                getRef('price_chart_container').classList.remove('hide-on-mobile')
+                { transform: 'translateY(0)' },
-            }
+            ], {
+                duration: 150,
+                easing: 'ease'
             })
+            getRef('trade_panel_backdrop').classList.remove('hide-on-mobile')
+            getRef('trade_panel_backdrop').animate([
+                { opacity: 0 },
+                { opacity: 1 },
+            ], {
+                duration: 150,
+                easing: 'ease'
+            })
+        }
+        function hideTradePanel() {
+            getRef('trade_form').animate([
+                { transform: 'translateY(0)' },
+                { transform: 'translateY(100%)' },
+            ], {
+                duration: 150,
+                easing: 'ease'
+            }).onfinish = () => {
+                getRef('trade_form').classList.add('hide-on-mobile')
+            }
+            getRef('trade_panel_backdrop').animate([
+                { opacity: 1 },
+                { opacity: 0 },
+            ], {
+                duration: 150,
+                easing: 'ease'
+            }).onfinish = () => {
+                getRef('trade_panel_backdrop').classList.add('hide-on-mobile')
+            }
+        }
 
         function updateTooltip(asset, tradeType) {
             getRef('quantity_selector').querySelectorAll('.button').forEach(button => {