From f47f2d5c8712bb41a1daf111629144b7dbf0aff3 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 25 Feb 2023 15:40:09 +0800
Subject: [PATCH] Better save button for edit/add monitor page

---
 .stylelintrc              |  1 +
 src/pages/EditMonitor.vue | 30 ++++++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index e590c98ca..00ddcaaef 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -10,5 +10,6 @@
         "color-function-notation": "legacy",
         "shorthand-property-no-redundant-values": null,
         "color-hex-length": null,
+        "declaration-block-no-redundant-longhand-properties": null
     }
 }
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index d2a418a55..2dffee5ee 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -615,10 +615,10 @@
                                 </template>
                             </template>
                         </div>
+                    </div>
 
-                        <div class="col-md-12 mt-5 mb-1">
-                            <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
-                        </div>
+                    <div class="fixed-bottom-bar p-3">
+                        <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
                     </div>
                 </div>
             </form>
@@ -1036,11 +1036,33 @@ message HealthCheckResponse {
 </script>
 
 <style lang="scss" scoped>
+    @import "../assets/vars.scss";
+
+    $padding: 20px;
+
     .shadow-box {
-        padding: 20px;
+        padding-top: $padding;
+        padding-bottom: 0;
+        padding-right: $padding;
+        padding-left: $padding;
     }
 
     textarea {
         min-height: 200px;
     }
+
+    .fixed-bottom-bar {
+        position: sticky;
+        bottom: 0;
+        margin-left: -$padding;
+        margin-right: -$padding;
+        z-index: 100;
+        background-color: rgba(white, 0.2);
+        backdrop-filter: blur(2px);
+        border-radius: 0 0 10px 10px;
+
+        .dark & {
+            background-color: rgba($dark-header-bg, 0.9);
+        }
+    }
 </style>