Skip to content

Commit 4973b34

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

File tree

8 files changed

+308
-362
lines changed

8 files changed

+308
-362
lines changed

‎app/components/Poll/Poll.css‎

Lines changed: 103 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,149 @@
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+
background-color: var(--lego-card-color);
113
width: 100%;
12-
font-size: 14px;
13-
}
14-
15-
.pollTable td {
16-
border: 0;
17-
padding: 5px;
4+
min-width: 250px;
5+
max-width: 500px;
6+
margin: 0 auto;
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;
25-
}
26-
27-
.pollTable .graphColumn {
28-
width: auto;
29-
min-width: 200px;
30-
padding-left: 13px;
31-
}
32-
33-
.poll {
34-
composes: withShadow from '~app/styles/utilities.css';
35-
background: var(--lego-card-color);
36-
padding: 15px 20px 8px;
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%);
3718
}
3819

39-
.pollLight {
40-
background: var(--lego-card-color);
20+
.pollIcon,
21+
.arrowIcon {
22+
color: var(--lego-card-color);
4123
}
4224

43-
.noVotes {
44-
font-style: italic;
25+
.headerBar {
26+
color: var(--lego-font-color);
27+
background-color: var(--lego-card-color);
28+
position: absolute;
29+
bottom: 0;
30+
left: 50%;
31+
width: 80%;
32+
height: 50px;
33+
transform: translate(-50%, 50%);
34+
font-weight: 900;
35+
text-align: center;
36+
border-radius: 10px;
37+
box-shadow: 0 3px 3px rgba(0, 0, 0, 20%);
4538
}
4639

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;
40+
.contentWrapper {
41+
overflow-y: hidden;
42+
width: 100%;
43+
transition: 0.5s height;
5644
}
5745

58-
.fullGraph {
59-
background-color: #e7e7e7;
60-
width: 100%;
46+
.voteOptionsWrapper {
6147
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
width: 100%;
51+
height: fit-content;
6252
}
6353

64-
html[data-theme='dark'] .fullGraph {
54+
.voteButton,
55+
.voteButton + .voteButton {
6556
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);
57+
background: var(--lego-red);
58+
font-weight: 500;
59+
width: 90%;
60+
height: 2rem;
61+
padding: 5px;
62+
margin: 2px;
9363
}
9464

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

105-
.voteButton:hover {
106-
opacity: 0.8;
70+
.resultsHiddenInfo {
71+
font-style: italic;
10772
}
10873

109-
html[data-theme='dark'] .voteButton {
110-
color: var(--color-dark-gray-3);
74+
.pollTable {
75+
width: 100%;
76+
font-size: 14px;
11177
}
11278

113-
.moreOptionsLink {
114-
justify-content: space-between;
79+
.pollTable tr {
80+
width: 100%;
11581
}
11682

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-
}
83+
.pollTable td {
84+
border: 0;
85+
padding: 5px;
12686
}
12787

128-
.blurContainer {
129-
display: none;
130-
position: absolute;
131-
justify-content: center;
132-
width: 100%;
133-
height: 100%;
88+
.pollTable .textColumn {
89+
text-align: right;
90+
line-height: 16px;
91+
word-wrap: break-word;
92+
width: fit-content;
93+
max-width: 200px;
94+
padding-right: 13px;
95+
border-right: 3px solid var(--color-mono-gray-3);
13496
}
13597

136-
.blurOverlay {
137-
position: absolute;
138-
z-index: 2;
139-
color: var(--color-black);
140-
margin-top: 25px;
98+
.pollTable .graphColumn {
99+
width: auto;
100+
min-width: 150px;
101+
padding-left: 13px;
102+
padding-right: 15px;
141103
}
142104

143-
.optionWrapper:hover .blurContainer {
105+
.fullGraph {
144106
display: flex;
107+
color: var(--color-black);
108+
background-color: var(--color-mono-gray-5);
109+
word-wrap: break-word;
110+
width: 100%;
145111
}
146112

147-
.optionWrapper:hover .blurEffect {
148-
filter: blur(3px);
149-
pointer-events: none;
150-
}
151-
152-
.blurArrow {
153-
margin-top: 40px;
113+
html[data-theme='dark'] .fullGraph {
114+
color: var(--color-white);
154115
}
155116

156-
.alignItems {
157-
display: flex;
158-
justify-content: center;
117+
.pollGraph {
118+
color: var(--color-white);
119+
background-color: var(--lego-red);
120+
height: 1.9rem;
121+
padding-left: 8px;
122+
font-style: italic;
123+
font-weight: 300;
124+
animation: graph 1.2s cubic-bezier(0.41, 0.8, 0.4, 0.94);
125+
border-radius: 0 2px 2px 0;
126+
box-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
159127
}
160128

161-
.answered {
162-
margin: 15px 0;
163-
text-align: center;
164-
font-weight: bold;
129+
.outerGraphText {
130+
margin-left: 3px;
165131
}
166132

167-
.bottomInfo {
168-
display: flex;
169-
justify-content: space-between;
133+
.bottomBar,
134+
.bottomBarExpanded {
135+
background-color: var(--lego-red);
136+
width: 100%;
137+
height: 70px;
138+
padding-top: 25px;
139+
transition: 0.5s height, 0.5s padding;
170140
}
171141

172-
.resultsHidden {
173-
font-style: italic;
142+
.bottomBarExpanded {
143+
height: 45px;
144+
padding-top: 0;
174145
}
175146

176-
@media (--mobile-device) {
177-
.blurContainer {
178-
display: flex;
179-
}
180-
181-
.blurEffect {
182-
filter: blur(3px);
183-
pointer-events: none;
184-
}
147+
.arrowIcon {
148+
text-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
185149
}

‎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)