Skip to content

Commit 599eae5

Browse files
cskartikeycskartikey
authored
Merge pull request #161 from deoshreyas/main
Add mobile sidebar, make shop responsive and add basic order page
2 parents 9bd48bd + 6cbb513 commit 599eae5

File tree

14 files changed

+566
-46
lines changed

14 files changed

+566
-46
lines changed

‎app/assets/stylesheets/application.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,5 @@
3131
@use "pages/projects/new";
3232
@use "pages/projects/show";
3333
@use "pages/kitchen/index" as kitchen_index;
34-
@use "pages/shop";
34+
@use "pages/shop/shop";
35+
@use "pages/shop/order";

‎app/assets/stylesheets/components/_dropdown.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
align-items: center;
66
font-family: var(--font-family-text);
77
border-radius: 16px;
8-
margin-top: -1em;
98

109
&--brown {
1110
.dropdown__button {
@@ -209,3 +208,8 @@
209208
}
210209
}
211210
}
211+
212+
.dropdown:hover,
213+
.dropdown:focus-within {
214+
z-index: 20;
215+
}

‎app/assets/stylesheets/components/_post.scss‎

Lines changed: 95 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
gap: var(--space-m);
1010
padding: var(--space-xl);
1111
color: var(--color-bg);
12-
12+
1313
&::before {
1414
content: "";
1515
position: absolute;
@@ -24,12 +24,12 @@
2424
border-radius: inherit;
2525
pointer-events: none;
2626
}
27-
27+
2828
> * {
2929
position: relative;
3030
z-index: 1;
3131
}
32-
32+
3333
&__header {
3434
display: flex;
3535
align-items: center;
@@ -80,7 +80,9 @@
8080
&__attachments {
8181
display: block;
8282
position: relative;
83-
[hidden] { display: none !important; }
83+
[hidden] {
84+
display: none !important;
85+
}
8486
}
8587

8688
&__viewport {
@@ -165,11 +167,23 @@
165167
transform: translateY(-50%) scale(1.03);
166168
filter: brightness(0.98);
167169
}
168-
&__chevron--prev { left: var(--space-s); }
169-
&__chevron--next { right: var(--space-s); }
170-
&__chevron-icon { width: 1.1rem; height: 1.1rem; pointer-events: none; }
171-
&__chevron--prev .post__chevron-icon { transform: rotate(90deg); }
172-
&__chevron--next .post__chevron-icon { transform: rotate(-90deg); }
170+
&__chevron--prev {
171+
left: var(--space-s);
172+
}
173+
&__chevron--next {
174+
right: var(--space-s);
175+
}
176+
&__chevron-icon {
177+
width: 1.1rem;
178+
height: 1.1rem;
179+
pointer-events: none;
180+
}
181+
&__chevron--prev .post__chevron-icon {
182+
transform: rotate(90deg);
183+
}
184+
&__chevron--next .post__chevron-icon {
185+
transform: rotate(-90deg);
186+
}
173187

174188
&__indicators {
175189
position: absolute;
@@ -188,59 +202,107 @@
188202
background: rgba(0, 0, 0, 0.25);
189203
cursor: pointer;
190204
}
191-
&__dot.is-active { background: var(--color-brown-400); }
205+
&__dot.is-active {
206+
background: var(--color-brown-400);
207+
}
192208

193209
// Color variants
194210
&--brown {
195211
background-color: var(--color-brown-500);
196212
border-color: var(--color-brown-400);
197213

198-
.post__avatar { background-color: var(--color-brown-300); }
199-
.post__attachment { background: var(--color-brown-300); }
200-
.post__viewport { background: var(--color-brown-300); }
214+
.post__avatar {
215+
background-color: var(--color-brown-300);
216+
}
217+
.post__attachment {
218+
background: var(--color-brown-300);
219+
}
220+
.post__viewport {
221+
background: var(--color-brown-300);
222+
}
201223
}
202224

203225
&--red {
204226
background-color: var(--color-red-500);
205227
border-color: var(--color-red-400);
206228

207-
.post__avatar { background-color: var(--color-red-300); }
208-
.post__attachment { background: var(--color-red-300); }
209-
.post__viewport { background: var(--color-red-300); }
210-
.post__chevron { background: var(--color-red-400); }
211-
.post__dot.is-active { background: var(--color-red-400); }
229+
.post__avatar {
230+
background-color: var(--color-red-300);
231+
}
232+
.post__attachment {
233+
background: var(--color-red-300);
234+
}
235+
.post__viewport {
236+
background: var(--color-red-300);
237+
}
238+
.post__chevron {
239+
background: var(--color-red-400);
240+
}
241+
.post__dot.is-active {
242+
background: var(--color-red-400);
243+
}
212244
}
213245

214246
&--green {
215247
background-color: var(--color-green-400);
216248
border-color: var(--color-green-300);
217249

218-
.post__avatar { background-color: var(--color-green-300); }
219-
.post__attachment { background: var(--color-green-300); }
220-
.post__viewport { background: var(--color-green-300); }
221-
.post__chevron { background: var(--color-green-300); }
222-
.post__dot.is-active { background: var(--color-green-300); }
250+
.post__avatar {
251+
background-color: var(--color-green-300);
252+
}
253+
.post__attachment {
254+
background: var(--color-green-300);
255+
}
256+
.post__viewport {
257+
background: var(--color-green-300);
258+
}
259+
.post__chevron {
260+
background: var(--color-green-300);
261+
}
262+
.post__dot.is-active {
263+
background: var(--color-green-300);
264+
}
223265
}
224266

225267
&--blue {
226268
background-color: var(--color-blue-500);
227269
border-color: var(--color-blue-400);
228270

229-
.post__avatar { background-color: var(--color-blue-300); }
230-
.post__attachment { background: var(--color-blue-300); }
231-
.post__viewport { background: var(--color-blue-300); }
232-
.post__chevron { background: var(--color-blue-400); }
233-
.post__dot.is-active { background: var(--color-blue-400); }
271+
.post__avatar {
272+
background-color: var(--color-blue-300);
273+
}
274+
.post__attachment {
275+
background: var(--color-blue-300);
276+
}
277+
.post__viewport {
278+
background: var(--color-blue-300);
279+
}
280+
.post__chevron {
281+
background: var(--color-blue-400);
282+
}
283+
.post__dot.is-active {
284+
background: var(--color-blue-400);
285+
}
234286
}
235287

236288
&--yellow {
237289
background-color: var(--color-yellow-500);
238290
border-color: var(--color-yellow-450);
239291

240-
.post__avatar { background-color: var(--color-yellow-400); }
241-
.post__attachment { background: var(--color-yellow-400); }
242-
.post__viewport { background: var(--color-yellow-400); }
243-
.post__chevron { background: var(--color-yellow-450); }
244-
.post__dot.is-active { background: var(--color-yellow-450); }
292+
.post__avatar {
293+
background-color: var(--color-yellow-400);
294+
}
295+
.post__attachment {
296+
background: var(--color-yellow-400);
297+
}
298+
.post__viewport {
299+
background: var(--color-yellow-400);
300+
}
301+
.post__chevron {
302+
background: var(--color-yellow-450);
303+
}
304+
.post__dot.is-active {
305+
background: var(--color-yellow-450);
306+
}
245307
}
246308
}

