Skip to content

Commit dfb91e2

Browse files
PeterJFBPeterJFB
committed
Redesign poll component
1 parent 8d8bbd1 commit dfb91e2

File tree

8 files changed

+314
-356
lines changed

8 files changed

+314
-356
lines changed

‎app/components/Poll/Poll.css‎

Lines changed: 109 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,158 @@
1-
@import '~app/styles/variables.css';
2-
3-
.optionWrapper {
4-
justify-content: center;
5-
min-height: 120px;
6-
cursor: pointer;
7-
position: relative;
8-
}
9-
10-
.pollTable {
1+
.poll {
2+
margin: 0 auto;
3+
background-color: var(--lego-card-color);
114
width: 100%;
12-
font-size: 14px;
13-
}
14-
15-
.pollTable td {
16-
border: 0;
17-
padding: 5px;
5+
min-width: 250px;
6+
max-width: 500px;
7+
overflow-y: hidden;
8+
border-radius: 5px;
189
}
1910

20-
.pollTable .textColumn {
21-
border-right: 1px solid #c5c5c5;
22-
text-align: right;
23-
padding-right: 13px;
24-
line-height: 16px;
11+
.topBar {
12+
background-color: var(--lego-red);
13+
position: relative;
14+
width: 100%;
15+
height: 70px;
16+
padding-bottom: 25px;
17+
box-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
2518
}
2619

27-
.pollTable .graphColumn {
28-
width: auto;
29-
min-width: 200px;
30-
padding-left: 13px;
20+
.stats {
21+
color: var(--lego-card-color);
3122
}
3223

33-
.poll {
34-
composes: withShadow from '~app/styles/utilities.css';
35-
background: var(--lego-card-color);
36-
padding: 15px 20px 8px;
37-
}
38-
39-
.pollLight {
40-
background: var(--lego-card-color);
24+
.notAnswered {
25+
color: var(--color-white);
26+
font-size: 30px;
27+
font-weight: 900;
28+
line-height: 45px;
4129
}
4230

43-
.noVotes {
44-
font-style: italic;
31+
.headerBar {
32+
color: var(--lego-font-color);
33+
background-color: var(--lego-card-color);
34+
font-weight: 900;
35+
text-align: center;
36+
position: absolute;
37+
bottom: 0;
38+
left: 50%;
39+
width: 80%;
40+
height: 50px;
41+
border-radius: 10px;
42+
box-shadow: 0 3px 3px rgba(0, 0, 0, 20%);
43+
transform: translate(-50%, 50%);
4544
}
4645

47-
.pollGraph {
48-
animation: graph 1.2s cubic-bezier(41%, 80%, 40%, 94%);
49-
background-color: var(--lego-red-color);
50-
padding-left: 8px;
51-
border-radius: 0 2px 2px 0;
52-
font-style: italic;
53-
font-weight: 300;
54-
color: var(--color-white);
55-
height: 30px;
46+
.contentWrapper {
47+
overflow-y: hidden;
48+
width: 100%;
49+
transition: 0.5s height;
5650
}
5751

58-
.fullGraph {
59-
background-color: #e7e7e7;
60-
width: 100%;
52+
.voteOptionsWrapper {
6153
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
width: 100%;
57+
height: fit-content;
6258
}
6359

64-
html[data-theme='dark'] .fullGraph {
60+
.voteButton,
61+
.voteButton + .voteButton {
6562
color: var(--color-white);
66-
background-color: var(--color-mono-gray-5);
67-
}
68-
69-
html[data-theme='dark'] .pollGraph {
70-
color: var(--color-black);
71-
}
72-
73-
.pollGraph span {
74-
vertical-align: middle;
75-
}
76-
77-
@keyframes graph {
78-
from {
79-
width: 1px;
80-
}
81-
82-
to {
83-
width: 100%;
84-
}
85-
}
86-
87-
.pollHeader {
88-
border-radius: 8px;
89-
margin-bottom: 20px;
90-
margin-left: 20px;
91-
font-size: 16px;
92-
color: var(--lego-font-color);
63+
background: var(--lego-red);
64+
font-weight: 500;
65+
width: 90%;
66+
height: 2rem;
67+
padding: 5px;
68+
margin: 2px;
9369
}
9470

95-
.voteButton {
96-
background: var(--lego-red-color);
97-
color: var(--lego-color-gray-light);
98-
border: 1px solid var(--border-gray);
71+
.voteOptions {
9972
width: 100%;
100-
margin: 0 !important;
101-
font-size: 15px;
102-
max-width: 400px;
73+
padding-top: 35px;
10374
}
10475

105-
.voteButton:hover {
106-
opacity: 0.8;
107-
}
108-
109-
html[data-theme='dark'] .voteButton {
110-
color: var(--color-dark-gray-3);
76+
.bottomInfoWrapper {
77+
display: flex;
78+
flex-direction: column;
79+
align-items: center;
11180
}
11281

113-
.moreOptionsLink {
114-
justify-content: space-between;
82+
.totalVotesInfo {
83+
display: flex;
11584
}
11685

117-
.arrow {
118-
margin-top: 9px;
119-
cursor: pointer;
120-
121-
&:hover {
122-
transform: scale(1.5);
123-
color: var(--color-red-3);
124-
transition: transform 0.2s;
125-
}
86+
.resultsHiddenInfo {
87+
font-style: italic;
12688
}
12789

128-
.blurContainer {
129-
display: none;
130-
position: absolute;
131-
justify-content: center;
90+
.pollTable {
13291
width: 100%;
133-
height: 100%;
92+
font-size: 14px;
13493
}
13594

136-
.blurOverlay {
137-
position: absolute;
138-
z-index: 2;
139-
color: var(--color-black);
140-
margin-top: 25px;
95+
.pollTable tr {
96+
width: 100%;
14197
}
14298

143-
.optionWrapper:hover .blurContainer {
144-
display: flex;
99+
.pollTable td {
100+
border: 0;
101+
padding: 5px;
145102
}
146103

147-
.optionWrapper:hover .blurEffect {
148-
filter: blur(3px);
149-
pointer-events: none;
104+
.pollTable .textColumn {
105+
text-align: right;
106+
line-height: 16px;
107+
word-wrap: break-word;
108+
width: fit-content;
109+
max-width: 200px;
110+
padding-right: 13px;
111+
border-right: 3px solid #c5c5c5;
150112
}
151113

152-
.blurArrow {
153-
margin-top: 40px;
114+
.pollTable .graphColumn {
115+
width: auto;
116+
min-width: 150px;
117+
padding-left: 13px;
118+
padding-right: 15px;
154119
}
155120

156-
.alignItems {
121+
.fullGraph {
157122
display: flex;
158-
justify-content: center;
123+
background-color: var(--color-mono-gray-5);
124+
color: #000;
125+
word-wrap: break-word;
126+
width: 100%;
159127
}
160128

161-
.answered {
162-
margin: 15px 0;
163-
text-align: center;
164-
font-weight: bold;
129+
.pollGraph {
130+
background-color: var(--lego-red);
131+
font-style: italic;
132+
font-weight: 300;
133+
color: var(--color-white);
134+
height: 1.90rem;
135+
padding-left: 8px;
136+
animation: graph 1.2s cubic-bezier(0.41, 0.8, 0.4, 0.94);
137+
border-radius: 0 2px 2px 0;
138+
box-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
165139
}
166140

167-
.bottomInfo {
168-
display: flex;
169-
justify-content: space-between;
141+
.bottomBar,
142+
.bottomBarExpanded {
143+
width: 100%;
144+
height: 70px;
145+
background-color: var(--lego-red);
146+
padding-top: 25px;
147+
transition: 0.5s height, 0.5s padding;
170148
}
171149

172-
.resultsHidden {
173-
font-style: italic;
150+
.bottomBarExpanded {
151+
padding-top: 0px;
152+
height: 45px;
174153
}
175154

176-
@media (--mobile-device) {
177-
.blurContainer {
178-
display: flex;
179-
}
180-
181-
.blurEffect {
182-
filter: blur(3px);
183-
pointer-events: none;
184-
}
155+
.arrow {
156+
text-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
157+
color: var(--lego-card-color);
185158
}

‎app/components/Poll/__tests__/Poll.spec.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
1-
import Poll from '../.';
1+
import { perfectRatios } from '../.';
22

3-
const props = {
4-
poll: {
5-
options: [{ votes: 1 }],
6-
},
7-
};
8-
9-
const poll = new Poll(props);
103
const perfectRatiosTests = [
114
{
125
input: [{ ratio: 33.33 }, { ratio: 33.33 }, { ratio: 33.33 }],
@@ -52,7 +45,7 @@ const perfectRatiosTests = [
5245
describe('poll options', () => {
5346
it('should add up to 100%', () => {
5447
perfectRatiosTests.forEach(({ input, output }) => {
55-
expect(poll.perfectRatios(input, input)).toEqual(output);
48+
expect(perfectRatios(input, input)).toEqual(output);
5649
});
5750
});
5851
});

0 commit comments

Comments
 (0)