Commit 9607936d6f451ae8a6974684d379538a6d65bbc6
Exists in
master
and in
4 other branches
Merge branch 'fix-sub-section'
Showing
2 changed files
with
34 additions
and
23 deletions
Show diff stats
src/app/pages/programas/programa.html
@@ -230,7 +230,7 @@ | @@ -230,7 +230,7 @@ | ||
230 | </div> | 230 | </div> |
231 | <div ng-if="pagePrograma.proposalsTopRated"> | 231 | <div ng-if="pagePrograma.proposalsTopRated"> |
232 | <div ng-repeat="proposal in pagePrograma.proposalsTopRated"> | 232 | <div ng-repeat="proposal in pagePrograma.proposalsTopRated"> |
233 | - <div class="sub-section sub-section-{{::proposal.id}}"> | 233 | + <div class="sub-section sub-section-{{::proposal.id}}" ng-class="{'sub-section-even': ( ($index+1) % 2 === 0), 'sub-section-odd': ( ($index+1) % 2 === 1)}"> |
234 | <div class="container"> | 234 | <div class="container"> |
235 | <div class="row"> | 235 | <div class="row"> |
236 | <div class="col-sm-4 col-md-3"> | 236 | <div class="col-sm-4 col-md-3"> |
src/app/pages/programas/programas.scss
@@ -11,12 +11,34 @@ | @@ -11,12 +11,34 @@ | ||
11 | 11 | ||
12 | .program-preview { | 12 | .program-preview { |
13 | 13 | ||
14 | - .program-preview--box { | 14 | + &--box { |
15 | position: relative; | 15 | position: relative; |
16 | background-color: #f1f1f1; | 16 | background-color: #f1f1f1; |
17 | } | 17 | } |
18 | 18 | ||
19 | - .program-preview--banner { | 19 | + &--box--content-wrapper { |
20 | + padding: 48px; | ||
21 | + position: relative; | ||
22 | + | ||
23 | + } | ||
24 | + &--archived { | ||
25 | + .program-preview--box--content-wrapper { | ||
26 | + text-align: right; | ||
27 | + padding: 10px; | ||
28 | + | ||
29 | + @media screen and (max-width: $screen-xs) { | ||
30 | + text-align: center; | ||
31 | + padding-top: 50px; | ||
32 | + } | ||
33 | + } | ||
34 | + | ||
35 | + .program-preview--share { | ||
36 | + margin-bottom: 0; | ||
37 | + } | ||
38 | + } | ||
39 | + | ||
40 | + | ||
41 | + &--banner { | ||
20 | width: 100%; | 42 | width: 100%; |
21 | height: 400px; | 43 | height: 400px; |
22 | 44 | ||
@@ -35,7 +57,7 @@ | @@ -35,7 +57,7 @@ | ||
35 | } | 57 | } |
36 | } | 58 | } |
37 | 59 | ||
38 | - .program-preview--icon { | 60 | + &--icon { |
39 | $icon-size: 80px; | 61 | $icon-size: 80px; |
40 | $icon-scale: 0.7; | 62 | $icon-scale: 0.7; |
41 | position: absolute; | 63 | position: absolute; |
@@ -57,19 +79,14 @@ | @@ -57,19 +79,14 @@ | ||
57 | } | 79 | } |
58 | } | 80 | } |
59 | 81 | ||
60 | - .program-preview--box--content-wrapper { | ||
61 | - padding: 48px; | ||
62 | - position: relative; | ||
63 | - } | ||
64 | - | ||
65 | - .program-preview--abstract { | 82 | + &--abstract { |
66 | h2 { | 83 | h2 { |
67 | margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px; | 84 | margin-top: 22px; // parent.margin + this.margin = 48 + 22 = 72px; |
68 | margin-bottom: 32px; | 85 | margin-bottom: 32px; |
69 | } | 86 | } |
70 | } | 87 | } |
71 | 88 | ||
72 | - .program-preview--abstract-details { | 89 | + &--abstract-details { |
73 | p { | 90 | p { |
74 | color: #484848; | 91 | color: #484848; |
75 | font-size: 14px; | 92 | font-size: 14px; |
@@ -78,7 +95,7 @@ | @@ -78,7 +95,7 @@ | ||
78 | } | 95 | } |
79 | } | 96 | } |
80 | 97 | ||
81 | - .program-preview--share { | 98 | + &--share { |
82 | margin-bottom: 20px; | 99 | margin-bottom: 20px; |
83 | position: relative; | 100 | position: relative; |
84 | 101 | ||
@@ -110,8 +127,8 @@ | @@ -110,8 +127,8 @@ | ||
110 | } | 127 | } |
111 | } | 128 | } |
112 | 129 | ||
113 | - .program-preview--share-label, | ||
114 | - .program-preview--share-directive { | 130 | + &--share-label, |
131 | + &--share-directive { | ||
115 | display: inline-block; | 132 | display: inline-block; |
116 | vertical-align: middle; | 133 | vertical-align: middle; |
117 | } | 134 | } |
@@ -262,15 +279,9 @@ | @@ -262,15 +279,9 @@ | ||
262 | h3 { | 279 | h3 { |
263 | font-weight: bold; | 280 | font-weight: bold; |
264 | } | 281 | } |
265 | - .sub-section{ | ||
266 | - &:nth-child(odd) { | ||
267 | - background-color: #f1f1f1; | ||
268 | - } | ||
269 | - | ||
270 | - &:nth-child(even) { | ||
271 | - background-color: #ffffff; | ||
272 | - } | ||
273 | - } | 282 | + |
283 | + .sub-section-odd {background-color: #f1f1f1; } | ||
284 | + .sub-section-even {background-color: #ffffff; } | ||
274 | 285 | ||
275 | .gov-response { | 286 | .gov-response { |
276 | background-color: #e1e1e1; | 287 | background-color: #e1e1e1; |