[FEATURE] Make frame with configurable

TYPO3GmbH · Feb 11, 2020 · 39b078a · 39b078a
1 parent d30478a
commit 39b078a
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -386,6 +386,7 @@ if the function actually exists.
 | center            | bool                                      | false         |
 | backgroundImage   | string                                    |               |
 | height            | auto/small/medium/max                     | auto          |
+| innerWidth        | small/full/default                        | default       |
 
 #### Usage
 

diff --git a/assets/css/modules/_frame.scss b/assets/css/modules/_frame.scss
@@ -46,8 +46,16 @@ $frame-backgrounds: map-merge(
 .frame-container {
     position: relative;
     @include make-container();
+}
+.frame-container-default {
     @include make-container-max-widths();
 }
+.frame-container-small {
+    max-width: 600px;
+}
+.frame-container-full {
+    max-width: none;
+}
 
 //
 // Frame

diff --git a/src/Resources/public/app.2911e762.css → src/Resources/public/app.4b6c5b32.css b/src/Resources/public/app.2911e762.css → src/Resources/public/app.4b6c5b32.css
diff --git a/src/Resources/public/entrypoints.json b/src/Resources/public/entrypoints.json
@@ -2,7 +2,7 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/bundles/template/app.2911e762.css"
+        "/bundles/template/app.4b6c5b32.css"
       ],
       "js": [
         "/bundles/template/app.eea54578.js"

diff --git a/src/Resources/public/manifest.json b/src/Resources/public/manifest.json
@@ -1,5 +1,5 @@
 {
-  "bundles/template/app.css": "/bundles/template/app.2911e762.css",
+  "bundles/template/app.css": "/bundles/template/app.4b6c5b32.css",
   "bundles/template/app.js": "/bundles/template/app.eea54578.js",
   "bundles/template/webfont.css": "/bundles/template/webfont.32c29b51.css",
   "bundles/template/fonts/fa-brands-400.eot": "/bundles/template/fonts/fa-brands-400.088a34f7.eot",

diff --git a/src/Resources/views/extension/block/frame.html.twig b/src/Resources/views/extension/block/frame.html.twig
@@ -4,7 +4,7 @@
             <div class="frame-backgroundimage frame-backgroundimage-fade" style="background-image: url({{ backgroundImage }});"></div>
         </div>
     {% endif %}
-    <div class="frame-container">
+    <div class="{{ classesContainer }}">
         <div class="{{ classesInner }}">
             {{ content|raw }}
         </div>

diff --git a/src/Twig/Extension/BlockExtension.php b/src/Twig/Extension/BlockExtension.php
@@ -42,6 +42,7 @@ public function frameFunction(Environment $environment, string $content, array $
         $attributes['rulerAfter'] = $attributes['rulerAfter'] ?? false;
         $attributes['center'] = $attributes['center'] ?? false;
         $attributes['height'] = $attributes['height'] ?? 'auto';
+        $attributes['innerWidth'] = $attributes['innerWidth'] ?? 'default';
 
         $classesOuter = [];
         $classesOuter[] = 'frame';
@@ -61,6 +62,10 @@ public function frameFunction(Environment $environment, string $content, array $
         $classesOuter[] = 'frame-space-before-none';
         $classesOuter[] = 'frame-space-after-none';
 
+        $classesContainer = [];
+        $classesContainer[] = 'frame-container';
+        $classesContainer[] = 'frame-container-' . $attributes['innerWidth'];
+
         $classesInner = [];
         $classesInner[] = 'frame-inner';
         if ($attributes['center']) {
@@ -72,6 +77,7 @@ public function frameFunction(Environment $environment, string $content, array $
             'id' => $attributes['id'],
             'backgroundImage' => $attributes['backgroundImage'],
             'classesOuter' => implode(' ', $classesOuter),
+            'classesContainer' => implode(' ', $classesContainer),
             'classesInner' => implode(' ', $classesInner),
         ]);
     }