Skip to content

Commit 261a4f6

Browse files
samuelcolvinsamuelcolvin
committed
improving appearance with real data
1 parent cb45e40 commit 261a4f6

File tree

3 files changed

+115
-101
lines changed

3 files changed

+115
-101
lines changed

‎src/components/grid.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default {
3131
}
3232
.tcs-col {
3333
flex-grow: 1;
34-
padding: 15px 30px;
34+
padding: 15px 15px;
3535
}
3636
$border-radius: 3px;
3737
.tcs-box {
@@ -45,6 +45,11 @@ $border-radius: 3px;
4545
text-align: center;
4646
box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
4747
user-select: none;
48+
h3 {
49+
white-space: nowrap;
50+
overflow: hidden;
51+
text-overflow: ellipsis;
52+
}
4853
img.tcs-thumb {
4954
border-radius: $border-radius;
5055
width: 150px;

‎src/components/modal.vue‎

Lines changed: 78 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,58 @@
11
<template>
2-
<transition name="tcs-modal">
2+
<transition name="tcs-modal-trans">
33
<div class="tcs-modal-mask" @click="close">
44
<div v-if="contractor" class="tcs-modal" @click.stop>
5-
<div class="tcs-scroll">
6-
<div class="tcs-header">
7-
<h2>{{ contractor.name }}</h2>
8-
<router-link :to="{name: 'index'}" class="close">
9-
&#x274c;
10-
</router-link>
11-
</div>
12-
13-
<div class="tcs-body">
14-
<div class="tcs-content">
15-
<div class="tcs-location">
16-
<!--
17-
this is the svg for map icon straight from
18-
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
19-
-->
20-
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
21-
<path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
22-
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
23-
362 150 150 362z"/>
24-
</svg>
25-
<span>{{ contractor.town }}, {{ contractor.country }}</span>
26-
</div>
27-
28-
<div class="tcs-aside">{{ contractor.tag_line }}</div>
5+
<div class="tcs-header">
6+
<h2>{{ contractor.name }}</h2>
7+
<router-link :to="{name: 'index'}" class="close">
8+
&#x274c;
9+
</router-link>
10+
</div>
2911

30-
<div>
31-
{{ contractor.primary_description }}
32-
</div>
12+
<div class="tcs-body">
13+
<div class="tcs-content">
14+
<div class="tcs-location">
15+
<!--
16+
this is the svg for map icon straight from
17+
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
18+
-->
19+
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
20+
<path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
21+
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
22+
362 150 150 362z"/>
23+
</svg>
24+
<span>{{ contractor.town }}, {{ contractor.country }}</span>
25+
</div>
3326

34-
<div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
35-
<h3>{{ attr.name }}</h3>
36-
<p>{{ attr.value }}</p>
37-
</div>
27+
<div class="tcs-aside">{{ contractor.tag_line }}</div>
3828

39-
<table class="tcs-skills" v-if="contractor_extra.skills">
40-
<caption>
41-
<h3>{{ $root.config.skills_label }}</h3>
42-
</caption>
43-
<tr v-for="skill in contractor_extra.skills">
44-
<th scope="row">{{ skill.subject }}</th>
45-
<td>
46-
<span v-for="qual_level in skill.qual_levels">
47-
{{ qual_level }}
48-
</span>
49-
</td>
50-
</tr>
51-
</table>
29+
<div>
30+
{{ contractor.primary_description }}
5231
</div>
53-
<div class="tcs-extra">
54-
<img :src="contractor.photo" :alt="contractor.name">
55-
<!--<button>Contact {{ contractor.name }}</button>-->
56-
<p v-html="contact_html"></p>
32+
33+
<div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
34+
<h3>{{ attr.name }}</h3>
35+
<p>{{ attr.value }}</p>
5736
</div>
37+
38+
<table class="tcs-skills" v-if="contractor_extra.skills">
39+
<caption>
40+
<h3>{{ $root.config.skills_label }}</h3>
41+
</caption>
42+
<tr v-for="skill in contractor_extra.skills">
43+
<th scope="row">{{ skill.subject }}</th>
44+
<td>
45+
<span v-for="qual_level in filter_qual_levels(skill.qual_levels)">
46+
{{ qual_level }}
47+
</span>
48+
</td>
49+
</tr>
50+
</table>
51+
</div>
52+
<div class="tcs-extra">
53+
<img :src="contractor.photo" :alt="contractor.name">
54+
<!--<button>Contact {{ contractor.name }}</button>-->
55+
<p v-html="contact_html"></p>
5856
</div>
5957
</div>
6058

@@ -73,6 +71,13 @@ export default {
7371
close: function () {
7472
this.$router.push({name: 'index'})
7573
},
74+
filter_qual_levels: (skills) => {
75+
if (skills.length <= 5) {
76+
return skills
77+
} else {
78+
return skills.slice(1, 3).concat(['...']).concat(skills.slice(-2))
79+
}
80+
}
7681
},
7782
computed: {
7883
contractor: function () {
@@ -92,6 +97,7 @@ export default {
9297
}
9398
},
9499
created: function () {
100+
// TODO could do something less ugly here like hide the scroll bar at all times
95101
this.body_overflow_before = document.body.style.overflow
96102
document.body.style.overflow = 'hidden'
97103
},
@@ -116,17 +122,13 @@ $hightlight: #1f2e50;
116122
}
117123
118124
.tcs-modal {
119-
max-width: 800px;
125+
max-width: 900px;
120126
margin: 6vh auto 0;
121127
padding: 20px 20px 40px;
122128
background-color: #fff;
123129
border-radius: 4px;
124130
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
125131
transition: all .3s ease;
126-
.tcs-scroll {
127-
max-height: calc(94vh - 65px);
128-
overflow-y: auto;
129-
}
130132
}
131133
132134
.tcs-header {
@@ -156,6 +158,8 @@ $hightlight: #1f2e50;
156158
.tcs-body {
157159
display: flex;
158160
justify-content: space-between;
161+
max-height: calc(94vh - 130px);
162+
overflow-y: auto;
159163
}
160164
161165
.tcs-location {
@@ -181,6 +185,7 @@ $hightlight: #1f2e50;
181185
flex-grow: 1;
182186
padding-right: 10px;
183187
color: #444;
188+
width: calc(100% - 200px);
184189
.tcs-aside {
185190
font-size: 22px;
186191
margin-bottom: 10px;
@@ -195,6 +200,9 @@ $hightlight: #1f2e50;
195200
}
196201
table.tcs-skills {
197202
border: none;
203+
&, th, td, tr {
204+
background-color: inherit;
205+
}
198206
caption {
199207
text-align: left;
200208
}
@@ -208,13 +216,19 @@ $hightlight: #1f2e50;
208216
th {
209217
text-align: left;
210218
padding-right: 10px;
219+
vertical-align: top;
211220
}
212-
span {
213-
padding: 2px 4px;
214-
margin: 0 3px;
215-
color: white;
216-
background: $hightlight;
217-
border-radius: 3px;
221+
td {
222+
display: flex;
223+
flex-wrap: wrap;
224+
span {
225+
white-space: nowrap;
226+
padding: 3px 3px;
227+
margin: 0 2px 2px;
228+
color: white;
229+
background: $hightlight;
230+
border-radius: 3px;
231+
}
218232
}
219233
}
220234
}
@@ -253,15 +267,10 @@ $button-colour: #5cb85c;
253267
254268
// auto applied:
255269
256-
.tcs-modal-enter {
270+
.tcs-modal-trans-enter, .tcs-modal-trans-leave-active {
257271
opacity: 0;
258-
}
259-
260-
.tcs-modal-leave-active {
261-
opacity: 0;
262-
}
263-
264-
.tcs-modal-enter .tcs-container, .tcs-modal-leave-active .tcs-container {
265-
transform: translate(0, 40px);
272+
.tcs-modal {
273+
transform: translate(0, 40px);
274+
}
266275
}
267276
</style>

‎test/unit/specs/main.js‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,37 @@ import socket from 'src/main'
22

33
const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
44

5-
// describe('main.js', done => {
6-
// let server
7-
// before(() => {
8-
// server = sinon.fakeServer.create()
9-
// server.autoRespond = true
10-
// server.respondWith(dft_response)
11-
// })
12-
// after(() => { server.restore() })
13-
//
14-
// it('should initialise with different element name', done => {
15-
// let outer = document.createElement('div')
16-
// outer.setAttribute('id', 'outer')
17-
// document.body.appendChild(outer)
18-
// let el = document.createElement('div')
19-
// el.setAttribute('id', 'foobar')
20-
// outer.appendChild(el)
21-
//
22-
// const vm = socket('public_key', {
23-
// element: '#foobar'
24-
// })
25-
//
26-
// expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
27-
// // no time for get_data to be called so wont fail
28-
// expect(vm.contractors).to.be.empty
29-
//
30-
// setTimeout(() => {
31-
// expect(vm.contractors).to.have.lengthOf(1)
32-
// done()
33-
// }, 50)
34-
// })
35-
// })
5+
describe('main.js', done => {
6+
let server
7+
before(() => {
8+
server = sinon.fakeServer.create()
9+
server.autoRespond = true
10+
server.respondWith(dft_response)
11+
})
12+
after(() => { server.restore() })
13+
14+
it('should initialise with different element name', done => {
15+
let outer = document.createElement('div')
16+
outer.setAttribute('id', 'outer')
17+
document.body.appendChild(outer)
18+
let el = document.createElement('div')
19+
el.setAttribute('id', 'foobar')
20+
outer.appendChild(el)
21+
22+
const vm = socket('public_key', {
23+
element: '#foobar'
24+
})
25+
26+
expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
27+
// no time for get_data to be called so wont fail
28+
expect(vm.contractors).to.be.empty
29+
30+
setTimeout(() => {
31+
expect(vm.contractors).to.have.lengthOf(1)
32+
done()
33+
}, 50)
34+
})
35+
})
3636

3737
describe('main.js', () => {
3838
let server

0 commit comments

Comments
 (0)