From c07fce7d2c0e647b994368a63b34ec4898b2e740 Mon Sep 17 00:00:00 2001
From: Christian Vosen <vosen@ecco-marketing.de>
Date: Tue, 2 Mar 2021 14:11:17 +0100
Subject: [PATCH] Adding breakpoint for large desktops

---
 src/Element/GridStart.php                     |   2 +-
 src/Resources/contao/dca/tl_content.php       |  43 +++++++-
 .../contao/languages/de/tl_content.php        |   1 +
 .../contao/languages/en/tl_content.php        |   1 +
 src/Resources/public/be_main.css              |   6 +-
 src/Resources/public/clickpress-grid.css      | 103 ++++++++++++++++++
 src/Resources/public/clickpress-grid.scss     |  79 +++++++++++++-
 7 files changed, 224 insertions(+), 11 deletions(-)

diff --git a/src/Element/GridStart.php b/src/Element/GridStart.php
index 9240b81..5f0aaea 100644
--- a/src/Element/GridStart.php
+++ b/src/Element/GridStart.php
@@ -56,7 +56,7 @@ public function generate()
     public static function getColumnsConfiguration(array $data): array
     {
         $config = [];
-        foreach (['desktop', 'tablet', 'mobile'] as $media) {
+        foreach (['largedesktop', 'desktop', 'tablet', 'mobile'] as $media) {
             if (isset($data['cp_grid_' . $media])) {
                 $columns = preg_replace(
                     '/grid/',
diff --git a/src/Resources/contao/dca/tl_content.php b/src/Resources/contao/dca/tl_content.php
index 72c384b..3dc40a9 100644
--- a/src/Resources/contao/dca/tl_content.php
+++ b/src/Resources/contao/dca/tl_content.php
@@ -12,10 +12,45 @@
     $GLOBALS['TL_CSS'][] = 'bundles/contaoclickpressgrid/be_main.css';
 }
 
-$GLOBALS['TL_DCA']['tl_content']['palettes']['cp_grid_start'] = '{type_legend},type,headline;{cp_grid_legend},cp_grid_mobile,cp_grid_tablet,cp_grid_desktop;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
+$GLOBALS['TL_DCA']['tl_content']['palettes']['cp_grid_start'] = '{type_legend},type,headline;{cp_grid_legend},cp_grid_mobile,cp_grid_tablet,cp_grid_desktop,cp_grid_largedesktop;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
 $GLOBALS['TL_DCA']['tl_content']['palettes']['cp_grid_stop'] = '{type_legend},type;{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';
 $GLOBALS['TL_DCA']['tl_content']['palettes']['cp_column_start'] = '{type_legend},type,headline;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
 $GLOBALS['TL_DCA']['tl_content']['palettes']['cp_column_stop'] = '{type_legend},type;{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['cp_grid_largedesktop'] = array(
+    'label' => &$GLOBALS['TL_LANG']['tl_content']['cp_grid_largedesktop'],
+    'inputType' => 'select',
+    'options' => array(
+        'grid_100',
+        'grid_50_50',
+        'grid_33_33_33',
+        'grid_25_25_25_25',
+        'grid_20_20_20_20_20',
+        'grid_75_25',
+        'grid_25_75',
+        'grid_66_33',
+        'grid_33_66',
+        'grid_50_25_25',
+        'grid_25_50_25',
+        'grid_25_25_50',
+        'grid_40_30_30',
+        'grid_30_40_30',
+        'grid_30_30_40',
+        'grid_20_40_40',
+        'grid_40_20_40',
+        'grid_40_40_20',
+        'grid_40_20_20_20',
+        'grid_20_40_20_20',
+        'grid_20_20_40_20',
+        'grid_20_20_20_40',
+    ),
+    'reference' => &$GLOBALS['TL_LANG']['tl_content']['cp_grid_options'],
+    'eval' => array(
+        'tl_class' => 'cp_grid_w50',
+    ),
+    'sql' => "varchar(255) NOT NULL default ''",
+);
+
 $GLOBALS['TL_DCA']['tl_content']['fields']['cp_grid_desktop'] = array(
     'label' => &$GLOBALS['TL_LANG']['tl_content']['cp_grid_desktop'],
     'inputType' => 'select',
@@ -45,7 +80,7 @@
     ),
     'reference' => &$GLOBALS['TL_LANG']['tl_content']['cp_grid_options'],
     'eval' => array(
-        'tl_class' => 'cp_grid_w33',
+        'tl_class' => 'cp_grid_w50',
     ),
     'sql' => "varchar(255) NOT NULL default ''",
 );
@@ -75,7 +110,7 @@
     ),
     'reference' => &$GLOBALS['TL_LANG']['tl_content']['cp_grid_options'],
     'eval' => array(
-        'tl_class' => 'cp_grid_w33',
+        'tl_class' => 'cp_grid_w50',
     ),
     'sql' => "varchar(255) NOT NULL default ''",
 );
