Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/modal #20

Merged
merged 10 commits into from
Jan 11, 2024
Merged

Feature/modal #20

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e985d8d
model gemaakt. alleen kleur moet nog aangepast worden
Huib8 Dec 18, 2023
46545d0
model done
Huib8 Dec 18, 2023
e1c7bc9
Changes voor modal
Huib8 Dec 21, 2023
faeaacf
Merge branch 'dev' into feature/model
Huib8 Dec 21, 2023
55402f8
changes after review
Huib8 Jan 10, 2024
f7625e3
changes after second review
Huib8 Jan 10, 2024
1e03707
prettier used and formatted it
Huib8 Jan 11, 2024
709ce06
another file formatted
Huib8 Jan 11, 2024
abbba76
Merge branch 'dev' into feature/model
Huib8 Jan 11, 2024
bf85e97
Merge branch 'dev' into feature/model
Huib8 Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 47 additions & 15 deletions src/resources/vue/components/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div v-html="iconSVG"></div>
<div v-html="iconSVG"></div>
</template>

<script>
Expand All @@ -12,22 +12,54 @@ export default {
computed: {
iconSVG() {
switch (this.icon) {
case 'full-star':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0008 17L6.12295 20.5902L7.72105 13.8906L2.49023 9.40983L9.35577 8.85942L12.0008 2.5L14.6458 8.85942L21.5114 9.40983L16.2806 13.8906L17.8787 20.5902L12.0008 17Z" fill="${this.color || 'black'}"/></svg>`;
case 'half-star':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0008 14.6564L14.8175 16.3769L14.0517 13.1664L16.5583 11.0192L13.2683 10.7554L12.0008 7.70792V14.6564ZM12.0008 17L6.12295 20.5902L7.72105 13.8906L2.49023 9.40983L9.35577 8.85942L12.0008 2.5L14.6458 8.85942L21.5114 9.40983L16.2806 13.8906L17.8787 20.5902L12.0008 17Z" fill="${this.color || 'black'}"/></svg>`;
case 'empty-star':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0008 17L6.12295 20.5902L7.72105 13.8906L2.49023 9.40983L9.35577 8.85942L12.0008 2.5L14.6458 8.85942L21.5114 9.40983L16.2806 13.8906L17.8787 20.5902L12.0008 17ZM12.0008 14.6564L14.8175 16.3769L14.0517 13.1664L16.5583 11.0192L13.2683 10.7554L12.0008 7.70792L10.7333 10.7554L7.44326 11.0192L9.94991 13.1664L9.18408 16.3769L12.0008 14.6564Z" fill="${this.color || 'black'}"/></svg>`;
case 'book':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.4337 7C20.7734 7 20.2074 7.09434 19.6413 7.28301C15.9622 8.03771 13.0377 10.9622 12.283 14.6413C12 15.2074 12 15.7734 12 16.4337V68.3194C12 76.1494 18.3206 82.47 26.1506 82.47H78.0362V73.0362H26.1506C23.5092 73.0362 21.4337 70.9608 21.4337 68.3194C21.4337 65.6779 23.5092 63.6025 26.1506 63.6025H78.0362V11.7169C78.0362 9.07542 75.9608 7 73.3194 7H68.6025V35.3012L59.1687 25.8675L49.735 35.3012V7H21.4337Z" fill="${this.color || 'black'}"/></svg>`;
case 'warning':
return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21_835)"><path d="M17.5 2.1875C18.4707 2.1875 19.3663 2.7002 19.8584 3.54102L34.6241 28.6973C35.1231 29.5449 35.1231 30.5908 34.6377 31.4385C34.1524 32.2861 33.2432 32.8125 32.2657 32.8125H2.73442C1.75688 32.8125 0.847697 32.2861 0.362345 31.4385C-0.123007 30.5908 -0.116171 29.5381 0.376017 28.6973L15.1416 3.54102C15.6338 2.7002 16.5293 2.1875 17.5 2.1875ZM17.5 10.9375C16.5909 10.9375 15.8594 11.6689 15.8594 12.5781V20.2344C15.8594 21.1436 16.5909 21.875 17.5 21.875C18.4092 21.875 19.1407 21.1436 19.1407 20.2344V12.5781C19.1407 11.6689 18.4092 10.9375 17.5 10.9375ZM19.6875 26.25C19.6875 25.6698 19.4571 25.1134 19.0468 24.7032C18.6366 24.293 18.0802 24.0625 17.5 24.0625C16.9199 24.0625 16.3635 24.293 15.9532 24.7032C15.543 25.1134 15.3125 25.6698 15.3125 26.25C15.3125 26.8302 15.543 27.3866 15.9532 27.7968C16.3635 28.207 16.9199 28.4375 17.5 28.4375C18.0802 28.4375 18.6366 28.207 19.0468 27.7968C19.4571 27.3866 19.6875 26.8302 19.6875 26.25Z" fill="#E57E1F"/></g><defs><clipPath id="clip0_21_835"><rect width="35" height="35" fill="${this.color || 'black'}"/></clipPath></defs></svg>`;
case "full-star":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0008 17L6.12295 20.5902L7.72105 13.8906L2.49023 9.40983L9.35577 8.85942L12.0008 2.5L14.6458 8.85942L21.5114 9.40983L16.2806 13.8906L17.8787 20.5902L12.0008 17Z" fill="${
this.color || "black"
}"/></svg>`;
case "half-star":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0008 14.6564L14.8175 16.3769L14.0517 13.1664L16.5583 11.0192L13.2683 10.7554L12.0008 7.70792V14.6564ZM12.0008 17L6.12295 20.5902L7.72105 13.8906L2.49023 9.40983L9.35577 8.85942L12.0008 2.5L14.6458 8.85942L21.5114 9.40983L16.2806 13.8906L17.8787 20.5902L12.0008 17Z" fill="${
this.color || "black"
}"/></svg>`;
case "empty-star":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0008 17L6.12295 20.5902L7.72105 13.8906L2.49023 9.40983L9.35577 8.85942L12.0008 2.5L14.6458 8.85942L21.5114 9.40983L16.2806 13.8906L17.8787 20.5902L12.0008 17ZM12.0008 14.6564L14.8175 16.3769L14.0517 13.1664L16.5583 11.0192L13.2683 10.7554L12.0008 7.70792L10.7333 10.7554L7.44326 11.0192L9.94991 13.1664L9.18408 16.3769L12.0008 14.6564Z" fill="${
this.color || "black"
}"/></svg>`;
case "book":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.4337 7C20.7734 7 20.2074 7.09434 19.6413 7.28301C15.9622 8.03771 13.0377 10.9622 12.283 14.6413C12 15.2074 12 15.7734 12 16.4337V68.3194C12 76.1494 18.3206 82.47 26.1506 82.47H78.0362V73.0362H26.1506C23.5092 73.0362 21.4337 70.9608 21.4337 68.3194C21.4337 65.6779 23.5092 63.6025 26.1506 63.6025H78.0362V11.7169C78.0362 9.07542 75.9608 7 73.3194 7H68.6025V35.3012L59.1687 25.8675L49.735 35.3012V7H21.4337Z" fill="${
this.color || "black"
}"/></svg>`;
case "warning":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21_835)"><path d="M17.5 2.1875C18.4707 2.1875 19.3663 2.7002 19.8584 3.54102L34.6241 28.6973C35.1231 29.5449 35.1231 30.5908 34.6377 31.4385C34.1524 32.2861 33.2432 32.8125 32.2657 32.8125H2.73442C1.75688 32.8125 0.847697 32.2861 0.362345 31.4385C-0.123007 30.5908 -0.116171 29.5381 0.376017 28.6973L15.1416 3.54102C15.6338 2.7002 16.5293 2.1875 17.5 2.1875ZM17.5 10.9375C16.5909 10.9375 15.8594 11.6689 15.8594 12.5781V20.2344C15.8594 21.1436 16.5909 21.875 17.5 21.875C18.4092 21.875 19.1407 21.1436 19.1407 20.2344V12.5781C19.1407 11.6689 18.4092 10.9375 17.5 10.9375ZM19.6875 26.25C19.6875 25.6698 19.4571 25.1134 19.0468 24.7032C18.6366 24.293 18.0802 24.0625 17.5 24.0625C16.9199 24.0625 16.3635 24.293 15.9532 24.7032C15.543 25.1134 15.3125 25.6698 15.3125 26.25C15.3125 26.8302 15.543 27.3866 15.9532 27.7968C16.3635 28.207 16.9199 28.4375 17.5 28.4375C18.0802 28.4375 18.6366 28.207 19.0468 27.7968C19.4571 27.3866 19.6875 26.8302 19.6875 26.25Z" fill="#E57E1F"/></g><defs><clipPath id="clip0_21_835"><rect width="35" height="35" fill="${
this.color || "black"
}"/></clipPath></defs></svg>`;
case "close":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" fill="${
this.color || "black"
}" /></svg>`;
case "return":
return `<svg width="${this.size || 24}" height="${
this.size || 24
}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z" fill="${
this.color || "white"
}" /></svg>`;
default:
return '';
return "";
}
}
}
}
},
},
};
</script>

<style></style>
63 changes: 63 additions & 0 deletions src/resources/vue/components/modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
Huib8 marked this conversation as resolved.
Show resolved Hide resolved
<div class="bg-modal" @click="toggleModal" v-if="showModal">
<div v-if="showModal" class="modal" @click.stop>
<Icon class="close-icon" icon="close" color="#ff0000" />
<slot></slot>
</div>
</div>
</template>

<script>
import Icon from "./icon.vue";
export default {
title: "Modal",
components: {
Icon,
},
data() {
return {
showModal: true,
};
},
methods: {
toggleModal() {
this.showModal = !this.showModal;
},
},
};
</script>

<style lang="scss">
.bg-modal {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
background-color: rgba(128, 128, 128, 0.7);

.modal {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80%;
height: 80%;
background-color: #1d243a;

.close-icon {
position: absolute;
height: 40px;
width: 40px;
top: 5px;
right: 5px;
fill: #fff;
}
}
}
</style>
12 changes: 9 additions & 3 deletions src/resources/vue/scss/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import './variables.scss';

html, body {
html,
body {
font-family: $font-main;
background-color: $color-dark-blue-100;
color: $color-white;
}

h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
margin: 0;
}

p {
margin: 0;
}
}
Loading
Loading