fix: market price overlapping on the mobile

bitzlato · Oct 27, 2021 · a3d0320 · a3d0320
1 parent 8d00c95
commit a3d0320
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 40 deletions.
diff --git a/web/src/components/Box/Box.postcss b/web/src/components/Box/Box.postcss
@@ -96,6 +96,10 @@
   align-self: flex-start;
 }
 
+.padding {
+  padding: var(--gap);
+}
+
 .padding2X {
   padding: calc(var(--gap) * 2);
 }

diff --git a/web/src/components/Box/Box.tsx b/web/src/components/Box/Box.tsx
@@ -18,7 +18,7 @@ type BoxOwnProps<E = React.ElementType> = {
   selfStart?: boolean;
   wrap?: boolean;
   spacing?: boolean | '2x' | '3x' | '4x' | 'sm';
-  padding?: '2x' | '3x';
+  padding?: boolean | '2x' | '3x';
 };
 
 type Props<E extends React.ElementType> = BoxOwnProps<E> &
@@ -69,8 +69,9 @@ export const Box: Element = React.forwardRef(
       col && spacing === '3x' && s.colSpacing3X,
       col && spacing === '4x' && s.colSpacing4X,
       col && spacing === 'sm' && s.colSpacingSm,
+      padding === true && s.padding,
       padding === '2x' && s.padding2X,
-      padding === '3x' && s.padding3X
+      padding === '3x' && s.padding3X,
     );
     return React.createElement(as, { ...props, ref, className: boxClassName });
   },

