From 5a944f9916d93dd328848a39d06700309d6b6c3e Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 23 Aug 2022 15:41:01 +0200
Subject: [PATCH] Add card to display errors that scrolls into view.

---
 frontend/src/components/ErrorCard.vue | 37 +++++++++++++++++++++++++++
 frontend/src/scss/_variables.scss     | 16 ++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 frontend/src/components/ErrorCard.vue

diff --git a/frontend/src/components/ErrorCard.vue b/frontend/src/components/ErrorCard.vue
new file mode 100644
index 0000000..491996e
--- /dev/null
+++ b/frontend/src/components/ErrorCard.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+
+const element = ref<HTMLElement>();
+
+function scrollIntoView() {
+    element.value?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+    });
+}
+
+onMounted(scrollIntoView);
+</script>
+
+<template>
+    <div ref="element" class="error-card">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+@import "../scss/variables";
+
+.error-card {
+    margin: $error-card-margin;
+    padding: $error-card-padding;
+
+    border: $error-card-border;
+    border-radius: $error-card-border-radius;
+
+    font-weight: $error-card-font-weight;
+
+    background-color: $error-card-background-color;
+    color: $error-card-color;
+}
+</style>
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index e13761c..846ba0d 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -77,6 +77,12 @@ $h2-margin: 0.5em 0;
 $link-color: $variant-color-warning;
 $link-hover-color: $variant-color-warning;
 
+// Form
+$label-font-weight: 600;
+$fieldset-border: 0.1em solid $gray;
+$fieldset-border-radius: 0.5em;
+$fieldset-background-color: $gray-darker;
+
 // Inputs
 $input-padding: 0.25em 0.5em;
 $input-background-color: $gray-lighter;
@@ -99,6 +105,16 @@ $button-sizes: (
     large: 1.15em,
 );
 
+// Error cards
+$error-card-margin: 1em 0;
+$error-card-padding: 0.5em;
+$error-card-border: 0.1em solid $variant-color-danger;
+$error-card-border-radius: 0.5em;
+$error-card-font-weight: 600;
+$error-card-background-color: lighten($variant-color-danger, 10%);
+$error-card-color: $page-background-color;
+
+
 // Navigation
 $nav-bar-background-color: $gray-dark;
 $nav-link-color: $page-text-color;