diff --git a/FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue b/FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue index 7523558fb146924b5e848da2009c5db7d5c931e0..e1dbe9fa0617ed7e8c0be86dc58c4ade4e14c7c5 100644 --- a/FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue +++ b/FullstackProsjekt/src/frontend/src/components/sidebar/Sidebar.vue @@ -30,8 +30,7 @@ export default { <SidebarLink to="/login" icon="fas fa-image">Login</SidebarLink> <span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar"> - <button class="iconButton"> <img id="icon" src="../icons/menu-burger.png"/> - </button> + <button class="iconButton"> <img id="icon" src="../icons/menu-burger.png"/> </button> </span> </div> </template> diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue index 78359cdb02bc6046d1c106104bb926d9b5ee1161..a446e69ccc6e95c13b82841f3359a626e1d91b87 100644 --- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue +++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue @@ -2,7 +2,67 @@ </script> <template> - <body> - <h1> This is the dashboard</h1> + <body class="dashboard"> + <h1>Dashboard</h1> + <input class="searchBox" placeholder="Search"> + + <div class="row"> + <div class="course-col"> + <h3>Quiz 1</h3> + <p>Insert photo </p> + </div> + <div class="course-col"> + <h3>Quiz 2</h3> + <p>Insert photo </p> + </div> + <div class="course-col"> + <h3>Quiz 3</h3> + <p>Insert photo</p> + </div> + </div> + + <div class="row"> + <div class="course-col"> + <h3>Quiz 4</h3> + <p>Insert photo </p> + </div> + <div class="course-col"> + <h3>Quiz 5</h3> + <p>Insert photo </p> + </div> + <div class="course-col"> + <h3>Quiz 6</h3> + <p>Insert photo</p> + </div> + </div> + </body> -</template> \ No newline at end of file +</template> + + +<style> +.dashboard{ + padding: 10px; +} +.searchBox{ + padding: 10px; +} + +.row{ + margin-top: 5%; + display: flex; + justify-content: space-between; +} +.course-col{ + flex-basis: 31%; + background: #E5E5E5; + border-radius: 10px; + margin-bottom: 5%; + padding: 20px; + box-sizing: border-box; + transition: 0.5s; +} +.course-col:hover{ + box-shadow: 0 0 20px 0px rgba(0,0,0,0.3); +} +</style> \ No newline at end of file