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

Add multirow section #2168

Merged
merged 7 commits into from
Jan 12, 2023
Merged

Add multirow section #2168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3579b93
Add multirow section
kmeleta Dec 12, 2022
12383eb
Border collapse logic and general cleanup
kmeleta Dec 13, 2022
db7e693
Conditionally remove content padding
kmeleta Dec 15, 2022
fd3f095
Reviewer feedback and formatting
kmeleta Dec 21, 2022
13cc4f2
Setting and info updates
kmeleta Jan 5, 2023
8470fda
Minor feedback
kmeleta Jan 10, 2023
51349f6
Update 20 translation files
translation-platform[bot] Jan 11, 2023
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
36 changes: 34 additions & 2 deletions assets/component-image-with-text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@
var(--text-boxes-shadow-vertical-offset)
var(--text-boxes-shadow-blur-radius)
rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
word-break: break-word;
}

@media screen and (min-width: 990px) {
Expand Down Expand Up @@ -319,19 +320,50 @@
}

.image-with-text__heading {
word-break: break-word;
margin-bottom: 0;
}

.image-with-text__text p {
word-break: break-word;
margin-top: 0;
margin-bottom: 1rem;
}

@media screen and (max-width: 749px) {
.collapse-padding .image-with-text__grid .image-with-text__content {
padding-left: 0;
padding-right: 0;
}
}

@media screen and (min-width: 750px) {
.collapse-padding .image-with-text__grid:not(.image-with-text__grid--reverse) .image-with-text__content:not(.image-with-text__content--desktop-center) {
padding-right: 0;
}

.collapse-padding .image-with-text__grid--reverse .image-with-text__content:not(.image-with-text__content--desktop-center) {
padding-left: 0;
}
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
.image-with-text .grid {
margin-left: 0;
}
}

Copy link
Contributor Author

@kmeleta kmeleta Dec 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

looks like Medium height doesn’t work, as I obtain a super short height.

There's a note about this in the PR description. Medium won't work until #2148 merges because it's a new addition to the image with text code.

Can we align content on the grid? If that complicated no need to do it.

If we want to introduce the additional magic for it, then technically yes. I just wasn't sure if we were aligned to do that or not. I can add it, but we should probably align as a group on that.

@YoannJailin

Copy link
Contributor Author

@kmeleta kmeleta Dec 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@YoannJailin padding magic has been added. Intended logic is as follows

Removes..

  • left padding on image-second rows
  • right padding on image-first rows
  • both left/right padding on mobile

If..

  • both color scheme settings match, and..
  • content container has no visible border, and..
  • content container has no visible shadow

I somewhat feel like we might also want to make an exception for text center alignment though. What do you think? Maybe this is ok if the visual result always better, but this is a combination of conditions no one would be able to predict.

Copy link

@YoannJailin YoannJailin Dec 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Hey, logic with the 2 colour schemes being identical makes sense to me.

I somewhat feel like we might also want to make an exception for text center alignment though. What do you think? Maybe this is ok if the visual result always better, but this is a combination of conditions no one would be able to predict.

@kmeleta just to be sure, you mean the magic would not work if text is aligned center is that right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah basically. This is what I'm seeing with the padding removed but text centered. It just looks a little odd to me

Copy link

Choose a reason for hiding this comment

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

@kmeleta I agree! Let's remove the magic on desktop when content is centered then :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@YoannJailin the center alignment magic has been added. I'll be sure to capture these decisions in the PR description as well.

