From 6cf53b76efa5bfe1caad1b172e15f4ef237c5538 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 28 Jun 2018 08:42:38 -0300
Subject: [PATCH 1/3] Continues improvements on Term Edition Form Layout

---
 src/admin/components/edition/term-edition-form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index 9cd72bea1..5fc84a180 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -278,7 +278,7 @@
                 margin-left: auto;
                 margin-right: auto;
                 width: 100%;
-                top: 32px;
+                top: 35%;
                 font-size: 1.2rem;
                 font-weight: bold;
                 z-index: 99;

From b906e4326e665b26b76f0a50b6c1e7f45c899e6d Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 28 Jun 2018 09:58:01 -0300
Subject: [PATCH 2/3] Adjustments on filters css. Adds v-tooltip to cards view
 mode and filters.

---
 src/admin/components/lists/items-list.vue     | 27 ++++++++++++++++++-
 src/admin/pages/lists/items-page.vue          |  2 +-
 src/admin/scss/_variables.scss                |  2 +-
 .../filter-types/tainacan-filter-item.vue     |  9 +++++--
 .../metadata-types/tainacan-form-item.vue     |  3 +++
 src/js/event-bus-web-components.js            |  5 ++--
 src/theme-helper/view-mode-cards.vue          | 21 ++++++++++++++-
 7 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index c0b438335..99789b832 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -58,6 +58,12 @@
                     <!-- Title -->
                     <div class="metadata-title">
                         <p 
+                                v-tooltip="{
+                                    content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                    html: true,
+                                    autoHide: false,
+                                    placement: 'auto-start'
+                                }"
                                 v-for="(column, index) in tableMetadata"
                                 :key="index"
                                 v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@@ -119,6 +125,12 @@
                     <!-- Title -->
                     <div class="metadata-title">
                         <p 
+                                v-tooltip="{
+                                    content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                    html: true,
+                                    autoHide: false,
+                                    placement: 'auto-start'
+                                }"
                                 v-for="(column, index) in tableMetadata"
                                 :key="index"
                                 v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@@ -163,8 +175,21 @@
                                     v-for="(column, index) in tableMetadata"
                                     :key="index"
                                     v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                <h3 class="metadata-label">{{ column.name }}</h3>
+                                <h3 
+                                        v-tooltip="{
+                                            content: column.name,
+                                            html: false,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
+                                        class="metadata-label">{{ column.name }}</h3>
                                 <p 
+                                        v-tooltip="{
+                                            content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                            html: true,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
                                         v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
                                         class="metadata-value"/>
                             </span>
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index a7b09f4b5..3b8093f3c 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -861,7 +861,7 @@
     .filters-menu {
         position: relative;
         width: $filter-menu-width;
-        max-width: $filter-menu-width;
+        min-width: 180px;
         min-height: 100%;
         height: 100%;
         background-color: white;
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index df1e157b1..c1491ccc7 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -64,7 +64,7 @@ $size-small: 0.85em; // 0.75em on Bulma.
 $header-height: 53px;
 $subheader-height: 82px;
 $side-menu-width: 180px;
-$filter-menu-width: 200px;
+$filter-menu-width: 16.666666667%;
 $filter-menu-width-theme: 20.833333333%;
 $page-height: calc(100% - 53px);
 
diff --git a/src/classes/filter-types/tainacan-filter-item.vue b/src/classes/filter-types/tainacan-filter-item.vue
index 1c4b905e4..15d86cf4a 100644
--- a/src/classes/filter-types/tainacan-filter-item.vue
+++ b/src/classes/filter-types/tainacan-filter-item.vue
@@ -7,6 +7,12 @@
                 class="show" 
                 :open="open">
             <label
+                    v-tooltip="{
+                                    content: filter.name,
+                                    html: false,
+                                    autoHide: false,
+                                    placement: 'top-start'
+                                }"
                     class="label"
                     slot="trigger"
                     slot-scope="props">
@@ -195,9 +201,8 @@
         }
 
         .label {
-            font-weight: normal;
+            font-weight: normal !important;
             font-size: 14px;
-            display: inline-flex;
             width: 100%;
         }
 
