From b43a599a43f55fa1df4a2d0987fcb087d386b806 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 28 Aug 2018 13:35:37 -0300
Subject: [PATCH] Css adjustments.

---
 src/admin/admin.vue                           |  2 +-
 src/admin/components/lists/events-list.vue    |  2 +-
 src/admin/components/lists/items-list.vue     |  4 ++--
 src/admin/components/lists/processes-list.vue |  2 +-
 .../components/lists/taxonomies-list.vue      |  2 +-
 src/admin/pages/lists/items-page.vue          |  2 +-
 src/admin/scss/_buttons.scss                  |  7 +++++++
 src/admin/scss/_checkboxes.scss               |  2 +-
 .../scss/_dropdown-and-autocomplete.scss      |  6 ++++--
 src/admin/scss/_inputs.scss                   | 12 ++++++++---
 src/admin/scss/_modals.scss                   |  4 +++-
 .../scss/_repository-level-overrides.scss     |  2 +-
 src/admin/scss/_switches.scss                 |  2 +-
 src/admin/scss/_tables.scss                   |  6 ++++++
 src/admin/scss/_tags.scss                     |  2 ++
 src/admin/scss/_tainacan-form.scss            | 13 +++++-------
 src/admin/scss/_view-mode-cards.scss          | 20 +++++++++---------
 src/admin/scss/_view-mode-grid.scss           | 17 +++++++--------
 src/admin/scss/_view-mode-records.scss        | 21 ++++++++++++-------
 19 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/src/admin/admin.vue b/src/admin/admin.vue
index 68f9dc0ce..f9d323ad7 100644
--- a/src/admin/admin.vue
+++ b/src/admin/admin.vue
@@ -28,7 +28,7 @@
     import TainacanHeader from './components/navigation/tainacan-header.vue';
     import TainacanRepositorySubheader from './components/navigation/tainacan-repository-subheader.vue';
 