/*
Multirow
note: consider removing from this stylesheet if multirow-specific styles increase signficantly
*/
.multirow__inner {
display: flex;
flex-direction: column;
row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
.multirow__inner {
row-gap: var(--grid-desktop-vertical-spacing);
}
}
155 changes: 154 additions & 1 deletion locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@
"content": "Mřížka"
},
"paragraph__grid": {
"content": "Ovlivňuje oblasti s rozvržením s více sloupci."
"content": "Ovlivňuje oblasti s více sloupci nebo řádky."
},
"spacing_grid_horizontal": {
"label": "Mezera ve vodorovném směru"
Expand Down Expand Up @@ -3041,6 +3041,159 @@
}
}
}
},
"multirow": {
"name": "Více řádků",
"settings": {
"image": {
"label": "Obrázek"
},
"image_height": {
"options__1": {
"label": "Přizpůsobení obrázku"
},
"options__2": {
"label": "Malý"
},
"options__3": {
"label": "Střední"
},
"options__4": {
"label": "Velký"
},
"label": "Výška obrázku"
},
"desktop_image_width": {
"options__1": {
"label": "Malý"
},
"options__2": {
"label": "Střední"
},
"options__3": {
"label": "Velký"
},
"label": "Šířka obrázku v počítači",
"info": "Obrázek se automaticky optimalizuje pro mobilní prostředí."
},
"heading_size": {
"options__1": {
"label": "Malý"
},
"options__2": {
"label": "Střední"
},
"options__3": {
"label": "Velký"
},
"label": "Velikost nadpisu"
},
"text_style": {
"options__1": {
"label": "Hlavní část"
},
"options__2": {
"label": "Podtitul"
},
"label": "Textový styl"
},
"button_style": {
"options__1": {
"label": "Tlačítko v jednolité barvě"
},
"options__2": {
"label": "Tlačítko s obrysem"
},
"label": "Styl tlačítka"
},
"desktop_content_alignment": {
"options__1": {
"label": "Doleva"
},
"options__2": {
"label": "Na střed"
},
"options__3": {
"label": "Doprava"
},
"label": "Zarovnání obsahu v počítači"
},
"desktop_content_position": {
"options__1": {
"label": "Nahoře"
},
"options__2": {
"label": "Uprostřed"
},
"options__3": {
"label": "Dole"
},
"label": "Pozice obsahu v počítači",
"info": "Pozice se automaticky optimalizuje pro mobilní prostředí."
},
"image_layout": {
"options__1": {
"label": "Prostřídání zleva"
},
"options__2": {
"label": "Prostřídání zprava"
},
"options__3": {
"label": "Zarovnání doleva"
},
"options__4": {
"label": "Zarovnání doprava"
},
"label": "Poloha obrázku v počítači",
"info": "Poloha se automaticky optimalizuje pro mobilní prostředí."
},
"container_color_scheme": {
"label": "Barevné schéma kontejneru"
},
"mobile_content_alignment": {
"options__1": {
"label": "Doleva"
},
"options__2": {
"label": "Na střed"
},
"options__3": {
"label": "Doprava"
},
"label": "Zarovnání obsahu v mobilním prostředí"
},
"header_mobile": {
"content": "Mobilní rozvržení"
}
},
"blocks": {
"row": {
"name": "Řádek",
"settings": {
"image": {
"label": "Obrázek"
},
"caption": {
"label": "Titulek"
},
"heading": {
"label": "Nadpis"
},
"text": {
"label": "Text"
},
"button_label": {
"label": "Text tlačítka"
},
"button_link": {
"label": "Tlačítkový odkaz"
}
}
}
},
"presets": {
"name": "Více řádků"
}
}
}
}
155 changes: 154 additions & 1 deletion locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@
"content": "Gitter"
},
"paragraph__grid": {
"content": "Påvirker områder med et layout med flere kolonner."
"content": "Påvirker områder med flere kolonner eller rækker."
},
"spacing_grid_horizontal": {
"label": "Lodret afstand"
Expand Down Expand Up @@ -3041,6 +3041,159 @@
}
}
}
},
"multirow": {
"name": "Flere rækker",
"settings": {
"image": {
"label": "Billede"
},
"image_height": {
"options__1": {
"label": "Tilpas til billede"
},
"options__2": {
"label": "Lille"
},
"options__3": {
"label": "Mellem"
},
"options__4": {
"label": "Stor"
},
"label": "Billedhøjde"
},
"desktop_image_width": {
"options__1": {
"label": "Lille"
},
"options__2": {
"label": "Mellem"
},
"options__3": {
"label": "Stor"
},
"label": "Billedbredde på computer",
"info": "Billedet er automatisk optimeret til mobiltelefoner."
},
"heading_size": {
"options__1": {
"label": "Lille"
},
"options__2": {
"label": "Mellem"
},
"options__3": {
"label": "Stor"
},
"label": "Størrelse for overskrift"
},
"text_style": {
"options__1": {
"label": "Brødtekst"
},
"options__2": {
"label": "Underoverskrift"
},
"label": "Teksttypografi"
},
"button_style": {
"options__1": {
"label": "Udfyldt knap"
},
"options__2": {
"label": "Rammeknap"
},
"label": "Knaptypografi"
},
"desktop_content_alignment": {
"options__1": {
"label": "Venstre"
},
"options__2": {
"label": "Centreret"
},
"options__3": {
"label": "Højre"
},
"label": "Justering af indhold på computer"
},
"desktop_content_position": {
"options__1": {
"label": "Top"
},
"options__2": {
"label": "I midten"
},
"options__3": {
"label": "Bund"
},
"label": "Placering af indhold på computer",
"info": "Placeringen optimeres automatisk til mobil."
},
"image_layout": {
"options__1": {
"label": "Skift fra venstre"
},
"options__2": {
"label": "Skift fra højre"
},
"options__3": {
"label": "Venstrejusteret"
},
"options__4": {
"label": "Højrejusteret"
},
"label": "Billedplacering på computer",
"info": "Placeringen er automatisk optimeret til mobiltelefoner."
},
"container_color_scheme": {
"label": "Objektbeholder til farveskema"
},
"mobile_content_alignment": {
"options__1": {
"label": "Venstre"
},
"options__2": {
"label": "Centreret"
},
"options__3": {
"label": "Højre"
},
"label": "Justering af indhold på mobil"
},
"header_mobile": {
"content": "Mobillayout"
}
},
"blocks": {
"row": {
"name": "Række",
"settings": {
"image": {
"label": "Billede"
},
"caption": {
"label": "Billedtekst"
},
"heading": {
"label": "Overskrift"
},
"text": {
"label": "Sms"
},
"button_label": {
"label": "Knaptekst"
},
"button_link": {
"label": "Knaplink"
}
}
}
},
"presets": {
"name": "Flere rækker"
}
}
}
}
Loading