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

Remove forced white text color in Image Banner & Slideshow #2663

Merged
merged 6 commits into from
May 26, 2023
Merged

Remove forced white text color in Image Banner & Slideshow #2663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b4fe48e
Remove forced white color.
kjellr May 19, 2023
1b7a57c
Change color scheme for Dawn's default homepage Image Banner..
kjellr May 19, 2023
c22801f
Remove warning about color scheme usage.
kjellr May 19, 2023
825096b
Fix bug with transparent buttons on mobile.
kjellr May 25, 2023
b908884
Remove unused info key from translated files.
kjellr May 25, 2023
35ddeb6
Update display of button when it's in a mobile container.
kjellr May 26, 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
10 changes: 0 additions & 10 deletions assets/section-image-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,9 +209,6 @@

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
background: transparent;
--color-foreground: 255, 255, 255;
--color-button: 255, 255, 255;
--color-button-text: 0, 0, 0;
}

.banner:not(.banner--mobile-bottom) .banner__box {
Expand All @@ -221,8 +218,6 @@
}

.banner:not(.banner--mobile-bottom) .button--secondary {
--color-button: 255, 255, 255;
kjellr marked this conversation as resolved.
Show resolved Hide resolved
--color-button-text: 255, 255, 255;
--alpha-button-background: 0;
kmeleta marked this conversation as resolved.
Show resolved Hide resolved
}

Expand Down Expand Up @@ -335,18 +330,13 @@
@media screen and (min-width: 750px) {
.banner--desktop-transparent .banner__box {
background: transparent;
--color-foreground: 255, 255, 255;
--color-button: 255, 255, 255;
--color-button-text: 0, 0, 0;
max-width: 89rem;
border: none;
border-radius: 0;
box-shadow: none;
}

.banner--desktop-transparent .button--secondary {
--color-button: 255, 255, 255;
--color-button-text: 255, 255, 255;
--alpha-button-background: 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

Although I obviously know why this is happening, this is a weird result. Or at least it's different than the desktop equivalent. I'd expect the secondary button to stay transparent unless the mobile container was enabled https://screenshot.click/19-41-z63lp-yb7ol.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I pushed 1c9af8e, which makes this work again. I think it's fine to have the background be transparent in all cases like that, but let me know if you notice anything unexpected.

Copy link
Contributor

@eugenekasimov eugenekasimov May 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

hm, it worked for me locally, but it's not working here 😅🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

I pulled your latest changes from this PR and works on my local computer. I guess some magic is happening with connection between github and our demo store. If I go to the editor and check the code there I can see that CSS file hasn't been updated
Screenshot 2023-05-25 at 11 05 03 AM

Copy link
Contributor

@eugenekasimov eugenekasimov May 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I reconnected the repo and updated the link in the description to the PR. Now it looks everything working good.

}

Expand Down
6 changes: 0 additions & 6 deletions locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Neprůhlednost překryvu obrázku"
},
"color_scheme": {
"info": "Zobrazuje se v případě, že se zobrazuje kontejner."
},
"show_text_below": {
"label": "Na mobilním zařízení zobrazovat obsah pod obrázkem",
"info": "Nejlepších výsledků dosáhnete použitím obrázku s poměrem stran 16:9. [Zjistit více](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Neprůhlednost překryvu obrázku"
},
"color_scheme": {
"info": "Zobrazuje se v případě, že se zobrazuje kontejner."
},
"text_alignment_mobile": {
"label": "Zarovnání obsahu v mobilním prostředí",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Billedoverlejringens uigennemsigtighed"
},
"color_scheme": {
"info": "Synlig, når objektbeholderen vises."
},
"show_text_below": {
"label": "Vis indhold under billede på mobiltelefon",
"info": "Brug et billede med et højde-bredde-forhold på 16:9 for at opnå det bedste resultat. [Få mere at vide](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Billedoverlejringens uigennemsigtighed"
},
"color_scheme": {
"info": "Synlig, når containeren vises."
},
"text_alignment_mobile": {
"label": "Justering af indhold på mobil",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/de.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Deckkraft der Bildüberlagerung"
},
"color_scheme": {
"info": "Sichtbar, wenn Container angezeigt wird."
},
"show_text_below": {
"label": "Auf Mobilgeräten Inhalt unterhalb der Bilder anzeigen",
"info": "Verwende Bilder mit einem Seitenverhältnis von 16:9 für optimale Ergebnisse. [Mehr Informationen](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Deckkraft der Bildüberlagerung"
},
"color_scheme": {
"info": "Sichtbar, wenn Container angezeigt wird."
},
"text_alignment_mobile": {
"label": "Mobile Inhaltsausrichtung",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1186,9 +1186,6 @@
},
"label": "Desktop content alignment"
},
"color_scheme": {
"info": "Visible when container displayed."
},
Comment on lines -1189 to -1191
Copy link
Contributor

