Improve Filter card

lucka-me · May 22, 2020 · 5dd91fa · 5dd91fa
1 parent c2690b2
commit 5dd91fa
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/css/extended.css b/css/extended.css
@@ -134,9 +134,8 @@ canvas.canvas-chart--v { height: 100% !important; }
 
 /* Filter */
 #card-filter {
-    flex: 2; flex-shrink: 1;
+    flex: 1; flex-shrink: 0;
     padding: 8px;
-    min-width: 200px;
     min-height: 200px;
 }
 
@@ -252,7 +251,7 @@ textarea.code {
 }
 
 .mdc-switch-box > label {
-    margin-left: 0.5em;
+    margin-left: 0.3em;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;

diff --git a/index.html b/index.html
@@ -83,34 +83,30 @@
                 </div>
                 <!-- Filter -->
                 <div class="mdc-card" id="card-filter" hidden>
-                    <span class="mdc-typography--headline6 margin-h--4">Filter</span>
-                    <div class="flex-box-row--wrap">
-                        <div class="flex-box-col margin-h--4 flex-grow--1" id="block-card-filter-type">
-                            <span class="mdc-typography--subtitle1">Type</span>
-                        </div>
-                        <div class="flex-box-col margin-h--4 flex-grow--1" id="block-card-filter-reason">
-                            <span class="mdc-typography--subtitle1">Rejected</span>
-                        </div>
-                    </div>
+                    <span class="mdc-typography--headline6">Filter</span>
+                    <span class="mdc-typography--subtitle1">Type</span>
+                    <div class="flex-box-row--nowrap" id="block-card-filter-type"></div>
+                    <span class="mdc-typography--subtitle1">Rejected</span>
+                    <div class="flex-box-row--wrap" id="block-card-filter-reason"></div>
                 </div>
                 <!-- Stats: Type -->
                 <div class="mdc-card" id="card-stats-type" hidden>
-                    <span class="mdc-typography--headline6 margin-h--4">Stats: Type</span>
+                    <span class="mdc-typography--headline6">Stats: Type</span>
                     <div class="container-chart"><canvas class="canvas-chart--v"></canvas></div>
                 </div>
                 <!-- Stats: Rejected -->
                 <div class="mdc-card" id="card-stats-rejected" hidden>
-                    <span class="mdc-typography--headline6 margin-h--4">Stats: Rejected</span>
+                    <span class="mdc-typography--headline6">Stats: Rejected</span>
                     <div class="container-chart"><canvas class="canvas-chart--v"></canvas></div>
                 </div>
                 <!-- Submissions -->
                 <div class="mdc-card" id="card-submittions" hidden>
-                    <span class="mdc-typography--headline6 margin-h--4">Submissions</span>
+                    <span class="mdc-typography--headline6">Submissions</span>
                     <div class="container-chart"><canvas class="canvas-chart--h"></canvas></div>
                 </div>
                 <!-- Quotas -->
                 <div class="mdc-card" id="card-quotas" hidden>
-                    <span class="mdc-typography--headline6 margin-h--4">Quotas</span>
+                    <span class="mdc-typography--headline6">Quotas</span>
                     <div class="container-chart"><canvas class="canvas-chart--h"></canvas></div>
                 </div>
             </div>
@@ -293,7 +289,7 @@ <h2 class="mdc-dialog__title">Import</h2>
         </template>
 
         <template id="template-switchBox">
-            <div class="mdc-switch-box">
+            <div class="mdc-switch-box margin-h--4">
                 <div class="mdc-switch mdc-switch--checked">
                     <div class="mdc-switch__track"></div>
                     <div class="mdc-switch__thumb-underlay">