1
1
<template >
2
2
<teleport-modal
3
3
content-class =" content-plan"
4
- right-button-text =" Save "
4
+ right-button-text =" Done "
5
5
@model-closed =" closeCurrentModal"
6
6
@right-button-clicked =" saveCourse"
7
- :has-custom-position =" true"
8
7
>
9
8
<template #title >
10
9
<div class =" saveCourseModal-title" >
11
10
<img src =" src\assets\images\savedIconBig.svg" alt =" big saved icon" />
12
11
<h1 >{{ courseName }} Saved</h1 >
13
12
</div >
14
13
</template >
14
+
15
15
<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" >
20
20
<img src =" src\assets\images\plus.svg" alt =" add new collection" />
21
21
</button >
22
22
</div >
23
- <div class =" saveCoursesModal-header-line" v-if =" isdefaultCollection" ><hr /></div >
24
23
</div >
25
24
26
25
<div class =" saveCourseModal-body" >
27
- <!-- TODO: add default view and another view when they are collections to be populated-->
28
26
<div class =" saveCourseModal-body-content" >
29
27
<p >{{ collection }}</p >
30
28
<!-- Must find all possible collections
31
29
Checkbox Style
30
+ Need a collections variable in firestore
32
31
-->
33
32
</div >
34
33
</div >
38
37
<script lang="ts">
39
38
import { defineComponent } from ' vue' ;
40
39
import TeleportModal from ' @/components/Modals/TeleportModal.vue' ;
41
- // import store from '@/store';
42
40
43
41
export default defineComponent ({
44
42
components: { TeleportModal },
@@ -71,7 +69,7 @@ export default defineComponent({
71
69
<style lang="scss">
72
70
@import ' @/assets/scss/_variables.scss' ;
73
71
.content-plan {
74
- width : 40 rem ;
72
+ width : 20 rem ;
75
73
}
76
74
77
75
.modal {
@@ -95,21 +93,24 @@ export default defineComponent({
95
93
}
96
94
& -header {
97
95
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 {
104
105
display : flex ;
105
- flex-direction : row ;
106
+ align-items : center ;
106
107
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.5 rem ;
109
+ margin-right : 0.5 rem ;
110
+ font-size : 13px ;
111
+ font-style : normal ;
112
+ font-weight : 900 ;
113
+ width : 100 % ;
113
114
& -addButton {
114
115
cursor : pointer ;
115
116
& :hover {
@@ -118,6 +119,7 @@ export default defineComponent({
118
119
}
119
120
}
120
121
}
122
+
121
123
& -body {
122
124
display : flex ;
123
125
flex-direction : column ;
0 commit comments