FEATURE: Support for five columns

common/common.scss

@@ -238,6 +238,18 @@
   }
 }
 
+// Fifth column
+@if $fifth_column_size == "auto" {
+  .fifth_column {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+} @else {
+  .fifth_column {
+    width: $fifth_column_size;
+  }
+}
+
 // Full Width
 
 @if $full_width_banner == "true" {
@@ -288,7 +300,8 @@
   .first_column,
   .second_column,
   .third_column,
-  .fourth_column {
+  .fourth_column,
+  .fifth_column {
     width: 90%;
   }
 }

javascripts/discourse/components/versatile-banner.gjs

@@ -50,6 +50,11 @@ export default class VersatileBanner extends Component {
       class: "fourth_column",
       icon: convertIconClass(settings.fourth_column_icon),
     },
+    {
+      content: settings.fifth_column_content,
+      class: "fifth_column",
+      icon: convertIconClass(settings.fifth_column_icon),
+    },
   ];
 
   get cookieExpirationDate() {

locales/ar.yml

@@ -39,5 +39,5 @@ ar:
       secondary_text_color_dark: "لون نص الأيقونات والعناوين النصية، ولون خلفية الزر عند اكتشاف الوضع الداكن للنظام."
       link_text_color: "لون نص الروابط داخل البانر."
       link_text_color_dark: "لون نص الروابط داخل البانر عند اكتشاف الوضع الداكن للنظام. <br><br><br><h2>تخصيص محتوى اللافتة</h2> تخصيص محتوى اللافتة باستخدام HTML. إذا كنت بحاجة إلى تصميم المحتوى المخصَّص باستخدام CSS، فأنشئ مكونًا منفصلًا للموضوع. اترك المحتوى فارغًا لاستبعاد عمود. على الرغم من توفير عمود رابع، فمن المحتمل أن يؤدي ذلك إلى زيادة المحتوى عن المساحة المتاحة. تأكَّد من أنك راضٍ عن التكوين الخاص بك عبر مختلف قياسات عرض المتصفح."
-      fourth_column_content: '<br><br><h2>أحجام الأعمدة</h2>استخدم نسبة مئوية لجعل الأعمدة أكثر عرضًا أو ضيقًا. عند ضبطها على "تلقائي"، سيملأ العمود المساحة المتاحة بالتساوي مع الأعمدة "التلقائية" الأخرى.'
-      fourth_column_size: '<br><br><h2>أيقونات الأعمدة</h2>استخدم fontawesome أو رابطًا للصورة للأيقونة في أعلى الأعمدة. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">انقر هنا</a> لعرض قائمة الأيقونات المتوفرة.'
+      fifth_column_content: '<br><br><h2>أحجام الأعمدة</h2>استخدم نسبة مئوية لجعل الأعمدة أكثر عرضًا أو ضيقًا. عند ضبطها على "تلقائي"، سيملأ العمود المساحة المتاحة بالتساوي مع الأعمدة "التلقائية" الأخرى.'
+      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

@@ -39,5 +39,5 @@ de:
       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."
       link_text_color: "Die Textfarbe von Links innerhalb des Banners."
       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."
-      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.'
-      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.'
+      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.'
+      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

@@ -33,5 +33,5 @@ en:
       secondary_text_color_dark: "The text color of the icon and text headings, and the button background color when system dark mode is detected."
       link_text_color: "The text color of links within the banner."
       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."
-      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.'
-      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.'
+      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.'
+      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

@@ -39,5 +39,5 @@ es:
       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."
       link_text_color: "El color del texto de los enlaces dentro del banner."
       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."
-      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».'
-      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.'
+      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».'
+      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

@@ -39,5 +39,5 @@ fi:
       secondary_text_color_dark: "Kuvakkeen ja tekstiotsikoiden tekstin väri ja painikkeen taustaväri, kun järjestelmän tumma tila havaitaan."
       link_text_color: "Bannerin linkkien tekstin väri."
       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ä."
-      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.'
-      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>.'
+      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.'
+      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

@@ -39,5 +39,5 @@ fr:
       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é."
       link_text_color: "La couleur du texte des liens dans la bannière."
       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."
-      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 ».'
-      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.'
+      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 ».'
+      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

@@ -34,4 +34,4 @@ he:
       secondary_text_color: "צבע טקסט הסמל וכותרות הטקסט וצבע רקע הכפתור."
       secondary_text_color_dark: "צבע טקסט הסמל וכותרות הטקסט וצבע רקע הכפתור כשמזוהה מצב כהה במערכת."
       link_text_color: "צבע טקסט קישורים בתוך הכרזה."
-      fourth_column_size: '<br><br><h2>סמלי עמודות</h2>אפשר להשתמש ב־font awesome או בקישור לתמונה בתור סמל ראש העמודה. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">לחיצה כאן</a> תציג את רשימת הסמלים הזמינים.'
+      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

@@ -39,5 +39,5 @@ it:
       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."
       link_text_color: "Colore del testo dei link all'interno del banner."
       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."
-      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".'
-      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.'
+      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".'
+      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.'

locales/ja.yml

@@ -39,5 +39,5 @@ ja:
       secondary_text_color_dark: "システムのダークモードが検出された場合のアイコンとテキスト見出しのテキストの色と、ボタンの背景色。"
       link_text_color: "バナー内のリンクのテキストの色。"
       link_text_color_dark: "システムのダークモードが検出された場合のバナー内のリンクのテキストの色。<br><br><br><h2>バナーコンテンツのカスタマイズ</h2> HTML を使ってバナーのコンテンツをカスタマイズします。CSS を使ってカスタムコンテンツにスタイルを設定する必要がある場合は、別のテーマコンポーネントを作成します。列を除外するには、コンテンツを空白のままにします。4 番目の列が提供されますが、使用可能なスペースのコンテンツが多すぎる可能性があります。異なるブラウザで幅が異なる場合でも、構成が適切であることを確認してください。"
-      fourth_column_content: '<br><br><h2>列のサイズ</h2>パーセント率を使用して列の幅を調節します。「auto」に設定すると、他の列が「auto」になっている場合でもこの列は使用可能な幅いっぱいに広がります。'
-      fourth_column_size: '<br><br><h2>列のアイコン</h2>列の上部にあるアイコンに FontAwesome または画像へのリンクを使用します。使用可能なアイコンのリストは確認するには<a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">こちらをクリック</a>してください。'
+      fifth_column_content: '<br><br><h2>列のサイズ</h2>パーセント率を使用して列の幅を調節します。「auto」に設定すると、他の列が「auto」になっている場合でもこの列は使用可能な幅いっぱいに広がります。'
+      fifth_column_size: '<br><br><h2>列のアイコン</h2>列の上部にあるアイコンに FontAwesome または画像へのリンクを使用します。使用可能なアイコンのリストは確認するには<a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">こちらをクリック</a>してください。'

locales/nl.yml

@@ -39,5 +39,5 @@ nl:
       secondary_text_color_dark: "De tekstkleur van het pictogram en de tekstkoppen en de achtergrondkleur van de knop wanneer de donkere systeemmodus wordt gedetecteerd."
       link_text_color: "De tekstkleur van links in de banner."
       link_text_color_dark: "De tekstkleur van links in de banner wanneer de donkere systeemmodus wordt gedetecteerd. <br><br><br><h2>Aanpassing van bannerinhoud</h2> Pas de inhoud van de banner aan met HTML. Als je je aangepaste inhoud wilt opmaken met CSS, maak dan een afzonderlijke themacomponent. Laat de inhoud leeg om een kolom uit te sluiten. Hoewel er een vierde kolom is, zal dit waarschijnlijk resulteren in te veel inhoud voor de beschikbare ruimte. Controleer of je configuratie goed is in verschillende browserbreedtes."
-      fourth_column_content: '<br><br><h2>Kolomgroottes</h2>Gebruik een percentage om kolommen breder of smaller te maken. Als dit is ingesteld op "auto", vult de kolom de beschikbare ruimte gelijkmatig ten opzichte van andere "auto"-kolommen.'
-      fourth_column_size: '<br><br><h2>Kolompictogrammen</h2>Gebruik FontAwesome of een link naar een afbeelding voor het pictogram bovenaan de kolommen. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Klik hier</a> voor de lijst van beschikbare pictogrammen.'
+      fifth_column_content: '<br><br><h2>Kolomgroottes</h2>Gebruik een percentage om kolommen breder of smaller te maken. Als dit is ingesteld op "auto", vult de kolom de beschikbare ruimte gelijkmatig ten opzichte van andere "auto"-kolommen.'
+      fifth_column_size: '<br><br><h2>Kolompictogrammen</h2>Gebruik FontAwesome of een link naar een afbeelding voor het pictogram bovenaan de kolommen. <a href="https://fontawesome.com/v6/search?o=r&m=free" target="_blank">Klik hier</a> voor de lijst van beschikbare pictogrammen.'