From 5dd91fa4587845e43e2a82ccc74d4268015a8f98 Mon Sep 17 00:00:00 2001
From: lucka-me <samzhao0727@gmail.com>
Date: Fri, 22 May 2020 15:08:23 +0800
Subject: [PATCH] Improve Filter card

---
 css/extended.css |  5 ++---
 index.html       | 24 ++++++++++--------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/css/extended.css b/css/extended.css
index 02a08be9..5f411fb4 100755
--- 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
index 4c5bfbf8..8b4a8541 100755
--- 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">