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

Rich text improvements #1635

Merged
merged 10 commits into from
May 6, 2022
Merged

Rich text improvements #1635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
46d2d75
Rich text improvements
Apr 22, 2022
f5c0080
Add help text for desktop content position
Apr 26, 2022
9199a72
Remove extra caption block class
Apr 27, 2022
310a708
Update 15 translation files
translation-platform[bot] Apr 27, 2022
ba3f37b
Update 2 translation files
translation-platform[bot] Apr 28, 2022
49985b8
Change to inline button blocks
Apr 28, 2022
a8f0861
Update 3 translation files
translation-platform[bot] Apr 29, 2022
6ed7dd9
Update block limits and strings
Apr 29, 2022
da9c9df
Clean up CSS and add unique classes for buttons
Apr 29, 2022
95a4f28
CSS updates for multiple buttons
May 2, 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
14 changes: 14 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,16 @@ h5,
word-break: break-word;
}

.hxl {
font-size: calc(var(--font-heading-scale) * 5rem);
}

@media only screen and (min-width: 750px) {
.hxl {
font-size: calc(var(--font-heading-scale) * 6.2rem);
}
}

.h0 {
font-size: calc(var(--font-heading-scale) * 4rem);
}
Expand Down Expand Up @@ -553,6 +563,10 @@ table:not([class]) th {
}
}

.left {
text-align: left;
}

.center {
text-align: center;
}
Expand Down
72 changes: 50 additions & 22 deletions assets/section-rich-text.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
.rich-text {
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 1;
}

