Skip to content

Commit 336ce78

Browse files
samuelcolvinsamuelcolvin
committed
splitting modal component
1 parent 67546af commit 336ce78

File tree

3 files changed

+161
-125
lines changed

3 files changed

+161
-125
lines changed

‎src/components/con-modal.vue‎

Lines changed: 39 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,89 @@
11
<template>
2-
<transition name="tcs-modal-trans">
3-
<div class="tcs-modal-mask" @click="close">
4-
<div v-if="contractor" class="tcs-modal" @click.stop>
5-
<div class="tcs-header">
6-
<h2>{{ contractor.name }}</h2>
7-
<router-link :to="{name: 'index'}" class="close">
2+
<modal :title="contractor_name">
3+
<div v-if="contractor">
4+
<div class="tcs-body">
5+
<div class="tcs-extra">
6+
<img :src="contractor.photo" :alt="contractor.name">
7+
8+
<div class="tcs-location">
89
<!--
910
this is the svg for map icon straight from
10-
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/times.svg
11+
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
1112
-->
1213
<svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
13-
<path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68
14-
28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68
15-
28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
14+
<path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
15+
179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
16+
362 150 150 362z"/>
1617
</svg>
17-
</router-link>
18-
</div>
19-
20-
<div class="tcs-body">
21-
<div class="tcs-extra">
22-
<img :src="contractor.photo" :alt="contractor.name">
23-
24-
<div class="tcs-location">
25-
<!--
26-
this is the svg for map icon straight from
27-
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
28-
-->
29-
<svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
30-
<path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
31-
179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
32-
362 150 150 362z"/>
33-
</svg>
34-
<span>{{ contractor.town }}</span>
35-
</div>
36-
37-
<button v-if="show_enquiry" @click="switch_show">
38-
{{ $root.get_text('contractor_details_button', {contractor_name: contractor.name}) }}
39-
</button>
40-
<button v-else @click="switch_show">
41-
{{ $root.get_text('contractor_enquiry_button', {contractor_name: contractor.name}) }}
42-
</button>
18+
<span>{{ contractor.town }}</span>
4319
</div>
44-
<div class="tcs-content">
4520

46-
<div class="tcs-aside tcs-md">{{ contractor.tag_line }}</div>
21+
<button v-if="show_enquiry" @click="switch_show">
22+
{{ $root.get_text('contractor_details_button', {contractor_name: contractor.name}) }}
23+
</button>
24+
<button v-else @click="switch_show">
25+
{{ $root.get_text('contractor_enquiry_button', {contractor_name: contractor.name}) }}
26+
</button>
27+
</div>
28+
<div class="tcs-content">
29+
30+
<div class="tcs-aside tcs-md">{{ contractor.tag_line }}</div>
4731

48-
<div class="tcs-scroll">
49-
<transition name="tcs-squeeze" mode="out-in">
50-
<enquiry v-if="show_enquiry" :contractor="contractor"></enquiry>
51-
<con-details v-else :contractor="contractor"></con-details>
52-
</transition>
53-
</div>
32+
<div class="tcs-scroll">
33+
<transition name="tcs-squeeze" mode="out-in">
34+
<enquiry v-if="show_enquiry" :contractor="contractor"></enquiry>
35+
<con-details v-else :contractor="contractor"></con-details>
36+
</transition>
5437
</div>
5538
</div>
56-
<tcs-footer></tcs-footer>
57-
</div>
58-
<div v-else class="tcs-modal">
59-
<p>Could not find contractor.</p>
6039
</div>
6140
</div>
62-
</transition>
41+
<div v-else>
42+
<p>Could not find contractor.</p>
43+
</div>
44+
</modal>
6345
</template>
6446

