Skip to content
Snippets Groups Projects
Commit a11ec963 authored by Maddy's avatar Maddy
Browse files

Created more intuitive buttons leading up to the OverviewQuizView.vue

parent 44977453
Branches
No related tags found
1 merge request!16overview ui
Pipeline #267961 passed
Stage: build
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
FullstackProsjekt/src/frontend/src/assets/main.css
+ 9
− 1
View file @ a11ec963
...@@ -16,7 +16,7 @@ body { ...@@ -16,7 +16,7 @@ body {
} }
.course-col{ .course-col{
flex-basis: 31%; flex-basis: 31%;
background: #E5E5E5; background: #d7d7d7;
border-radius: 10px; border-radius: 10px;
margin-bottom: 5%; margin-bottom: 5%;
padding: 20px; padding: 20px;
...@@ -61,6 +61,14 @@ body { ...@@ -61,6 +61,14 @@ body {
border-color: transparent; border-color: transparent;
margin-top: 10px; margin-top: 10px;
} }
.add-Btn:hover{
cursor: pointer;
background-color: #2f3d54;
}
.add-Btn:active{
background-color: #425575;
transition: 0.2s ;
}
.save-Btn{ .save-Btn{
background-color: #CCA43B; background-color: #CCA43B;
font-size: 24px; font-size: 24px;
......
FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+ 1
− 1
View file @ a11ec963
...@@ -18,7 +18,7 @@ export default { ...@@ -18,7 +18,7 @@ export default {
<img id="logo" src="../components/icons/brain.png"/> <img id="logo" src="../components/icons/brain.png"/>
<h1 class="heading">BrainStormer</h1> <h1 class="heading">BrainStormer</h1>
<p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p> <p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p>
<router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link> <router-link to="/dashboard" class="hero-btn">LOOK AT QUIZZES</router-link>
</div> </div>
</section> </section>
......
FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+ 1
− 1
View file @ a11ec963
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<input class="searchBox" placeholder="Search for category..."> <input class="searchBox" placeholder="Search for category...">
</div> <br> </div> <br>
<div class="create-container"> <div class="create-container">
<router-link to="/overviewQuiz" class="create-btn">CREATE QUIZ</router-link> <router-link to="/overviewQuiz" class="create-btn">YOUR QUIZES</router-link>
</div> </div>
</div> </div>
......
FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+ 49
− 21
View file @ a11ec963
<script>
import {defineComponent} from "vue";
import Svg from "@/assets/Svg.vue";
export default defineComponent({
components: {Svg}
})
</script>
<template> <template>
<body> <body>
<div class="overViewQuestion-page"> <div class="overViewQuestion-page">
...@@ -21,7 +10,7 @@ export default defineComponent({ ...@@ -21,7 +10,7 @@ export default defineComponent({
<div class="quiz-header"> <div class="quiz-header">
<h3>Quiz 1</h3> <h3>Quiz 1</h3>
<Svg name="computer-category"/> <Svg :name="selectedIcon" />
</div> </div>
<div class="quiz-body"> <div class="quiz-body">
...@@ -29,7 +18,7 @@ export default defineComponent({ ...@@ -29,7 +18,7 @@ export default defineComponent({
<p>Category:</p> <p>Category:</p>
<div id="form-box"> <div id="form-box">
<form> <form>
<select id="quiz-category"> <select id="quiz-category-1" @change="changeCategory">
<option value="Animal">Animals</option> <option value="Animal">Animals</option>
<option value="Athletic">Athletic/Sport</option> <option value="Athletic">Athletic/Sport</option>
<option value="Computer" selected="selected">Computer Science</option> <option value="Computer" selected="selected">Computer Science</option>
...@@ -50,13 +39,52 @@ export default defineComponent({ ...@@ -50,13 +39,52 @@ export default defineComponent({
<button class="delete-btn">Delete</button> <button class="delete-btn">Delete</button>
</div> </div>
</div> </div>
<div>
<button class="add-Btn">Create Quiz</button>
</div> </div>
</div> </div>
</div>
</body> </body>
</template> </template>
<script>
import { defineComponent } from "vue";
import Svg from "@/assets/Svg.vue";
export default defineComponent({
components: { Svg },
data() {
return {
selectedCategory: 'Computer',
categoryIcons: {
'Animal': 'animal-category',
'Athletic': 'athletic-category',
'Computer': 'computer-category',
'Drama': 'drama-category',
'Music': 'music-category',
'Religion': 'religion-category',
'Science': 'science-category',
'Society': 'society-category',
'Other': 'other-category'
}
};
},
computed: {
selectedIcon() {
return this.categoryIcons[this.selectedCategory];
}
},
methods: {
changeCategory(event) {
this.selectedCategory = event.target.value;
}
}
});
</script>
<style> <style>
.overViewQuestion-page{ .overViewQuestion-page{
padding: 50px; padding: 50px;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment