Skip to content

Commit a2867f3

Browse files
castastrophecastastrophe
authored
Merge pull request #336 from patternfly/issue-310/band-layout
Fixes issue #310: pfe-band - resolve layout issues
2 parents 6b6685f + 73d8649 commit a2867f3

File tree

2 files changed

+110
-28
lines changed

2 files changed

+110
-28
lines changed

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
<body unresolved>
8282
<pfe-band pfe-size="small"><h1>&lt;pfe-band&gt;</h1></pfe-band>
8383

84+
<div style="width: 1000px;margin:auto;"> <!-- arbitrary restricting container -->
8485
<pfe-band pfe-color="lightest">
8586
<header slot="pfe-band--header">
8687
<h1>Lightest band, header region</h1>
@@ -101,7 +102,7 @@ <h3 slot="header">Aside: right body bottom</h3>
101102
</pfe-cta>
102103
</pfe-card>
103104
</pfe-band>
104-
105+
</div>
105106
<pfe-band pfe-color="lighter" pfe-aside-desktop="left">
106107
<header slot="pfe-band--header">
107108
<h2>Lighter band; no footer</h2>
@@ -191,7 +192,7 @@ <h2>Accent band</h2>
191192
<pfe-cta priority="primary">
192193
<a href="#">Learn more</a>
193194
</pfe-cta>
194-
<pfe-card color="lightest" slot="pfe-band--aside" style="height: -webkit-fill-available;">
195+
<pfe-card color="lightest" slot="pfe-band--aside">
195196
<h3 slot="header">Aside: left body top</h3>
196197
<p>Ut wisi enim ad minim veniam.</p>
197198
<pfe-cta slot="footer" priority="tertiary">
@@ -206,6 +207,29 @@ <h3 slot="header">Aside: left body top</h3>
206207
</footer>
207208
</pfe-band>
208209

210+
<pfe-band pfe-aside-desktop="left" pfe-aside-mobile="top">
211+
<header slot="pfe-band--header">
212+
<h2>Short content band</h2>
213+
<p class="custom-band-summary">Header region, consetetur sadluptua.</p>
214+
</header>
215+
<p>Short content sadipscing elitra.</p>
216+
<pfe-cta priority="primary">
217+
<a href="#">Learn more</a>
218+
</pfe-cta>
219+
<pfe-card color="lightest" slot="pfe-band--aside">
220+
<h3 slot="header">Aside: left body top</h3>
221+
<p>Ut wisi enim ad minim veniam.</p>
222+
<pfe-cta slot="footer" priority="tertiary">
223+
<a href="#">Learn more</a>
224+
</pfe-cta>
225+
</pfe-card>
226+
<footer slot="pfe-band--footer" class="custom-footnote">
227+
<ol>
228+
<li>Footnote ipsum accusam et justo duo dolores et ea rebum.</li>
229+
</ol>
230+
</footer>
231+
</pfe-band>
232+
209233
<pfe-band pfe-color="complement" pfe-aside-desktop="left" pfe-aside-mobile="top" pfe-aside-height="body">
210234
<header slot="pfe-band--header">
211235
<h2>Complement band, layout classes</h2>

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

Lines changed: 84 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -118,19 +118,23 @@ $LOCAL: band;
118118
--pfe-band--gridTemplateArea_mobile: "body";
119119
// Styles for the different combination of regions
120120
&[pfe-has-aside] {
121-
--pfe-band--gridTemplateArea_mobile: "body" "aside";
122-
--pfe-band--gridTemplateArea_desktop: "body aside";
121+
--pfe-band--gridTemplateArea_mobile:
122+
"body" "aside";
123+
--pfe-band--gridTemplateArea_desktop:
124+
"body aside";
123125
@media (min-width: #{pfe-breakpoint(md)}) {
124126
--pfe-band--layout: 1fr #{pfe-local(Width__aside--sm)};
125127
}
126128
@media (min-width: #{pfe-breakpoint(lg)}) {
127129
--pfe-band--layout: 1fr #{pfe-local(Width__aside--lg)};
128130
}
129131
&[pfe-aside-mobile="top"] {
130-
--pfe-band--gridTemplateArea_mobile: "aside" "body";
132+
--pfe-band--gridTemplateArea_mobile:
133+
"aside" "body";
131134
}
132135
&[pfe-aside-desktop="left"] {
133-
--pfe-band--gridTemplateArea_desktop: "aside body";
136+
--pfe-band--gridTemplateArea_desktop:
137+
"aside body";
134138
@media (min-width: #{pfe-breakpoint(md)}) {
135139
--pfe-band--layout: #{pfe-local(Width__aside--sm)} 1fr;
136140
}
@@ -140,66 +144,120 @@ $LOCAL: band;
140144
}
141145
}
142146
&[pfe-has-header] {
143-
--pfe-band--gridTemplateArea_mobile: "header" "body";
147+
--pfe-band--gridTemplateArea_mobile:
148+
"header" "body";
144149
&[pfe-has-aside] {
145-
--pfe-band--gridTemplateArea_mobile: "header" "body" "aside";
146-
--pfe-band--gridTemplateArea_desktop: "header header" "body aside";
150+
--pfe-band--gridTemplateArea_mobile:
151+
"header"
152+
"body" "aside";
153+
--pfe-band--gridTemplateArea_desktop:
154+
"header header"
155+
"body aside";
147156
}
148157
&[pfe-aside-mobile="top"] {
149-
--pfe-band--gridTemplateArea_mobile: "aside" "header" "body";
158+
--pfe-band--gridTemplateArea_mobile:
159+
"aside"
160+
"header"
161+
"body";
150162
}
151163
&[pfe-aside-height="full"] {
152-
--pfe-band--gridTemplateArea_desktop: "header aside" "body aside";
164+
--pfe-band--gridTemplateArea_desktop:
165+
"header aside"
166+
"body aside";
153167
}
154168
&[pfe-aside-desktop="left"] {
155-
--pfe-band--gridTemplateArea_desktop: "header header" "aside body";
169+
--pfe-band--gridTemplateArea_desktop:
170+
"header header"
171+
"aside body";
156172
&[pfe-aside-height="full"] {
157-
--pfe-band--gridTemplateArea_desktop: "aside header" "aside body";
173+
--pfe-band--gridTemplateArea_desktop:
174+
"aside header"
175+
"aside body";
158176
}
159177
}
160178
}
161179
&[pfe-has-footer] {
162-
--pfe-band--gridTemplateArea_mobile: "body" "footer";
180+
--pfe-band--gridTemplateArea_mobile:
181+
"body"
182+
"footer";
163183
&[pfe-has-aside] {
164-
--pfe-band--gridTemplateArea_mobile: "body" "aside" "footer";
165-
--pfe-band--gridTemplateArea_desktop: "body aside" "footer footer";
184+
--pfe-band--gridTemplateArea_mobile:
185+
"body"
186+
"aside"
187+
"footer";
188+
--pfe-band--gridTemplateArea_desktop:
189+
"body aside"
190+
"footer footer";
166191
}
167192
&[pfe-aside-mobile="top"] {
168-
--pfe-band--gridTemplateArea_mobile: "aside" "body" "footer";
193+
--pfe-band--gridTemplateArea_mobile:
194+
"aside"
195+
"body"
196+
"footer";
169197
}
170198
&[pfe-aside-height="full"] {
171-
--pfe-band--gridTemplateArea_desktop: "body aside" "footer aside" ;
199+
--pfe-band--gridTemplateArea_desktop:
200+
"body aside"
201+
"footer aside" ;
172202
}
173203
&[pfe-aside-desktop="left"] {
174-
--pfe-band--gridTemplateArea_desktop: "aside body" "footer footer";
204+
--pfe-band--gridTemplateArea_desktop:
205+
"aside body"
206+
"footer footer";
175207
&[pfe-aside-height="full"] {
176-
--pfe-band--gridTemplateArea_desktop: "aside body" "aside footer";
208+
--pfe-band--gridTemplateArea_desktop:
209+
"aside body"
210+
"aside footer";
177211
}
178212
}
179213
}
180214
&[pfe-has-header][pfe-has-footer] {
181-
--pfe-band--gridTemplateArea_mobile: "header" "body" "footer";
215+
--pfe-band--gridTemplateArea_mobile:
216+
"header"
217+
"body"
218+
"footer";
182219
&[pfe-has-aside] {
183-
--pfe-band--gridTemplateArea_mobile: "header" "body" "footer" "aside";
184-
--pfe-band--gridTemplateArea_desktop: "header header" "body aside" "footer footer";
220+
--pfe-band--gridTemplateArea_mobile:
221+
"header"
222+
"body"
223+
"footer"
224+
"aside";
225+
--pfe-band--gridTemplateArea_desktop:
226+
"header header"
227+
"body aside"
228+
"footer footer";
185229
}
186230
&[pfe-aside-mobile="top"] {
187-
--pfe-band--gridTemplateArea_mobile: "aside" "header" "body" "footer";
231+
--pfe-band--gridTemplateArea_mobile:
232+
"aside"
233+
"header"
234+
"body"
235+
"footer";
188236
}
189237
&[pfe-aside-height="full"] {
190-
--pfe-band--gridTemplateArea_desktop: "header aside" "body aside" "footer aside" ;
238+
--pfe-band--gridTemplateArea_desktop:
239+
"header aside"
240+
"body aside"
241+
"footer aside" ;
191242
}
192243
&[pfe-aside-desktop="left"] {
193-
--pfe-band--gridTemplateArea_desktop: "header header" "aside body" "footer footer";
244+
--pfe-band--gridTemplateArea_desktop:
245+
"header header"
246+
"aside body"
247+
"footer footer";
194248
&[pfe-aside-height="full"] {
195-
--pfe-band--gridTemplateArea_desktop: "aside header" "aside body" "aside footer";
249+
--pfe-band--gridTemplateArea_desktop:
250+
"aside header"
251+
"aside body"
252+
"aside footer";
196253
}
197254
}
198255
}
199256

200257
position: relative;
201258
margin: 0 auto;
202-
width: #{pfe-local(Width)};
259+
width: 100%;
260+
max-width: #{pfe-local(Width)};
203261
@extend %flex-fallback;
204262

205263
// Grid support styles

0 commit comments

Comments
 (0)