FEATURE: experimental wide format tiles

common/common.scss

@@ -29,6 +29,11 @@
   margin-top: 60px;
 }
 
+#list-area {
+  container-type: inline-size;
+  container-name: list-area;
+}
+
 .tiles-style {
   th {
     display: none;
@@ -65,7 +70,7 @@
 
   .tiles-grid-item-content {
     display: grid;
-    grid-template-columns: 1;
+    grid-template-columns: auto;
     grid-template-rows: auto auto;
     grid-template-areas:
       "photo"
@@ -202,8 +207,7 @@
     grid-template-columns: 9fr 12fr 10fr;
 
     grid-template-rows: 1;
-    grid-template-areas:
-      "meta posters actions";
+    grid-template-areas: "meta posters actions";
   }
 
   .topic-meta {
@@ -291,6 +295,41 @@
     padding-left: 0;
     padding-top: 3px;
   }
+
+  &.side-by-side {
+    @container list-area (width > 900px) {
+
+      tbody {
+        grid-template-columns: auto;
+
+        .tiles-grid-item-content {
+          grid-template-areas: "photo details";
+          grid-template-columns: 1fr 2fr;
+          grid-template-rows: auto;
+        }
+
+        .topic-details {
+          grid-template-rows: auto auto 30px;
+        }
+
+        .topic-thumbnail {
+          width: 100%;
+          overflow: hidden;
+          margin: 0;
+          padding-top: 56.25%;
+          position: relative;
+          z-index: 100;
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+    }
+  }
 }
 
 .topic-list-item {
@@ -317,13 +356,12 @@
       .topic-views,
       .badge-posts,
       .like-count {
-        color:#ccc;
+        color: #ccc;
       }
     }
   }
 
   &.black-text {
-
     .discourse-tag.box {
       background-color: #ccc;
     }
@@ -350,7 +388,7 @@
       .topic-views,
       .badge-posts,
       .like-count {
-        color:#444;
+        color: #444;
       }
     }
   }
@@ -513,7 +551,7 @@ button.list-button {
         }
       }
 
-     .featured-details:hover {
+      .featured-details:hover {
         img {
           -webkit-filter: brightness(35%);
           transition: background-color 200ms linear;
@@ -526,7 +564,7 @@ button.list-button {
 
           .excerpt {
             font-size: smaller;
-            overflow:hidden;
+            overflow: hidden;
           }
 
           a.mention {
@@ -586,7 +624,7 @@ img.select-thumbnail-preview {
 
 .portfolio-button-inner {
   min-width: 150px;
-  padding: .5em .65em;
+  padding: 0.5em 0.65em;
   overflow: hidden;
   height: 20px;
   vertical-align: middle;
@@ -643,7 +681,7 @@ img.select-thumbnail-preview {
     grid-template-areas:
       "fpsphoto"
       "fpsheader"
-      "fpscategory"
+      "fpscategory";
   }
 
   .fps-topic-header {

javascripts/discourse/initializers/preview-edits.js.es6

@@ -94,13 +94,19 @@ export default {
           "hasTiles:tiles-style",
           "hasExcerpts:showExcerpt",
           "hasActions:showActions",
+          "wideFormat:side-by-side"
         ],
         hasThumbnails: readOnly("topicListPreviewsService.displayThumbnails"),
         hasTiles: readOnly("topicListPreviewsService.displayTiles"),
         hasExcerpts: readOnly("topicListPreviewsService.displayExcerpts"),
         hasActions: readOnly("topicListPreviewsService.displayActions"),
-
         listChanged: false,
+        wideFormat: false,
+
+        @discourseComputed("listChanged")
+        wideFormat() {
+          return settings.topic_list_tiles_wide_format
+        },
 
         @on("init")
         setup() {
@@ -140,7 +146,12 @@ export default {
         pluginId: PLUGIN_ID,
         topicListPreviewsService: service("topic-list-previews"),
         canBookmark: bool("currentUser"),
-        classNameBindings: ["whiteText:white-text", "blackText:black-text", "hasThumbnail", "tilesStyle:tiles-grid-item"],
+        classNameBindings: [
+          "whiteText:white-text",
+          "blackText:black-text",
+          "hasThumbnail",
+          "tilesStyle:tiles-grid-item"
+        ],
         tilesStyle: readOnly("topicListPreviewsService.displayTiles"),
         notTilesStyle: not("topicListPreviewsService.displayTiles"),
         showThumbnail: readOnly("topicListPreviewsService.displayThumbnails"),

javascripts/discourse/services/topic-list-previews.js

@@ -54,6 +54,10 @@ export default class TopicListPreviewsService extends Service {
     return this.discovery.tag?.id;
   }
 
+  get wideFormat() {
+    return settings.topic_list_tiles_wide_format;
+  }
+
   enabledForCurrentTopicListRouteType(infoType) {
     let checkList = [];
 

settings.yml

@@ -86,6 +86,11 @@ topic_list_tiles_larger_featured_tiles:
   type: bool
   description:
     en: "Make the tiles with featured tags larger"
+topic_list_tiles_wide_format:
+  default: false
+  type: bool
+  description:
+    en: "EXPERIMENTAL: Use wide format (places image on left instead of top) for tiles when list area is wide enough"
 topic_list_portfolio:
   default: true
   type: bool