@@ -102,7 +137,7 @@
     ),
     'reference' => &$GLOBALS['TL_LANG']['tl_content']['cp_grid_options'],
     'eval' => array(
-        'tl_class' => 'cp_grid_w33',
+        'tl_class' => 'cp_grid_w50',
     ),
     'sql' => "varchar(255) NOT NULL default ''",
 );
diff --git a/src/Resources/contao/languages/de/tl_content.php b/src/Resources/contao/languages/de/tl_content.php
index 606c963..bda8603 100644
--- a/src/Resources/contao/languages/de/tl_content.php
+++ b/src/Resources/contao/languages/de/tl_content.php
@@ -1,4 +1,5 @@
 <?php
+$GLOBALS['TL_LANG']['tl_content']['cp_grid_largedesktop'] = ['Desktop XL', 'Spaltenanzahl auf großen Desktops'];
 $GLOBALS['TL_LANG']['tl_content']['cp_grid_desktop'] = ['Desktop', 'Spaltenanzahl in der Desktopansicht'];
 $GLOBALS['TL_LANG']['tl_content']['cp_grid_tablet'] = ['Tablet', 'Spaltenanzahl in der Tabletansicht'];
 $GLOBALS['TL_LANG']['tl_content']['cp_grid_mobile'] = ['Mobile', 'Spaltenanzahl in der Mobilansicht'];
diff --git a/src/Resources/contao/languages/en/tl_content.php b/src/Resources/contao/languages/en/tl_content.php
index fc3ffe0..cfccb3e 100644
--- a/src/Resources/contao/languages/en/tl_content.php
+++ b/src/Resources/contao/languages/en/tl_content.php
@@ -1,4 +1,5 @@
 <?php
+$GLOBALS['TL_LANG']['tl_content']['cp_grid_largedesktop'] = ['Desktop XL', 'Set columns in large desktop view'];
 $GLOBALS['TL_LANG']['tl_content']['cp_grid_desktop'] = ['Desktop', 'Set columns in desktop view'];
 $GLOBALS['TL_LANG']['tl_content']['cp_grid_tablet'] = ['Tablet', 'Set columns in tablet view'];
 $GLOBALS['TL_LANG']['tl_content']['cp_grid_mobile'] = ['Mobile', 'Set columns in mobile view'];
diff --git a/src/Resources/public/be_main.css b/src/Resources/public/be_main.css
index f053dcd..a47ce35 100644
--- a/src/Resources/public/be_main.css
+++ b/src/Resources/public/be_main.css
@@ -1,9 +1,9 @@
 
-.cp_grid_w33 {
+.cp_grid_w50 {
     float: left;
-    width: 29%;
+    width: 46%;
     height: 72px;
 }
-.cp_grid_w33 select {
+.cp_grid_w50 select {
     width: 90%;
 }
diff --git a/src/Resources/public/clickpress-grid.css b/src/Resources/public/clickpress-grid.css
index 0ad0678..b536efa 100644
--- a/src/Resources/public/clickpress-grid.css
+++ b/src/Resources/public/clickpress-grid.css
@@ -240,4 +240,107 @@
   }
 }
 
