Adds initial version of frame view mode :)

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

@@ -0,0 +1,67 @@
+.tainacan-frame-container {
+    padding: 30px 4.166666667%;
+    background-color: #f5f5f5;
+
+    .row { 
+        justify-content: space-between; 
+        align-items: center;
+    }
+    .col { flex-grow: 0; }
+
+    .tainacan-frame {
+        padding: 12px 12px 16px 12px;
+        text-align: center;
+
+        .frame {
+            background: black;
+            box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.4);
+            padding: 12px;
+        }
+        
+        .mat {
+            background: white;
+            padding: 20px;
+            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) inset;
+        }
+        
+        .art {
+            position: relative;
+            
+        }
+        .art::before {
+            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) inset;
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border-radius: 2px;
+        }
+        
+        .art img {
+            width: 100%;
+            width: 258px;
+            height: auto;
+            border-radius: 2px;
+        }
+
+        .metadata-title {
+            flex-shrink: 0;
+            font-size: 0.875rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            padding: 0.5rem 0.75rem;
+            text-align: center;
+            display: inline-block;
+            background: #fff;
+            margin: 14px 8px 8px 8px;
+            box-shadow: 0px 1px 3px #ddd;
+            border: 1px solid #dedede;
+        }    
+    
+    }
+}
+
+

src/assets/scss/style.scss

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

src/functions.php

@@ -72,6 +72,12 @@ if(!function_exists('tainacan_setup')) {
                 'icon' => '<span class="icon"><i class="mdi mdi-view-quilt mdi-24px"></i></span>',
                 'dynamic_metadata' => false,
             ]);
+            tainacan_register_view_mode('frame', [
+                'label' => 'Frame view',
+                'description' => 'A frame view, made for gallery expositions',
+                'icon' => '<span class="icon"><i class="mdi mdi-checkbox-intermediate mdi-24px"></i></span>',
+                'dynamic_metadata' => false,
+            ]);
         }
 
     }

src/tainacan/view-mode-frame.php

@@ -0,0 +1,29 @@
+<?php if (have_posts()):  ?>
+
+    <div class="tainacan-frame-container">
+
+        <div class="row no-gutters">
+        <?php while (have_posts()): the_post(); ?>
+            <div class="col">
+                <div class="tainacan-frame">
+                    <div class="frame">
+                        <div class="mat">
+                            <div class="art">
+                                <?php the_post_thumbnail('medium'); ?>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <p class="metadata-title"><?php the_title(); ?></p>
+                </div>
+            </div>            
+            
+        <?php endwhile; ?>
+        </div>
+    </div>
+
+<?php else: ?>
+    <div class="tainacan-cards-container">
+        Nenhum item encontrado
+    </div>
+<?php endif; ?>