Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: static/scss/components/_groups.scss

Issue 29453600: Issue 4961 - Fix card group field alignment on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Left Patch Set: Implement .cards class, Fix alignment inn group-5, Minor fixes Created June 21, 2017, 7:41 a.m.
Right Patch Set: Move styling for cards on committee page to committee/index.html Created July 25, 2017, 1:33 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « static/scss/_variables.scss ('k') | no next file » | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 // This file is part of acceptableads.org. 1 // This file is part of acceptableads.org.
2 // Copyright (C) 2016 Eyeo GmbH 2 // Copyright (C) 2016 Eyeo GmbH
3 // 3 //
4 // acceptableads.org is free software: you can redistribute it and/or modify 4 // acceptableads.org is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by 5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or 6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version. 7 // (at your option) any later version.
8 // 8 //
9 // acceptableads.org is distributed in the hope that it will be useful, 9 // acceptableads.org is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details. 12 // GNU General Public License for more details.
13 // 13 //
14 // You should have received a copy of the GNU General Public License 14 // You should have received a copy of the GNU General Public License
15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>. 15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>.
16 16
17 // display like a table (even grid) 17 // display like a table (even grid)
18 18
19 .group-container 19 .group-container
20 { 20 {
21 width: 100%; 21 width: 100%;
22 max-width: $max-width; 22 max-width: $max-width;
23 margin: 0 auto; 23 margin: 0 auto;
24 padding: $xl 0; 24 padding: $xl 0;
25
26 @media (max-width: $desktop-breakpoint)
27 {
28 padding: $xs;
29 }
25 } 30 }
26 31
27 .group-container > %headings, 32 .group-container > %headings,
28 .group-container > p 33 .group-container > p
29 { 34 {
30 margin: $xl auto; 35 margin: $lg auto;
31 padding: 0 $sm; 36 padding: 0 $sm;
37 }
38
39 .group-container > p
40 {
41 @media (max-width: $desktop-breakpoint)
42 {
43 margin: $md auto;
44 }
32 } 45 }
33 46
34 .group 47 .group
35 { 48 {
36 display: table; 49 display: table;
37 width: 100%; 50 width: 100%;
38 table-layout: fixed; 51 table-layout: fixed;
39 } 52 }
40 53
41 .group-container .group 54 .group-container .group
42 { 55 {
43 margin-bottom: 0; 56 margin-bottom: 0;
44 } 57 }
45 58
46 .group-container > %headings 59 .group-container > %headings
47 { 60 {
48 margin-top: 0; 61 margin-top: 0;
62
63 @media (max-width: $desktop-breakpoint)
64 {
65 margin: $md auto;
66 }
49 } 67 }
50 68
51 .group .card, 69 .group .card,
52 .group .item 70 .group .item
53 { 71 {
54 display: table-cell; 72 display: table-cell;
55 vertical-align: top; 73 vertical-align: top;
56 } 74 }
57 75
58 .group.items .item::before 76 .group.items .item::before
(...skipping 219 matching lines...) Expand 10 before | Expand all | Expand 10 after
278 .group > div:nth-child(3), 296 .group > div:nth-child(3),
279 .group > div:nth-child(5) 297 .group > div:nth-child(5)
280 { 298 {
281 margin-left: 0; 299 margin-left: 0;
282 } 300 }
283 } 301 }
284 302
285 @supports (display: grid) 303 @supports (display: grid)
286 { 304 {
287 305
288 .group.cards 306 .group.cards
ire 2017/06/21 07:47:58 I opted for `.group.cards` instead of just `.cards
289 { 307 {
290 display: grid; 308 display: grid;
291 grid-template-columns: repeat(1, 1fr); 309 grid-template-columns: repeat(1, 1fr);
292 310
293 @media (min-width: $card-min-width) 311 @media (min-width: $card-min-width)
294 { 312 {
295 // Each card should be a minimum width of the $card-min-width. Otherwise, take up available space 313 // Each card should be a minimum width of the $card-min-width. Otherwise, take up available space
296 grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr)); 314 grid-template-columns: repeat(auto-fit, minmax($card-min-width, 1fr));
297 } 315 }
298 } 316 }
299 317
300 .group.cards .card 318 .group.cards .card
301 { 319 {
302 display: inline-grid; 320 display: inline-grid;
303 width: 100%; 321 width: 100%;
304 grid-template-rows: auto 1fr auto; 322 grid-template-rows: auto 1fr auto;
305 } 323 }
306 324
307 .group.cards .card-summary 325 .group.cards .card-summary
308 { 326 {
309 @media all 327 height: auto;
310 {
311 height: auto;
312 }
313 } 328 }
314 329
315 .group-4.cards 330 .group-4.cards
316 { 331 {
317 @media (min-width: $desktop-breakpoint) 332 @media (min-width: $desktop-breakpoint)
318 { 333 {
319 // Each card should take a minimum of 25% width of the group 334 // Each card should take a minimum of 25% width of the group
320 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); 335 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
321 } 336 }
322 } 337 }
323 338
324 .group-5.cards 339 .group-5.cards
325 { 340 {
326 @media (min-width: $tablet-breakpoint) 341 @media (min-width: $tablet-breakpoint)
327 { 342 {
328 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); 343 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
329 } 344 }
330 @media (min-width: $desktop-breakpoint) 345 @media (min-width: $desktop-breakpoint)
331 { 346 {
332 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); 347 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
333 } 348 }
334 } 349 }
335 350
336 .group-5.cards > div:nth-child(4), 351 .group-5.cards > div:nth-child(4),
337 .group-5.cards > div:nth-child(5) 352 .group-5.cards > div:nth-child(5)
338 { 353 {
339 @media all 354 margin-left: 0;
340 {
341 margin-left: 0;
342 }
343 } 355 }
344 356
345 .group-5.cards > div:nth-child(4) 357 .group-5.cards > div:nth-child(4)
346 { 358 {
347 @media (min-width: $tablet-breakpoint) and (max-width: $desktop-breakpoint) 359 @media (min-width: $tablet-breakpoint) and (max-width: $desktop-breakpoint - 1px)
348 { 360 {
349 margin-left: 50%; 361 margin-left: 50%;
350 } 362 }
351 } 363 }
352 364
353 .group-5.cards > div:nth-child(5) 365 .group-5.cards > div:nth-child(5)
354 { 366 {
355 @media (min-width: 700px) and (max-width: $desktop-breakpoint) 367 @media (min-width: 700px) and (max-width: $desktop-breakpoint - 1px)
ire 2017/06/21 07:47:58 I had to use 700px here instead of a variables bec
356 { 368 {
357 margin-left: 50%; 369 margin-left: 50%;
358 } 370 }
359 } 371 }
360 372 }
361 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld