Skip to content

Commit aa61c11

Browse files
committed
fixed basic front-end look
1 parent 8d276f2 commit aa61c11

File tree

1 file changed

+25
-23
lines changed

1 file changed

+25
-23
lines changed

src/components/Modals/SaveCourseModal.vue

+25-23
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
<template>
22
<teleport-modal
33
content-class="content-plan"
4-
right-button-text="Save"
4+
right-button-text="Done"
55
@model-closed="closeCurrentModal"
66
@right-button-clicked="saveCourse"
7-
:has-custom-position="true"
87
>
98
<template #title>
109
<div class="saveCourseModal-title">
1110
<img src="src\assets\images\savedIconBig.svg" alt="big saved icon" />
1211
<h1>{{ courseName }} Saved</h1>
1312
</div>
1413
</template>
14+
1515
<div class="saveCourseModal-header">
16-
<div class="saveCourseModal-header-line"><hr /></div>
17-
<div class="saveCourseModal-header-content">
18-
<span>Collections</span>
19-
<button class="saveCourseModal-header-addButton" @click="addNewCollection">
16+
<!-- create a rectangular border-->
17+
<div class="saveCourseModal-header-text">
18+
<span> Collections </span>
19+
<button class="saveCourseModal-header-text-addButton" @click="addNewCollection">
2020
<img src="src\assets\images\plus.svg" alt="add new collection" />
2121
</button>
2222
</div>
23-
<div class="saveCoursesModal-header-line" v-if="isdefaultCollection"><hr /></div>
2423
</div>
2524

2625
<div class="saveCourseModal-body">
27-
<!--TODO: add default view and another view when they are collections to be populated-->
2826
<div class="saveCourseModal-body-content">
2927
<p>{{ collection }}</p>
3028
<!--Must find all possible collections
3129
Checkbox Style
30+
Need a collections variable in firestore
3231
-->
3332
</div>
3433
</div>
@@ -38,7 +37,6 @@
3837
<script lang="ts">
3938
import { defineComponent } from 'vue';
4039
import TeleportModal from '@/components/Modals/TeleportModal.vue';
41-
// import store from '@/store';
4240
4341
export default defineComponent({
4442
components: { TeleportModal },
@@ -71,7 +69,7 @@ export default defineComponent({
7169
<style lang="scss">
7270
@import '@/assets/scss/_variables.scss';
7371
.content-plan {
74-
width: 40rem;
72+
width: 20rem;
7573
}
7674
7775
.modal {
@@ -95,21 +93,24 @@ export default defineComponent({
9593
}
9694
&-header {
9795
display: flex;
98-
flex-direction: column;
99-
hr {
100-
margin-left: -6%;
101-
width: 112%;
102-
}
103-
&-content {
96+
align-self: center;
97+
margin-left: 0%;
98+
margin-bottom: 2rem;
99+
width: 112%;
100+
height: 2rem;
101+
border: 0.5px solid rgb(176, 156, 156);
102+
color: $primaryGray;
103+
padding: 0.5rem;
104+
&-text {
104105
display: flex;
105-
flex-direction: row;
106+
align-items: center;
106107
justify-content: space-between;
107-
color: $primaryGray;
108-
span {
109-
font-size: 13px;
110-
font-style: normal;
111-
font-weight: 900;
112-
}
108+
margin-left: 0.5rem;
109+
margin-right: 0.5rem;
110+
font-size: 13px;
111+
font-style: normal;
112+
font-weight: 900;
113+
width: 100%;
113114
&-addButton {
114115
cursor: pointer;
115116
&:hover {
@@ -118,6 +119,7 @@ export default defineComponent({
118119
}
119120
}
120121
}
122+
121123
&-body {
122124
display: flex;
123125
flex-direction: column;

0 commit comments

Comments
 (0)