‎app/assets/stylesheets/components/_sidebar.scss‎

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,12 +180,57 @@
180180

181181
@media (max-width: 960px) {
182182
.sidebar {
183-
position: static;
184-
width: auto;
185-
height: auto;
183+
position: fixed;
184+
z-index: 100;
185+
top: auto;
186+
bottom: 1em;
187+
left: 0;
188+
width: 100%;
189+
height: var(--sidebar-collapsed-width);
190+
191+
&:hover {
192+
width: 100%;
193+
}
186194
}
187195

188-
body.signed-in main {
196+
.sidebar__blob {
197+
width: 100%;
198+
justify-content: space-between;
199+
padding: 0.5em 0;
200+
box-shadow: var(--shadow);
201+
}
202+
203+
.sidebar__nav-list {
204+
flex-direction: row;
205+
justify-content: space-evenly;
206+
}
207+
208+
.sidebar:hover .sidebar__nav-label {
209+
opacity: 0;
210+
max-width: 0;
189211
margin-left: 0;
190212
}
213+
214+
.sidebar__nav-link--active::before {
215+
display: none;
216+
}
217+
218+
.sidebar__nav-icon-wrapper {
219+
position: absolute;
220+
left: 50%;
221+
transform: translateX(-50%);
222+
}
223+
224+
.sidebar__user-placeholder {
225+
position: relative;
226+
z-index: 100;
227+
bottom: 0;
228+
padding: 0;
229+
width: 100%;
230+
box-shadow: var(--shadow);
231+
}
232+
233+
body.signed-in main {
234+
margin: 0 50px;
235+
}
191236
}

0 commit comments

Comments
 (0)