-    export default {
+    export default { 
         name: "AdminPage",
         data(){
             return {
diff --git a/src/admin/components/lists/events-list.vue b/src/admin/components/lists/events-list.vue
index cf5bb34c5..71009b9d8 100644
--- a/src/admin/components/lists/events-list.vue
+++ b/src/admin/components/lists/events-list.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="table-container">
          <div class="table-wrapper">
-            <table class="tainacan-table">
+            <table class="tainacan-table is-narrow">
                 <thead>
                     <tr>
                         <!-- Title -->
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index c583815d1..a55f96bb1 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -275,7 +275,7 @@
             <!-- RECORDS VIEW MODE -->
             <masonry 
                     :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
-                    :gutter="42"
+                    :gutter="30"
                     class="tainacan-records-container"
                     v-if="viewMode == 'records'">
                 <div 
@@ -691,7 +691,7 @@ export default {
             }
         },
         getLimitedDescription(description) {
-            let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 220;
+            let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
             return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
         }
     }
diff --git a/src/admin/components/lists/processes-list.vue b/src/admin/components/lists/processes-list.vue
index e065536fa..02890286d 100644
--- a/src/admin/components/lists/processes-list.vue
+++ b/src/admin/components/lists/processes-list.vue
@@ -35,7 +35,7 @@
         </div>
 -->
         <div class="table-wrapper">
-            <table class="tainacan-table">
+            <table class="tainacan-table is-narrow">
                 <thead>
                     <tr>
                         <!-- Checking list -->
diff --git a/src/admin/components/lists/taxonomies-list.vue b/src/admin/components/lists/taxonomies-list.vue
index 257c4d773..e560f1d74 100644
--- a/src/admin/components/lists/taxonomies-list.vue
+++ b/src/admin/components/lists/taxonomies-list.vue
@@ -36,7 +36,7 @@
         </div>
 
         <div class="table-wrapper">
-            <table class="tainacan-table">
+            <table class="tainacan-table is-narrow">
                 <thead>
                     <tr>
                         <!-- Checking list -->
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 8885aa5f8..897e0c883 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -571,7 +571,7 @@
                                 class="button is-secondary"
                                 :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
                             {{ $i18n.getFrom('items', 'add_new') }}
-                        </router-link>
+                        </router-link> 
                     </div>
                 </section>
 
diff --git a/src/admin/scss/_buttons.scss b/src/admin/scss/_buttons.scss
index c0b1efba3..d71055c14 100644
--- a/src/admin/scss/_buttons.scss
+++ b/src/admin/scss/_buttons.scss
@@ -9,6 +9,7 @@
     display: inline-flex !important;
     cursor: pointer;
     background-color: white;
+    text-shadow: none !important;
 
     &.is-secondary:hover, &.is-secondary:focus {
         background: $secondary !important;
@@ -39,6 +40,12 @@
         cursor: not-allowed !important;
         color: $gray4 !important;
         background-color: $gray2 !important;
+        text-shadow: none !important;
+    }
+    &.is-outlined[disabled], &.is-outlined:hover[disabled] {
+        border: 1px solid $gray2 !important;
+        color: $gray4 !important;
+        background-color: white !important;
     }
     &.is-white[disabled] {
         background-color: white !important;
diff --git a/src/admin/scss/_checkboxes.scss b/src/admin/scss/_checkboxes.scss
index 9cb7db9a0..f662ec03d 100644
--- a/src/admin/scss/_checkboxes.scss
+++ b/src/admin/scss/_checkboxes.scss
@@ -8,7 +8,7 @@
         width: 12px;
         height: 12px;
         flex-shrink: 0;
-        border-radius: 1px;
+        border-radius: 2px;
         display: inline-block;
         border: 1px solid $gray4;
         transition: background 150ms ease-out;
diff --git a/src/admin/scss/_dropdown-and-autocomplete.scss b/src/admin/scss/_dropdown-and-autocomplete.scss
index 6bfab6b38..ce9b9abc5 100644
--- a/src/admin/scss/_dropdown-and-autocomplete.scss
+++ b/src/admin/scss/_dropdown-and-autocomplete.scss
@@ -91,8 +91,10 @@
     }
 }
 .selected-list-box {
-    padding: 4px 0px;
-    border: 1px solid $gray2;
+    padding: 4px 6px 0px 6px;
+    border-color: $gray2;
+    border-width: 0px 1px 1px 1px;
+    border-style: solid;
     background-color: white;
     display: flex;
     font-size: 12px;
diff --git a/src/admin/scss/_inputs.scss b/src/admin/scss/_inputs.scss
index 9ff0268d2..89875bdba 100644
--- a/src/admin/scss/_inputs.scss
+++ b/src/admin/scss/_inputs.scss
@@ -1,18 +1,24 @@
 .input, .textarea {
     font-size: 14px;
-    border: none;
     border-radius: 1px !important;
     box-shadow: none !important;
+    background-color: white;
+    border: 1px solid $gray2;
+    color: $tainacan-input-color;
+    transition: background-color 0.1s, border 0.3s;
 
     &:focus, &:active {
         box-shadow: none !important;
         background-color: white;
-        border: 1px solid $gray2 !important;
-    }    
+        border: 1px solid $gray4 !important;
+    }  
     &[disabled] {
         color: $gray4 !important;
         background-color: $gray2 !important;
     }
+    &.readonly, &[readonly] {
+        background-color: white !important;
+    }
     &::placeholder,
     &::-ms-input-placeholder,
     &:-ms-input-placeholder,
diff --git a/src/admin/scss/_modals.scss b/src/admin/scss/_modals.scss
index 618f080c9..de8d6ae47 100644
--- a/src/admin/scss/_modals.scss
+++ b/src/admin/scss/_modals.scss
@@ -108,7 +108,9 @@
                 box-shadow: none !important;
                 display: inline-flex !important;
                 cursor: pointer;
-                font-size: 13px !important;
+                height: 30px !important;
+                line-height: 20px !important;
+                font-size: 14px !important;
             }
             .button.is-success {
                 border: none;
diff --git a/src/admin/scss/_repository-level-overrides.scss b/src/admin/scss/_repository-level-overrides.scss
index 3c77ef84d..39a02e83c 100644
--- a/src/admin/scss/_repository-level-overrides.scss
+++ b/src/admin/scss/_repository-level-overrides.scss
@@ -11,7 +11,7 @@
     }
 
     .is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus {
-        background-color: $blue4 !important;
+        background-color: $blue3 !important;
         color: white !important;
     }
     .is-secondary, .is-secondary:hover, .is-secondary:focus {
diff --git a/src/admin/scss/_switches.scss b/src/admin/scss/_switches.scss
index e20a2e276..4f6e20451 100644
--- a/src/admin/scss/_switches.scss
+++ b/src/admin/scss/_switches.scss
@@ -13,7 +13,7 @@
         }
     } 
     &:hover input[type="checkbox"]:checked + .check {
-        background-color: $turquoise2;
+        background-color: transparent;
     }
 
     input[type="checkbox"]:checked + .check {
diff --git a/src/admin/scss/_tables.scss b/src/admin/scss/_tables.scss
index e3d8877b7..2c155077f 100644
--- a/src/admin/scss/_tables.scss
+++ b/src/admin/scss/_tables.scss
@@ -20,6 +20,12 @@
             border-collapse: separate;
             border-spacing: 0;
 
+            &.is-narrow {
+                tbody td {
+                    height: 42px;
+                }
+            }
+
             .checkbox-cell {
                 min-width: 38px;
                 width: 38px;
diff --git a/src/admin/scss/_tags.scss b/src/admin/scss/_tags.scss
index 8cddb6849..e07fa3d8e 100644
--- a/src/admin/scss/_tags.scss
+++ b/src/admin/scss/_tags.scss
@@ -24,9 +24,11 @@
         &.is-delete {
             border-radius: 50px !important;
             border-radius: 50px !important;
+            color: $gray4;
 
             &:hover {
                 background-color: white !important;
+                color: $gray5;
             }
         }
     }
diff --git a/src/admin/scss/_tainacan-form.scss b/src/admin/scss/_tainacan-form.scss
index f8d32d13c..d7db7cc68 100644
--- a/src/admin/scss/_tainacan-form.scss
+++ b/src/admin/scss/_tainacan-form.scss
@@ -38,16 +38,10 @@
             color: $danger;
         }
     }
