Skip to content

Commit 35c0e2b

Browse files
denisa-matdenisa-mat
committed
dropdown headers
1 parent 6a539f0 commit 35c0e2b

File tree

2 files changed

+159
-52
lines changed

2 files changed

+159
-52
lines changed

‎src/components/projects/ProjectInfo.vue‎

Lines changed: 123 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,68 @@
1212
<!-- // },-->
1313
<!--};-->
1414
<!--</script>-->
15-
<script setup>
16-
import {defineProps, onMounted, onUpdated} from "vue";
15+
16+
<script>
17+
import {defineComponent, onMounted, onUpdated, ref} from "vue";
1718
import feather from "feather-icons";
1819
import {ElementTypeEnum} from "@/model/ElementTypeEnum.ts";
1920
20-
const props = defineProps({
21-
projectInfo: {}
21+
22+
export default defineComponent({
23+
computed: {
24+
ElementTypeEnum() {
25+
return ElementTypeEnum
26+
}
27+
},
28+
data() {
29+
return {
30+
state: ref(Array(this.projectInfo.content.length).fill(false)),
31+
}
32+
},
33+
props: ['projectInfo'],
34+
methods: {
35+
showHide(sectionId) {
36+
this.state[sectionId] = !this.state[sectionId]
37+
}
38+
},
39+
setup() {
40+
41+
onMounted(
42+
feather.replace
43+
)
44+
45+
onUpdated(
46+
feather.replace
47+
)
48+
},
49+
2250
})
2351
24-
onUpdated(
25-
feather.replace
26-
)
52+
// const props = defineProps({
53+
// projectInfo: {}
54+
// })
55+
56+
// onUpdated(
57+
// feather.replace
58+
// )
59+
//
60+
// onMounted(
61+
// feather.replace
62+
// )
2763
28-
onMounted(
29-
feather.replace
30-
)
64+
// const a = ref(true)
65+
// a
66+
//
67+
// function showHide() {
68+
// // var section = props.projectInfo.content.find(s => s.id === sectionId)
69+
// // section.sectionVisible = !section.sectionVisible
70+
// a.value = !a.value
71+
// }
72+
//
73+
// showHide
74+
// props.projectInfo
75+
// ElementTypeEnum.Link
3176
32-
props.projectInfo
33-
ElementTypeEnum.Link
3477
// co
3578
</script>
3679

@@ -56,41 +99,80 @@ ElementTypeEnum.Link
5699
:key="section.sectionId"
57100
class="font-general-regular mb-5 text-lg text-ternary-dark dark:text-ternary-light"
58101
>
59-
<p
60-
class="font-general-medium text-primary-dark dark:text-primary-light text-2xl font-bold mb-2"
102+
<v-row @click="showHide(section.sectionId)"
103+
class="border-t-4 border-ternary-light dark:border-ternary-dark mb-10 rounded-lg hover:bg-ternary-light dark:hover:bg-ternary-dark" style="cursor:pointer;"
61104
>
62-
{{ section.sectionHeading }}
63-
</p>
105+
106+
<h2
107+
class="font-general-medium text-primary-dark dark:text-primary-light text-2xl font-bold mb-2 ml-2 mt-2"
108+
>
109+
{{ section.sectionHeading }}
110+
</h2>
111+
<v-spacer />
112+
<div style="{text-align:right}"></div>
113+
<p v-if="this.state[section.sectionId]"
114+
class="mb-2 mr-2 mt-2"
115+
>&#9650;</p>
116+
<p v-else
117+
class="mb-2 mr-2 mt-2"
118+
>&#9660;</p>
119+
<!-- <i-->
120+
<!-- v-if="this.state[section.sectionId]"-->
121+
<!-- data-feather="chevron-down"-->
122+
<!-- class="w-3 h-3 text-ternary-dark dark:text-ternary-light"-->
123+
<!-- style="display: inline-block;"-->
124+
<!-- />-->
125+
<!-- <i-->
126+
<!-- v-else-->
127+
<!-- data-feather="chevron-up"-->
128+
<!-- class="w-3 h-3 text-ternary-dark dark:text-ternary-light"-->
129+
<!-- style="display: inline-block;"-->
130+
<!-- />-->
131+
132+
</v-row>
133+
<!-- <i-->
134+
<!-- data-feather="external-link"-->
135+
<!-- class="w-3 h-3 text-ternary-dark dark:text-ternary-light"-->
136+
<!-- style="display: inline-block;"-->
137+
<!-- />-->
138+
<!-- </v-row>-->
139+
140+
<div v-if="this.state[section.sectionId]">
141+
64142
<p
65-
class="font-general-light mb-4 text-sm text-secondary-dark dark:text-secondary-light"
143+
class="font-general-light mb-4 text-sm text-secondary-dark dark:text-secondary-light mt-5"
66144
>
67145
{{ section.sectionDate }}
68146
</p>
69-
<div
70-
v-for="paragraph in section.sectionParagraphs"
71-
:key="paragraph.id"
72-
class="font-general-regular mb-5 text-lg text-ternary-dark dark:text-ternary-light"
73-
>
74-
<p v-if="(paragraph.type !== undefined
147+
148+
149+
150+
<div
151+
v-for="paragraph in section.sectionParagraphs"
152+
:key="paragraph.id"
153+
class="font-general-regular mb-5 text-lg text-ternary-dark dark:text-ternary-light"
154+
>
155+
<p v-if="(paragraph.type !== undefined
75156
&& paragraph.type === ElementTypeEnum.Text) || paragraph.type === undefined">
76-
{{ paragraph.details }}
77-
</p>
78-
<img
79-
v-else-if="paragraph.type === ElementTypeEnum.Image"
80-
:src="paragraph.details"
81-
alt="foto k odstavci"
82-
/>
83-
<a v-else-if="paragraph.type === ElementTypeEnum.Link"
84-
:href="paragraph.details"
85-
target="_blank"
86-
:class="'hover:underline cursor-pointer'"
87-
>{{ paragraph.linkName }}
88-
<i
89-
data-feather="external-link"
90-
class="w-3 h-3 text-ternary-dark dark:text-ternary-light"
91-
style="display: inline-block;"
157+
{{ paragraph.details }}
158+
</p>
159+
<img
160+
v-else-if="paragraph.type === ElementTypeEnum.Image"
161+
:src="paragraph.details"
162+
alt="foto k odstavci"
92163
/>
93-
</a>
164+
<a v-else-if="paragraph.type === ElementTypeEnum.Link"
165+
:href="paragraph.details"
166+
target="_blank"
167+
:class="'hover:underline cursor-pointer'"
168+
>{{ paragraph.linkName }}
169+
<i
170+
data-feather="external-link"
171+
class="w-3 h-3 text-ternary-dark dark:text-ternary-light"
172+
style="display: inline-block;"
173+
/>
174+
</a>
175+
</div>
94176
</div>
95177

96178

@@ -169,6 +251,6 @@ ElementTypeEnum.Link
169251
</div>
170252
</template>
171253

172-
<style scoped>
254+
<style>
173255
174256
</style>

0 commit comments

Comments
 (0)