Choose a reason for hiding this comment

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

Ideally we go thru and remove these from all the translated files, though it technically won't hurt too much.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Should be all set in 44a0c2e. 🎉

"mobile": {
"content": "Mobile Layout"
},
Expand Down Expand Up @@ -3044,9 +3041,6 @@
"image_overlay_opacity": {
"label": "Image overlay opacity"
},
"color_scheme": {
"info": "Visible when container displayed."
},
"text_alignment_mobile": {
"label": "Mobile content alignment",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/es.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Opacidad de la sobreposición de imagen"
},
"color_scheme": {
"info": "Visible cuando se muestre el contenedor."
},
"show_text_below": {
"label": "Mostrar el contenido debajo de la imagen en el móvil",
"info": "Para mejores resultados, utiliza una imagen con una relación de aspecto 16:9. [Más información](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Opacidad de la sobreposición de imagen"
},
"color_scheme": {
"info": "Visible cuando se muestre el contenedor."
},
"text_alignment_mobile": {
"label": "Alineación del contenido en dispositivos móviles",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/fi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Peittokuvan läpikuultavuus"
},
"color_scheme": {
"info": "Näkyvissä, kun säilö on esillä."
},
"show_text_below": {
"label": "Näytä kuvien alla oleva sisältö mobiililaitteessa",
"info": "Saat parhaat tulokset käyttämällä kuvaa, jonka kuvasuhde on 16:9. [Lisätietoja](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Peittokuvan läpikuultavuus"
},
"color_scheme": {
"info": "Näkyvillä, kun säilö on esillä."
},
"text_alignment_mobile": {
"label": "Mobiilisisällön tasaus",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/fr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Opacité de la superposition d'images"
},
"color_scheme": {
"info": "Visible lorsque le conteneur est affiché."
},
"show_text_below": {
"label": "Afficher le contenu sous l'image sur le mobile",
"info": "Pour optimiser vos résultats, utilisez une image ayant un rapport d'aspect de 16:9. [En savoir plus](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Opacité de la superposition d'images"
},
"color_scheme": {
"info": "Visible lorsque le conteneur est affiché."
},
"text_alignment_mobile": {
"label": "Alignement du contenu sur mobile",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/it.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Opacità della sovrapposizione immagine"
},
"color_scheme": {
"info": "Visibile quando è visualizzato il contenitore."
},
"show_text_below": {
"label": "Mostra contenuto sotto le immagini sui dispositivi mobili",
"info": "Per un risultato ottimale utilizza un'immagine con proporzioni 16:9. [Maggiori informazioni](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Opacità della sovrapposizione immagine"
},
"color_scheme": {
"info": "Visibile quando è visualizzato il contenitore."
},
"text_alignment_mobile": {
"label": "Allineamento contenuto su dispositivi mobili",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/ja.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "画像のオーバーレイ不透明率"
},
"color_scheme": {
"info": "コンテナが表示されたタイミングで表示されます。"
},
"show_text_below": {
"label": "モバイルで画像の下にコンテンツを表示",
"info": "画像のアスペクト比が16:9のものを使用すると最適です。[詳しくはこちら](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "画像のオーバーレイ不透明率"
},
"color_scheme": {
"info": "コンテナが表示された時に表示。"
},
"text_alignment_mobile": {
"label": "モバイルのコンテンツ配置",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/ko.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "이미지 오버레이 투명도"
},
"color_scheme": {
"info": "컨테이너가 표시될 때 볼 수 있습니다."
},
"show_text_below": {
"label": "모바일에서 이미지 아래에 콘텐츠 표시",
"info": "최고의 결과를 얻으려면 이미지의 가로 세로 비율을 16:9로 사용하십시오. [자세히 알아보기](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "이미지 오버레이 투명도"
},
"color_scheme": {
"info": "컨테이너가 표시될 때 볼 수 있습니다."
},
"text_alignment_mobile": {
"label": "모바일 콘텐츠 정렬",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/nb.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Gjennomsiktighet for bildeoverlegg"
},
"color_scheme": {
"info": "Synlig når beholderen vises."
},
"show_text_below": {
"label": "Vis innhold under bildet på mobil",
"info": "Bruk et bilde med størrelsesforhold 16:9 for best resultat. [Finn ut mer](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Gjennomsiktighet for bildeoverlegg"
},
"color_scheme": {
"info": "Synlig når beholderen vises."
},
"text_alignment_mobile": {
"label": "Innholdsjustering på mobiltelefon",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/nl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Dekking van afbeeldingsoverlay"
},
"color_scheme": {
"info": "Zichtbaar wanneer de container wordt weergegeven."
},
"show_text_below": {
"label": "Content op mobiel onder de afbeelding weergeven",
"info": "Gebruik voor de beste resultaten een afbeelding met een beeldverhouding van 16:9. [Meer informatie](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Dekking van afbeeldingsoverlay"
},
"color_scheme": {
"info": "Zichtbaar wanneer de container wordt weergegeven."
},
"text_alignment_mobile": {
"label": "Uitlijning van content op mobiel",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/pl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Nieprzezroczystość nakładki obrazu"
},
"color_scheme": {
"info": "Widoczne podczas wyświetlania kontenera."
},
"show_text_below": {
"label": "Pokaż treść pod obrazem na urządzeniu mobilnym",
"info": "Aby uzyskać najlepsze wyniki, użyj obrazu o współczynniku proporcji 16:9. [Dowiedz się więcej](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Nieprzezroczystość nakładki obrazu"
},
"color_scheme": {
"info": "Widoczne podczas wyświetlania kontenera."
},
"text_alignment_mobile": {
"label": "Wyrównanie treści na urządzeniu mobilnym",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/pt-BR.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Opacidade de sobreposição de imagem"
},
"color_scheme": {
"info": "Visível quando o contêiner é exibido."
},
"show_text_below": {
"label": "Exibir conteúdo abaixo da imagem em dispositivos móveis",
"info": "Use uma imagem com proporção 16:9 para ter os melhores resultados. [Saiba mais](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Opacidade de sobreposição de imagem"
},
"color_scheme": {
"info": "Visível quando o contêiner é exibido."
},
"text_alignment_mobile": {
"label": "Alinhamento de conteúdo em dispositivos móveis",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/pt-PT.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Opacidade da sobreposição da imagem"
},
"color_scheme": {
"info": "Visível quando o recetor é exibido."
},
"show_text_below": {
"label": "Mostrar conteúdo por baixo da imagem em dispositivos móveis",
"info": "Para obter os melhores resultados, utilize uma imagem com uma proporção de 16:9. [Saber mais](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Opacidade da sobreposição da imagem"
},
"color_scheme": {
"info": "Visível quando o recetor é exibido."
},
"text_alignment_mobile": {
"label": "Alinhamento do conteúdo em dispositivos móveis",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/sv.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Bildens opacitet för överlagring"
},
"color_scheme": {
"info": "Synlig när ruta visas."
},
"show_text_below": {
"label": "Visa innehåll under bild på mobil",
"info": "Använd en bild med bildformat 16:9, för bästa resultat. [Mer information](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Bildens opacitet för överlagring"
},
"color_scheme": {
"info": "Synlig när ruta visas."
},
"text_alignment_mobile": {
"label": "Linjering av innehåll på mobil",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/th.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "ความทึบของการวางซ้อนรูปภาพ"
},
"color_scheme": {
"info": "ปรากฏให้เห็นเมื่อแสดงกรอบเนื้อหา"
},
"show_text_below": {
"label": "แสดงเนื้อหาที่ด้านล่างของรูปภาพบนมือถือ",
"info": "ใช้รูปภาพที่มีอัตราส่วนภาพ 16:9 เพื่อผลลัพธ์ที่ดีที่สุด [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "ความทึบของการวางซ้อนรูปภาพ"
},
"color_scheme": {
"info": "ปรากฏให้เห็นเมื่อแสดงกรอบเนื้อหา"
},
"text_alignment_mobile": {
"label": "การจัดวางเนื้อหาบนมือถือ",
"options__1": {
Expand Down
6 changes: 0 additions & 6 deletions locales/tr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2572,9 +2572,6 @@
"image_overlay_opacity": {
"label": "Görsel yer paylaşımı opaklığı"
},
"color_scheme": {
"info": "Kapsayıcı gösterildiğinde görünür."
},
"show_text_below": {
"label": "Mobil cihaz üzerinde görselin altındaki içeriği göster",
"info": "En iyi sonuçlar için 16:9 en-boy oranına sahip bir görsel kullanın. [Daha fazla bilgi edinin](https://help.shopify.com/manual/shopify-admin/productivity-tools/image-editor#understanding-image-aspect-ratio)"
Expand Down Expand Up @@ -2816,9 +2813,6 @@
"image_overlay_opacity": {
"label": "Görsel yer paylaşımı opaklığı"
},
"color_scheme": {
"info": "Kapsayıcı gösterildiğinde görünür."
},
"text_alignment_mobile": {
"label": "Mobil içerik hizalaması",
"options__1": {
Expand Down
Loading