-    .input, .textarea {
-        background-color: white;
-        border: 1px solid $gray2;
-        color: $tainacan-input-color;
-        transition: background-color 0.1s;
-
+    .input, .textarea { 
         &.is-danger {
-          background-color: #e7dede;  
+          background-color: $red1;  
         }
-
     }
     .control{
         &.has-icons-right {
@@ -111,6 +105,9 @@
         }
     }
     .upload-draggable {
+        color: $gray4;
+        transition: color 0.2s background-color 0.2s;
         border-radius: 0 !important;
+        border-color: $gray2;
     }
 }
\ No newline at end of file
diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss
index 721523e0a..7041a0b42 100644
--- a/src/admin/scss/_view-mode-cards.scss
+++ b/src/admin/scss/_view-mode-cards.scss
@@ -19,11 +19,11 @@
     .tainacan-card {
         padding: 0px;
         flex-basis: 0;
-        margin: 0.75rem;
+        margin: 15px;
         max-width: 425px;
         min-width: 425px;
-        min-height: 218px;
-        max-height: 218px;
+        min-height: 210px;
+        max-height: 210px;
         cursor: pointer;
 
         @media screen and (max-width: 480px) {
@@ -45,12 +45,12 @@
         .card-checkbox {
             position: absolute;
             margin-left: 1.0rem;
-            margin-top: 9px;
+            margin-top: 7px;
         }
         .actions-area {
             position: relative;
             float: right;
-            top: -7px;
+            top: -5px;
             padding-right: 12px;
             width: 80px;
             display: flex;
@@ -73,15 +73,15 @@
             visibility: hidden;
         }
         img {
-            width: 172px;
-            height: 172px;
+            width: 170px;
+            height: 170px;
             border-radius: 0px;
         }
         .metadata-title {
             flex-shrink: 0;
-            padding: 0.75rem 4.75rem 0.75rem 2.75rem;
+            padding: 0.5rem 4.75rem 0.5rem 2.75rem;
             margin-bottom: -27px;
-            min-height: 42px;
+            min-height: 40px;
             font-size: 0.875rem !important; 
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -105,7 +105,7 @@
                 padding: 0.75rem 1.375rem;
                 flex: 1;
                 width: 100%;
-                height: 172px;
+                height: 170px;
                 color: $gray4;
 
                 p.metadata-description {
diff --git a/src/admin/scss/_view-mode-grid.scss b/src/admin/scss/_view-mode-grid.scss
index 1f3c2ff93..d29b062a7 100644
--- a/src/admin/scss/_view-mode-grid.scss
+++ b/src/admin/scss/_view-mode-grid.scss
@@ -14,9 +14,9 @@
     }
 
     .tainacan-grid-item {
-        max-width: 258px;
+        max-width: 255px;
         flex-basis: 0;
-        margin: 1rem 1.5rem 1.5rem 1.5rem;
+        margin: 15px;
         text-align: center;
         height: 100%;
 
@@ -33,11 +33,12 @@
             position: relative;
             float: right;
             width: 100%;
+            height: 30px;
             display: flex;
             justify-content: flex-end;
             visibility: hidden;
             opacity: 0;
-            padding: 8px;
+            padding: 3px 8px;
             transition: visibility 0.2s, opacity 0.2s;
             margin-top: -43px;
             background-color: $gray2;
@@ -51,16 +52,12 @@
         &:hover .actions-area { 
             visibility: visible;
             opacity: 1.0;
-        }
-        &.selected-grid-item {
-            .actions-area {
-                background-color: $turquoise1;
-            }
+            background-color: $gray2 !important;
         }
 
         img {
-            min-width: 258px;
-            max-width: 258px;
+            min-width: 255px;
+            max-width: 255px;
             height: auto;
             border-radius: 0px;
             margin-bottom: -5px;
diff --git a/src/admin/scss/_view-mode-records.scss b/src/admin/scss/_view-mode-records.scss
index d58eee301..08a73868a 100644
--- a/src/admin/scss/_view-mode-records.scss
+++ b/src/admin/scss/_view-mode-records.scss
@@ -14,6 +14,9 @@
         .metadata-title {
             background-color: $turquoise2;
         }
+        .media {
+            background-color: $turquoise1;
+        }
     }
 
     .tainacan-record {
@@ -35,12 +38,12 @@
         .record-checkbox {
             position: absolute;
             margin-left: 1.0rem;
-            margin-top: 9px;
+            margin-top: 7px;
         }
         .actions-area {
             position: relative;
             float: right;
-            top: -7px;
+            top: -5px;
             padding-right: 12px;
             width: 80px;
             display: flex;
@@ -64,7 +67,7 @@
         }
         .thumbnail {
             float: right;
-            margin: 0 0 1.5rem 1.5rem;
+            margin: 0 0 25px 25px;
         }
         img {
             width: 120px;
@@ -73,9 +76,9 @@
         }
         .metadata-title {
             flex-shrink: 0;
-            padding: 0.75rem 4.75rem 0.75rem 2.75rem;
+            padding: 0.5rem 4.75rem 0.5rem 2.75rem;
             margin-bottom: -27px;
-            min-height: 42px;
+            min-height: 40px;
             font-size: 0.875rem !important; 
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -83,6 +86,7 @@
             color: black;
 
             p {
+                line-height: 1.7;
                 font-size: 0.875rem !important; 
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -93,12 +97,15 @@
         &:hover .metadata-title {
             background-color: $gray2 !important;
         }
+        &:hover .media {
+            background-color: $gray1 !important;
+        }
 
         .media {
             width: 100%;
 
             .list-metadata {
-                padding: 0.75rem 1.375rem;
+                padding: 25px;
                 flex: 1;
                 font-size: 0.6875rem;
                 color: $gray4;
@@ -107,12 +114,12 @@
             
                 .metadata-label {
                     font-size: 0.75rem;
-                    margin-bottom: 0.2rem;
                     font-weight: 700;
                     color: #454647;
                 }
 
                 .metadata-value {
+                    font-size: 0.75rem;
                     margin-bottom: 1rem;
                     color: $gray4;
                 }