Skip to content

Commit 81b236c

Browse files
deoshreyasdeoshreyas
authored
Add new frontend for voting (#196)
1 parent 0ab6ded commit 81b236c

File tree

12 files changed

+474
-37
lines changed

12 files changed

+474
-37
lines changed

‎app/assets/images/icons/flag.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/icons/globe2.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/icons/tick.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/star-flag.webp‎

8.96 KB
Loading

‎app/assets/stylesheets/application.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,4 @@
3434
@use "pages/kitchen/index" as kitchen_index;
3535
@use "pages/shop/shop";
3636
@use "pages/shop/order";
37+
@use "pages/votes/new" as votes_new;

‎app/assets/stylesheets/pages/votes/_new.scss‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
.votes-new {
2+
margin-top: 4rem;
3+
margin-bottom: 4rem;
4+
5+
.ui-heading {
6+
width: 100%;
7+
margin-bottom: 2em;
8+
9+
&__title {
10+
font-size: 2.5rem;
11+
font-family: var(--font-family-text);
12+
}
13+
14+
&__stack {
15+
width: 50%;
16+
}
17+
18+
&__surface {
19+
width: 100%;
20+
}
21+
22+
@media (max-width: 960px) {
23+
&__stack {
24+
width: 100%;
25+
}
26+
}
27+
}
28+
29+
&__prev-btn {
30+
margin-bottom: 2em;
31+
margin-left: 50%;
32+
transform: translateX(-50%);
33+
}
34+
35+
&__main {
36+
width: 100%;
37+
display: flex;
38+
flex-direction: row;
39+
gap: 2em;
40+
}
41+
42+
&__project {
43+
background-color: #ad7757;
44+
padding: 0.5em;
45+
width: 50%;
46+
border-radius: 16px;
47+
height: fit-content;
48+
}
49+
50+
&__project-card {
51+
display: flex;
52+
flex-direction: row;
53+
gap: 0.5em;
54+
align-items: flex-start;
55+
justify-content: space-between;
56+
background-color: #7a4841;
57+
border-radius: 16px;
58+
color: var(--color-bg);
59+
padding: 1em;
60+
}
61+
62+
&__project-banner-image {
63+
width: 50px;
64+
height: 50px;
65+
border-radius: 8px;
66+
flex-shrink: 0;
67+
object-fit: cover;
68+
}
69+
70+
&__project-card-content {
71+
h1 {
72+
font-family: var(--font-family-text);
73+
font-weight: normal;
74+
font-size: 1.5rem;
75+
}
76+
77+
p {
78+
font-family: var(--font-family-text);
79+
font-weight: normal;
80+
color: #baa092;
81+
font-size: 1rem;
82+
}
83+
}
84+
85+
&__project-card-stats {
86+
display: flex;
87+
flex-direction: row;
88+
gap: 1em;
89+
margin-top: 0.5em;
90+
}
91+
92+
&__project-card-stat {
93+
svg {
94+
width: 20px;
95+
height: 20px;
96+
color: #baa092;
97+
margin-bottom: -0.2em;
98+
}
99+
100+
span {
101+
font-family: var(--font-family-text);
102+
font-weight: normal;
103+
font-size: 1rem;
104+
}
105+
}
106+
107+
&__project-buttons {
108+
display: flex;
109+
flex-direction: column;
110+
gap: 0.2em;
111+
112+
.btn {
113+
font-family: var(--font-family-text);
114+
font-size: 1rem;
115+
}
116+
117+
.report-btn {
118+
background-color: transparent;
119+
opacity: 0.5;
120+
121+
&:hover {
122+
opacity: 1;
123+
}
124+
}
125+
}
126+
127+
&__devlogs {
128+
margin-top: 0.5em;
129+
display: flex;
130+
flex-direction: column;
131+
gap: 0.5em;
132+
max-height: 850px;
133+
overflow-y: scroll;
134+
padding-right: 5px;
135+
136+
@supports (-moz-appearance: none) {
137+
scrollbar-width: 15px;
138+
scrollbar-color: #7a4841 transparent;
139+
}
140+
141+
.post {
142+
padding: 1em;
143+
border-width: 0.5em;
144+
145+
&::before,
146+
&::after {
147+
display: none;
148+
}
149+
}
150+
151+
&::-webkit-scrollbar {
152+
width: 10px;
153+
}
154+
155+
&::-webkit-scrollbar-track {
156+
background: transparent;
157+
}
158+
159+
&::-webkit-scrollbar-thumb {
160+
background: #7a4841;
161+
border-radius: 4px;
162+
}
163+
164+
&::-webkit-scrollbar-thumb:hover {
165+
background: #5a3a31;
166+
}
167+
}
168+
169+
&__form {
170+
background: url("landing/hero/hero-bg.webp") repeat center center / 1200px;
171+
padding: 2em;
172+
width: 50%;
173+
border-radius: 16px;
174+
position: relative;
175+
height: fit-content;
176+
177+
.votes-new__form-flag {
178+
position: absolute;
179+
width: 80px;
180+
top: -0.5em;
181+
right: 2em;
182+
z-index: 10;
183+
184+
@media (max-width: 960px) {
185+
display: none;
186+
}
187+
}
188+
189+
h1 {
190+
font-family: var(--font-family-text);
191+
font-weight: normal;
192+
font-size: 2rem;
193+
margin-bottom: 1.5rem;
194+
text-align: center;
195+
}
196+
197+
.btn-submit {
198+
font-family: var(--font-family-text);
199+
font-weight: normal;
200+
font-size: 1.5rem;
201+
padding: 0.75rem 2rem;
202+
background-color: var(--color-brown-500);
203+
color: var(--color-bg);
204+
border: none;
205+
position: relative;
206+
margin-left: 50%;
207+
transform: translateX(-50%);
208+
margin-top: 1em;
209+
cursor: pointer;
210+
211+
svg {
212+
width: 30px;
213+
height: 30px;
214+
margin-bottom: -0.2em;
215+
margin-right: 1em;
216+
}
217+
218+
&::before {
219+
content: "";
220+
position: absolute;
221+
width: 100%;
222+
height: 100%;
223+
top: -0.5rem;
224+
left: -0.5rem;
225+
border-radius: 16px;
226+
border: 0.5rem solid #ad7757;
227+
}
228+
229+
&:hover {
230+
filter: brightness(1.1);
231+
}
232+
}
233+
}
234+
235+
@media (max-width: 1400px) {
236+
&__main {
237+
flex-direction: column;
238+
}
239+
240+
&__project,
241+
&__form {
242+
width: 100%;
243+
}
244+
}
245+
}
246+
247+
.vote-category {
248+
--vote-category-accent: #c24e4e;
249+
--vote-category-footer-bg: #f9b2a0;
250+
--vote-category-footer-text: #a4383f;
251+
252+
border-radius: 16px;
253+
margin-bottom: 1.5rem;
254+
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
255+
256+
&__header {
257+
background-color: var(--vote-category-accent);
258+
color: var(--color-bg);
259+
padding: 0.5rem 1.5rem 2rem 1.5rem;
260+
font-family: var(--font-family-jua, sans-serif);
261+
font-size: 1.5rem;
262+
display: inline-block;
263+
border-radius: 16px;
264+
margin-bottom: -2rem;
265+
position: relative;
266+
z-index: 0;
267+
}
268+
269+
&__body {
270+
padding: 0.2rem 0;
271+
display: flex;
272+
justify-content: center;
273+
background-color: #fdf6e3;
274+
border: 1rem solid var(--vote-category-accent);
275+
border-radius: 16px;
276+
position: relative;
277+
z-index: 1;
278+
}
279+
280+
&__stars {
281+
width: 100%;
282+
display: flex;
283+
flex-direction: row-reverse;
284+
gap: 0.5rem;
285+
justify-content: space-evenly;
286+
}
287+
288+
&__input {
289+
display: none;
290+
}
291+
292+
&__star {
293+
cursor: pointer;
294+
color: #e0d4c3;
295+
transition: color 0.2s;
296+
297+
svg {
298+
width: 3rem;
299+
height: 3rem;
300+
fill: currentColor;
301+
}
302+
303+
&:hover,
304+
&:hover ~ .vote-category__star {
305+
color: var(--color-yellow-450);
306+
}
307+
}
308+
309+
&__input:checked ~ .vote-category__star {
310+
color: var(--color-yellow-450);
311+
}
312+
313+
&__footer {
314+
padding: 2rem 1rem 0.5rem 1rem;
315+
background-color: var(--vote-category-footer-bg);
316+
color: #8c6b5d;
317+
font-family: var(--font-family-text);
318+
font-size: 1rem;
319+
position: relative;
320+
z-index: 0;
321+
width: 100%;
322+
border-radius: 16px;
323+
margin-top: -1.5rem;
324+
color: var(--vote-category-footer-text);
325+
}
326+
327+
&--red {
328+
--vote-category-accent: #c24e4e;
329+
--vote-category-footer-bg: #f9b2a0;
330+
--vote-category-footer-text: #a4383f;
331+
}
332+
333+
&--yellow {
334+
--vote-category-accent: #de9e41;
335+
--vote-category-footer-bg: #e7c06d;
336+
--vote-category-footer-text: #be772b;
337+
}
338+
339+
&--blue {
340+
--vote-category-accent: #4f8fba;
341+
--vote-category-footer-bg: #a4dddb;
342+
--vote-category-footer-text: #3c5e8b;
343+
}
344+
345+
&--green {
346+
--vote-category-accent: #75a743;
347+
--vote-category-footer-bg: #d0da91;
348+
--vote-category-footer-text: #75a743;
349+
}
350+
}

‎app/controllers/votes_controller.rb‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,15 @@ def index
2121

2222
def new
2323
authorize :vote, :new?
24-
# new vote
2524
@project = Project.votable_by(current_user).first
25+
@devlogs = if @project
26+
@project.posts
27+
.includes(:postable, :user)
28+
.order(created_at: :desc)
29+
.limit(5)
30+
else
31+
[]
32+
end
2633
end
2734

2835
def create
@@ -34,7 +41,7 @@ def create
3441

3542
Rails.logger.info "VOTE PARAMS: time=#{params[:time_taken_to_vote]}, repo=#{params[:repo_url_clicked]}, demo=#{params[:demo_url_clicked]}"
3643

37-
votes_params.each do |vote_params|
44+
votes_params.values.each do |vote_params|
3845
current_user.votes.create!(
3946
project: @project,
4047
category: vote_params[:category],

0 commit comments

Comments
 (0)