Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Footer #158

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Footer #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
25e1411
[REMOVE] Squashed commit of the following:
misscs Jun 13, 2016
91c845d
Use flex shorthand for min-width
misscs Jun 13, 2016
4a796ed
Use data values in email_signup macro
misscs Jun 13, 2016
e6ff784
Improve footer macro html
misscs Jun 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/accordion/accordion.macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
*
#}

{% from 'icons/icons.macros.html' import icon %}
{% from 'links/links.macros.html' import link %}
{% from '../icons/icons.macros.html' import icon %}
{% from '../links/links.macros.html' import link %}

{#
* Renders a special list for content within accordions
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
display: flex;
flex-direction: column;
align-items: center;
min-width: 25%;
flex: 1 0 25%;

.block-group--stacked &:not(:last-child) {

Expand Down
177 changes: 14 additions & 163 deletions src/footer/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
color: color(background);
background-color: color(primary);
overflow: hidden; // Remove space below footer in IE 10/11

a {
color: color(background);
}
}

.footer-top {
Expand All @@ -34,182 +38,29 @@

.footer-bottom {
background-color: color(dark-blue);
padding: 0 ms(5) ms(-2);
padding: ms(1) ms(5) ms(-2);
fill: color(#6576a0); // @todo: Replace with value from map

@include respond-at-and-above($break-medium) {
padding-bottom: ms(5);
}
}

.footer-nav {
position: relative;
width: 100%;
.footer-bottom-inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.footer-nav-left {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
padding-bottom: ms(4);
.footer-bottom-item:not(:first-child) {
margin-left: ms(-2);
}

.footer-nav-group {
padding-right: ms(5);
display: inline-block;
vertical-align: top;
// @todo: Find a new home? Or rename this module?

&.footer-nav-group--bottom {
padding-right: 0;
}
.site-address {
display: flex;
flex: 1;
}

.footer-nav-group--right {
padding-right: 0;
.site-address-meta {
margin-left: auto;
}

.footer-nav-group--links {
padding-right: ms(5);
padding-bottom: ms(2);
min-width: 145px;

@include respond-at-and-above(650px) {
min-width: 0;
}
}

.footer-nav-group-title {
text-transform: uppercase;
margin: 0 0 ms(0) 0;
}

.footer-nav-group-link {
transition: opacity 0.2s ease;
display: block;
color: color(background);
margin: 0 0 ms(-9);
letter-spacing: size(smaller-tracking);

&:hover {
opacity: 0.7;
}

.touch .footer-top & {
padding: ms(-9) 0;
}
}

.footer-nav-group-link--contact {
display: inline-block;
margin: ms(-4) 0 0 0;

&:last-child {
margin-left: ms(-4);

@include respond-between(500px, 1080px) {
margin-left: ms(0);
}

@include respond-at-and-above(1080px) {
margin-left: ms(6);
}
}

[data-icon] {
fill: mix(color(primary), color(background), 62);
}

[data-icon="envelope"] {
@include square(20px);
}

@include respond-at-and-above($break-medium) {
margin-top: 0;
}
}

.footer-nav-group-link--country {
display: inline-block;
margin: 8px ms(-4) 0 0;

[data-icon] {
@include square(20px);
fill: color(background);
}

@include respond-at-and-above($break-mobile) {
margin-right: ms(-2);
}

@include respond-at-and-above($break-medium) {
margin-top: 0;

[data-icon] {
@include square(24px);
}
}
}

.footer-nav-group-text--bottom {
display: inline-block;
vertical-align: middle;
margin: 0.8rem ms(-4);
text-transform: uppercase;
font-size: ms(-2);
letter-spacing: size(medium-tracking);

@include respond-at-and-above($break-medium) {
font-size: ms(-1);
}
}

.footer-nav-group-text--contact {
@extend %calibre-medium;
padding-right: 0;
margin-right: 0;
display: none;

@include respond-at-and-above($break-medium) {
display: inline-block;
}
}

.footer-nav-group-text--address {
display: none;

@include respond-at-and-above(1080px) {
display: inline-block;
}
}

.footer-nav-group-text--mobile {
position: absolute;
top: 0;
left: 50%;
width: 190px;
margin-left: -95px;
text-align: center;

@include respond-at-and-above($break-medium) {
position: relative;
width: auto;
margin-left: 0;
top: 1px;
left: 0;
display: inline;
text-align: left;
}
}

.footer-address {
display: none;

@include respond-at-and-above(1080px) {
display: inline-block;
}
}
36 changes: 4 additions & 32 deletions src/footer/_simple_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@
*/

.footer--simple {

.footer-top {
padding: ms(6) 0;
}

.footer-nav {
flex-direction: column;
align-items: center;
}
.footer-bottom-inner {
flex-direction: column;
align-items: center;
}

.footer-bottom {
Expand All @@ -21,32 +20,5 @@
@include respond-at-and-above($break-medium) {
padding-bottom: ms(5);
}

.footer-nav-group {
margin-left: auto;
margin-right: auto;
white-space: nowrap;
}
}

.footer-nav-country-icons {
position: relative;
display: inline-block;
}

.footer-help {
margin-top: ms(2);
}

.footer-nav-group {
padding-right: 0;
}

.footer-nav-group-text--mobile {
position: relative;
display: inline-block;
margin-left: 0;
left: auto;
width: auto;
}
}
67 changes: 28 additions & 39 deletions src/footer/footer.macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,53 +7,42 @@
{#
* Renders a standard or simplified footer
#}
{% macro footer(simple=false, class=null, id=null, phone_number='888–498–0003') %}
{% macro footer(data, simple=false, class=null, id=null) %}
<footer class="footer{% if simple %} footer--simple{% endif %}{% if class %} {{ class }}{% endif %}"{% if id %} id="{{ id }}"{% endif %}>
<div class="footer-top r-inner">
{{ caller() }}
</div>
<div class="footer-bottom">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

What's a better class to replace footer-bottom? I like the feel of the the site- classes to describe the content, but it now feels disconnected from its parent class.

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not a huge fan of class names that describe position, since the positions could theoretically be made incorrect in certain media queries via CSS. footer-bottom seems like navigation - could this be footer-nav?

<nav class="footer-nav r-inner">
<div class="footer-nav-group footer-nav-group--bottom">
<span class="footer-nav-country-icons">
<a class="footer-nav-group-link footer-nav-group-link--country" href="?country_id=49">
{{ icon('usa', size='small') }}
<div class="footer-bottom-inner r-inner">

<span class="footer-bottom-item site-copyright">
&copy;
<script>document.write(new Date().getFullYear());</script>
</span>

<span class="site-legal-links footer-bottom-item">
<a class="" href="https://casper.com/privacy">{{ data.privacy }}</a>
<a class="" href="https://casper.com/terms">{{ data.terms }}</a>
</span>

<span class="site-address h-card footer-bottom-item">
<span class="p-street-address">{{ data.address }}</span>

{% if not simple %}
<span class="site-address-meta">
<a class="footer-bottom-item" href="tel:{{ data.phone_number|replace('-', '') }}">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not so hot on footer-bottom-item either, but I need a class to target each item for spacing. This may change once design looks at this...less urgent now.

Copy link
Contributor

Choose a reason for hiding this comment

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

If we change footer-bottom to footer-nav, then footer-nav-item would actually work pretty well.

Copy link
Contributor

Choose a reason for hiding this comment

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

Agree, no positional names in classes please.

Copy link
Contributor

Choose a reason for hiding this comment

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

Footer bottom seems a little redundant as well :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Agreed re positional names. I'd like to find a name that reflects the
content. footer-nav feels like a better class to replace footer-top.
What is now the bottom is not really a nav. It is site/company
details—copyright, address, contact, and links to terms and privacy.
Looking for a name to encompass the area that hold site/company
information.

On Mon, Jun 13, 2016 at 11:29 AM, Rob Wierzbowski [email protected]
wrote:

In src/footer/footer.macros.html
#158 (comment)
:

  •  <span class="footer-bottom-item site-copyright">

  •    &copy;

  •    <script>document.write(new Date().getFullYear());</script>

  •  </span>

  •  <span class="site-legal-links footer-bottom-item">

  •    <a class="" href="https://casper.com/privacy">{{ data.privacy }}</a>

  •    <a class="" href="https://casper.com/terms">{{ data.terms }}</a>

  •  </span>

  •  <span class="site-address h-card footer-bottom-item">

  •    <span class="p-street-address">{{ data.address }}</span>

  •    {% if not simple %}

  •    <span class="site-address-meta">

  •      <a class="footer-bottom-item" href="tel:{{ data.phone_number|replace('-', '') }}">

Agree, no positional names in classes please.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/CasperSleep/nightshade-core/pull/158/files/4a796ed164ca13b031a7ea3e0482ff3aaf03f0f9..e6ff78407f282366c5f519a0cac32d22b4fe8974#r66812988,
or mute the thread
https://github.com/notifications/unsubscribe/AADKZMa0C5o0sBcFFLU6hz0v2PAKst7aks5qLXdVgaJpZM4I0Pqz
.

{{ icon('phone', size='x-small') }}
<span class="p-tel">{{ data.phone_number }}</span>
</a>
<a class="footer-nav-group-link footer-nav-group-link--country" href="?country_id=204">
{{ icon('canada', size='small') }}

<a class="footer-bottom-item" target="_blank" href="/help">
{{ icon('envelope', size='x-small') }}
<span class="u-url">{{ data.contact }}</span>
</a>
</span>
<div class="footer-nav-group-text--mobile">
<span class="footer-nav-group-text--bottom">
&copy;
<script>
document.write(new Date().getFullYear());
</script>
</span>
<span class="footer-nav-group-text--bottom footer-nav-group-text--address">
45 Bond St. New York, NY 10012
</span>
<span>
<a class="footer-nav-group-link footer-nav-group-text--bottom" href="https://casper.com/privacy">Privacy</a>
<a class="footer-nav-group-link footer-nav-group-text--bottom" href="https://casper.com/terms">Terms</a>
</span>
</div>
</div>

{% if not simple %}
<div class="footer-nav-group footer-nav-group--right">
<a class="footer-nav-group-link footer-nav-group-link--contact footer-nav-group-link--contact-phone" href="tel:1{{ phone_number|replace('-', '') }}">
{{ icon('phone', size='x-small') }}
<span class="footer-nav-group-text--bottom footer-nav-group-text--contact">{{ phone_number }}</span>
</a>
<a target="_blank" class="footer-nav-group-link footer-nav-group-link--contact" href="/help">
{{ icon('envelope') }}
<span class="footer-nav-group-text--bottom footer-nav-group-text--contact">CONTACT US</span>
</a>
</div>
{% endif %}

</nav>
{% endif %}
</span>
</div>
</div>
</footer>
{% endmacro %}
7 changes: 3 additions & 4 deletions src/forms/forms.macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,11 @@
* that extends the input group and applies the necessary IDs, classes, and
* styles to render email_signup.
#}
{% macro email_signup() %}
{% macro email_signup(data) %}
<form action="#" class="email-signup-form js-email-signup-form" method="get" target="_blank">
<div class="form-input-group">
<input class="form-input email-signup-input js-email-signup-input" inputmode="email" name="EMAIL" placeholder="Enter your email" required="true" type="email" value="" x-inputmode="email">

{{ button('SUBMIT', 'secondary', type="submit", class="email-signup-submit") }}
<input class="form-input email-signup-input js-email-signup-input" inputmode="email" name="EMAIL" placeholder="{{ data.placeholder }}" required="true" type="email" value="" x-inputmode="email">
{{ button(data.input_text, 'secondary', type="submit", class="email-signup-submit") }}
</div>
</form>
<div class="email-signup-response-text js-email-signup-response-text"></div>
Expand Down
16 changes: 16 additions & 0 deletions src/icons/icons.macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
{#
* @overview Macros for SVG icons.
* @module Icons
* @todo: Add examples of icon_class and icon sizes
#}

{#
* Renders an icon with use method. Used for uniquely sized icons.
* @param {string} name - Name of the icon (nightshade.rocks/icons)
* @param {string} [icon_class=true] - Class name for style or JS targeting
#}
{% macro svg(name, icon_class=true) %}
<svg class="icon{% if icon_class %} icon-{{ name }}{% endif %}" aria-labelledby="title" role="img">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#{{ name }}"></use>
</svg>
{% endmacro %}

{#
* Renders an icon using set sizes
* @param {string} name - Name of the icon (nightshade.rocks/icons)
* @param {string} [size=default] - Size of the icon from preset values
#}
{% macro icon(name, size="default") %}
<span data-icon="{{ name }}" data-size="{{ size }}">
{{ svg(name, false) }}
Expand Down
Loading