Skip to content

Commit 965e24a

Browse files
author
Peter Klaesson
committed
material design
1 parent 2b8a4a3 commit 965e24a

File tree

6 files changed

+101
-42
lines changed

6 files changed

+101
-42
lines changed

‎frontend/src/components/LeftPanel.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,9 @@ export default {
9090
.leftpanel {
9191
top: 5em;
9292
left: 0;
93-
width: 10em;
93+
width: 9em;
9494
position: fixed;
95+
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.15)
9596
}
9697
.center {
9798
text-align: center;

‎frontend/src/components/Option.vue‎

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -157,70 +157,102 @@ export default {
157157
.option {
158158
margin: 0.5em;
159159
position: relative;
160+
display: flex;
161+
justify-content: space-between;
160162
}
161163
162164
.name {
163165
max-width: 69%;
166+
display: inline-block;
167+
vertical-align: middle;
168+
margin-top: 0.2em;
164169
}
165170
.votes {
166-
position: absolute;
167-
right: 0;
168-
top: 0.1em;
169-
}
171+
display: inline-block;
172+
vertical-align: middle;
173+
}
174+
170175
.vote {
171-
background-color: lightblue;
176+
background-color: #448AFF;
177+
color: #fff;
172178
padding: 0.2em;
173-
margin-left: 0.4em;
174-
float: left;
179+
margin-left: 0.1em;
175180
cursor: pointer;
181+
display: inline-block;
182+
border: 1px solid transparent;
183+
box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.15)
184+
}
185+
.vote:hover {
186+
color: #212121;
176187
}
177188
.vote.selected {
178189
font-weight: bolder;
179190
}
180191
.position {
181192
position: relative;
182-
width: 1.2em;
183-
height: 1.2em;
193+
width: 1em;
194+
height: 1em;
184195
font-size: 100%;
185196
border-radius: 0.6em;
186197
text-align: center;
187-
float: left;
188198
margin-right: 0.5em;
189199
vertical-align: middle;
190200
display: inline-block;
201+
padding: 0.1em;
191202
}
192203
.winner {
193-
background-color: gold;
204+
background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
205+
radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
206+
border: 1px solid #8A6E2F;
207+
color: #5D4A1F;
208+
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
209+
194210
}
195211
.second {
196-
background-color: silver;
212+
background: radial-gradient(ellipse farthest-corner at right bottom, #eeeeee 0%, #ededed 8%, #dddddd 30%, #cbcbcb 40%, transparent 80%),
213+
radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #fffbf4 8%, #eeeeee 25%, #a1a1a1 62.5%, #efefef 100%);
214+
border: 1px solid #a1a1a1;
215+
color: #a1a1a1;
216+
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
197217
}
218+
198219
.third {
199-
background-color: #cd7f32;
220+
background: radial-gradient(ellipse farthest-corner at right bottom, #ff9036 0%, #d4702b 8%, #a14521 30%, #a14521 40%, transparent 80%),
221+
radial-gradient(ellipse farthest-corner at left top, #fff6f2 0%, #ffdeca 8%, #ca7345 25%, #6e2a1e 62.5%, #ca7345 100%);
222+
border: 1px solid #6E2A1E;
223+
color: #6E2A1E;
224+
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
200225
}
201226
.none {
202227
background-color: black;
228+
border: 1px solid #888888;
229+
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
230+
color: #888888;
203231
}
204232
205233
.scoring {
206234
height: 1em;
207235
width: 10em;
208-
background-color: #e9ebee;
236+
background-color: #CFD8DC;
209237
position: absolute;
210238
right: 0;
211239
top: 0.2em;
212240
max-width: 30%;
241+
border-radius: 0.5em;
242+
overflow: hidden;
243+
margin-top: 0.1em;
213244
}
214245
.meter {
215246
height: 100%;
216-
float: left;
217-
background-color: #87cefa;
247+
background-color: #455A64;
218248
text-align: right;
249+
color: #fff;
219250
}
220251
.profilePicture {
221252
width: 1em;
222253
height: 1em;
223254
vertical-align: middle;
255+
border-radius: 0.5em;
224256
}
225257
226258
@media only screen

‎frontend/src/components/PageHeader.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,11 @@ export default {
3737
top: 0;
3838
width: 100%;
3939
text-align: center;
40-
background-color: lightskyblue;
40+
background-color: #607D8B;
4141
height: 4em;
4242
z-index: 10;
43+
box-shadow: 0px 12px 12px 0px rgba(0,0,0,0.15);
44+
color: #fff;
4345
}
4446
h1 {
4547
margin: 0.4em;

‎frontend/src/components/Poll.vue‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,22 @@
1111
<font-awesome :icon="icons.bars"/>
1212
</span>
1313
<div class="menu" v-if="showMenu">
14+
<span title="Back status"
15+
v-if="poll.status >= 5"
16+
@click="backStatus">
17+
<font-awesome :icon="icons.back"/>
18+
</span>
19+
<span title="Start poll"
20+
v-if="poll.status < 5"
21+
@click="activatePoll">
22+
<font-awesome :icon="icons.start"/>
23+
</span>
24+
<span title="End poll"
25+
v-else-if="poll.status < 8"
26+
@click="endPoll">
27+
<font-awesome :icon="icons.finish"/>
28+
</span>
29+
1430
<span title="delete poll"
1531
class="deletePoll"
1632
v-if="canDelete"
@@ -25,21 +41,6 @@
2541
<span @click="deletePoll">Yes</span>
2642
</div>
2743
</div>
28-
<span title="Start poll"
29-
v-if="poll.status < 5"
30-
@click="activatePoll">
31-
<font-awesome :icon="icons.start"/>
32-
</span>
33-
<span title="End poll"
34-
v-else-if="poll.status < 8"
35-
@click="endPoll">
36-
<font-awesome :icon="icons.finish"/>
37-
</span>
38-
<span title="Back status"
39-
v-if="poll.status >= 5"
40-
@click="backStatus">
41-
<font-awesome :icon="icons.back"/>
42-
</span>
4344

4445
</div>
4546
</div>
@@ -243,43 +244,64 @@ export default {
243244
position: relative;
244245
border: 1px solid #e9e8e8;
245246
border-radius: 5px;
247+
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.15)
246248
}
247249
.editPoll {
248250
position: absolute;
249251
top: 2em;
250252
right: 0.5em;
253+
background-color: #448AFF;
254+
padding: .4em;
255+
border-radius: 1em;
256+
height: 1.2em;
257+
width: 1.2em;
258+
color: #FFFFFF;
259+
text-align: center;
260+
box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.15)
251261
}
252262
253263
.editPoll span {
254264
cursor: pointer;
255265
}
256266
.editPoll span:hover {
257-
color: #777;
267+
color: #212121;
258268
}
259269
.status {
260-
font-size: 0.5em;
270+
font-size: 0.8em;
261271
height: 1em;
262272
margin-right: 0.5em;
263273
border-radius: 0.2em;
264-
background-color: lightblue;
274+
background-color: #CFD8DC;
275+
color: #212121;
265276
}
266277
.header {
267278
width: 100%;
268-
border-bottom: 1px solid #e9ebee;
279+
border-bottom: 1px solid #BDBDBD;
269280
}
270281
.menu {
271282
position: absolute;
272-
right: 0.5em;
283+
right: 0em;
284+
top: 2em;
273285
background: #fff;
274-
border: 1px solid gray;
275-
width: 6em;
286+
border: 1px solid #BDBDBD;
276287
z-index: 2;
288+
color: #757575;
289+
box-shadow: 2px 4px 4px 0px rgba(0,0,0,0.15)
277290
}
278291
279292
.menu > span {
280-
float: right;
281293
padding: 0.4em;
294+
margin: 2px;
295+
background-color: #448AFF;
296+
color: #fff;
297+
border-radius: 0.3em;
298+
display: inline-block;
299+
}
300+
301+
.menu > span:hover {
302+
color: #212121;
282303
}
304+
283305
.confirmDelete {
284306
position: absolute;
285307
top: 2em;
@@ -289,7 +311,7 @@ export default {
289311
}
290312
.voterInfo {
291313
margin-top: 2em;
292-
border-top: 1px solid #e9ebee;
314+
border-top: 1px solid #BDBDBD;
293315
text-align: right;
294316
padding: 0.5em;
295317
}

‎frontend/src/components/PollAdd.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export default {
6161
margin-bottom: 1em;
6262
border: 1px solid #e9e8e8;
6363
border-radius: 0.2em;
64+
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.15)
6465
}
6566
.poll.create input[type=text], textarea {
6667
width: calc(100% - 1em);

‎frontend/src/components/RightPanel.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default {
4545
.content {
4646
margin-right: 0.4em;
4747
margin-left: 0.4em;
48+
box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.15)
4849
}
4950
5051
@media only screen

0 commit comments

Comments
 (0)