Skip to content

Commit 42c4561

Browse files
samuelcolvinsamuelcolvin
committed
spliting out con details into new component
1 parent bde9284 commit 42c4561

File tree

2 files changed

+147
-111
lines changed

2 files changed

+147
-111
lines changed

‎src/components/con-details.vue‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<div>
3+
<div class="tcs-location">
4+
<!--
5+
this is the svg for map icon straight from
6+
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
7+
-->
8+
<svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
9+
<path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
10+
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
11+
362 150 150 362z"/>
12+
</svg>
13+
<span>{{ contractor.town }}, {{ contractor.country }}</span>
14+
</div>
15+
16+
<div class="tcs-aside tcs-md" v-html="to_markdown(contractor.tag_line)"></div>
17+
18+
<div class="tcs-md" v-html="to_markdown(contractor.primary_description)"></div>
19+
20+
<div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
21+
<h3>{{ attr.name }}</h3>
22+
<p v-if="attr.type == 'text_short' || attr.type == 'text_extended'" class="tcs-md" v-html="to_markdown(attr.value)"></p>
23+
<p v-else>{{ attr.value }}</p>
24+
</div>
25+
26+
<table class="tcs-skills" v-if="contractor_extra.skills">
27+
<caption>
28+
<h3>{{ $root.config.skills_label }}</h3>
29+
</caption>
30+
<tr v-for="skill in contractor_extra.skills">
31+
<th scope="row">{{ skill.subject }}</th>
32+
<td>
33+
<span v-for="qual_level in filter_qual_levels(skill.qual_levels)">
34+
{{ qual_level }}
35+
</span>
36+
</td>
37+
</tr>
38+
</table>
39+
</div>
40+
</template>
41+
42+
<script>
43+
var utils = require('../utils')
44+
45+
export default {
46+
name: 'con-details',
47+
methods: {
48+
filter_qual_levels: (skills) => {
49+
if (skills.length <= 5) {
50+
return skills
51+
} else {
52+
return skills.slice(0, 2).concat(['...']).concat(skills.slice(-2))
53+
}
54+
},
55+
to_markdown: utils.to_markdown
56+
},
57+
props: ['contractor'],
58+
computed: {
59+
contractor_extra: function () {
60+
return this.$root.contractors_extra[this.$route.params.link] || {}
61+
},
62+
},
63+
created: function () {
64+
// TODO could do something less ugly here like hide the scroll bar at all times
65+
this.body_overflow_before = document.body.style.overflow
66+
document.body.style.overflow = 'hidden'
67+
},
68+
destroyed: function () {
69+
document.body.style.overflow = this.body_overflow_before
70+
}
71+
}
72+
</script>
73+
74+
<style lang="scss">
75+
$hightlight: #1f2e50;
76+
77+
.tcs-location {
78+
margin-bottom: 10px;
79+
float: right;
80+
span {
81+
display: inline-block;
82+
padding-top: 4px;
83+
vertical-align: top;
84+
font-weight: 500;
85+
}
86+
}
87+
88+
.tcs-md {
89+
p {
90+
margin: 0 0 8px;
91+
}
92+
}
93+
94+
.tcs-aside {
95+
font-size: 22px;
96+
margin-bottom: 10px;
97+
color: $hightlight;
98+
min-height: 28px;
99+
}
100+
101+
h3 {
102+
margin-top: 12px;
103+
margin-bottom: 4px;
104+
font-size: 24px;
105+
font-weight: 400;
106+
}
107+
108+
table.tcs-skills {
109+
border: none;
110+
&, th, td, tr {
111+
background-color: inherit;
112+
}
113+
caption {
114+
text-align: left;
115+
}
116+
th, td {
117+
padding: 0;
118+
font-size: 15px;
119+
}
120+
tr {
121+
height: 25px;
122+
}
123+
th {
124+
text-align: left;
125+
padding-right: 10px;
126+
vertical-align: top;
127+
}
128+
td {
129+
display: flex;
130+
flex-wrap: wrap;
131+
span {
132+
white-space: nowrap;
133+
padding: 3px 3px;
134+
margin: 0 2px 2px;
135+
color: white;
136+
background: $hightlight;
137+
border-radius: 3px;
138+
}
139+
}
140+
}
141+
</style>

‎src/components/modal.vue‎

Lines changed: 6 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -19,42 +19,7 @@
1919

