Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Add markup and styling for the past questions

Browse source
This commit is contained in:
Oliver-Akins 2020-12-12 18:03:43 -07:00
parent 6735a5e860
commit e1bc7acd0d
1 changed files with 43 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

45
web/src/components/PastQuestions.vue
View file

@ -1,5 +1,16 @@
<template> <template>
<div></div> <div id="PastQuestions">
<h2 class="centre">{{ $store.getters.teamName }} Questions</h2>
<div class="questions-container">
<div
class="question"
v-for="questionIndex in 8"
:key="`question_${questionIndex}`"
>
Question #{{ questionIndex }}
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -11,7 +22,37 @@ export default {
} }
</script> </script>
<style> <style scoped>
@import "../css/theme.css"; @import "../css/theme.css";
@import "../css/style.css"; @import "../css/style.css";
#PastQuestions {
background-color: var(--board-background-alt);
color: var(--board-background-alt-text);
border-radius: 20px 0 0 20px;
height: calc(100% - 10px);
flex-direction: column;
padding-bottom: 10px;
position: absolute;
display: flex;
width: 50%;
left: 0;
top: 0;
}
.questions-container {
flex-grow: 1;
justify-content: space-evenly;
flex-direction: row;
flex-wrap: wrap;
display: flex;
}
.question {
background-color: var(--board-background);
color: var(--board-background-text);
padding: 10px 10px 0 10px;
margin: 5px;
width: 40%;
}
</style> </style>