Skip to content

Commit 741183d

Browse files
derekrushforthderekrushforth
authored
FEATURE: Support for five columns (#56)
* FEATURE: Initial support for five columns * UX: Settings translations * Moves settings titles below fifth column fields, instead of the fourth
1 parent 6660f81 commit 741183d

File tree

18 files changed

+57
-29
lines changed

18 files changed

+57
-29
lines changed

‎common/common.scss‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,18 @@
238238
}
239239
}
240240

241+
// Fifth column
242+
@if $fifth_column_size == "auto" {
243+
.fifth_column {
244+
flex-grow: 1;
245+
flex-basis: 0;
246+
}
247+
} @else {
248+
.fifth_column {
249+
width: $fifth_column_size;
250+
}
251+
}
252+
241253
// Full Width
242254

243255
@if $full_width_banner == "true" {
@@ -288,7 +300,8 @@
288300
.first_column,
289301
.second_column,
290302
.third_column,
291-
.fourth_column {
303+
.fourth_column,
304+
.fifth_column {
292305
width: 90%;
293306
}
294307
}

‎javascripts/discourse/components/versatile-banner.gjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@ export default class VersatileBanner extends Component {
5050
class: "fourth_column",
5151
icon: convertIconClass(settings.fourth_column_icon),
5252
},
53+
{
54+
content: settings.fifth_column_content,
55+
class: "fifth_column",
56+
icon: convertIconClass(settings.fifth_column_icon),
57+
},
5358
];
5459