.rich-text.rich-text--full-width {
max-width: initial;
width: 100%;
.rich-text__wrapper {
display: flex;
justify-content: center;
width: calc(100% - 4rem / var(--font-body-scale));
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
}

.rich-text__blocks {
.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
margin: auto;
/* 2.5rem margin on left & right */
width: calc(100% - 5rem / var(--font-body-scale));
}

.rich-text__blocks * {
overflow-wrap: break-word;
width: calc(100% - 8rem / var(--font-body-scale));
}

.rich-text--full-width .rich-text__blocks {
/* 4rem (1.5rem + 2.5rem) margin on left & right */
width: calc(100% - 8rem / var(--font-body-scale));
.rich-text__blocks {
width: 100%;
}

@media screen and (min-width: 750px) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Not related to your PR but because I noticed it here, I'll leave it as a reminder for us to review this later and create an issue for this.

The setting is called Desktop content position and applies to "tablet and above" (> 750px). It looks we're consistently doing that in many other sections like Image with Text, Image Banner and others. Sounds like this is the intended behaviour.

But I just noticed that on the Product page, the Desktop layout applies to > 750px and the Desktop media size applies to > 990px. It uses the same automatically optimized for mobile description that is mentioned in the setting you just added, so I'm wondering if there are more occurrences of this inconsistency across the theme.

image

.rich-text__blocks {
max-width: 50rem;
.rich-text__wrapper {
width: 100%;
}

.rich-text__wrapper--left {
justify-content: flex-start;
}

.rich-text__wrapper--right {
justify-content: flex-end;
}

.rich-text--full-width .rich-text__blocks {
/* 7.5rem (5rem + 2.5rem) margin on left & right */
width: calc(100% - 15rem);
.rich-text__blocks {
max-width: 50rem;
}
}

Expand All @@ -42,7 +41,9 @@
}
}

/* Blocks */
.rich-text__blocks * {
overflow-wrap: break-word;
}

.rich-text__blocks > * {
margin-top: 0;
Expand All @@ -56,3 +57,30 @@
.rich-text__blocks > * + a {
margin-top: 3rem;
}

.rich-text__buttons {
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
max-width: 45rem;
andrewetchen marked this conversation as resolved.
Show resolved Hide resolved
word-break: break-word;
}

.rich-text__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}

.rich-text__buttons + .rich-text__buttons {
margin-top: 1rem;
}

.rich-text__blocks.left .rich-text__buttons {
justify-content: flex-start;
}

.rich-text__blocks.right .rich-text__buttons {
justify-content: flex-end;
}
82 changes: 75 additions & 7 deletions locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,9 @@
},
"options__3": {
"label": "Velký"
},
"options__4": {
"label": "Extra velká"
}
}
},
Expand Down Expand Up @@ -1950,6 +1953,31 @@
"settings": {
"full_width": {
"label": "Nastavit plnou šířku sekce"
},
"desktop_content_position": {
"options__1": {
"label": "Vlevo"
},
"options__2": {
"label": "Uprostřed"
},
"options__3": {
"label": "Vpravo"
},
"label": "Pozice obsahu v počítači",
"info": "Pozice se automaticky optimalizuje pro mobilní prostředí."
},
"content_alignment": {
"options__1": {
"label": "Doleva"
},
"options__2": {
"label": "Na střed"
},
"options__3": {
"label": "Doprava"
},
"label": "Zarovnání obsahu"
}
},
"blocks": {
Expand All @@ -1969,17 +1997,57 @@
}
}
},
"button": {
"name": "Tlačítko",
"buttons": {
"name": "Tlačítka",
"settings": {
"button_label": {
"label": "Text tlačítka"
"button_label_1": {
"label": "První text tlačítka",
"info": "Pokud chcete tlačítko skrýt, nezadávejte žádný text."
},
"button_link": {
"label": "Tlačítkový odkaz"
"button_link_1": {
"label": "První tlačítkový odkaz"
},
"button_style_secondary": {
"button_style_secondary_1": {
"label": "Použít styl tlačítka s obrysem"
},
"button_label_2": {
"label": "Druhý text tlačítka",
"info": "Pokud chcete tlačítko skrýt, nezadávejte žádný text."
},
"button_link_2": {
"label": "Druhý tlačítkový odkaz"
},
"button_style_secondary_2": {
"label": "Použít styl tlačítka s obrysem"
}
}
},
"caption": {
"name": "Titulek",
"settings": {
"text": {
"label": "Text"
},
"text_style": {
"label": "Textový styl",
"options__1": {
"label": "Podtitul"
},
"options__2": {
"label": "Velká písmena"
}
},
"caption_size": {
"label": "Velikost textu",
"options__1": {
"label": "Malý"
},
"options__2": {
"label": "Střední"
},
"options__3": {
"label": "Velký"
}
}
}
}
Expand Down
82 changes: 75 additions & 7 deletions locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,9 @@
},
"options__3": {
"label": "Stor"
},
"options__4": {
"label": "Ekstra stor"
}
}
},
Expand Down Expand Up @@ -1950,6 +1953,31 @@
"settings": {
"full_width": {
"label": "Gør afsnittet til fuld bredde"
},
"desktop_content_position": {
"options__1": {
"label": "Venstre"
},
"options__2": {
"label": "Centreret"
},
"options__3": {
"label": "Højre"
},
"label": "Placering af indhold på computer",
"info": "Placeringen optimeres automatisk til mobil."
},
"content_alignment": {
"options__1": {
"label": "Venstre"
},
"options__2": {
"label": "Centreret"
},
"options__3": {
"label": "Højre"
},
"label": "Indholdsjustering"
}
},
"blocks": {
Expand All @@ -1969,17 +1997,57 @@
}
}
},
"button": {
"name": "Knap",
"buttons": {
"name": "Knapper",
"settings": {
"button_label": {
"label": "Knaptekst"
"button_label_1": {
"label": "Første knaptekst",
"info": "Lad feltet være tomt for at skjule knappen."
},
"button_link": {
"label": "Knaplink"
"button_link_1": {
"label": "Første knaplink"
},
"button_style_secondary": {
"button_style_secondary_1": {
"label": "Brug rammeknaptypografi"
},
"button_label_2": {
"label": "Anden knaptekst",
"info": "Lad feltet være tomt for at skjule knappen."
},
"button_link_2": {
"label": "Andet knaplink"
},
"button_style_secondary_2": {
"label": "Brug rammeknaptypografi"
}
}
},
"caption": {
"name": "Billedtekst",
"settings": {
"text": {
"label": "Tekst"
},
"text_style": {
"label": "Teksttypografi",
"options__1": {
"label": "Underoverskrift"
},
"options__2": {
"label": "Store bogstaver"
}
},
"caption_size": {
"label": "Tekststørrelse",
"options__1": {
"label": "Lille"
},
"options__2": {
"label": "Medium"
},
"options__3": {
"label": "Stor"
}
}
}
}
Expand Down
Loading