6547
<script>
48+
import modal from './modal.vue'
6649
import con_details from './con-details.vue'
6750
import enquiry from './enquiry.vue'
68-
import footer from './footer.vue'
6951
7052
export default {
7153
methods: {
72-
close: function () {
73-
this.$router.push({name: 'index'})
74-
},
7554
switch_show: function () {
7655
this.show_enquiry = !this.show_enquiry
7756
}
7857
},
7958
components: {
59+
'modal': modal,
8060
'con-details': con_details,
8161
'enquiry': enquiry,
82-
'tcs-footer': footer
8362
},
8463
data: () => ({
8564
show_enquiry: false
8665
}),
8766
computed: {
8867
contractor: function () {
89-
for (var contractor of this.$root.contractors) {
68+
for (let contractor of this.$root.contractors) {
9069
if (contractor.link === this.$route.params.link) {
9170
this.$root.get_details(contractor.url, contractor.link)
9271
return contractor
9372
}
9473
}
74+
},
75+
contractor_name: function () {
76+
if (this.contractor !== undefined) {
77+
return this.contractor.name
78+
}
9579
}
9680
},
97-
created: function () {
98-
this.$root.get_enquiry()
99-
// TODO could do something less ugly here like hide the scroll bar at all times
100-
this.body_overflow_before = document.body.style.overflow
101-
document.body.style.overflow = 'hidden'
102-
},
103-
destroyed: function () {
104-
document.body.style.overflow = this.body_overflow_before
105-
}
10681
}
10782
</script>
10883

10984
<style lang="scss">
11085
@import '../conf';
11186
112-
.tcs-modal-mask {
113-
position: fixed;
114-
z-index: 9998;
115-
top: 0;
116-
left: 0;
117-
width: 100%;
118-
height: 100%;
119-
background-color: rgba($back-colour, $back-colour, $back-colour, .6);
120-
transition: opacity .3s ease;
121-
}
122-
123-
.tcs-modal {
124-
max-width: 900px;
125-
margin: 6vh auto 0;
126-
padding: 20px 20px 10px;
127-
background-color: #fff;
128-
border-radius: 4px;
129-
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
130-
transition: all .3s ease;
131-
}
132-
13387
.tcs-aside {
13488
font-size: 22px;
13589
margin-bottom: 10px;
@@ -138,38 +92,6 @@ export default {
13892
width: 300px;
13993
}
14094
141-
svg.tcs-svg {
142-
width: $svg-size;
143-
height: $svg-size;
144-
path {
145-
fill: $hightlight;
146-
}
147-
}
148-
149-
.tcs-header {
150-
margin-bottom: 10px;
151-
padding-bottom: 10px;
152-
border-bottom: 2px solid #ccc;
153-
h2 {
154-
margin-top: 0;
155-
margin-bottom: 0;
156-
display: inline;
157-
font-size: 29px;
158-
font-weight: 400;
159-
}
160-
.close {
161-
float: right;
162-
font-size: 26px;
163-
text-decoration: none;
164-
color: #888 !important;
165-
transition: all .3s ease;
166-
padding: 5px;
167-
&:hover {
168-
color: black !important;
169-
}
170-
}
171-
}
172-
17395
.tcs-body {
17496
max-height: calc(94vh - 140px);
17597
overflow-y: auto;
@@ -235,13 +157,6 @@ svg.tcs-svg {
235157
236158
// auto applied:
237159
238-
.tcs-modal-trans-enter, .tcs-modal-trans-leave-to {
239-
opacity: 0;
240-
.tcs-modal {
241-
transform: translate(0, 40px);
242-
}
243-
}
244-
245160
.tcs-squeeze-enter-active, .tcs-squeeze-leave-active {
246161
transition: all .3s ease-out;
247162
}

‎src/components/footer.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export default {}
3030
<style lang="scss">
3131
@import '../conf';
3232
.tcs-footer {
33-
margin-top: 30px;
3433
text-align: right;
3534
a {
3635
font-size: 12px;

‎src/components/modal.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<transition name="tcs-modal-trans">
3+
<div class="tcs-modal-mask" @click="close">
4+
<div class="tcs-modal" @click.stop>
5+
<div class="tcs-header">
6+
<h2>{{ title }}</h2>
7+
<router-link :to="{name: 'index'}" class="close">
8+
<!--
9+
this is the svg for map icon straight from
10+
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/times.svg
11+
-->
12+
<svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
13+
<path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68
14+
28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68
15+
28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
16+
</svg>
17+
</router-link>
18+
</div>
19+
20+
<slot>
21+
Modal content.
22+
</slot>
23+
24+
<tcs-footer></tcs-footer>
25+
</div>
26+
</div>
27+
</transition>
28+
</template>
29+
30+
<script>
31+
import footer from './footer.vue'
32+
33+
export default {
34+
methods: {
35+
close: function () {
36+
this.$router.push({name: 'index'})
37+
},
38+
},
39+
components: {
40+
'tcs-footer': footer
41+
},
42+
props: {
43+
title: String,
44+
},
45+
created: function () {
46+
this.$root.get_enquiry()
47+
// TODO could do something less ugly here like hide the scroll bar at all times
48+
this.body_overflow_before = document.body.style.overflow
49+
document.body.style.overflow = 'hidden'
50+
},
51+
destroyed: function () {
52+
document.body.style.overflow = this.body_overflow_before
53+
}
54+
}
55+
</script>
56+
57+
<style lang="scss">
58+
@import '../conf';
59+
60+
.tcs-modal-mask {
61+
position: fixed;
62+
z-index: 9998;
63+
top: 0;
64+
left: 0;
65+
width: 100%;
66+
height: 100%;
67+
background-color: rgba($back-colour, $back-colour, $back-colour, .6);
68+
transition: opacity .3s ease;
69+
}
70+
71+
.tcs-modal {
72+
max-width: 900px;
73+
margin: 6vh auto 0;
74+
padding: 20px 20px 10px;
75+
background-color: #fff;
76+
border-radius: 4px;
77+
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
78+
transition: all .3s ease;
79+
}
80+
81+
svg.tcs-svg {
82+
width: $svg-size;
83+
height: $svg-size;
84+
path {
85+
fill: $hightlight;
86+
}
87+
}
88+
89+
.tcs-header {
90+
margin-bottom: 10px;
91+
padding-bottom: 10px;
92+
border-bottom: 2px solid #ccc;
93+
h2 {
94+
margin-top: 0;
95+
margin-bottom: 0;
96+
display: inline-block;
97+
font-size: 29px;
98+
font-weight: 400;
99+
height: 32px;
100+
}
101+
.close {
102+
float: right;
103+
font-size: 26px;
104+
text-decoration: none;
105+
color: #888 !important;
106+
transition: all .3s ease;
107+
padding: 5px;
108+
&:hover {
109+
color: black !important;
110+
}
111+
}
112+
}
113+
114+
// auto applied:
115+
116+
.tcs-modal-trans-enter, .tcs-modal-trans-leave-to {
117+
opacity: 0;
118+
.tcs-modal {
119+
transform: translate(0, 40px);
120+
}
121+
}
122+
</style>

0 commit comments

Comments
 (0)