diff --git a/src/classes/metadata-types/tainacan-form-item.vue b/src/classes/metadata-types/tainacan-form-item.vue
index f31b5f9cf..757eafde6 100644
--- a/src/classes/metadata-types/tainacan-form-item.vue
+++ b/src/classes/metadata-types/tainacan-form-item.vue
@@ -127,7 +127,9 @@
                 eventBus.isChangingValue(true);
             },
             changeValue(){
+                
                 if(this.metadatum.value != this.inputs){
+
                     if(this.inputs.length > 0 && this.inputs[0].value){
                         let terms = []
 
@@ -147,6 +149,7 @@
                             }
                         }
                     } else if(this.metadatum.value.constructor.name == 'Object'){
+
                         if(this.metadatum.value.id == this.inputs){
                             return;
                         }
diff --git a/src/js/event-bus-web-components.js b/src/js/event-bus-web-components.js
index aaeea086e..9f2aa8a89 100644
--- a/src/js/event-bus-web-components.js
+++ b/src/js/event-bus-web-components.js
@@ -11,7 +11,7 @@ export const eventBus = new Vue({
         if( tainacan_plugin.components ){
             this.componentsTag = tainacan_plugin.components;
         }
-		this.$on('input', data => this.updateValue(data) );
+        this.$on('input', data => this.updateValue(data) );
     },
     methods : {
         registerComponent( name ){
@@ -38,9 +38,10 @@ export const eventBus = new Vue({
             this.$emit('isChangingValue', true);
         },  
         updateValue(data){
+            
             this.$emit('isUpdatingValue', true);
             if ( data.item_id ){
-                
+
                 if(data.values.length > 0 && data.values[0].value){
                     let val = [];
                     for(let i of data.values){
diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue
index 72246fdcf..7ec8ff158 100644
--- a/src/theme-helper/view-mode-cards.vue
+++ b/src/theme-helper/view-mode-cards.vue
@@ -10,6 +10,12 @@
                     
                     <!-- Title -->
                     <p 
+                            v-tooltip="{
+                                content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                html: true,
+                                autoHide: false,
+                                placement: 'auto-start'
+                            }"
                             v-for="(column, index) in displayedMetadata"
                             :key="index"
                             v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@@ -32,8 +38,21 @@
                                     v-for="(column, index) in displayedMetadata"
                                     :key="index"
                                     v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                <h3 class="metadata-label">{{ column.name }}</h3>
+                                <h3 
+                                        v-tooltip="{
+                                            content: column.name,
+                                            html: false,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
+                                        class="metadata-label">{{ column.name }}</h3>
                                 <p 
+                                        v-tooltip="{
+                                            content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                            html: true,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
                                         v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
                                         class="metadata-value"/>
                             </span>

From 23b17d467db26e963be4bd2ab53b73505dee3914 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 28 Jun 2018 12:19:53 -0300
Subject: [PATCH 3/3] Adds Records View Mode and change Cards View Mode to more
 limited version.

---
 src/admin/components/lists/items-list.vue     | 115 +++++++++++++++-
 src/admin/js/theme-main.js                    |   2 +
 src/admin/pages/lists/items-page.vue          |   8 +-
 src/admin/scss/_view-mode-cards.scss          |  25 ++--
 src/admin/scss/_view-mode-records.scss        | 123 ++++++++++++++++++
 src/admin/tainacan-admin-i18n.php             |  11 +-
 .../class-tainacan-theme-helper.php           |  11 +-
 src/theme-helper/view-mode-cards.vue          |  60 +++++----
 src/theme-helper/view-mode-records.vue        | 115 ++++++++++++++++
 9 files changed, 419 insertions(+), 51 deletions(-)
 create mode 100644 src/admin/scss/_view-mode-records.scss
 create mode 100644 src/theme-helper/view-mode-records.vue

diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 99789b832..875e10752 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -164,12 +164,115 @@
                     <div    
                             class="media"
                             @click="goToItemPage(item)">
-                        <a 
+                      
+                        <img 
                                 v-if="item.thumbnail != undefined"
-                                @click="goToItemPage(item)">
-                            <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
-                        </a>
+                                :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                    
+                        <div class="list-metadata media-body">
+                            <!-- Description -->
+                            <p 
+                                    v-tooltip="{
+                                        content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                        html: true,
+                                        autoHide: false,
+                                        placement: 'auto-start'
+                                    }"   
+                                    v-if="
+                                        column.metadata_type_object != undefined && 
+                                        (column.metadata_type_object.related_mapped_prop == 'description')"
+                                    v-for="(column, index) in tableMetadata"
+                                    :key="index"
+                                    class="metadata-description"
+                                    v-html="(item.metadata != undefined && item.metadata[column.slug] != undefined) ? getLimitedDescription(item.metadata[column.slug].value_as_string) : ''" />                             
+                            <br>
+                            <!-- Author and Creation Date-->
+                            <p 
+                                    v-tooltip="{
+                                        content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
+                                        html: false,
+                                        autoHide: false,
+                                        placement: 'auto-start'
+                                    }"   
+                                    v-for="(column, index) in tableMetadata"
+                                    :key="index"
+                                    v-if="column.metadatum == 'row_author' || column.metadatum == 'row_creation'"
+                                    class="metadata-author-creation">   
+                                {{ column.metadatum == 'row_author' ? $i18n.get('info_created_by') + ' ' + item[column.slug] : $i18n.get('info_date') + ' ' + item[column.slug] }}
+                            </p>   
+                        </div>
+                    </div>
+               
+                </div>
+            </div>
 
+            <!-- RECORDS VIEW MODE -->
+            <div
+                    class="tainacan-records-container"
+                    v-if="viewMode == 'records'">
+                <div 
+                        :key="index"
+                        v-for="(item, index) of items"
+                        :class="{ 'selected-record': selectedItems[index] }"
+                        class="tainacan-record">
+                    
+                    <!-- Checkbox -->
+                    <div 
+                            :class="{ 'is-selecting': isSelectingItems }"
+                            class="record-checkbox">
+                        <b-checkbox 
+                                size="is-small"
+                                v-model="selectedItems[index]"/> 
+                    </div>
+                    
+                    <!-- Title -->
+                    <div class="metadata-title">
+                        <p 
+                                v-tooltip="{
+                                    content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                    html: true,
+                                    autoHide: false,
+                                    placement: 'auto-start'
+                                }"
+                                v-for="(column, index) in tableMetadata"
+                                :key="index"
+                                v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                                @click="goToItemPage(item)"
+                                class="metadata-title"
+                                v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />                             
+                    </div>
+                    <!-- Actions -->
+                    <div 
+                            v-if="item.current_user_can_edit"
+                            class="actions-area"
+                            :label="$i18n.get('label_actions')">
+                        <a 
+                                id="button-edit"   
+                                :aria-label="$i18n.getFrom('items','edit_item')" 
+                                @click.prevent.stop="goToItemEditPage(item.id)">
+                            <b-icon
+                                    type="is-secondary" 
+                                    icon="pencil"/>
+                        </a>
+                        <a 
+                                id="button-delete" 
+                                :aria-label="$i18n.get('label_button_delete')" 
+                                @click.prevent.stop="deleteOneItem(item.id)">
+                            <b-icon 
+                                    type="is-secondary" 
+                                    :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                        </a>
+                    </div>
+                    
+                    <!-- Remaining metadata -->  
+                    <div    
+                            class="media"
+                            @click="goToItemPage(item)">
+                    
+                        <img 
+                                v-if="item.thumbnail != undefined"
+                                :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                        
                         <div class="list-metadata media-body">
                             <span 
                                     v-for="(column, index) in tableMetadata"
@@ -484,6 +587,9 @@ export default {
             } else {
                 return metadata.value_as_html;
             }
+        },
+        getLimitedDescription(description) {
+            return description.length > 120 ? description.substring(0, 117) + '...' : description;
         }
     }
 }
@@ -494,6 +600,7 @@ export default {
     @import "../../scss/_variables.scss";
     @import "../../scss/_view-mode-grid.scss";
     @import "../../scss/_view-mode-cards.scss";
+    @import "../../scss/_view-mode-records.scss";
 
     .selection-control {
         
diff --git a/src/admin/js/theme-main.js b/src/admin/js/theme-main.js
index a235fdf5f..0cedbb2ab 100644
--- a/src/admin/js/theme-main.js
+++ b/src/admin/js/theme-main.js
@@ -31,6 +31,7 @@ import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.
 import ItemsPage from '../pages/lists/items-page.vue';
 import ViewModeTable from '../../theme-helper/view-mode-table.vue';
 import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
+import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
 
 // Remaining imports
 import HelpButton from '../components/other/help-button.vue';
@@ -81,6 +82,7 @@ Vue.component('items-page', ItemsPage);
 // Oficial view modes
 Vue.component('view-mode-table', ViewModeTable);
 Vue.component('view-mode-cards', ViewModeCards);
+Vue.component('view-mode-records', ViewModeRecords);
 
 Vue.use(eventBusSearch, { store: store, router: routerTheme});
 
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 3b8093f3c..72edf53bb 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -142,7 +142,7 @@
                     <b-dropdown
                             ref="displayedMetadataDropdown"
                             :mobile-modal="false"
-                            :disabled="totalItems <= 0 || adminViewMode == 'grid'"
+                            :disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards'"
                             class="show">
                         <button
                                 class="button is-white"
@@ -287,6 +287,12 @@
                                         icon="view-list"/>
                                 {{ $i18n.get('label_cards') }}
                             </b-dropdown-item>
+                            <b-dropdown-item :value="'records'">
+                                <b-icon 
+                                        class="gray-icon" 
+                                        icon="view-module"/>
+                                {{ $i18n.get('label_records') }}
+                            </b-dropdown-item>
                             <b-dropdown-item :value="'grid'">
                                 <b-icon 
                                         class="gray-icon" 
diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss
index 46f6a3297..30aca32cc 100644
--- a/src/admin/scss/_view-mode-cards.scss
+++ b/src/admin/scss/_view-mode-cards.scss
@@ -70,9 +70,12 @@
             padding: 0.75rem 4.75rem 0.75rem 2.75rem;
             margin-bottom: -27px;
             min-height: 42px;
-
-            p { 
-                font-size: 0.875rem; 
+            font-size: 0.875rem !important; 
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            p {
+                font-size: 0.875rem !important; 
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
@@ -92,22 +95,16 @@
                 color: gray;
                 overflow: hidden;
                 width: 100%;
-            
-                .metadata-label {
-                    font-size: 0.75rem;
-                    margin-bottom: 0.2rem;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    font-weight: 500;
-                    color: $gray-light;
+
+                .metadata-description {
+                    margin-bottom: 1.5rem;
                 }
 
-                .metadata-value {
+                .metadata-author-creation {
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
-                    margin-bottom: 1rem;
+                    margin-bottom: 0;
                 }
    
             }
diff --git a/src/admin/scss/_view-mode-records.scss b/src/admin/scss/_view-mode-records.scss
new file mode 100644
index 000000000..7a628f1a4
--- /dev/null
+++ b/src/admin/scss/_view-mode-records.scss
@@ -0,0 +1,123 @@
+.tainacan-records-container {
+    min-height: 200px;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: center;
+
+    .selected-record {
+        background-color: $primary-lighter;
+        .metadata-title {
+            background-color: $primary-lighter-hover;
+        }
+    }
+
+    .tainacan-record {
+        padding: 0px;
+        flex-basis: 0;
+        margin: 0.75rem;
+        max-width: 410px;
+        min-width: 410px;
+        min-height: 218px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: $tainacan-input-background !important;
+        }
+
+        .record-checkbox {
+            position: absolute;
+            margin-left: 1.0rem;
+            margin-top: 9px;
+        }
+        .actions-area {
+            position: relative;
+            float: right;
+            top: -7px;
+            padding-right: 12px;
+            width: 80px;
+            display: flex;
+            justify-content: space-between;
+            visibility: hidden;
+            opacity: 0;
+            transition: visibility 0.2s, opacity 0.2s;
+        }
+        &:hover .actions-area {
+            visibility: visible;
+            opacity: 1.0;
+        }
+
+        .record-line {
+            height: 1px;
+            background-color: $tainacan-input-background;
+            margin-left: -44px;
+            margin-right: -44px;
+            opacity: 0;
+            visibility: hidden;
+        }
+        img {
+            width: 172px;
+            height: auto;
+            border-radius: 2px;
+        }
+        &:hover img {
+            border-radius: 0;
+        }
+        .metadata-title {
+            flex-shrink: 0;
+            padding: 0.75rem 4.75rem 0.75rem 2.75rem;
+            margin-bottom: -27px;
+            min-height: 42px;
+            font-size: 0.875rem !important; 
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            p {
+                font-size: 0.875rem !important; 
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+        &:hover .metadata-title {
+            background-color: $gray-hover !important;
+        }
+
+        .media {
+            width: 100%;
+
+            .list-metadata {
+                padding: 0.75rem 1.375rem;
+                flex: 1;
+                font-size: 0.6875rem;
+                color: gray;
+                overflow: hidden;
+                width: 100%;
+            
+                .metadata-label {
+                    font-size: 0.75rem;
+                    margin-bottom: 0.2rem;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    font-weight: 500;
+                    color: $gray-light;
+                }
+
+                .metadata-value {
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    margin-bottom: 1rem;
+                }
+   
+            }
+        }
+    
+    
+    }
+}
+
+
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index c4217b1f6..d17c24506 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -149,9 +149,9 @@ return apply_filters('tainacan-admin-i18n',[
 	'label_unique_value'                       => __( 'Unique value', 'tainacan' ),
 	'label_yes'                                => __( 'Yes', 'tainacan' ),
 	'label_no'                                 => __( 'No', 'tainacan' ),
-	'label_approved'                                 => __( 'Approved', 'tainacan' ),
+	'label_approved'                           => __( 'Approved', 'tainacan' ),
 	'label_collection_related'                 => __( 'Collection Related', 'tainacan' ),
-	'label_metadata_for_search'                  => __( 'Metadata for search', 'tainacan' ),
+	'label_metadata_for_search'                => __( 'Metadata for search', 'tainacan' ),
 	'label_allow_repeated_items'               => __( 'Allow repeated items', 'tainacan' ),
 	'label_select_taxonomy'                    => __( 'Select taxonomy', 'tainacan' ),
 	'label_select_taxonomy_input_type'         => __( 'Input type', 'tainacan' ),
@@ -162,10 +162,10 @@ return apply_filters('tainacan-admin-i18n',[
 	'label_attachment'                         => __( 'Attachment', 'tainacan' ),
 	'label_enabled'                            => __( 'Enabled', 'tainacan' ),
 	'label_disabled'                           => __( 'Disabled', 'tainacan' ),
-	'label_creation'                      => __( 'Creation', 'tainacan' ),
+	'label_creation'                      	   => __( 'Creation', 'tainacan' ),
 	'label_creation_date'                      => __( 'Creation date', 'tainacan' ),
 	'label_collection_items'                   => __( 'Collection Items', 'tainacan' ),
-	'label_collection_metadata'                  => __( 'Collection Metadata', 'tainacan' ),
+	'label_collection_metadata'                => __( 'Collection Metadata', 'tainacan' ),
 	'label_collection_filters'                 => __( 'Collection Filters', 'tainacan' ),
 	'label_parent_term'                        => __( 'Parent Term', 'tainacan' ),
 	'label_new_term'                           => __( 'New Term', 'tainacan' ),
@@ -181,7 +181,7 @@ return apply_filters('tainacan-admin-i18n',[
 	'label_empty_header_image'                 => __( 'Empty Header Image', 'tainacan' ),
 	'label_enable_cover_page'                  => __( 'Enable Cover Page', 'tainacan' ),
 	'label_cover_page'                         => __( 'Cover Page', 'tainacan' ),
-	'label_default_displayed_metadata'           => __( 'Default Displayed Metadata', 'tainacan' ),
+	'label_default_displayed_metadata'         => __( 'Default Displayed Metadata', 'tainacan' ),
 	'label_display'                            => __( 'Display on Listing', 'tainacan' ),
 	'label_display_default'                    => __( 'Display by default', 'tainacan' ),
 	'label_display_never'                      => __( 'Never displayed', 'tainacan' ),
@@ -224,6 +224,7 @@ return apply_filters('tainacan-admin-i18n',[
 	'label_grid'							   => __( 'Grid', 'tainacan' ),
 	'label_table'							   => __( 'Table', 'tainacan' ),
 	'label_cards'							   => __( 'Cards', 'tainacan' ),
+	'label_records'							   => __( 'Records', 'tainacan' ),
 	'label_visualization'					   => __( 'Visualization', 'tainacan' ),
 	'label_available_importers'				   => __( 'Available Importers', 'tainacan' ),
 	'label_target_collection'				   => __( 'Target Collection', 'tainacan' ),
diff --git a/src/theme-helper/class-tainacan-theme-helper.php b/src/theme-helper/class-tainacan-theme-helper.php
index 2d0dc20f4..b36339196 100644
--- a/src/theme-helper/class-tainacan-theme-helper.php
+++ b/src/theme-helper/class-tainacan-theme-helper.php
@@ -57,11 +57,18 @@ class Theme_Helper {
 		]);
 		$this->register_view_mode('cards', [
 			'label' => __('Cards view', 'tainacan'),
-			'dynamic_metadata' => true,
-			'description' => 'A cards view, flexible for metadata',
+			'dynamic_metadata' => false,
+			'description' => 'A cards view, displaying title, description, author name and creation date.',
 			'icon' => '<span class="icon"><i class="mdi mdi-view-list mdi-24px"></i></span>',
 			'type' => 'component'
 		]);
+		$this->register_view_mode('records', [
+			'label' => __('Records view', 'tainacan'),
+			'dynamic_metadata' => true,
+			'description' => 'A records view, similiar to cards, but flexible for metadata',
+			'icon' => '<span class="icon"><i class="mdi mdi-view-module mdi-24px"></i></span>',
+			'type' => 'component'
+		]);
 	}
 	
 	public function enqueue_scripts($force = false) {
diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue
index 7ec8ff158..8bc2452ac 100644
--- a/src/theme-helper/view-mode-cards.vue
+++ b/src/theme-helper/view-mode-cards.vue
@@ -18,7 +18,7 @@
                             }"
                             v-for="(column, index) in displayedMetadata"
                             :key="index"
-                            v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                            v-if="column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
                             class="metadata-title"
                             @click="goToItemPage(item)"
                             v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />                             
@@ -27,35 +27,42 @@
                     <div    
                             class="media"
                             @click="goToItemPage(item)">
-                        <a 
+
+                        <img 
                                 v-if="item.thumbnail != undefined"
-                                @click="goToItemPage(item)">
-                            <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
-                        </a>
+                                :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
 
                         <div class="list-metadata media-body">
-                            <span 
+                            <!-- Description -->
+                            <p 
+                                    v-tooltip="{
+                                        content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                        html: true,
+                                        autoHide: false,
+                                        placement: 'auto-start'
+                                    }"   
+                                    v-if="
+                                        column.metadata_type_object != undefined && 
+                                        (column.metadata_type_object.related_mapped_prop == 'description')"
                                     v-for="(column, index) in displayedMetadata"
                                     :key="index"
-                                    v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                <h3 
-                                        v-tooltip="{
-                                            content: column.name,
-                                            html: false,
-                                            autoHide: false,
-                                            placement: 'auto-start'
-                                        }"
-                                        class="metadata-label">{{ column.name }}</h3>
-                                <p 
-                                        v-tooltip="{
-                                            content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
-                                            html: true,
-                                            autoHide: false,
-                                            placement: 'auto-start'
-                                        }"
-                                        v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
-                                        class="metadata-value"/>
-                            </span>
+                                    class="metadata-description"
+                                    v-html="(item.metadata != undefined && item.metadata[column.slug] != undefined) ? getLimitedDescription(item.metadata[column.slug].value_as_string) : ''" /> 
+                            <br>
+                            <!-- Author and Creation Date-->
+                            <p 
+                                    v-tooltip="{
+                                        content: column.metadatum == 'row_author' || column.metadatum == 'row_creation',
+                                        html: false,
+                                        autoHide: false,
+                                        placement: 'auto-start'
+                                    }"   
+                                    v-for="(column, index) in displayedMetadata"
+                                    :key="index"
+                                    v-if="column.metadatum == 'row_author' || column.metadatum == 'row_creation'"
+                                    class="metadata-author-creation">   
+                                {{ column.metadatum == 'row_author' ? $i18n.get('info_created_by') + ' ' + item[column.slug] : $i18n.get('info_date') + ' ' + item[column.slug] }}
+                            </p>                          
                         </div>
                     </div>
                
@@ -90,6 +97,9 @@ export default {
             } else {
                 return metadata.value_as_html;
             }
+        },
+        getLimitedDescription(description) {
+            return description.length > 120 ? description.substring(0, 117) + '...' : description;
         }
     }
 }
diff --git a/src/theme-helper/view-mode-records.vue b/src/theme-helper/view-mode-records.vue
new file mode 100644
index 000000000..6dd2c7149
--- /dev/null
+++ b/src/theme-helper/view-mode-records.vue
@@ -0,0 +1,115 @@
+<template>
+    <div class="table-container">
+        <div class="table-wrapper">
+            <!-- RECORDS VIEW MODE -->
+            <div class="tainacan-records-container">
+                <div 
+                        :key="index"
+                        v-for="(item, index) of items"
+                        class="tainacan-record">
+                    
+                    <!-- Title -->
+                    <p 
+                            v-tooltip="{
+                                content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                html: true,
+                                autoHide: false,
+                                placement: 'auto-start'
+                            }"
+                            v-for="(column, index) in displayedMetadata"
+                            :key="index"
+                            v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                            class="metadata-title"
+                            @click="goToItemPage(item)"
+                            v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />                             
+                    
+                    <!-- Remaining metadata -->  
+                    <div    
+                            class="media"
+                            @click="goToItemPage(item)">
+                        <a 
+                                v-if="item.thumbnail != undefined"
+                                @click="goToItemPage(item)">
+                            <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                        </a>
+
+                        <div class="list-metadata media-body">
+                            <span 
+                                    v-for="(column, index) in displayedMetadata"
+                                    :key="index"
+                                    v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
+                                <h3 
+                                        v-tooltip="{
+                                            content: column.name,
+                                            html: false,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
+                                        class="metadata-label">{{ column.name }}</h3>
+                                <p 
+                                        v-tooltip="{
+                                            content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                            html: true,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
+                                        v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
+                                        class="metadata-value"/>
+                            </span>
+                        </div>
+                    </div>
+               
+                </div>
+            </div>
+        </div> 
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ViewModeRecords',
+    props: {
+        collectionId: Number,
+        displayedMetadata: Array,
+        items: Array,
+        isLoading: false
+    },
+    methods: {
+        goToItemPage(item) {
+            window.location.href = item.url;   
+        },
+        renderMetadata(itemMetadata, column) {
+
+            let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
+
+            if (!metadata) {
+                return '';
+            } else if (metadata.date_i18n) {
+                return metadata.date_i18n;
+            } else {
+                return metadata.value_as_html;
+            }
+        }
+    }
+}
+</script>
+
+<style  lang="scss" scoped>
+    $primary-lighter: #e6f6f8;
+    $primary-lighter-hover: #d1e6e6;
+    $tainacan-input-color: #1d1d1d;
+    $tainacan-input-background: #e5e5e5;
+    $tainacan-placeholder-color: #898d8f;
+    $gray-hover: #dcdcdc;
+    $gray-light: #898d8f; 
+
+    @import "../../src/admin/scss/_view-mode-records.scss";
+
+    .tainacan-records-container .tainacan-record .metadata-title {
+        padding: 0.75rem;
+        margin-bottom: 0px;
+    }
+</style>
+
+