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

Additional padding and margin settings #1110

Merged
merged 15 commits into from
Jan 12, 2022
Merged

Additional padding and margin settings #1110

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3884d11
Additional padding and margin settings
tyleralsbury Jan 6, 2022
162dd27
Fixed vertical spacing for collapisble and slideshow
tyleralsbury Jan 7, 2022
0e33490
Adjustments
tyleralsbury Jan 7, 2022
0dc2b82
Removed bottom margin on grid when it is the last element
tyleralsbury Jan 7, 2022
bffe563
Adjusted class for collapsible content
tyleralsbury Jan 7, 2022
40d7ddd
Update 15 translation files
translation-platform[bot] Jan 10, 2022
fb95aa0
Refactor padding calc
tyleralsbury Jan 10, 2022
59d64c9
Merge branch 'padding-follow-up' of https://github.com/Shopify/dawn i…
tyleralsbury Jan 10, 2022
3789d7e
Fixed up a few paddings
tyleralsbury Jan 10, 2022
dcbab5b
CSS class naming
tyleralsbury Jan 10, 2022
21ce860
Update 5 translation files
translation-platform[bot] Jan 11, 2022
6ee4afa
Removed unneeded styles
tyleralsbury Jan 11, 2022
59ed2cb
Collapsible content colour order
tyleralsbury Jan 11, 2022
960d11f
Fixed margins on headings
tyleralsbury Jan 11, 2022
d33b7a3
Nitpicks
tyleralsbury Jan 12, 2022
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: 4 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,6 +982,10 @@ summary::-webkit-details-marker {
}
}

.grid:last-child {
margin-bottom: 0;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Curious to know which ones we had as an offender here ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This accounts for any case where .grid is the last element - looking through the code it seems like this is often the case. The only thing that it does cause, which might be an issue, is that if it's the last child of some parent element that has something else after it it might not be great.

I'm going to go through and see if that's the case anywhere. I notice that it does squish the margin between the cards in Featured Collection and the View all button.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Turns out there's a lot of inconsistencies with those types of buttons...

I've added some spacing for the one for Featured Collection cause it was wonky looking, but just looking at the remaining ones:

// Blog view all button

.blog__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .blog__button {
    margin-top: 5rem;
  }
}

// Multicolumn

.multicolumn .button {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .multicolumn .button {
    margin-top: 4rem;
  }
}

And both collection list and featured collection had just 2rem. I think changing them all to 2rem all the time would be good for consistency, and would potentially reduce CSS if we considered them to be a "button at the bottom of a section" component (naming is hard) and just used a class for all of them.

Copy link
Contributor

Choose a reason for hiding this comment

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

We could look into why the grid component (which is used in a variety of scenarios) imposes a 2rem bottom margin in the first place. I'd be in favour of setting .grid to a default zero top and bottom margin and only add margin in cases where it's really needed. That would require testing each scenario, so probably out of scope for this PR.


.grid__item {
padding-left: var(--grid-mobile-horizontal-spacing);
padding-bottom: var(--grid-mobile-vertical-spacing);
Expand Down
11 changes: 1 addition & 10 deletions assets/collapsible-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,10 @@
}
}

.collapsible-content__wrapper {
padding-top: 5rem;
padding-bottom: 3rem;
}

@media screen and (min-width: 750px) {
.collapsible-content__grid--reverse {
flex-direction: row-reverse;
}

.collapsible-content__wrapper {
padding-top: 7rem;
padding-bottom: 4rem;
}
}

