Issue 4961 - Fix card group field alignment on acceptableads.com

static/scss/components/_cards.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016 Eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
 
 // Cards
 
+// Variables

[juliandoucette, 2017/06/09 14:51:12]

Why did you put these variables here and not in _variables.scss?

[ire, 2017/06/12 14:28:53]

This was actually an error. I put it here while I was working and didn't
relocate it :/

On another note, I sometimes put variables in the file where they will be used
when they are components like this as it helps with their ability to be
encapsulated. If you're sharing between projects it's easier to share one file.
But that's just a side note, I will move these to _variables.scss.

+$card--max-width: 350px;

[juliandoucette, 2017/06/09 14:51:12]

NIT: Please stay consistent with the variable naming format of existing
variables (one dash). If you think that two dashes is more meaningful then
please make a case for that separately (like you did for media query format).

[ire, 2017/06/12 14:28:54]

Acknowledged.

+$card--header-height: 100px;
+$card--content-height: 180px;
+
 .card
 {
   padding: $md;
   color: $primary-fg;
   border: 1px solid $primary-fg;
   background-color: $primary-bg;
 }
 
 .card %headings
 {
   @extend h3;
   height: $md + $sm;
   margin: $sm 0 $sm 0;
 }
 
+.card article h3 

[juliandoucette, 2017/06/09 14:51:12]

Why only h3?

[ire, 2017/06/12 14:28:53]

I was targeting a specific case, the committee page. I will change this to use a
class instead. 

+{
+  height: auto;
+
+  @media (min-width: 700px)

[juliandoucette, 2017/06/09 14:51:12]

It seems like you are doing this to align the button on the committee page. And
perhaps you are planning to position that button (card-footer) absolutely to the
bottom of card later?

[ire, 2017/06/12 14:28:53]

Yes.
Because there is only the heading and button, I don't think I need to absolutely
position the footer in this case. 

+  {
+    height: 120px;
+  }
+}
+
 .card-icon
 {
   margin: $sm 0;
 }
 
 .center .card-icon
 {
   margin: $lg - $sm 0 $md 0;
 }
 
@@ skipping 85 matching lines @@
 .card.list a
 {
   text-decoration: none;
   color: $primary-fg;
 }
 
 .card.list a%active
 {
   color: $accent;
 }
+
+@supports (display: grid) 
+{
+
+  .card 

[juliandoucette, 2017/06/09 14:51:12]

When does this apply? It seems to be overpowered by `.group .card, .group
.item`.

[ire, 2017/06/12 14:28:53]

You're right, my error again, sorry. This should be moved to the `_groups.scss`
so I can target the `.group .card` selector. 

+  {
+    display: inline-grid;
+  }
+
+}