Adds initial version of mosaic view mode.

src/assets/scss/_view-mode-grid.scss

@@ -20,29 +20,7 @@
             overflow: hidden;
             padding: 0.75rem 1.5rem;
             text-align: center;
-        }
-        .media {
-            .media-body {
-                flex: 1;
-                font-size: 0.6875rem;
-                color: gray;
-                overflow: hidden;
-            
-                .metadata-label {
-                    font-size: 0.75rem;
-                    line-height: 1.0;
-                    margin-bottom: 0.2rem;
-                }
-
-                .metadata-value {
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                }
-   
-            }
-        }
-    
+        }    
     
     }
 }

src/assets/scss/_view-mode-mosaic.scss

@@ -0,0 +1,39 @@
+.tainacan-mosaic-container {
+    padding: 0;
+    column-gap: 0;
+
+    .tainacan-mosaic {
+        padding: 0px;
+        text-align: center;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+
+        .metadata-title {
+            flex-shrink: 0;
+            border-top-right-radius: 5px;
+            font-size: 0.875rem;
+            margin-bottom: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            padding: 0.75rem 1.5rem;
+            text-align: center;
+            position: absolute;
+            opacity: 0;
+            background-color: rgba(255,255,255,0.85);
+            transition: opacity 0.5s;
+            margin-top: -45px;         
+        }
+   
+    }
+    .tainacan-mosaic:hover {
+        .metadata-title {
+            opacity: 1;
+        } 
+    }
+}
+
+

src/assets/scss/style.scss

@@ -202,4 +202,6 @@ form{
 
 @import "_view-mode-cards.scss";
 
-@import "_view-mode-grid.scss";
+@import "_view-mode-grid.scss";
+
+@import "_view-mode-mosaic.scss";

src/functions.php

@@ -56,16 +56,22 @@ if(!function_exists('tainacan_setup')) {
         if (function_exists('tainacan_register_view_mode')) {
             tainacan_register_view_mode('cards', [
                 'label' => 'Cards view',
-                'description' => 'A Cards view',
+                'description' => 'A cards view, flexible for metadata',
                 'icon' => '<span class="icon"><i class="mdi mdi-view-list mdi-24px"></i></span>',
                 'dynamic_metadata' => true,
             ]);
             tainacan_register_view_mode('grid', [
                 'label' => 'Grid view',
-                'description' => 'A Grid view',
+                'description' => 'A grid view',
                 'icon' => '<span class="icon"><i class="mdi mdi-view-grid mdi-24px"></i></span>',
                 'dynamic_metadata' => false,
             ]);
+            tainacan_register_view_mode('mosaic', [
+                'label' => 'Mosaic view',
+                'description' => 'A mosaic view',
+                'icon' => '<span class="icon"><i class="mdi mdi-view-quilt mdi-24px"></i></span>',
+                'dynamic_metadata' => false,
+            ]);
         }
 
     }

src/tainacan/view-mode-cards.php

@@ -28,5 +28,7 @@
     </div>
 
 <?php else: ?>
-    Nenhum item encontrado
+    <div class="tainacan-cards-container">
+        Nenhum item encontrado
+    </div>
 <?php endif; ?>

src/tainacan/view-mode-grid.php

@@ -16,5 +16,7 @@
     </div>
 
 <?php else: ?>
-    Nenhum item encontrado
+    <div class="tainacan-cards-container">
+        Nenhum item encontrado
+    </div>
 <?php endif; ?>

src/tainacan/view-mode-mosaic.php

@@ -0,0 +1,20 @@
+<?php if (have_posts()):  ?>
+
+    <div class="tainacan-mosaic-container card-columns">
+
+        <?php while (have_posts()): the_post(); ?>
+        
+                <div class="tainacan-mosaic">
+                    <?php the_post_thumbnail('full'); ?>
+                    <p class="metadata-title"><?php the_title(); ?></p>
+                </div>      
+                
+        <?php endwhile; ?>
+
+    </div>
+
+<?php else: ?>
+    <div class="tainacan-cards-container">
+        Nenhum item encontrado
+    </div>
+<?php endif; ?>