From 540c64306acf0d6db3df25dbab168f29211e3d54 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 27 Sep 2018 14:38:22 -0300
Subject: [PATCH] Replaces Flex by Grid on Card and Thumbnail view modes, due
 to lack of alignment on last items.

---
 src/admin/components/other/collections-modal.vue |  2 +-
 src/admin/scss/_view-mode-cards.scss             | 13 +++++++++----
 src/admin/scss/_view-mode-grid.scss              |  9 ++++-----
 src/js/store/modules/collection/actions.js       |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/admin/components/other/collections-modal.vue b/src/admin/components/other/collections-modal.vue
index 88b5c59a2..4612068cc 100644
--- a/src/admin/components/other/collections-modal.vue
+++ b/src/admin/components/other/collections-modal.vue
@@ -10,7 +10,7 @@
             <section class="tainacan-form">
                  <p>{{ $i18n.get('instruction_select_a_target_collection') }}</p>
                 <div 
-                        v-if="!isLoading"
+                        v-if="!isLoading" 
                         class="collection-types-container">
                     <div
                             class="collection-type"
diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss
index 96d2e216d..158e1a2cb 100644
--- a/src/admin/scss/_view-mode-cards.scss
+++ b/src/admin/scss/_view-mode-cards.scss
@@ -1,14 +1,19 @@
 .tainacan-cards-container {
     min-height: 50vh;
     padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    flex-shrink: 1;
+    display: -ms-grid;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 455px);
+    grid-gap: 0px;
     justify-content: space-evenly;
     animation-name: item-appear;
     animation-duration: 0.5s;
 
+    @media screen and (max-width: 480px) {    
+        width: 91.666666667%;  
+        grid-template-columns: repeat(auto-fill, 100%);
+    }
+
     .selected-card {
         background-color: $turquoise1;
         .metadata-title {
diff --git a/src/admin/scss/_view-mode-grid.scss b/src/admin/scss/_view-mode-grid.scss
index 383a403c8..b83e4bd16 100644
--- a/src/admin/scss/_view-mode-grid.scss
+++ b/src/admin/scss/_view-mode-grid.scss
@@ -1,10 +1,10 @@
 .tainacan-grid-container {
     min-height: 50vh;
     padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    flex-shrink: 1;
+    display: -ms-grid;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 285px);
+    grid-gap: 0px;
     justify-content: space-evenly;
     animation-name: item-appear;
     animation-duration: 0.5s;
@@ -18,7 +18,6 @@
         flex-basis: 0;
         margin: 15px;
         text-align: center;
-        height: 100%;
 
         &:hover {
             background-color: $gray2;
diff --git a/src/js/store/modules/collection/actions.js b/src/js/store/modules/collection/actions.js
index c176229e4..6d7a3bb66 100644
--- a/src/js/store/modules/collection/actions.js
+++ b/src/js/store/modules/collection/actions.js
@@ -108,7 +108,7 @@ export const deleteItem = ({ commit }, { itemId, isPermanently }) => {
 
     });
 };
-
+ 
 export const fetchCollections = ({commit} , { page, collectionsPerPage, status }) => {
     return new Promise((resolve, reject) => {
         let endpoint = '/collections?paged='+page+'&perpage='+collectionsPerPage+'&context=edit';