restructure presentation layer

- Move most GUI related code to /presentation
- Move components to /components (separate from bootstrap and style)
- Move shared components helpers to /components/shared
- Rename Bootstrapping to bootstrapping to enforce same naming
  convention in /presentation
This commit is contained in:
undergroundwires
2021-03-07 19:33:05 +01:00
parent 646db90585
commit f3c7413f52
67 changed files with 100 additions and 71 deletions

View File

@@ -0,0 +1,71 @@
<template>
<button class="button" @click="onClicked">
<font-awesome-icon
class="button__icon"
:icon="[iconPrefix, iconName]" size="2x" />
<div class="button__text">{{text}}</div>
</button>
</template>
<script lang="ts">
import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
@Component
export default class IconButton extends Vue {
@Prop() public text!: number;
@Prop() public iconPrefix!: string;
@Prop() public iconName!: string;
@Emit('click')
public onClicked() {
return;
}
}
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
.button {
display: flex;
flex-direction: column;
align-items: center;
background-color: $accent;
border: none;
color: $white;
padding:20px;
transition-duration: 0.4s;
overflow: hidden;
box-shadow: 0 3px 9px $dark-slate;
border-radius: 4px;
cursor: pointer;
// border: 0.1em solid $slate;
// border-radius: 80px;
// padding: 0.5em;
width: 10%;
min-width: 90px;
&:hover {
background: $white;
box-shadow: 0px 2px 10px 5px $accent;
color: $black;
}
&:hover>&__text {
display: block;
}
&:hover>&__icon {
display: none;
}
&__text {
display: none;
font-family: $artistic-font;
font-size: 1.5em;
color: $gray;
font-weight: 500;
line-height: 1.1;
}
}
</style>