Add optional single column layout to widget

Co-authored-by: Adrian Santana Berg <[email protected]>
AtB-AS · May 30, 2024 · b8dfd0e · b8dfd0e
1 parent e44df5e
commit b8dfd0e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/pages/widget/index.tsx b/src/pages/widget/index.tsx
@@ -204,8 +204,12 @@ function WidgetContent({
 
         <ul style={{ listStylePosition: 'inside', marginTop: '1rem' }}>
           <li>
-            <code>.widget-inheritFont</code>: Inherit font family from the
-            website
+            <code>.widget-module__inheritFont</code>: Inherit font family from
+            the website
+          </li>
+          <li>
+            <code>.widget-module__singleColumnLayout</code>: Use single column
+            design of widget layout
           </li>
         </ul>
       </div>

diff --git a/src/widget/widget.module.css b/src/widget/widget.module.css
@@ -328,3 +328,13 @@
 .inheritFont * {
   font-family: inherit !important;
 }
+
+.singleColumnLayout .main {
+  grid-template-columns: 1fr;
+}
+.singleColumnLayout .search_container {
+  max-width: unset;
+}
+.singleColumnLayout .selector_options {
+  width: 100%;
+}
diff --git a/src/widget/widget.ts b/src/widget/widget.ts
@@ -41,6 +41,7 @@ function createSettingsConstants(urlBase: string) {
 
 type OutputOverrideOptions = {
   inheritFont?: boolean;
+  singleColumnLayout?: boolean;
 };
 export type WidgetOptions = {
   urlBase: string;
@@ -62,6 +63,7 @@ export function createWidget({
 
   const defaultOutputOverrideOptions: OutputOverrideOptions = {
     inheritFont: false,
+    singleColumnLayout: false,
     ...outputOverrideOptions,
   };
 
@@ -723,6 +725,8 @@ function createOutput(
     <div
       class="${style.wrapper} ${style.lightWrapper} ${outputOverrideOptions.inheritFont
         ? style.inheritFont
+        : ''} ${outputOverrideOptions.singleColumnLayout
+        ? style.singleColumnLayout
         : ''}"
     >
       <nav class="${style.nav}">