+@media (min-width: 1260px) {
+  .grid_largedesktop_100 {
+    grid-template-columns: 1fr;
+  }
+
+  .grid_largedesktop_50_50 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid_largedesktop_50_25_25 {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+
+  .grid_largedesktop_33_33_33 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .grid_largedesktop_75_25 {
+    grid-template-columns: 3fr 1fr;
+  }
+
+  .grid_largedesktop_25_75 {
+    grid-template-columns: 1fr 3fr;
+  }
+
+  .grid_largedesktop_66_33 {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  .grid_largedesktop_33_66 {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .grid_largedesktop_50_25_25 {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+
+  .grid_largedesktop_40_30_30 {
+    grid-template-columns: 4fr 3fr 3fr;
+  }
+
+  .grid_largedesktop_50_25_25 {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+
+  .grid_largedesktop_25_50_25 {
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+
+  .grid_largedesktop_25_25_50 {
+    grid-template-columns: 1fr 1fr 2fr;
+  }
+
+  .grid_largedesktop_40_30_30 {
+    grid-template-columns: 4fr 3fr 3fr;
+  }
+
+  .grid_largedesktop_30_40_30 {
+    grid-template-columns: 3fr 4fr 3fr;
+  }
+
+  .grid_largedesktop_30_30_40 {
+    grid-template-columns: 3fr 3fr 4fr;
+  }
+
+  .grid_largedesktop_20_40_40 {
+    grid-template-columns: 1fr 2fr 2fr;
+  }
+
+  .grid_largedesktop_40_20_40 {
+    grid-template-columns: 2fr 1fr 2fr;
+  }
+
+  .grid_largedesktop_40_40_20 {
+    grid-template-columns: 2fr 2fr 1fr;
+  }
+
+  .grid_largedesktop_25_25_25_25 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .grid_largedesktop_40_20_20_20 {
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+  }
+
+  .grid_largedesktop_20_40_20_20 {
+    grid-template-columns: 1fr 2fr 1fr 1fr;
+  }
+
+  .grid_largedesktop_20_20_40_20 {
+    grid-template-columns: 1fr 1fr 2fr 1fr;
+  }
+
+  .grid_largedesktop_20_20_20_40 {
+    grid-template-columns: 1fr 1fr 1fr 2fr;
+  }
+
+  .grid_largedesktop_20_20_20_20_20 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+
 /*# sourceMappingURL=clickpress-grid.css.map */
diff --git a/src/Resources/public/clickpress-grid.scss b/src/Resources/public/clickpress-grid.scss
index 52bdf60..9e050c3 100644
--- a/src/Resources/public/clickpress-grid.scss
+++ b/src/Resources/public/clickpress-grid.scss
@@ -200,6 +200,79 @@ $mq_extra: 1260px; // Extra large devices (large desktops, 1260px and up)
 }
 
 @media (min-width: $mq_extra) {
-
-}
-
+  .grid_largedesktop_100 {
+    grid-template-columns: 1fr;
+  }
+  .grid_largedesktop_50_50 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .grid_largedesktop_50_25_25 {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+  .grid_largedesktop_33_33_33 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .grid_largedesktop_75_25 {
+    grid-template-columns: 3fr 1fr;
+  }
+  .grid_largedesktop_25_75 {
+    grid-template-columns: 1fr 3fr;
+  }
+  .grid_largedesktop_66_33 {
+    grid-template-columns: 2fr 1fr;
+  }
+  .grid_largedesktop_33_66 {
+    grid-template-columns: 1fr 2fr;
+  }
+  .grid_largedesktop_50_25_25 {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+  .grid_largedesktop_40_30_30 {
+    grid-template-columns: 4fr 3fr 3fr;
+  }
+  .grid_largedesktop_50_25_25 {
+    grid-template-columns: 2fr 1fr 1fr;
+  }
+  .grid_largedesktop_25_50_25 {
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+  .grid_largedesktop_25_25_50 {
+    grid-template-columns: 1fr 1fr 2fr;
+  }
+  .grid_largedesktop_40_30_30 {
+    grid-template-columns: 4fr 3fr 3fr;
+  }
+  .grid_largedesktop_30_40_30 {
+    grid-template-columns: 3fr 4fr 3fr;
+  }
+  .grid_largedesktop_30_30_40 {
+    grid-template-columns: 3fr 3fr 4fr;
+  }
+  .grid_largedesktop_20_40_40 {
+    grid-template-columns: 1fr 2fr 2fr;
+  }
+  .grid_largedesktop_40_20_40 {
+    grid-template-columns: 2fr 1fr 2fr;
+  }
+  .grid_largedesktop_40_40_20 {
+    grid-template-columns: 2fr 2fr 1fr;
+  }
+  .grid_largedesktop_25_25_25_25 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .grid_largedesktop_40_20_20_20 {
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+  }
+  .grid_largedesktop_20_40_20_20 {
+    grid-template-columns: 1fr 2fr 1fr 1fr;
+  }
+  .grid_largedesktop_20_20_40_20 {
+    grid-template-columns: 1fr 1fr 2fr 1fr;
+  }
+  .grid_largedesktop_20_20_20_40 {
+    grid-template-columns: 1fr 1fr 1fr 2fr;
+  }
+  .grid_largedesktop_20_20_20_20_20 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
\ No newline at end of file