- reduce exchange header size

- deactivate scroll for mobile view - left order book is now default Signed-off-by: Stefan Schiessl <[email protected]>
bitshares · Sep 12, 2018 · 9eedce3 · 9eedce3
1 parent e3de117
commit 9eedce3
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 11 deletions.
diff --git a/app/assets/stylesheets/components/_exchange.scss b/app/assets/stylesheets/components/_exchange.scss
@@ -541,6 +541,11 @@ table thead tr th.mymarkets-header {
     fill: #cc9f00 !important;
 }
 
+@media (max-width: 450px) {
+    .hide-order-0 {
+        display: none !important;
+    }
+}
 @media (max-width: 570px) {
     .hide-order-1 {
         display: none !important;
@@ -567,6 +572,12 @@ table thead tr th.mymarkets-header {
     }
 }
 
+@media (max-width: 1220px) {
+    .hide-order-6 {
+        display: none !important;
+    }
+}
+
 .no-data {
     position: relative;
     left: 45%;

diff --git a/app/components/Exchange/Exchange.jsx b/app/components/Exchange/Exchange.jsx
@@ -193,7 +193,7 @@ class Exchange extends React.Component {
             flipBuySell: ws.get("flipBuySell", false),
             favorite: false,
             showDepthChart: ws.get("showDepthChart", false),
-            leftOrderBook: ws.get("leftOrderBook", false),
+            leftOrderBook: ws.get("leftOrderBook", true),
             buyDiff: false,
             sellDiff: false,
             buySellTop: ws.get("buySellTop", true),

diff --git a/app/components/Exchange/ExchangeHeader.jsx b/app/components/Exchange/ExchangeHeader.jsx
@@ -399,7 +399,7 @@ export default class ExchangeHeader extends React.Component {
                             </ul>
                             <ul className="market-stats stats top-stats">
                                 <li
-                                    className="stressed-stat input clickable"
+                                    className="stressed-stat input clickable hide-order-0"
                                     style={{padding: "16px"}}
                                     onClick={() => {
                                         ZfApi.publish("chart_options", "open");

diff --git a/app/components/Exchange/Markets.jsx b/app/components/Exchange/Markets.jsx
@@ -36,7 +36,7 @@ class Markets extends React.Component {
 
     render() {
         return (
-            <div ref="wrapper" className="grid-block no-overflow">
+            <div ref="wrapper" className="grid-block page-layout no-overflow">
                 <MyMarkets
                     style={{width: "100%", padding: 20}}
                     listHeight={

diff --git a/app/components/Exchange/MyMarkets.jsx b/app/components/Exchange/MyMarkets.jsx
@@ -909,6 +909,7 @@ class MyMarkets extends React.Component {
                                     />
                                 </span>
                             </label>
+                            <br />
                         </div>
                         <div className="search-wrapper">
                             <form>

diff --git a/app/components/Exchange/TradingViewPriceChart.jsx b/app/components/Exchange/TradingViewPriceChart.jsx
@@ -32,6 +32,20 @@ export default class TradingViewPriceChart extends React.Component {
 
         if (__DEV__) console.log("*** Load Chart ***");
         if (__DEV__) console.time("*** Chart load time: ");
+
+        let disabled_features = [
+            "header_saveload",
+            "symbol_info",
+            "symbol_search_hot_key",
+            "border_around_the_chart",
+            "header_symbol_search",
+            "header_compare"
+        ];
+        if (this.props.mobile) {
+            disabled_features.push("chart_scroll");
+            disabled_features.push("chart_zoom");
+        }
+
         this.tvWidget = new TradingView.widget({
             fullscreen: false,
             symbol: props.quoteSymbol + "_" + props.baseSymbol,
@@ -63,14 +77,7 @@ export default class TradingViewPriceChart extends React.Component {
                 "study_templates",
                 "keep_left_toolbar_visible_on_small_screens"
             ],
-            disabled_features: [
-                "header_saveload",
-                "symbol_info",
-                "symbol_search_hot_key",
-                "border_around_the_chart",
-                "header_symbol_search",
-                "header_compare"
-            ],
+            disabled_features: disabled_features,
             debug: false,
             preset: this.props.mobile ? "mobile" : ""
         });
-Original file line number
+Diff line change
@@ Expand Up / @@ -909,6 +909,7 @@ class MyMarkets extends React.Component { @@
                                         />
                                     </span>
                                 </label>
+                                <br />
                             </div>
                             <div className="search-wrapper">
                                 <form>
@@ Expand Down @@