5560
get cookieExpirationDate() {

‎locales/ar.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ ar:
3939
secondary_text_color_dark: "لون نص الأيقونات والعناوين النصية، ولون خلفية الزر عند اكتشاف الوضع الداكن للنظام."
4040
link_text_color: "لون نص الروابط داخل البانر."
4141
link_text_color_dark: "لون نص الروابط داخل البانر عند اكتشاف الوضع الداكن للنظام. <br><br><br><h2>تخصيص محتوى اللافتة</h2> تخصيص محتوى اللافتة باستخدام HTML. إذا كنت بحاجة إلى تصميم المحتوى المخصَّص باستخدام CSS، فأنشئ مكونًا منفصلًا للموضوع. اترك المحتوى فارغًا لاستبعاد عمود. على الرغم من توفير عمود رابع، فمن المحتمل أن يؤدي ذلك إلى زيادة المحتوى عن المساحة المتاحة. تأكَّد من أنك راضٍ عن التكوين الخاص بك عبر مختلف قياسات عرض المتصفح."
42-
fourth_column_content: '<br><br><h2>أحجام الأعمدة</h2>استخدم نسبة مئوية لجعل الأعمدة أكثر عرضًا أو ضيقًا. عند ضبطها على "تلقائي"، سيملأ العمود المساحة المتاحة بالتساوي مع الأعمدة "التلقائية" الأخرى.'
43-
fourth_column_size: '<br><br><h2>أيقونات الأعمدة</h2>استخدم fontawesome أو رابطًا للصورة للأيقونة في أعلى الأعمدة. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">انقر هنا</a> لعرض قائمة الأيقونات المتوفرة.'
42+
fifth_column_content: '<br><br><h2>أحجام الأعمدة</h2>استخدم نسبة مئوية لجعل الأعمدة أكثر عرضًا أو ضيقًا. عند ضبطها على "تلقائي"، سيملأ العمود المساحة المتاحة بالتساوي مع الأعمدة "التلقائية" الأخرى.'
43+
fifth_column_size: '<br><br><h2>أيقونات الأعمدة</h2>استخدم fontawesome أو رابطًا للصورة للأيقونة في أعلى الأعمدة. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">انقر هنا</a> لعرض قائمة الأيقونات المتوفرة.'

‎locales/de.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ de:
3939
secondary_text_color_dark: "Die Textfarbe des Symbols und der Textüberschriften sowie die Hintergrundfarbe der Schaltfläche, wenn der dunkle Modus des Systems erkannt wird."
4040
link_text_color: "Die Textfarbe von Links innerhalb des Banners."
4141
link_text_color_dark: "Die Textfarbe von Links innerhalb des Banners, wenn der dunkle Modus des Systems erkannt wird. <br><br><br><h2>Anpassung des Bannerinhalts</h2> Passe den Inhalt des Banners mit HTML an. Wenn du deinen benutzerdefinierten Inhalt mit CSS gestalten musst, erstelle eine separate Theme-Komponente. Lass das Feld leer, um eine Spalte wegzulassen. Es ist zwar eine vierte Spalte vorgesehen, aber das würde wahrscheinlich zu viel Inhalt für den verfügbaren Platz bedeuten. Vergewissere dich, dass du mit deiner Konfiguration bei verschiedenen Browserbreiten zufrieden bist."
42-
fourth_column_content: '<br><br><h2>Spaltengrößen</h2>Verwende eine Prozentangabe, um Spalten breiter oder schmaler zu machen. Bei der Einstellung „auto“ füllt die Spalte den verfügbaren Platz gleichmäßig mit anderen „auto“-Spalten aus.'
43-
fourth_column_size: '<br><br><h2>Spaltensymbole</h2>Verwende font awesome oder einen Link zu einem Bild für das Symbol oben in den Spalten. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Klicke hier</a>, um die Liste der verfügbaren Icons zu sehen.'
42+
fifth_column_content: '<br><br><h2>Spaltengrößen</h2>Verwende eine Prozentangabe, um Spalten breiter oder schmaler zu machen. Bei der Einstellung „auto“ füllt die Spalte den verfügbaren Platz gleichmäßig mit anderen „auto“-Spalten aus.'
43+
fifth_column_size: '<br><br><h2>Spaltensymbole</h2>Verwende font awesome oder einen Link zu einem Bild für das Symbol oben in den Spalten. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Klicke hier</a>, um die Liste der verfügbaren Icons zu sehen.'

‎locales/en.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,5 @@ en:
3333
secondary_text_color_dark: "The text color of the icon and text headings, and the button background color when system dark mode is detected."
3434
link_text_color: "The text color of links within the banner."
3535
link_text_color_dark: "The text color of links within the banner when system dark mode is detected. <br><br><br><h2>Banner Content Customization</h2> Customize the content of the banner with HTML. If you need to style your custom content with CSS, create a separate theme component. Leave the content blank to exclude a column. While a fourth column is provided, it will likely result in too much content for the available space. Be sure you are happy with your configuration across different brower widths."
36-
fourth_column_content: '<br><br><h2>Column Sizes</h2>Use a percentage to make columns more wide or narrow. When set to "auto", the column will fill the available space evenly with other "auto" columns.'
37-
fourth_column_size: '<br><br><h2>Column Icons</h2>Use font awesome or a link to an image for the icon at the top of the columns. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Click Here</a> to view the list of available icons.'
36+
fifth_column_content: '<br><br><h2>Column Sizes</h2>Use a percentage to make columns more wide or narrow. When set to "auto", the column will fill the available space evenly with other "auto" columns.'
37+
fifth_column_size: '<br><br><h2>Column Icons</h2>Use font awesome or a link to an image for the icon at the top of the columns. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Click Here</a> to view the list of available icons.'

‎locales/es.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ es:
3939
secondary_text_color_dark: "El color del texto del icono y de los encabezados de texto, y el color del fondo del botón cuando se detecta el modo oscuro del sistema."
4040
link_text_color: "El color del texto de los enlaces dentro del banner."
4141
link_text_color_dark: "El color del texto de los enlaces dentro del banner cuando se detecta el modo oscuro del sistema. <br><br><br><h2>Personalización del contenido del banner</h2> Personaliza el contenido del banner con HTML. Si necesitas dar estilo a tu contenido personalizado con CSS, crea un componente de tema aparte. Deja el contenido en blanco para excluir una columna. Aunque se proporciona una cuarta columna, es probable que resulte demasiado contenido para el espacio disponible. Asegúrate de que estás satisfecho con tu configuración en diferentes anchos de navegador."
42-
fourth_column_content: '<br><br><h2>Tamaños de columna</h2>Utiliza un porcentaje para hacer columnas más anchas o estrechas. Cuando se establece en «auto», la columna llenará el espacio disponible de forma uniforme con otras columnas «auto».'
43-
fourth_column_size: '<br><br><h2>Iconos de columna</h2>Utiliza Font Awesome o un enlace a una imagen para el icono de la parte superior de las columnas. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Haz clic aquí</a> para ver la lista de iconos disponibles.'
42+
fifth_column_content: '<br><br><h2>Tamaños de columna</h2>Utiliza un porcentaje para hacer columnas más anchas o estrechas. Cuando se establece en «auto», la columna llenará el espacio disponible de forma uniforme con otras columnas «auto».'
43+
fifth_column_size: '<br><br><h2>Iconos de columna</h2>Utiliza Font Awesome o un enlace a una imagen para el icono de la parte superior de las columnas. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Haz clic aquí</a> para ver la lista de iconos disponibles.'

‎locales/fi.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ fi:
3939
secondary_text_color_dark: "Kuvakkeen ja tekstiotsikoiden tekstin väri ja painikkeen taustaväri, kun järjestelmän tumma tila havaitaan."
4040
link_text_color: "Bannerin linkkien tekstin väri."
4141
link_text_color_dark: "Bannerin linkkien tekstin väri, kun järjestelmän tumma tila havaitaan. <br><br><br><h2>Bannerin sisällön mukauttaminen</h2> Mukauta bannerin sisältöä HTML:llä. Jos haluat muuttaa mukautetun sisältösi tyyliä CSS:n avulla, luo erillinen teemakomponentti. Voit jättää sarakkeen pois jättämällä sisällön tyhjäksi. Vaikka neljäs sarake tarjotaan, se johtaa todennäköisesti liialliseen määrään sisältöä käytettävissä olevaan tilaan nähden. Varmista, että olet tyytyväinen määritykseesi eri selaimen leveyksillä."
42-
fourth_column_content: '<br><br><h2>Sarakkeiden koot</h2>Käytä prosenttiosuutta leventääksesi tai kaventaaksesi sarakkeita. Kun asetus on "auto", sarake täyttää käytettävissä olevan tilan tasaisesti muiden "auto"-sarakkeiden kanssa.'
43-
fourth_column_size: '<br><br><h2>Sarakkeiden kuvakkeet</h2>Käytä Font Awesomea tai kuvan linkkiä sarakkeiden yläosassa oleville kuvakkeille. Katso luettelo käytettävisä olevista kuvakkeista <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">napsauttamalla tätä</a>.'
42+
fifth_column_content: '<br><br><h2>Sarakkeiden koot</h2>Käytä prosenttiosuutta leventääksesi tai kaventaaksesi sarakkeita. Kun asetus on "auto", sarake täyttää käytettävissä olevan tilan tasaisesti muiden "auto"-sarakkeiden kanssa.'
43+
fifth_column_size: '<br><br><h2>Sarakkeiden kuvakkeet</h2>Käytä Font Awesomea tai kuvan linkkiä sarakkeiden yläosassa oleville kuvakkeille. Katso luettelo käytettävisä olevista kuvakkeista <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">napsauttamalla tätä</a>.'

‎locales/fr.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ fr:
3939
secondary_text_color_dark: "La couleur du texte de l'icône et des en-têtes de texte, ainsi que la couleur d'arrière-plan du bouton lorsque le mode sombre du système est détecté."
4040
link_text_color: "La couleur du texte des liens dans la bannière."
4141
link_text_color_dark: "Couleur du texte des liens dans la bannière lorsque le mode sombre du système est détecté. <br><br><br><h2>Personnalisation du contenu de la bannière</h2> Personnalisez le contenu de la bannière avec du code HTML. Si vous avez besoin de styliser votre contenu personnalisé avec du CSS, créez un composant de thème distinct. Laissez le contenu vide pour exclure une colonne. Bien qu'une quatrième colonne soit fournie, elle produira probablement trop de contenu par rapport à l'espace disponible. Assurez-vous d'être satisfait(e) de votre configuration sur les différentes largeurs de navigateur."
42-
fourth_column_content: '<br><br><h2>Tailles des colonnes</h2>Utilisez un pourcentage pour élargir ou affiner les colonnes. Lorsqu''elle est réglée sur « auto », la colonne remplira l''espace disponible de la même manière que les autres colonnes « automatiques ».'
43-
fourth_column_size: '<br><br><h2>Icônes de colonnes</h2>Utilisez Font Awesome ou un lien vers une image pour l''icône en haut des colonnes. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Cliquez ici</a> pour afficher la liste des icônes disponibles.'
42+
fifth_column_content: '<br><br><h2>Tailles des colonnes</h2>Utilisez un pourcentage pour élargir ou affiner les colonnes. Lorsqu''elle est réglée sur « auto », la colonne remplira l''espace disponible de la même manière que les autres colonnes « automatiques ».'
43+
fifth_column_size: '<br><br><h2>Icônes de colonnes</h2>Utilisez Font Awesome ou un lien vers une image pour l''icône en haut des colonnes. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Cliquez ici</a> pour afficher la liste des icônes disponibles.'

‎locales/he.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,4 @@ he:
3434
secondary_text_color: "צבע טקסט הסמל וכותרות הטקסט וצבע רקע הכפתור."
3535
secondary_text_color_dark: "צבע טקסט הסמל וכותרות הטקסט וצבע רקע הכפתור כשמזוהה מצב כהה במערכת."
3636
link_text_color: "צבע טקסט קישורים בתוך הכרזה."
37-
fourth_column_size: '<br><br><h2>סמלי עמודות</h2>אפשר להשתמש ב־font awesome או בקישור לתמונה בתור סמל ראש העמודה. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">לחיצה כאן</a> תציג את רשימת הסמלים הזמינים.'
37+
fifth_column_size: '<br><br><h2>סמלי עמודות</h2>אפשר להשתמש ב־font awesome או בקישור לתמונה בתור סמל ראש העמודה. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">לחיצה כאן</a> תציג את רשימת הסמלים הזמינים.'

‎locales/it.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@ it:
3939
secondary_text_color_dark: "Colore del testo dell'icona e delle intestazioni del testo, nonché colore di sfondo del pulsante quando viene rilevata la modalità scura del sistema."
4040
link_text_color: "Colore del testo dei link all'interno del banner."
4141
link_text_color_dark: "Colore del testo dei link all'interno del banner quando viene rilevata la modalità scura del sistema. <br><br><br><h2>Personalizzazione del contenuto del banner</h2> Personalizza il contenuto del banner con HTML. Se hai bisogno di formattare il tuo contenuto personalizzato con CSS, crea un componente tema separato. Lascia il contenuto vuoto per escludere una colonna. Sebbene sia fornita una quarta colonna, probabilmente risulterà in un contenuto eccessivo per lo spazio disponibile. Assicurati che la tua configurazione appaia gradevole su diverse larghezze del browser."
42-
fourth_column_content: '<br><br><h2>Dimensioni delle colonne</h2>Usa una percentuale per rendere le colonne più larghe o più strette. Quando è impostato su "auto", la colonna riempirà lo spazio disponibile in modo uniforme con altre colonne "auto".'
43-
fourth_column_size: '<br><br><h2>Icone delle colonne</h2>Usa Font Awesome o un link a un''immagine per l''icona in cima alle colonne. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Fai clic qui</a> per visualizzare l''elenco delle icone disponibili.'
42+
fifth_column_content: '<br><br><h2>Dimensioni delle colonne</h2>Usa una percentuale per rendere le colonne più larghe o più strette. Quando è impostato su "auto", la colonna riempirà lo spazio disponibile in modo uniforme con altre colonne "auto".'
43+
fifth_column_size: '<br><br><h2>Icone delle colonne</h2>Usa Font Awesome o un link a un''immagine per l''icona in cima alle colonne. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Fai clic qui</a> per visualizzare l''elenco delle icone disponibili.'

0 commit comments

Comments
 (0)