freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add card to display errors that scrolls into view.

Browse source
This commit is contained in:
baldo 2022-08-23 15:41:01 +02:00
parent 4ed749eee3
commit 5a944f9916
2 changed files with 53 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/components/ErrorCard.vue Normal file
View file

@ -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>

16
frontend/src/scss/_variables.scss
View file

@ -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;