chore: add new layout

taiga-family · Aug 21, 2024 · c99a1ec · c99a1ec
1 parent 1d828a4
commit c99a1ec
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 11 deletions.
diff --git a/...mill/src/dashboards/crypto/components/minter/minter-created/minter-created.component.html b/...mill/src/dashboards/crypto/components/minter/minter-created/minter-created.component.html
@@ -11,6 +11,7 @@
 </h3>
 <button
     tuiButton
+    [style.margin-top]="'auto'"
     (click)="createNew()"
 >
     Create new Token

diff --git a/...ermill/src/dashboards/crypto/components/minter/minter-deploy/minter-deploy.component.html b/...ermill/src/dashboards/crypto/components/minter/minter-deploy/minter-deploy.component.html
@@ -75,6 +75,7 @@
     <button
         tuiButton
         type="submit"
+        [style.margin-top]="'auto'"
     >
         Deploy
     </button>

diff --git a/...ermill/src/dashboards/crypto/components/minter/minter-deploy/minter-deploy.component.less b/...ermill/src/dashboards/crypto/components/minter/minter-deploy/minter-deploy.component.less
@@ -14,6 +14,7 @@ form {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
+    height: 100%;
 }
 
 .block-input {

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/minter/minter.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/components/minter/minter.component.html
@@ -12,8 +12,14 @@
         </h2>
     </header>
     @if (!token) {
-        <lmb-minter-deploy (tokenChange)="token = $event" />
+        <lmb-minter-deploy
+            [style.flex-grow]="1"
+            (tokenChange)="token = $event"
+        />
     } @else {
-        <lmb-minter-created [(token)]="token" />
+        <lmb-minter-created
+            [style.flex-grow]="1"
+            [(token)]="token"
+        />
     }
 </div>
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/minter/minter.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/minter/minter.component.less
@@ -4,6 +4,10 @@
     text-align: center;
 }
 
+.card {
+    height: 100%;
+}
+
 .block-input {
     display: flex;
     flex-direction: column;

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.html
@@ -1,12 +1,16 @@
-<div class="column">
-    <div class="row">
-        <lmb-prices class="grow" />
-        <lmb-swap class="grow" />
-        <lmb-pools class="grow" />
+<div class="layout">
+    <div class="left">
+        <lmb-prices class="" />
+        <lmb-staking class="staking" />
     </div>
-    <div class="row">
-        <lmb-staking class="grow" />
-        <lmb-nft class="grow" />
-        <lmb-minter class="grow" />
+    <div class="right">
+        <div class="right-top">
+            <lmb-minter class="minter" />
+            <lmb-swap class="" />
+        </div>
+        <div class="right-bottom">
+            <lmb-nft class="" />
+            <lmb-pools class="" />
+        </div>
     </div>
 </div>
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/crypto.component.less
@@ -36,3 +36,44 @@
     padding-top: 1.25rem;
     flex-direction: column;
 }
+
+.layout {
+    display: flex;
+    width: 100%;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.minter {
+    height: 100%;
+}
+
+.left {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-grow: 1;
+    width: 350px;
+    flex-shrink: 0;
+}
+
+.right {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex-grow: 1;
+}
+
+.right-top {
+    display: grid;
+    gap: 1rem;
+    height: 100%;
+    grid-template-columns: 2fr 4fr;
+    flex-grow: 1;
+}
+
+.right-bottom {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 4fr 3fr;
+}