.collapsible-content-wrapper-narrow {
Expand All @@ -57,6 +47,7 @@

.collapsible-content__heading {
margin-bottom: 2rem;
margin-top: 0;
}

@media screen and (min-width: 750px) {
Expand Down
18 changes: 0 additions & 18 deletions assets/component-slideshow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,6 @@ slideshow-component {
display: block;
}

.spaced-section--full-width:first-child slideshow-component.page-width {
margin-top: 5rem;
}

.spaced-section--full-width:last-child slideshow-component.page-width {
margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
.spaced-section--full-width:first-child slideshow-component.page-width {
margin-top: calc(5rem + var(--page-width-margin));
}

.spaced-section--full-width:last-child slideshow-component.page-width {
margin-bottom: calc(5rem + var(--page-width-margin));
}
}

@media screen and (max-width: 989px) {
.no-js slideshow-component .slider {
padding-bottom: 3rem;
Expand Down
12 changes: 0 additions & 12 deletions assets/newsletter-section.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
.newsletter:not(.newsletter--narrow) .newsletter__wrapper.color-background-1 {
margin-top: 5rem;
margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
.newsletter:not(.newsletter--narrow) .newsletter__wrapper.color-background-1 {
margin-top: calc(5rem + var(--page-width-margin));
margin-bottom: calc(5rem + var(--page-width-margin));
}
}

.newsletter__wrapper {
padding-right: calc(4rem / var(--font-body-scale));
padding-left: calc(4rem / var(--font-body-scale));
Expand Down
2 changes: 2 additions & 0 deletions assets/section-blog-post.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,13 @@

.article-template__comment-wrapper {
margin-top: 5rem;
padding: 2.7rem 0;
}

@media screen and (min-width: 750px) {
.article-template__comment-wrapper {
margin-top: 6rem;
padding: 3.6rem 0;
}
}

Expand Down
4 changes: 4 additions & 0 deletions assets/section-collection-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,3 +76,7 @@
max-width: 100%;
}
}

.collection-list-view-all {
margin-top: 2rem;
}
2 changes: 0 additions & 2 deletions assets/section-footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

.footer__content-top {
padding-bottom: 5rem;
padding-top: 5rem;
display: block;
}

Expand Down Expand Up @@ -50,7 +49,6 @@
.footer__content-bottom {
border-top: solid 0.1rem rgba(var(--color-foreground), 0.08);
padding-top: 3rem;
padding-bottom: 3rem;
}

.footer__content-bottom:only-child {
Expand Down
4 changes: 4 additions & 0 deletions assets/template-collection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,7 @@
margin-top: 10rem;
margin-bottom: 15rem;
}

.collection__view-all {
margin-top: 2rem;
}
9 changes: 8 additions & 1 deletion locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@
"section_padding_heading": "Vnitřní okraj sekce",
"padding_top": "Horní vnitřní okraj",
"padding_bottom": "Dolní vnitřní okraj"
}
},
"spacing": "Rozestupy"
},
"announcement-bar": {
"name": "Panel oznámení",
Expand Down Expand Up @@ -704,6 +705,9 @@
},
"payment_enable": {
"label": "Zobrazit ikony plateb"
},
"margin_top": {
"label": "Horní okraj"
}
}
},
Expand Down Expand Up @@ -757,6 +761,9 @@
"label": "Inverze"
},
"label": "Barevné schéma"
},
"margin_bottom": {
"label": "Dolní okraj"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@
"section_padding_heading": "Indre margen, afsnit",
"padding_top": "Indre margen, top",
"padding_bottom": "Indre margen, bund"
}
},
"spacing": "Mellemrum"
},
"announcement-bar": {
"name": "Meddelelseslinje",
Expand Down Expand Up @@ -704,6 +705,9 @@
},
"payment_enable": {
"label": "Vis betalingsikoner"
},
"margin_top": {
"label": "Øverste margen"
}
}
},
Expand Down Expand Up @@ -757,6 +761,9 @@
"label": "Omvendt"
},
"label": "Farveskema"
},
"margin_bottom": {
"label": "Nederste margen"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/de.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@
"section_padding_heading": "Abschnitts-Padding",
"padding_top": "Oberes Padding",
"padding_bottom": "Unteres Padding"
}
},
"spacing": "Abstand"
},
"announcement-bar": {
"name": "Ankündigungsleiste",
Expand Down Expand Up @@ -704,6 +705,9 @@
},
"payment_enable": {
"label": "Zahlungssymbole anzeigen"
},
"margin_top": {
"label": "Oberer Rand"
}
}
},
Expand Down Expand Up @@ -757,6 +761,9 @@
"label": "Invertiert"
},
"label": "Farbschema"
},
"margin_bottom": {
"label": "Unterer Rand"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@
"section_padding_heading": "Section padding",
"padding_top": "Top padding",
"padding_bottom": "Bottom padding"
}
},
"spacing": "Spacing"
},
"announcement-bar": {
"name": "Announcement bar",
Expand Down Expand Up @@ -826,6 +827,9 @@
},
"payment_enable": {
"label": "Show payment icons"
},
"margin_top": {
"label": "Top margin"
}
}
},
Expand Down Expand Up @@ -879,6 +883,9 @@
"enable_sticky_header": {
"label": "Enable sticky header",
"info": "Header shows on the screen as customers scroll up."
},
"margin_bottom": {
"label": "Bottom margin"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/es.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,8 @@
"section_padding_heading": "Relleno de sección",
"padding_top": "Relleno superior",
"padding_bottom": "Relleno inferior"
}
},
"spacing": "Espaciado"
},
"announcement-bar": {
"name": "Barra de anuncios",
Expand Down Expand Up @@ -643,6 +644,9 @@
},
"payment_enable": {
"label": "Mostrar íconos de pago"
},
"margin_top": {
"label": "Margen superior"
}
}
},
Expand Down Expand Up @@ -696,6 +700,9 @@
"label": "Invertir"
},
"label": "Esquema de colores"
},
"margin_bottom": {
"label": "Margen inferior"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/fi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,8 @@
"section_padding_heading": "Osion täyttö",
"padding_top": "Yläosan täyttö",
"padding_bottom": "Alaosan täyttö"
}
},
"spacing": "Väli"
},
"announcement-bar": {
"name": "Ilmoituspalkki",
Expand Down Expand Up @@ -643,6 +644,9 @@
},
"payment_enable": {
"label": "Näytä maksukuvakkeet"
},
"margin_top": {
"label": "Yläreunus"
}
}
},
Expand Down Expand Up @@ -696,6 +700,9 @@
"label": "Käänteinen"
},
"label": "Värimalli"
},
"margin_bottom": {
"label": "Alareunus"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/fr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@
"section_padding_heading": "Marge de la section",
"padding_top": "Marge supérieure",
"padding_bottom": "Marge inférieure"
}
},
"spacing": "Espacement"
},
"announcement-bar": {
"name": "Barre d'annonces",
Expand Down Expand Up @@ -704,6 +705,9 @@
},
"payment_enable": {
"label": "Afficher les icônes de paiement"
},
"margin_top": {
"label": "Marge supérieure"
}
}
},
Expand Down Expand Up @@ -757,6 +761,9 @@
"label": "Inverser"
},
"label": "Combinaison de couleurs"
},
"margin_bottom": {
"label": "Marge inférieure"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/it.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,8 @@
"section_padding_heading": "Spaziatura sezione",
"padding_top": "Spaziatura superiore",
"padding_bottom": "Spaziatura inferiore"
}
},
"spacing": "Spaziatura"
},
"announcement-bar": {
"name": "Barra degli annunci",
Expand Down Expand Up @@ -643,6 +644,9 @@
},
"payment_enable": {
"label": "Mostra le icone di pagamento"
},
"margin_top": {
"label": "Margine superiore"
}
}
},
Expand Down Expand Up @@ -696,6 +700,9 @@
"label": "Inverso"
},
"label": "Schema di colori"
},
"margin_bottom": {
"label": "Margine inferiore"
}
}
},
Expand Down
9 changes: 8 additions & 1 deletion locales/ja.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,8 @@
"section_padding_heading": "セクションの余白",
"padding_top": "上部の余白",
"padding_bottom": "下部の余白"
}
},
"spacing": "間隔"
},
"announcement-bar": {
"name": "告知バー",
Expand Down Expand Up @@ -704,6 +705,9 @@
},
"payment_enable": {
"label": "決済アイコンを表示する"
},
"margin_top": {
"label": "上マージン"
}
}
},
Expand Down Expand Up @@ -757,6 +761,9 @@
"label": "反転"
},
"label": "配色"
},
"margin_bottom": {
"label": "下マージン"
}
}
},
Expand Down
Loading