Better save button for edit/add monitor page

This commit is contained in:
Louis Lam 2023-02-25 15:40:09 +08:00
parent 98bb854832
commit f47f2d5c87
2 changed files with 27 additions and 4 deletions

View file

@ -10,5 +10,6 @@
"color-function-notation": "legacy", "color-function-notation": "legacy",
"shorthand-property-no-redundant-values": null, "shorthand-property-no-redundant-values": null,
"color-hex-length": null, "color-hex-length": null,
"declaration-block-no-redundant-longhand-properties": null
} }
} }

View file

@ -615,10 +615,10 @@
</template> </template>
</template> </template>
</div> </div>
</div>
<div class="col-md-12 mt-5 mb-1"> <div class="fixed-bottom-bar p-3">
<button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button> <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
</div>
</div> </div>
</div> </div>
</form> </form>
@ -1036,11 +1036,33 @@ message HealthCheckResponse {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/vars.scss";
$padding: 20px;
.shadow-box { .shadow-box {
padding: 20px; padding-top: $padding;
padding-bottom: 0;
padding-right: $padding;
padding-left: $padding;
} }
textarea { textarea {
min-height: 200px; 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> </style>