diff --git a/src/components/BrowseQuizes.vue b/src/components/BrowseQuizes.vue new file mode 100644 index 0000000000000000000000000000000000000000..d1ebb420ead2224ca785d48f89fd7750ed49347d --- /dev/null +++ b/src/components/BrowseQuizes.vue @@ -0,0 +1,108 @@ +<script setup lang="ts"> + +const Quizzes = [0,1,2,8,4,5,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; + +</script> + +<template> + <div id = "QuizzesView"> + <h1 id = "QuizzesTitle">Quizzes</h1> + <div id = "Tools"> + <input id = "TagSearchBar" type = "text" placeholder="Tags:" /> + <div id = "PageTool"> + <button id = "LeftButton"></button> + <input id = "PageView"/> + <button id = "RightButton"></button> + </div> + </div> + <ul class = "item-list"> + <li v-for="(Quiz, index) in Quizzes" :key="index"> + <div id = "QuizInfo"> + <button class="QuizButton">Thumbnail Placeholder</button> + <h1 id = "QuizTitle">Title</h1> + <h1 id = QuizDescription>Description</h1> + </div> + </li> + </ul> + </div> +</template> + +<style scoped> + +#QuizzesView{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#Tools{ + max-width: 100vw; + display: flex; + align-items: center; +} + +#LeftButton, #RightButton{ + height: 4vh; + width: 4vh; + vertical-align: middle; +} + +#PageView{ + height: 4vh; + width: 4vh; + max-width: 4vh; + text-align: center; +} + +#PageTool{ + margin: 2vh; +} + + +#QuizzesTitle{ + text-decoration: underline; + margin: 2vh; +} + +#TagSearchBar{ + width: 60vw; + height: 5vh; +} + +.item-list { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.item-list li { + flex-basis: 20%; /* 5 items per row */ + box-sizing: border-box; + text-align: center; +} + +.QuizButton{ + background-image: url("../assets/Brick.png"); + height: 11vh; + color: var(--color-text-light); +} + + +#QuizTitle{ + font-size: 2vh; + font-weight: 700; +} + +#QuizDescription{ + font-size: 2vh; +} + +#QuizInfo{ + margin: 2vh; +} +</style> \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 9aef6c0acb427e7b0fef14ed0a0057daba1ccd59..5604bff9e12f10c7595615713108c1a8c35672a9 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -26,7 +26,7 @@ const router = createRouter({ }, { path: '/BrowseMyQuizes', - name: "BrowseQuizes", + name: "BrowseMyQuizes", component: () => import('../views/BrowseMyQuizesView.vue') }, { diff --git a/src/views/BrowseMyQuizesView.vue b/src/views/BrowseMyQuizesView.vue index 1a74912e879d0a4f1aa6acdfdaa591519d17d089..ac2d73174a87837f46e1c8f205edb0a52b6ca6d2 100644 --- a/src/views/BrowseMyQuizesView.vue +++ b/src/views/BrowseMyQuizesView.vue @@ -1,9 +1,14 @@ <script setup lang="ts"> +import BrowseQuizes from '@/components/BrowseQuizes.vue' +import PageFooter from '@/components/PageFooter.vue' </script> <template> - <main></main> + <main> + <BrowseQuizes></BrowseQuizes> + <PageFooter></PageFooter> + </main> </template> <style scoped> diff --git a/src/views/BrowseQuizView.vue b/src/views/BrowseQuizView.vue index 1a74912e879d0a4f1aa6acdfdaa591519d17d089..537e815db0c2ec1f86900bcaacb16ca64df88920 100644 --- a/src/views/BrowseQuizView.vue +++ b/src/views/BrowseQuizView.vue @@ -1,9 +1,15 @@ <script setup lang="ts"> +import BrowseQuizes from '@/components/BrowseQuizes.vue' +import PageFooter from '@/components/PageFooter.vue' + </script> <template> - <main></main> + <main> + <BrowseQuizes/> + <PageFooter /> + </main> </template> <style scoped>