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

First iteration of new DashboardView.vue

parent c135d8f1
No related branches found
No related tags found
1 merge request!11Ui Design
Pipeline #267461 passed
Stage: build
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+ 37
− 17
View file @ 27404793
...@@ -3,9 +3,16 @@ ...@@ -3,9 +3,16 @@
<template> <template>
<body class="dashboard"> <body class="dashboard">
<h1>Dashboard</h1> <div class="top-bar">
<input class="searchBox" placeholder="Search for category..."> <br>
<router-link to="/overviewQuiz" class="hero-btn">CREATE QUIZ </router-link> <div class="search-container">
<input class="searchBox" placeholder="Search for category...">
</div> <br>
<div class="create-container">
<router-link to="/overviewQuiz" class="create-btn">CREATE QUIZ</router-link>
</div>
</div>
<div class="row"> <div class="row">
<div class="course-col"> <div class="course-col">
<h3>Quiz 1</h3> <h3>Quiz 1</h3>
...@@ -44,25 +51,41 @@ ...@@ -44,25 +51,41 @@
.dashboard{ .dashboard{
padding: 20px; padding: 20px;
} }
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.search-container {
flex-grow: 1; /* Grow to take available space */
margin-right: 10px; /* Adjust margin between search box and button */
}
.create-container {
flex-shrink: 0; /* Do not shrink */
}
.searchBox{ .searchBox{
width: 250px; width: 250px;
padding: 10px; padding: 10px;
margin-bottom: 50px; margin: 0 auto; /* Center horizontally */
display: block;
text-align: center;
} }
.hero-btn{ .create-btn{
display: inline-block;
text-decoration: none; text-decoration: none;
color: #242F40; color: #E5E5E5;
border: 1px solid #242F40;
padding: 12px 34px; padding: 12px 34px;
font-size: 16px; font-size: 16px;
background: transparent;
position: relative;
cursor: pointer; cursor: pointer;
margin-bottom: 60px;
background-color: #242F40;
} }
.hero-btn:hover{ .create-btn:hover{
border: 1px solid #CCA43B; border: 1px solid #CCA43B;
color: #242F40;
background: #CCA43B; background: #CCA43B;
transition: 1s; transition: 1s;
} }
...@@ -85,12 +108,6 @@ ...@@ -85,12 +108,6 @@
box-shadow: 0 0 20px 0px rgba(0,0,0,0.3); box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
} }
#quizImg{
height: 200px;
border-radius: 5px;
display: flex;
}
@media (max-width: 700px){ @media (max-width: 700px){
.text-box h1{ .text-box h1{
...@@ -100,6 +117,9 @@ ...@@ -100,6 +117,9 @@
.row{ .row{
flex-direction: column; flex-direction: column;
} }
.create-btn{
display: flex;
}
} }
</style> </style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment