Skip to content
This repository has been archived by the owner on Nov 18, 2021. It is now read-only.

Replace mega hack with mini hack. #66

Merged
merged 6 commits into from
Feb 1, 2019
Merged

Replace mega hack with mini hack. #66

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79ce442
Replace mega hack with mini hack.
notlee Jan 25, 2019
d7de66e
Make query aside sidebar optional
notlee Jan 25, 2019
76a44f2
Tidy up
notlee Jan 28, 2019
0ab9d43
Missing comment
notlee Jan 28, 2019
9931400
Update README.md
gvonkoss Feb 1, 2019
3ecdca8
Update README.md
notlee Feb 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 7 additions & 1 deletion MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
### Header And Footer Changes

- `o-layout` no longer includes CSS and JS for `o-header-services` and `o-footer-services` by default. You'll need to include CSS and JS for `o-header-services` and `o-footer-services` separately if they are used within your project.
- Previously `o-header-services` markup was modified by adding a `o-layout__header` class. This markup has been changed, and `o-header-services` markup should now be placed _inside_ a `div` with the `o-layout__header` class.
- Previously `o-header-services` markup was modified by adding a `o-layout__header` class. This markup has been changed, and `o-header-services` markup should now be placed _inside_ a `div` with the `o-layout__header` class. The same is true for `o-footer-services` markup, which is now placed _inside_ a div with the `o-layout__footer` class.

```diff
<div class="o-layout" data-o-component="o-layout" data-o-layout-construct-nav="false">
Expand All @@ -39,6 +39,12 @@

<!-- ... -->

+ <div class="o-layout__footer">
<footer class="o-footer-services">
<!-- more o-footer-services markup -->
</footer>
+ </div>

</div>
```

Expand Down
18 changes: 17 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ Actions overview with 4 items with footer:

## Query Layout

The query layout is intended for search, filter, and result pages.The query layout provides four areas (in addition to a header and a footer):
The query layout is intended for search, filter, and result pages. The query layout provides four areas (in addition to a header and a footer):
notlee marked this conversation as resolved.
Show resolved Hide resolved

- Heading
- Query Sidebar
Expand Down Expand Up @@ -341,6 +341,22 @@ The query layout is intended for search, filter, and result pages.The query layo
└————————————————————————————┘
```

To make the main content and heading area larger on desktop, delete the aside sidebar element `o-layout__aside-sidebar`.
notlee marked this conversation as resolved.
Show resolved Hide resolved
```
┌————————————————————————————┐
| HEADER |
├————————————————————————————┤
| | HEADING |
| ├————————————————————|
| QUERY | MAIN |
| SIDE | CONTENT |
| BAR | |
| | |
├————————————————————————————┤
| FOOTER |
└————————————————————————————┘
```

### Medium Viewports
```
┌————————————————————————┐
Expand Down
36 changes: 19 additions & 17 deletions demos/src/shared/footer.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<footer class="o-layout__footer o-footer-services">
<div class="o-layout__footer">
<!-- start o-footer-services markup: included as a seperate dependancy, see https://registry.origami.ft.com/components/o-footer-services -->
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="http://github.com/financial-times/o-footer-services">View project on GitHub</a>
<a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="https://slack.com/messages/[id]/">#slack-channel</a>
<p class="o-footer-services__content">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a class="o-footer-services__content--external" href='/somewhere'>like this one</a>.</p>
<footer class=" o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="http://github.com/financial-times/o-footer-services">View project on GitHub</a>
<a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="https://slack.com/messages/[id]/">#slack-channel</a>
<p class="o-footer-services__content">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a class="o-footer-services__content--external" href='/somewhere'>like this one</a>.</p>
</div>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>&copy; THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
<p><span>&copy; THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</footer>
<!-- end o-footer-services markup -->
</footer>
</div>
16 changes: 0 additions & 16 deletions src/scss/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +0,0 @@
/// So o-layout matches the container width of o-grid,
/// and thus aligns with our header components, we set
/// the max width of the main content area to the
/// grid container minus the width of other columns (such as the sidebar).
/// @param {String} $other-column-widths - Widths of other columns in the layout.
/// @example Here we get the max width of the main content area where there are two sidebars, one to the right and one to the left.
/// _getMainMaxWidth($_o-layout-sidebar-max-width, $_o-layout-sidebar-max-width);
/// @access private
@function _getMainMaxWidth($other-column-widths...) {
$taken-width: length($other-column-widths) * $_o-layout-gutter;
@each $width in $other-column-widths {
$taken-width: $taken-width #{' - '} $width;
}

@return calc(#{$_o-layout-container-max-width} - #{$taken-width});
}
5 changes: 0 additions & 5 deletions src/scss/_grid-areas.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
.o-layout__sidebar {
@include _oLayoutNavigation();
@include oGridRespondTo($until: M) {
padding: 0 $_o-layout-gutter;
margin-top: $_o-layout-gutter;
}

Expand Down Expand Up @@ -121,10 +120,6 @@
.o-layout__main {
grid-area: main;
margin-top: $_o-layout-gutter;
padding: 0 $_o-layout-gutter;
@include oGridRespondTo($from: M) {
padding: 0;
}

> table {
box-sizing: border-box;
Expand Down
64 changes: 29 additions & 35 deletions src/scss/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,26 @@
display: grid;
box-sizing: border-box;
min-height: 100vh;
min-width: 100%;
max-width: $_o-layout-container-max-width;
margin: auto;
grid-template-columns: 100%;
grid-template-rows: auto 1fr auto;
grid-column-gap: $_o-layout-gutter;
padding: 0 (oGridGutter() * 2); // To align with o-header-services.
grid-template-areas:
"header"
"main"
"footer";
}

.o-layout__footer,
.o-layout__header {
// Position to the left of the viewport.
// Relative to the center aligned grid.
position: relative;
width: 100vw;
left: #{calc((100vw - 100%) * -0.5)};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is happening because the grid doesn't span the whole page, right? Why did we remove the five columns again?

Copy link
Contributor Author

@notlee notlee Feb 1, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it's to remove the mega hack which calculated in SCSS a px value for the main content area. We either need a wrapper around the main content and sidebar, or we set the whole of .o-layout to the max width of the container and then make the header and footer "break out" of the container (which is what this is).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, and the mega hack is bad because if the main content area is set in px it can't expand when the sidebar is deleted.

}
}


Expand All @@ -34,14 +45,6 @@
"main"
"footer";
grid-template-rows: auto auto 1fr auto;
@include oGridRespondTo($from: M) {
grid-template-areas:
"header header header"
". hero ."
". main ."
"footer footer footer";
grid-template-columns: 1fr minmax(auto, $_o-layout-container-max-width) 1fr;
};
}
}

Expand All @@ -58,10 +61,10 @@

@include oGridRespondTo($from: M) {
grid-template-areas:
"header header header header"
". sidebar main ."
"footer footer footer footer";
grid-template-columns: 1fr minmax(auto, $_o-layout-sidebar-max-width) minmax(31rem, _getMainMaxWidth($_o-layout-sidebar-max-width)) 1fr;
"header header"
"sidebar main"
"footer footer";
grid-template-columns: $_o-layout-sidebar minmax($_o-layout-main-min-width + $_o-layout-sidebar-max-width + $_o-layout-gutter, 1fr);
grid-template-rows: auto 1fr auto;
};
}
Expand Down Expand Up @@ -122,23 +125,23 @@

@include oGridRespondTo($from: M) {
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 1fr minmax(auto, $_o-layout-sidebar-max-width) minmax(15rem, _getMainMaxWidth($_o-layout-sidebar-max-width)) 1fr;
grid-template-columns: $_o-layout-sidebar $_o-layout-main;
grid-template-areas:
"header header header header"
". query-sidebar heading ."
". query-sidebar main ."
". query-sidebar aside-sidebar ."
"footer footer footer footer";
"header header"
"query-sidebar heading"
"query-sidebar main"
"query-sidebar aside-sidebar"
"footer footer";
};

@include oGridRespondTo($from: L) {
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 1fr minmax(auto, $_o-layout-sidebar-max-width) minmax(15rem, _getMainMaxWidth($_o-layout-sidebar-max-width, $_o-layout-sidebar-max-width)) minmax(auto, $_o-layout-sidebar-max-width) 1fr;
grid-template-columns: $_o-layout-sidebar $_o-layout-main fit-content($_o-layout-sidebar-max-width); // fit-content makes the aside collapse with no content (optional)
notlee marked this conversation as resolved.
Show resolved Hide resolved
grid-template-areas:
"header header header header header"
". query-sidebar heading aside-sidebar ."
". query-sidebar main aside-sidebar ."
"footer footer footer footer footer";
"header header header"
"query-sidebar heading aside-sidebar"
"query-sidebar main aside-sidebar"
"footer footer footer";
};

.o-layout__main {
Expand All @@ -147,30 +150,21 @@

.o-layout__heading {
margin-top: $_o-layout-gutter;
padding: 0 $_o-layout-gutter;
@include oGridRespondTo($from: M) {
padding: 0;
}
}

.o-layout__query-sidebar {
border-right: 1px solid oColorsGetPaletteColor('slate-white-15');
padding: 0 $_o-layout-gutter;
margin: 0;
@include oGridRespondTo($from: M) {
padding: 0 $_o-layout-gutter 0 0;
padding-right: $_o-layout-gutter;
margin: $_o-layout-gutter 0 oTypographySpacingSize(5);
}
}

.o-layout__aside-sidebar {
padding: 0 $_o-layout-gutter;
@include oGridRespondTo($from: M) {
padding: 0;
}
@include oGridRespondTo($from: L) {
margin: $_o-layout-gutter 0;
padding: 0 0 0 $_o-layout-gutter;
padding-left: $_o-layout-gutter;
border-left: 1px solid oColorsGetPaletteColor('slate-white-15');
}
}
Expand Down
5 changes: 4 additions & 1 deletion src/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,8 @@ $o-layout-is-silent: true !default;

/// Base layout measurements
$_o-layout-gutter: 1rem;
$_o-layout-container-max-width: oGridGetMaxWidthForLayout($o-grid-fixed-layout) - (oGridGutter() * 4); // To align with o-header-services.
$_o-layout-container-max-width: oGridGetMaxWidthForLayout($o-grid-fixed-layout); // To align with o-header-services.
$_o-layout-sidebar-max-width: 16.5rem;
$_o-layout-sidebar: minmax(auto, $_o-layout-sidebar-max-width);
$_o-layout-main-min-width: 15rem;
$_o-layout-main: minmax($_o-layout-main-min-width, 1fr);