move order-forms under candle chart

norwnd · Dec 8, 2024 · 6422729 · 6422729
1 parent 29d729c
commit 6422729
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 216 deletions.
diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
@@ -17,94 +17,94 @@ div[data-handler=markets] {
     }
   }
 
-  .order-panel {
-    min-width: 375px;
-
-    #orderFormBuy,
-    #orderFormSell {
-      .disabled {
-        pointer-events: none;
-        opacity: 0.4;
-      }
+  #orderFormBuy,
+  #orderFormSell {
+    .disabled {
+      pointer-events: none;
+      opacity: 0.4;
+    }
 
-      input {
-        height: 30px;
-        border-radius: 0;
-        font-size: 14px;
-        font-weight: bold;
-        background-color: var(--section-bg);
+    input {
+      height: 30px;
+      border-radius: 0;
+      font-size: 14px;
+      font-weight: bold;
+      background-color: var(--section-bg);
 
-        &:hover,
-        &.selected {
-          border: 1px solid var(--border-color);
-        }
+      &:hover,
+      &.selected {
+        border: 1px solid var(--border-color);
       }
+    }
 
-      span.unitbox {
-        position: absolute;
-        font-size: 14px;
-        font-weight: bold;
-        right: 5px;
-        top: 48%; // Looks better than 50 for some reason.
-        transform: translateY(-50%);
-        white-space: nowrap;
-      }
-
-      button {
-        opacity: 0.9;
-        padding: 5px 25px;
-        border-radius: 3px;
-        background-color: var(--section-bg);
-        color: var(--market-btn-color);
-
-        &:hover {
-          opacity: 1;
-          color: black;
-        }
+    span.unitbox {
+      position: absolute;
+      font-size: 14px;
+      font-weight: bold;
+      right: 5px;
+      top: 48%; // Looks better than 50 for some reason.
+      transform: translateY(-50%);
+      white-space: nowrap;
+    }
 
-        &:disabled {
-          pointer-events: auto; // can't use none because it will not show "title" message
-          opacity: 0.4;
-        }
-      }
+    button {
+      opacity: 0.9;
+      padding: 5px 25px;
+      border-radius: 3px;
+      background-color: var(--section-bg);
+      color: var(--market-btn-color);
 
-      button:hover,
-      button.selected {
-        color: var(--market-btn-selected-color);
+      &:hover {
+        opacity: 1;
+        color: black;
       }
 
-      button.submit {
-        color: var(--market-btn-selected-color);
+      &:disabled {
+        pointer-events: auto; // can't use none because it will not show "title" message
+        opacity: 0.4;
       }
+    }
 
-      button.selected,
-      button.submit {
-        &.buygreen-bg {
-          background-color: var(--market-buygreen-bg);
-        }
+    button:hover,
+    button.selected {
+      color: var(--market-btn-selected-color);
+    }
 
-        &.sellred-bg {
-          background-color: var(--market-sellred-bg);
-        }
-      }
+    button.submit {
+      color: var(--market-btn-selected-color);
+    }
 
-      #orderTotalPreviewBuyLeft {
-        color: var(--sell-color);
+    button.selected,
+    button.submit {
+      &.buygreen-bg {
+        background-color: var(--market-buygreen-bg);
       }
 
-      #orderTotalPreviewBuyRight {
-        color: var(--buy-color);
+      &.sellred-bg {
+        background-color: var(--market-sellred-bg);
       }
+    }
 
-      #orderTotalPreviewSellLeft {
-        color: var(--sell-color);
-      }
+    #orderTotalPreviewBuyLeft {
+      color: var(--sell-color);
+    }
 
-      #orderTotalPreviewSellRight {
-        color: var(--buy-color);
-      }
+    #orderTotalPreviewBuyRight {
+      color: var(--buy-color);
     }
 
+    #orderTotalPreviewSellLeft {
+      color: var(--sell-color);
+    }
+
+    #orderTotalPreviewSellRight {
+      color: var(--buy-color);
+    }
+  }
+
+  .order-panel {
+    min-width: 375px;
+
     .ico-unlocked {
       color: $success;
     }
@@ -298,14 +298,38 @@ div[data-handler=markets] {
         width: 18%;
       }
 
-      &:nth-child(2) { // candle chart
+      &:nth-child(2) { // middle section
         order: 2;
-        width: 52%;
+        width: 67%;
+
+        & > section {
+          &:first-child { // candle chart
+            order: 1;
+            height: 78%;
+          }
+
+          &:last-child { // order forms
+            order: 2;
+            height: 32%;
+
+            & > section {
+              &:first-child { // buy form
+                order: 1;
+                width: 50%;
+              }
+
+              &:last-child { // sell form
+                order: 2;
+                width: 50%;
+              }
+            }
+          }
+        }
       }
 
       &:last-child { // user orders, recent matches
         order: 3;
-        width: 25%;
+        width: 15%;
       }
     }