Skip to content

Commit 132e733

Browse files
starryeyez024starryeyez024
committed
issue-310/band-layout - remove flex alignment prop that prevents cards from stretching; change width to max-width, adjust formatting of grid props, remove errant style from demo file
1 parent cd9bc72 commit 132e733

File tree

2 files changed

+89
-31
lines changed

2 files changed

+89
-31
lines changed

‎elements/pfe-band/demo/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<!-- uncomment the es5-adapter if you're using the umd version -->
1717
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/custom-elements-es5-adapter.js"></script>
18-
18+
1919
<!-- Use webcomponents-loader when you are adding support for more modern browsers -->
2020
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/webcomponents-loader.js"></script> -->
2121

@@ -25,7 +25,7 @@
2525

2626
<!-- Tests require pulling in the UMD version of the files -->
2727
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
28-
28+
2929
<script>
3030
require([
3131
'../../pfe-card/pfe-card.umd.js',
@@ -93,6 +93,7 @@
9393
<body unresolved>
9494
<pfe-band pfe-size="small"><h1>&lt;pfe-band&gt;</h1></pfe-band>
9595

96+
<div style="width: 1000px;margin:auto;"> <!-- arbitrary restricting container -->
9697
<pfe-band pfe-color="lightest">
9798
<header slot="pfe-band--header">
9899
<h1>Lightest band, header region</h1>
@@ -113,7 +114,7 @@ <h3 slot="header">Aside: right body bottom</h3>
113114
</pfe-cta>
114115
</pfe-card>
115116
</pfe-band>
116-
117+
</div>
117118
<pfe-band pfe-color="lighter" pfe-aside-desktop="left">
118119
<header slot="pfe-band--header">
119120
<h2>Lighter band; no footer</h2>
@@ -201,7 +202,7 @@ <h2>Accent band</h2>
201202
<pfe-cta priority="primary">
202203
<a href="#">Learn more</a>
203204
</pfe-cta>
204-
<pfe-card color="lightest" slot="pfe-band--aside" style="height: -webkit-fill-available;">
205+
<pfe-card color="lightest" slot="pfe-band--aside">
205206
<h3 slot="header">Aside: left body top</h3>
206207
<p>Ut wisi enim ad minim veniam.</p>
207208
<pfe-cta slot="footer" priority="tertiary">

‎elements/pfe-band/src/pfe-band.scss‎

Lines changed: 84 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ $LOCAL: band;
110110
// Set up the flex styles for each region
111111
display: flex;
112112
flex-flow: column nowrap;
113-
align-items: flex-start;
113+
//align-items: flex-start;
114114
// Grid support styles
115115
@supports (display: grid) {
116116
grid-area: #{$grid-area};
@@ -148,19 +148,23 @@ $LOCAL: band;
148148
--pfe-band--gridTemplateArea_mobile: "body";
149149
// Styles for the different combination of regions
150150
&[pfe-has-aside] {
151-
--pfe-band--gridTemplateArea_mobile: "body" "aside";
152-
--pfe-band--gridTemplateArea_desktop: "body aside";
151+
--pfe-band--gridTemplateArea_mobile:
152+
"body" "aside";
153+
--pfe-band--gridTemplateArea_desktop:
154+
"body aside";
153155
@media (min-width: #{pfe-breakpoint(md)}) {
154156
--pfe-band--layout: 1fr #{pfe-local(Width__aside--sm)};
155157
}
156158
@media (min-width: #{pfe-breakpoint(lg)}) {
157159
--pfe-band--layout: 1fr #{pfe-local(Width__aside--lg)};
158160
}
159161
&[pfe-aside-mobile="top"] {
160-
--pfe-band--gridTemplateArea_mobile: "aside" "body";
162+
--pfe-band--gridTemplateArea_mobile:
163+
"aside" "body";
161164
}
162165
&[pfe-aside-desktop="left"] {
163-
--pfe-band--gridTemplateArea_desktop: "aside body";
166+
--pfe-band--gridTemplateArea_desktop:
167+
"aside body";
164168
@media (min-width: #{pfe-breakpoint(md)}) {
165169
--pfe-band--layout: #{pfe-local(Width__aside--sm)} 1fr;
166170
}
@@ -170,66 +174,119 @@ $LOCAL: band;
170174
}
171175
}
172176
&[pfe-has-header] {
173-
--pfe-band--gridTemplateArea_mobile: "header" "body";
177+
--pfe-band--gridTemplateArea_mobile:
178+
"header" "body";
174179
&[pfe-has-aside] {
175-
--pfe-band--gridTemplateArea_mobile: "header" "body" "aside";
176-
--pfe-band--gridTemplateArea_desktop: "header header" "body aside";
180+
--pfe-band--gridTemplateArea_mobile:
181+
"header"
182+
"body" "aside";
183+
--pfe-band--gridTemplateArea_desktop:
184+
"header header"
185+
"body aside";
177186
}
178187
&[pfe-aside-mobile="top"] {
179-
--pfe-band--gridTemplateArea_mobile: "aside" "header" "body";
188+
--pfe-band--gridTemplateArea_mobile:
189+
"aside"
190+
"header"
191+
"body";
180192
}
181193
&[pfe-aside-height="full"] {
182-
--pfe-band--gridTemplateArea_desktop: "header aside" "body aside";
194+
--pfe-band--gridTemplateArea_desktop:
195+
"header aside"
196+
"body aside";
183197
}
184198
&[pfe-aside-desktop="left"] {
185-
--pfe-band--gridTemplateArea_desktop: "header header" "aside body";
199+
--pfe-band--gridTemplateArea_desktop:
200+
"header header"
201+
"aside body";
186202
&[pfe-aside-height="full"] {
187-
--pfe-band--gridTemplateArea_desktop: "aside header" "aside body";
203+
--pfe-band--gridTemplateArea_desktop:
204+
"aside header"
205+
"aside body";
188206
}
189207
}
190208
}
191209
&[pfe-has-footer] {
192-
--pfe-band--gridTemplateArea_mobile: "body" "footer";
210+
--pfe-band--gridTemplateArea_mobile:
211+
"body"
212+
"footer";
193213
&[pfe-has-aside] {
194-
--pfe-band--gridTemplateArea_mobile: "body" "aside" "footer";
195-
--pfe-band--gridTemplateArea_desktop: "body aside" "footer footer";
214+
--pfe-band--gridTemplateArea_mobile:
215+
"body"
216+
"aside"
217+
"footer";
218+
--pfe-band--gridTemplateArea_desktop:
219+
"body aside"
220+
"footer footer";
196221
}
197222
&[pfe-aside-mobile="top"] {
198-
--pfe-band--gridTemplateArea_mobile: "aside" "body" "footer";
223+
--pfe-band--gridTemplateArea_mobile:
224+
"aside"
225+
"body"
226+
"footer";
199227
}
200228
&[pfe-aside-height="full"] {
201-
--pfe-band--gridTemplateArea_desktop: "body aside" "footer aside" ;
229+
--pfe-band--gridTemplateArea_desktop:
230+
"body aside"
231+
"footer aside" ;
202232
}
203233
&[pfe-aside-desktop="left"] {
204-
--pfe-band--gridTemplateArea_desktop: "aside body" "footer footer";
234+
--pfe-band--gridTemplateArea_desktop:
235+
"aside body"
236+
"footer footer";
205237
&[pfe-aside-height="full"] {
206-
--pfe-band--gridTemplateArea_desktop: "aside body" "aside footer";
238+
--pfe-band--gridTemplateArea_desktop:
239+
"aside body"
240+
"aside footer";
207241
}
208242
}
209243
}
210244
&[pfe-has-header][pfe-has-footer] {
211-
--pfe-band--gridTemplateArea_mobile: "header" "body" "footer";
245+
--pfe-band--gridTemplateArea_mobile:
246+
"header"
247+
"body"
248+
"footer";
212249
&[pfe-has-aside] {
213-
--pfe-band--gridTemplateArea_mobile: "header" "body" "footer" "aside";
214-
--pfe-band--gridTemplateArea_desktop: "header header" "body aside" "footer footer";
250+
--pfe-band--gridTemplateArea_mobile:
251+
"header"
252+
"body"
253+
"footer"
254+
"aside";
255+
--pfe-band--gridTemplateArea_desktop:
256+
"header header"
257+
"body aside"
258+
"footer footer";
215259
}
216260
&[pfe-aside-mobile="top"] {
217-
--pfe-band--gridTemplateArea_mobile: "aside" "header" "body" "footer";
261+
--pfe-band--gridTemplateArea_mobile:
262+
"aside"
263+
"header"
264+
"body"
265+
"footer";
218266
}
219267
&[pfe-aside-height="full"] {
220-
--pfe-band--gridTemplateArea_desktop: "header aside" "body aside" "footer aside" ;
268+
--pfe-band--gridTemplateArea_desktop:
269+
"header aside"
270+
"body aside"
271+
"footer aside" ;
221272
}
222273
&[pfe-aside-desktop="left"] {
223-
--pfe-band--gridTemplateArea_desktop: "header header" "aside body" "footer footer";
274+
--pfe-band--gridTemplateArea_desktop:
275+
"header header"
276+
"aside body"
277+
"footer footer";
224278
&[pfe-aside-height="full"] {
225-
--pfe-band--gridTemplateArea_desktop: "aside header" "aside body" "aside footer";
279+
--pfe-band--gridTemplateArea_desktop:
280+
"aside header"
281+
"aside body"
282+
"aside footer";
226283
}
227284
}
228285
}
229286

230287
position: relative;
231288
margin: 0 auto;
232-
width: #{pfe-local(Width)};
289+
max-width: #{pfe-local(Width)};
233290

234291
// Grid support styles
235292
@supports (display: grid) {

0 commit comments

Comments
 (0)