2020
<div class="tcs-body">
2121
<div class="tcs-content">
22-
<div class="tcs-location">
23-
<!--
24-
this is the svg for map icon straight from
25-
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
26-
-->
27-
<svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
28-
<path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
29-
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
30-
362 150 150 362z"/>
31-
</svg>
32-
<span>{{ contractor.town }}, {{ contractor.country }}</span>
33-
</div>
34-
35-
<div class="tcs-aside tcs-md" v-html="to_markdown(contractor.tag_line)"></div>
36-
37-
<div class="tcs-md" v-html="to_markdown(contractor.primary_description)"></div>
38-
39-
<div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
40-
<h3>{{ attr.name }}</h3>
41-
<p v-if="attr.type == 'text_short' || attr.type == 'text_extended'" class="tcs-md" v-html="to_markdown(attr.value)"></p>
42-
<p v-else>{{ attr.value }}</p>
43-
</div>
44-
45-
<table class="tcs-skills" v-if="contractor_extra.skills">
46-
<caption>
47-
<h3>{{ $root.config.skills_label }}</h3>
48-
</caption>
49-
<tr v-for="skill in contractor_extra.skills">
50-
<th scope="row">{{ skill.subject }}</th>
51-
<td>
52-
<span v-for="qual_level in filter_qual_levels(skill.qual_levels)">
53-
{{ qual_level }}
54-
</span>
55-
</td>
56-
</tr>
57-
</table>
22+
<con-details :contractor="contractor"></con-details>
5823
</div>
5924
<div class="tcs-extra">
6025
<img :src="contractor.photo" :alt="contractor.name">
@@ -72,22 +37,17 @@
7237
</template>
7338

7439
<script>
75-
var utils = require('../utils')
40+
var con_details = require('./con-details')
7641
7742
export default {
7843
name: 'tcs-modal',
7944
methods: {
8045
close: function () {
8146
this.$router.push({name: 'index'})
82-
},
83-
filter_qual_levels: (skills) => {
84-
if (skills.length <= 5) {
85-
return skills
86-
} else {
87-
return skills.slice(0, 2).concat(['...']).concat(skills.slice(-2))
88-
}
89-
},
90-
to_markdown: utils.to_markdown
47+
}
48+
},
49+
components: {
50+
'con-details': con_details
9151
},
9252
computed: {
9353
contractor: function () {
@@ -98,9 +58,6 @@ export default {
9858
}
9959
}
10060
},
101-
contractor_extra: function () {
102-
return this.$root.contractors_extra[this.$route.params.link] || {}
103-
},
10461
contact_html: function () {
10562
let raw = this.$root.config.contact_html
10663
return raw.replace('{name}', this.contractor.name).replace('{contact_link}', this.$root.config.contact_link)
@@ -181,73 +138,11 @@ svg.tcs-svg {
181138
overflow-y: auto;
182139
}
183140
184-
.tcs-location {
185-
margin-bottom: 10px;
186-
float: right;
187-
span {
188-
display: inline-block;
189-
padding-top: 4px;
190-
vertical-align: top;
191-
font-weight: 500;
192-
}
193-
}
194-
195-
.tcs-md {
196-
p {
197-
margin: 0 0 8px;
198-
}
199-
}
200-
201141
.tcs-content {
202142
flex-grow: 1;
203143
padding-right: 10px;
204144
color: #444;
205145
width: calc(100% - 200px);
206-
.tcs-aside {
207-
font-size: 22px;
208-
margin-bottom: 10px;
209-
color: $hightlight;
210-
min-height: 28px;
211-
}
212-
h3 {
213-
margin-top: 12px;
214-
margin-bottom: 4px;
215-
font-size: 24px;
216-
font-weight: 400;
217-
}
218-
table.tcs-skills {
219-
border: none;
220-
&, th, td, tr {
221-
background-color: inherit;
222-
}
223-
caption {
224-
text-align: left;
225-
}
226-
th, td {
227-
padding: 0;
228-
font-size: 15px;
229-
}
230-
tr {
231-
height: 25px;
232-
}
233-
th {
234-
text-align: left;
235-
padding-right: 10px;
236-
vertical-align: top;
237-
}
238-
td {
239-
display: flex;
240-
flex-wrap: wrap;
241-
span {
242-
white-space: nowrap;
243-
padding: 3px 3px;
244-
margin: 0 2px 2px;
245-
color: white;
246-
background: $hightlight;
247-
border-radius: 3px;
248-
}
249-
}
250-
}
251146
}
252147
253148
$extra-width: 200px;

0 commit comments

Comments
 (0)