diff --git a/web/src/components/Label/Label.postcss b/web/src/components/Label/Label.postcss
@@ -1,13 +1,13 @@
 .text2X {
-  font-size: 14px;
+  font-size: var(--font-size-bigger);
   letter-spacing: 0.1px;
   line-height: 22px;
   max-width: 184px;
   text-align: center;
 }
 
 .textSm {
-  font-size: 12px;
+  font-size: var(--font-size-smaller);
 }
 
 .primaryColor {
@@ -37,3 +37,11 @@
 .bold {
   font-weight: 500;
 }
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+  width: 0;
+}
diff --git a/web/src/components/Label/Label.tsx b/web/src/components/Label/Label.tsx
@@ -11,6 +11,7 @@ interface Props {
   failedColor?: boolean;
   capitalize?: boolean;
   bold?: boolean;
+  ellipsis?: boolean;
 }
 
 export const Label: React.FC<Props> = ({
@@ -23,6 +24,7 @@ export const Label: React.FC<Props> = ({
   failedColor,
   capitalize,
   bold,
+  ellipsis,
 }) => {
   const className = cn(
     size === '2x' && s.text2X,
@@ -34,6 +36,7 @@ export const Label: React.FC<Props> = ({
     failedColor && s.failedColor,
     capitalize && s.capitalize,
     bold && s.bold,
+    ellipsis && s.ellipsis,
   );
   return <span className={className}>{children}</span>;
 };
diff --git a/web/src/components/Order/__snapshots__/Order.test.tsx.snap b/web/src/components/Order/__snapshots__/Order.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Order should match snapshot 1`] = `
 <div
-  class="cr-order cr-order--extended"
+  class="cr-order cr-order--extended row rowSpacing"
 >
   <div
     class="cr-order--extended__buy"

diff --git a/web/src/components/Order/index.tsx b/web/src/components/Order/index.tsx
@@ -3,6 +3,7 @@ import { Decimal, OrderForm } from '../';
 import { TabPanel } from '../../components';
 import { FilterPrice } from '../../filters';
 import { getAmount, getTotalPrice } from '../../helpers';
+import { Box } from '../Box';
 
 export type FormType = 'buy' | 'sell';
 
@@ -141,19 +142,19 @@ export class Order extends React.Component<OrderComponentProps, State> {
 
     if (width < splitBorder) {
       return (
-        <div className="cr-order">
+        <Box padding="2x" className="cr-order">
           <TabPanel
             fixed={true}
             panels={this.getPanels()}
             onTabChange={this.handleChangeTab}
             currentTabIndex={this.state.index}
           />
-        </div>
+        </Box>
       );
     }
 
     return (
-      <div className="cr-order cr-order--extended">
+      <Box row spacing className="cr-order cr-order--extended">
         <div className="cr-order--extended__buy">
           <TabPanel
             fixed={true}
@@ -170,7 +171,7 @@ export class Order extends React.Component<OrderComponentProps, State> {
             currentTabIndex={this.state.index}
           />
         </div>
-      </div>
+      </Box>
     );
   }
 

diff --git a/web/src/components/OrderForm/Input.postcss b/web/src/components/OrderForm/Input.postcss
@@ -0,0 +1,5 @@
+.input {
+  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  height: 38px;
+}
diff --git a/web/src/components/OrderForm/index.tsx b/web/src/components/OrderForm/index.tsx
@@ -17,6 +17,10 @@ import { OrderInput } from '../OrderInput';
 import { PercentageButton } from '../PercentageButton';
 import { getTriggerSign } from 'src/containers/OpenOrders/helpers';
 import { CurrencyTicker } from 'src/components/CurrencyTicker/CurrencyTicker';
+import { Box } from '../Box/Box';
+import { Label } from '../Label/Label';
+
+import s from './Input.postcss';
 
 type OnSubmitCallback = (order: OrderProps) => void;
 type DropdownElem = number | string | React.ReactNode;
@@ -123,9 +127,6 @@ interface OrderFormState {
   side: string;
 }
 
-const handleSetValue = (value: string | number | undefined, defaultValue: string) =>
-  value || defaultValue;
-
 export class OrderForm extends React.PureComponent<OrderFormProps, OrderFormState> {
   constructor(props: OrderFormProps) {
     super(props);
@@ -301,20 +302,17 @@ export class OrderForm extends React.PureComponent<OrderFormProps, OrderFormStat
         const priceText = translate('page.body.trade.header.newOrder.content.price');
 
         return (
-          <div className="cr-order-input">
-            <fieldset className="cr-order-input__fieldset">
-              <label className="cr-order-input__fieldset__label">{priceText}</label>
-              <div className="cr-order-input__fieldset__input">
-                &asymp;
-                <span className="cr-order-input__fieldset__input__price">
-                  {handleSetValue(Decimal.format(safePrice, currentMarketBidPrecision, ','), '0')}
-                </span>
-              </div>
-            </fieldset>
-            <div className="cr-order-input__crypto-icon">
+          <Box grow padding row spacing className={s.input}>
+            <Label ellipsis size="sm" bold>
+              &asymp;{' '}
+              <Label primaryColor>
+                {Decimal.format(safePrice, currentMarketBidPrecision, ',') || '0'}
+              </Label>
+            </Label>
+            <Label size="sm">
               <CurrencyTicker symbol={from} />
-            </div>
-          </div>
+            </Label>
+          </Box>
         );
       default:
         break;

diff --git a/web/src/containers/Order/Order.pcss b/web/src/containers/Order/Order.pcss
@@ -22,7 +22,6 @@
   .cr-order {
     height: 100%;
     width: 100%;
-    padding: 12px;
 
     .cr-tab-panel__navigation-container {
       background: var(--body-background-color);

diff --git a/web/src/index.pcss b/web/src/index.pcss
@@ -6,8 +6,8 @@
   --font-family: 'Montserrat', helvetica, sans-serif;
   --font-weight: normal;
   --font-size: 12px !important;
-  --font-size-smaller: calc(var(--font-size) * 0.9);
-  --font-size-bigger: calc(var(--font-size) * 1.1);
+  --font-size-smaller: calc(var(--font-size) * 0.8);
+  --font-size-bigger: calc(var(--font-size) * 1.2);
   --line-height: 1.2;
 
   /* layout */

diff --git a/web/src/mobile/components/TradingTabs/CreateOrder/index.tsx b/web/src/mobile/components/TradingTabs/CreateOrder/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import { Box } from 'src/components/Box';
 import { OpenOrders } from '../../';
 import { OrderBook, OrderComponent } from '../../../../containers';
 import { selectUserLoggedIn } from '../../../../modules';
@@ -9,10 +10,10 @@ const CreateOrderComponent = (props) => {
 
   return (
     <div className="pg-mobile-create-order">
-      <div className="pg-mobile-create-order__row-double">
+      <Box grow padding="2x" row spacing="2x" className="pg-mobile-create-order__row-double">
         <OrderBook />
         <OrderComponent defaultTabIndex={props.currentOrderTypeIndex} />
-      </div>
+      </Box>
       {userLoggedIn ? <OpenOrders /> : null}
     </div>
   );

diff --git a/web/src/mobile/styles/components/CreateOrder.pcss b/web/src/mobile/styles/components/CreateOrder.pcss
@@ -4,22 +4,16 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  margin-bottom: 4px;
   width: 100%;
 
   .cr-locked {
     padding: 0;
   }
 
   &__row-double {
-    align-items: flex-start;
     background: var(--body-background-color);
-    display: flex;
-    flex-direction: row;
     height: max-content;
     max-height: 400px;
-    justify-content: space-between;
-    width: 100%;
   }
 
   .pg-mobile-orders {
@@ -34,7 +28,6 @@
     flex-direction: column;
     height: 100%;
     justify-content: center;
-    padding: 12px;
     width: 50%;
   }
 
@@ -93,7 +86,6 @@
         position: sticky;
         top: 0;
         width: 100%;
-        width: calc(50vw - 24px);
 
         tr {
           align-items: center;

diff --git a/web/src/mobile/styles/components/CurrentMarketInfo.pcss b/web/src/mobile/styles/components/CurrentMarketInfo.pcss
@@ -44,6 +44,7 @@
         font-weight: bold;
         letter-spacing: 0.5px;
         line-height: 22px;
+        white-space: nowrap;
       }
 
       &__chevron {

diff --git a/web/src/mobile/styles/components/OpenOrders.pcss b/web/src/mobile/styles/components/OpenOrders.pcss
@@ -67,7 +67,6 @@
 
     .no-data {
       align-items: flex-start;
-      color: var(--table-text-color);
       display: flex;
       flex-direction: row;
       font-size: 14px;

diff --git a/web/src/screens/SetupScreen/SetupScreen.pcss b/web/src/screens/SetupScreen/SetupScreen.pcss
@@ -134,7 +134,6 @@
       color: var(--setup-markets-button-color);
       font-size: 14px;
       font-weight: bold;
-      padding: 12px;
       letter-spacing: 0.04em;
       width: 75px;
 

diff --git a/web/webpack.config.js b/web/webpack.config.js
@@ -243,6 +243,7 @@ module.exports = {
                 target: `wss://${process.env.PROXY_HOST}`,
                 changeOrigin: true,
                 ws: true,
+                headers: { Connection: 'keep-alive' },
                 onProxyReqWs: (proxyReq, _, socket) => {
                   proxyReq.removeHeader('origin');
                   proxyReq.setHeader('origin', `https://${process.env.PROXY_HOST}`);