Restore multi-col card views + add new Matrix setting

#14202

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## Unreleased
 
 - Sites’ Language settings can now be set to environment variables. ([#14235](https://github.com/craftcms/cms/pull/14235), [#14135](https://github.com/craftcms/cms/discussions/14135))
+- Card views are once again multi-column on wider viewports. ([#14202](https://github.com/craftcms/cms/discussions/14202))
+- Added the “Show cards in a grid” Matrix field setting. ([#14202](https://github.com/craftcms/cms/discussions/14202))
 - Added the `languageMenu` and `languageMenuField` form macros.
 - Added `craft\models\FieldLayout::getFieldByUid()`.
 - Added `craft\models\Site::getLanguage()`.

src/controllers/UsersController.php

@@ -958,6 +958,7 @@ public function actionAddresses(?int $userId = null): Response
 
         $response->contentHtml(function() use ($user) {
             $config = [
+                'showInGrid' => true,
                 'canCreate' => true,
             ];
 

src/elements/NestedElementManager.php

@@ -316,6 +316,10 @@ public function getSupportedSiteIds(ElementInterface $owner): array
      */
     public function getCardsHtml(?ElementInterface $owner, array $config = []): string
     {
+        $config += [
+            'showInGrid' => false,
+        ];
+
         return $this->createView(
             $owner,
             $config,
@@ -350,7 +354,10 @@ function(string $id, array $config, $attribute, &$settings) use ($owner) {
                         $elements,
                     ), [
                         'encode' => false,
-                        'class' => ['elements', 'cards'],
+                        'class' => [
+                            'elements',
+                            $config['showInGrid'] ? 'card-grid' : 'cards',
+                        ],
                     ]);
                 }
 

src/fields/Addresses.php

@@ -628,7 +628,9 @@ public function getStaticHtml(mixed $value, ElementInterface $element): string
 
     private function inputHtmlInternal(?ElementInterface $owner, bool $static = false): string
     {
-        $config = [];
+        $config = [
+            'showInGrid' => true,
+        ];
 
         if (!$static) {
             $config += [

src/fields/Matrix.php

@@ -203,6 +203,12 @@ public static function defaultTableColumnOptions(array $entryTypes): array
      */
     public string $viewMode = self::VIEW_MODE_CARDS;
 
+    /**
+     * @var bool Whether cards should be shown in a multi-column grid
+     * @since 5.0.0
+     */
+    public bool $showCardsInGrid = false;
+
     /**
      * @var bool Include table view in element indexes
      * @since 5.0.0
@@ -870,7 +876,9 @@ private function blockInputHtml(EntryQuery|ElementCollection|null $value, ?Eleme
     private function nestedElementManagerHtml(?ElementInterface $owner, bool $static = false): string
     {
         $entryTypes = $this->getEntryTypes();
-        $config = [];
+        $config = [
+            'showInGrid' => $this->showCardsInGrid,
+        ];
 
         if (!$static) {
             $config += [

src/templates/_components/fieldtypes/Matrix/settings.twig

@@ -170,6 +170,19 @@
     targetPrefix: 'view-mode--',
 }) }}
 
+{% tag 'div' with {
+    id: "view-mode--#{constant('VIEW_MODE_CARDS', field)}",
+    class: field.viewMode != constant('VIEW_MODE_CARDS', field) ? 'hidden' : null,
+} %}
+    {{ forms.lightswitchField({
+        label: 'Show cards in a grid'|t('app'),
+        instructions: 'Whether cards should be shown in a multi-column grid on wide viewports.'|t('app'),
+        id: 'show-cards-in-grid',
+        name: 'showCardsInGrid',
+        on: field.showCardsInGrid,
+    }) }}
+{% endtag %}
+
 {% tag 'div' with {
     id: "view-mode--#{constant('VIEW_MODE_INDEX', field)}",
     class: field.viewMode != constant('VIEW_MODE_INDEX', field) ? 'hidden' : null,

src/templates/_elements/cards.twig

@@ -1,8 +1,13 @@
 {% set elements = elements ?? [] %}
 {% set disabled = disabled ?? null %}
-{% set viewMode = viewMode ?? null %}
+{% set showInGrid = showInGrid ?? false %}
 
-<ul class="elements cards">
+{% tag 'ul' with {
+  class: [
+    'elements',
+    showInGrid ? 'card-grid' : 'cards',
+  ],
+} %}
   {%- apply spaceless  %}
     {% for element in elements %}
       <li>
@@ -20,4 +25,4 @@
       </li>
     {% endfor %}
   {% endapply -%}
-</ul>
+{% endtag %}

src/templates/_elements/cardsview/container.twig

@@ -4,6 +4,6 @@
     </span>
 </div>
 
-<ul class="cards">
+<ul class="card-grid">
     {% include '_elements/cardsview/elements.twig' %}
 </ul>

src/translations/en/app.php

@@ -1390,6 +1390,7 @@
     'Show Currency' => 'Show Currency',
     'Show Time Zone' => 'Show Time Zone',
     'Show all changes' => 'Show all changes',
+    'Show cards in a grid' => 'Show cards in a grid',
     'Show date and time' => 'Show date and time',
     'Show date' => 'Show date',
     'Show field handles in edit forms' => 'Show field handles in edit forms',
@@ -1863,6 +1864,7 @@
     'Where transforms should be stored on the filesystem.' => 'Where transforms should be stored on the filesystem.',
     'Whether authors should be able to choose which time zone the time is in.' => 'Whether authors should be able to choose which time zone the time is in.',
     'Whether authors should be able to upload files directly to the field, rather than requiring them to select/upload assets via the selection modal.' => 'Whether authors should be able to upload files directly to the field, rather than requiring them to select/upload assets via the selection modal.',
+    'Whether cards should be shown in a multi-column grid on wide viewports.' => 'Whether cards should be shown in a multi-column grid on wide viewports.',
     'Whether custom fields should be validated during public registration.' => 'Whether custom fields should be validated during public registration.',
     'Whether empty folders should be listed for deletion.' => 'Whether empty folders should be listed for deletion.',
     'Whether preview frames should be automatically refreshed when content changes.' => 'Whether preview frames should be automatically refreshed when content changes.',

src/web/assets/cp/src/css/_cp.scss

@@ -1449,6 +1449,11 @@ li.breadcrumb-toggle-wrapper {
       @include margin-left(-7px);
     }
   }
+
+  .card-grid {
+    display: flex !important;
+    flex-direction: column;
+  }
 }
 
 @media print {

src/web/assets/cp/src/css/_main.scss

@@ -3275,6 +3275,21 @@ table {
   }
 }
 
+.card-grid {
+  display: grid !important;
+  gap: var(--s) !important;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+
+  & > li {
+    border-radius: var(--large-border-radius);
+
+    & > .card {
+      margin: 0 !important;
+      height: 100%;
+    }
+  }
+}
+
 .context-label,
 .context-menu-container {
   display: inline-flex;

src/web/assets/cp/src/js/CardsElementIndexView.js

@@ -48,6 +48,6 @@ Craft.CardsElementIndexView = Craft.BaseElementIndexView.extend({
   },
 
   getElementContainer: function () {
-    return this.$container.find('> .cards');
+    return this.$container.find('> .card-grid');
   },
 });

src/web/assets/cp/src/js/NestedElementManager.js

@@ -128,7 +128,7 @@ Craft.NestedElementManager = Garnish.Base.extend(
       // Was .elements just created?
       if (!this.$elements.length) {
         this.$elements = $('<ul/>', {
-          class: 'elements cards',
+          class: 'elements card-grid',
         }).prependTo(this.$container);
         this.$container.children('.zilch').addClass('hidden');
       }