From c468bc345de6afc5c1b2e408f4a5f3f8e07d7bf4 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 2 Sep 2021 11:06:26 -0300
Subject: [PATCH] Alt text for thumbnail input from modal. Several css updates
 to item edition form.

---
 .../components/edition/item-edition-form.vue  | 221 +++++++++++++-----
 .../edition/metadatum-edition-form.vue        |  66 +++---
 .../metadata-types/compound/Compound.vue      |  16 ++
 src/views/admin/pages/singles/item-page.vue   |  74 +++---
 src/views/admin/scss/_modals.scss             |  17 +-
 src/views/admin/scss/_tabs.scss               |   6 +
 6 files changed, 276 insertions(+), 124 deletions(-)

diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index f12fedbdf..e38b2b9e4 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -492,38 +492,40 @@
                                                 <i class="tainacan-icon tainacan-icon-edit"/>
                                             </span>
                                         </a>
+                                        <a
+                                                v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
+                                                id="button-alt-text-thumbnail"
+                                                class="button is-rounded is-secondary"
+                                                :aria-label="$i18n.get('label_button_delete_thumb')"
+                                                @click="isThumbnailAltTextModalActive = true">
+                                            <span
+                                                    v-tooltip="{
+                                                        content: $i18n.get('label_thumbnail_alt'),
+                                                        autoHide: true,
+                                                        placement: 'bottom'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-text"/>
+                                            </span>
+                                        </a>
                                         <a
                                                 v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
                                                 id="button-delete-thumbnail"
                                                 class="button is-rounded is-secondary"
                                                 :aria-label="$i18n.get('label_button_delete_thumb')"
                                                 @click="deleteThumbnail()">
-                                        <span
-                                                v-tooltip="{
-                                                    content: $i18n.get('delete'),
-                                                    autoHide: true,
-                                                    placement: 'bottom'
-                                                }"
-                                                class="icon">
-                                            <i class="tainacan-icon tainacan-icon-delete"/>
-                                        </span>
+                                            <span
+                                                    v-tooltip="{
+                                                        content: $i18n.get('delete'),
+                                                        autoHide: true,
+                                                        placement: 'bottom'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-delete"/>
+                                            </span>
                                         </a>
                                     </div>
                                 </div>
-                                <div 
-                                        v-if="form.thumbnail_id"
-                                        class="thumbnail-alt-input">
-                                    <label class="label">{{ $i18n.get('label_thumbnail_alt') }}</label>
-                                    <help-button
-                                            :title="$i18n.get('label_thumbnail_alt')"
-                                            :message="$i18n.get('info_thumbnail_alt')"/>
-                                    <b-input
-                                            type="textarea" 
-                                            lazy
-                                            :placeholder="$i18n.get('instruction_thumbnail_alt')"
-                                            :value="form.thumbnail_alt ? form.thumbnail_alt : ''"
-                                            @input="onUpdateThumbnailAlt" />
-                                </div>
                             </div>
 
                             <!-- Hook for extra Form options -->
@@ -539,6 +541,44 @@
 
                         </div>
 
+                        <!-- Thumbnail Alternative Text Modal ----------------- -->
+                        <b-modal
+                                :can-cancel="false"
+                                :active.sync="isThumbnailAltTextModalActive"
+                                :width="640"
+                                scroll="keep"
+                                trap-focus
+                                aria-modal
+                                aria-role="dialog"
+                                custom-class="tainacan-modal">
+                            <div class="tainacan-modal-content">
+                                <div class="tainacan-modal-title">
+                                    <h2>{{ $i18n.get('label_thumbnail_alt') }}</h2>
+                                    <hr>
+                                </div>
+                                <b-input
+                                        type="textarea"
+                                        lazy
+                                        :placeholder="$i18n.get('instruction_thumbnail_alt')"
+                                        :value="form.thumbnail_alt ? form.thumbnail_alt : ''"
+                                        @input="onUpdateThumbnailAlt" />
+                                <p>{{ $i18n.get('info_thumbnail_alt') }}</p>
+
+                                <div class="field is-grouped form-submit">
+                                    <div 
+                                            style="margin-left: auto;"
+                                            class="control">
+                                        <button
+                                                id="button-submit-text-content-writing"
+                                                type="submit"
+                                                @click.prevent="isThumbnailAltTextModalActive = false"
+                                                class="button is-success">
+                                            {{ $i18n.get('finish') }}</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </b-modal>
+
                         <!-- Text Insert Modal ----------------- -->
                         <b-modal
                                 :can-cancel="false"
@@ -921,6 +961,7 @@ export default {
             activeTab: 0,
             isLoadingAttachments: false,
             metadataNameFilterString: '',
+            isThumbnailAltTextModalActive: false
         }
     },
     computed: {
@@ -1732,56 +1773,94 @@ export default {
                 background-color: var(--tainacan-secondary);
                 width: 100%;
             }
+
+            @media screen and (max-width: 769px) {
+                padding: 0 0.5em;
+            }
         }
 
         .tainacan-form > .columns {
             margin-left: var(--tainacan-one-column);
             margin-right: var(--tainacan-one-column);
-        }
 
-        .column.is-5 {
-            padding-left: var(--tainacan-one-column);
-            padding-right: var(--tainacan-one-column);
+            .column.is-5 {
+                padding-left: var(--tainacan-one-column);
+                padding-right: var(--tainacan-one-column);
 
-            .sticky-container {
-                position: relative;
-                position: sticky;
-                top: -25px;
-                margin: 3px 0;
-                max-height: calc(100vh - 202px);
-                overflow-y: auto;
-                overflow-x: hidden;
+                .sticky-container {
+                    position: relative;
+                    position: sticky;
+                    top: -25px;
+                    margin: 3px 0;
+                    max-height: calc(100vh - 202px);
+                    overflow-y: auto;
+                    overflow-x: hidden;
+                }
             }
+            .column.is-7 {
+                padding-left: var(--tainacan-one-column);
+                padding-right: 0;
 
-            @media screen and (max-width: 769px) {
-                max-width: 100%;
-            }
-        }
-        .column.is-7 {
-            padding-left: var(--tainacan-one-column);
-            padding-right: 0;
+                .columns {
+                    flex-wrap: wrap;
+                    justify-content: space-between;
 
-            .columns {
-                flex-wrap: wrap;
-                justify-content: space-between;
+                    .column {
+                        padding: 1em 12px 0 12px;
+                    }
+                }
 
-                .column {
-                    padding: 1em 12px 0 12px;
+                .field {
+                    padding: 12px 0px 12px 60px;
+                }
+                .tab-item>.field:last-child {
+                    margin-bottom: 187px;
+                }
+
+                @media screen and (max-width: 769px) {
+                    padding-right: var(--tainacan-one-column);
+                    max-width: 100%;
                 }
             }
 
-            .field {
-                padding: 12px 0px 12px 60px;
-            }
-            .tab-item>.field:last-child {
-                margin-bottom: 187px;
-            }
-
             @media screen and (max-width: 769px) {
-                padding-right: var(--tainacan-one-column);
-                max-width: 100%;
+                margin-left: 0;
+                margin-right: 0;
+                display: flex;
+                flex-direction: column-reverse;
+
+                &>.column.is-7 {
+                    padding-left: 0;
+                    padding-right: 0;
+                    max-width: 100%;
+                    widows: 100%;
+
+                    .field {
+                        padding-left: 16px;
+                        
+                        /deep/ .label {
+                            margin-left: 0;
+                        }
+                        /deep/ .collapse-handle {
+                            margin-left: -24px;
+                        }
+                    }
+                    .tab-item>.field:last-child {
+                        margin-bottom: 24px;
+                    }
+                    &>.columns {
+                        display: flex;
+                    }
+                }
+                &>.column.is-5 {
+                    max-width: 100%;
+                    widows: 100%;
+                    padding-left: 0.5em;
+                    padding-right: 0.5em;
+                }
             }
         }
+
         .b-tabs {
             overflow: hidden !important;
         }
@@ -1815,10 +1894,9 @@ export default {
     }
 
     .section-box {
-        background-color: var(--tainacan-background-color);
         padding: 0 var(--tainacan-one-column) 0 0;
         margin-top: 12px;
-        margin-bottom: 18px;
+        margin-bottom: 16px;
 
         ul {
             display: flex;
@@ -1877,8 +1955,8 @@ export default {
     #button-edit-thumbnail,
     #button-edit-document,
     #button-delete-thumbnail,
+    #button-alt-text-thumbnail,
     #button-delete-document {
-
         border-radius: 100px !important;
         max-height: 2.125em !important;
         max-width: 2.125em !important;
@@ -1886,7 +1964,7 @@ export default {
         min-width: 2.125em !important;
         padding: 0 !important;
         z-index: 99;
-        margin-left: 12px !important;
+        margin-left: 6px !important;
 
         .icon {
             display: inherit;
@@ -1922,7 +2000,7 @@ export default {
 
         .thumbnail-buttons-row {
             position: relative;
-            left: 61px;
+            left: 33px;
             bottom: 1.25em;
         }
 
@@ -2029,6 +2107,27 @@ export default {
                 color: var(--tainacan-secondary) !important;
             }
         }
+
+        @media screen and (max-width: 769px) {
+            padding: 16px 0.5em;
+            flex-wrap: wrap;
+            height: auto;
+
+            .update-info-section {
+                margin-left: auto;
+                margin-bottom: 0.5em;
+            }
+            .form-submission-footer {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+
+                .button {
+                    margin-left: 2px;
+                    margin-right: 2px;
+                }
+            }
+        }
     }
 
 </style>
diff --git a/src/views/admin/components/edition/metadatum-edition-form.vue b/src/views/admin/components/edition/metadatum-edition-form.vue
index 0218b0d32..e7a14d25e 100644
--- a/src/views/admin/components/edition/metadatum-edition-form.vue
+++ b/src/views/admin/components/edition/metadatum-edition-form.vue
@@ -68,34 +68,6 @@
                             @focus="clearErrors('description')"/>
                 </b-field>
 
-                <!-- Display on listing -->
-                <b-field
-                        v-if="editForm.parent == 0"
-                        :type="formErrors['display'] != undefined ? 'is-danger' : ''"
-                        :message="formErrors['display'] != undefined ? formErrors['display'] : ''" 
-                        :addons="false">
-                    <label class="label is-inline-block">
-                        {{ $i18n.get('label_display') }}
-                        <help-button
-                                :title="$i18n.getHelperTitle('metadata', 'display')"
-                                :message="$i18n.getHelperMessage('metadata', 'display')"/>
-                    </label>
-                    <b-select 
-                            expanded
-                            v-model="editForm.display"
-                            @input="clearErrors('display')">
-                        <option value="yes">
-                            {{ $i18n.get('label_display_default') }}
-                        </option>
-                        <option value="no">
-                            {{ $i18n.get('label_not_display') }}
-                        </option>
-                        <option value="never">
-                            {{ $i18n.get('label_display_never') }}
-                        </option>
-                    </b-select>
-                </b-field>
-
                 <b-field
                         v-if="editForm.parent == 0"
                         :addons="false"
@@ -133,6 +105,34 @@
                     </div>
                 </b-field>
 
+                <!-- Display on listing -->
+                <b-field
+                        v-if="editForm.parent == 0"
+                        :type="formErrors['display'] != undefined ? 'is-danger' : ''"
+                        :message="formErrors['display'] != undefined ? formErrors['display'] : ''" 
+                        :addons="false">
+                    <label class="label is-inline-block">
+                        {{ $i18n.get('label_display') }}
+                        <help-button
+                                :title="$i18n.getHelperTitle('metadata', 'display')"
+                                :message="$i18n.getHelperMessage('metadata', 'display')"/>
+                    </label>
+                    <b-select 
+                            expanded
+                            v-model="editForm.display"
+                            @input="clearErrors('display')">
+                        <option value="yes">
+                            {{ $i18n.get('label_display_default') }}
+                        </option>
+                        <option value="no">
+                            {{ $i18n.get('label_not_display') }}
+                        </option>
+                        <option value="never">
+                            {{ $i18n.get('label_display_never') }}
+                        </option>
+                    </b-select>
+                </b-field>
+
                 <b-field 
                         :addons="false">
                     <label class="label is-inline-block">{{ $i18n.get('label_insert_options') }}</label>
@@ -512,7 +512,7 @@
             white-space: normal;
         }
         .metadata-form-section {
-            margin: 0.5em 0;
+            margin: 0.75em 0 0.5em 0;
             position: relative;
             cursor: pointer;
 
@@ -541,6 +541,14 @@
         .metadata-form-section+.options-columns {
             padding-left: 1.75em;
         }
+
+        @media screen and (max-width: 768px) {
+            .options-columns {
+                -moz-column-count: 1;
+                -webkit-column-count: 1;
+                column-count: 1;
+            }
+        }
     }
     .form-submit {
         background-color: var(--tainacan-gray1);
diff --git a/src/views/admin/components/metadata-types/compound/Compound.vue b/src/views/admin/components/metadata-types/compound/Compound.vue
index 8c51b2412..b09b2f993 100644
--- a/src/views/admin/components/metadata-types/compound/Compound.vue
+++ b/src/views/admin/components/metadata-types/compound/Compound.vue
@@ -359,5 +359,21 @@
             font-size: 0.875em;
             font-style: italic;
         }
+
+        @media screen and (max-width: 769px) {
+            margin-left: 0px;
+            padding-left: 22px;
+
+            .field {
+                padding-left: 12px;
+                
+                /deep/ .label {
+                    margin-left: 0;
+                }
+                /deep/ .collapse-handle {
+                    margin-left: -28px;
+                }
+            }
+        }
     }
 </style>
\ No newline at end of file
diff --git a/src/views/admin/pages/singles/item-page.vue b/src/views/admin/pages/singles/item-page.vue
index b20f34446..2623fee68 100644
--- a/src/views/admin/pages/singles/item-page.vue
+++ b/src/views/admin/pages/singles/item-page.vue
@@ -599,46 +599,56 @@
             margin-bottom: 70px;
             margin-left: var(--tainacan-one-column);
             margin-right: var(--tainacan-one-column);
-        }
 
-        .column.is-5 {
-            padding-left: var(--tainacan-one-column);
-            padding-right: var(--tainacan-one-column);
+            .column.is-5 {
+                padding-left: var(--tainacan-one-column);
+                padding-right: var(--tainacan-one-column);
 
-            .sticky-container {
-                position: relative;
-                position: sticky;
-                top: -25px;
-                margin: 3px 0;
-                max-height: calc(100vh - 202px);
-                overflow-y: auto;
-                overflow-x: hidden;
-            }
+                .sticky-container {
+                    position: relative;
+                    position: sticky;
+                    top: -25px;
+                    margin: 3px 0;
+                    max-height: calc(100vh - 202px);
+                    overflow-y: auto;
+                    overflow-x: hidden;
+                }
 
-            @media screen and (max-width: 769px) {
-                width: 100%;
-            }
-        }
-        .column.is-7 {
-            padding-left: var(--tainacan-one-column);
-            padding-right: 0;
-
-            .columns {
-                flex-wrap: wrap;
-                justify-content: space-between;
-
-                .column {
-                    padding: 1em 12px 0 12px;
+                @media screen and (max-width: 769px) {
+                    width: 100%;
                 }
             }
-            .field { 
-                padding: 10px 0 14px 0px;
-                margin-left: -3px;
+            .column.is-7 {
+                padding-left: var(--tainacan-one-column);
+                padding-right: 0;
+
+                .columns {
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .column {
+                        padding: 1em 12px 0 12px;
+                    }
+                }
+                .field { 
+                    padding: 10px 0 14px 0px;
+                    margin-left: -3px;
+                }
+
+                @media screen and (max-width: 769px) {
+                    padding-right: var(--tainacan-one-column);
+                    width: 100%;
+                }
             }
 
             @media screen and (max-width: 769px) {
-                padding-right: var(--tainacan-one-column);
-                width: 100%;
+                margin-left: 0;
+                margin-right: 0;
+
+                 &>.column {
+                    padding-left: 0;
+                    padding-right: 0;
+                }
             }
         }
     
diff --git a/src/views/admin/scss/_modals.scss b/src/views/admin/scss/_modals.scss
index 848f1951b..8e58fd88b 100644
--- a/src/views/admin/scss/_modals.scss
+++ b/src/views/admin/scss/_modals.scss
@@ -17,7 +17,7 @@
 .tainacan-modal .modal-close {
     z-index: 99999;
     @media only screen and (max-width: 768px) {
-        &:before, &:after { background-color: #298596; }
+        &:before, &:after { background-color: var(--tainacan-white, white); }
     }
 }
 
@@ -86,7 +86,7 @@
     }
 
     .form-submit {
-        padding: 40px 0em 0.4em 0em !important;
+        padding: 40px 0em 0em 0em !important;
     }
 
     @media only screen and (max-width: 768px) {
@@ -223,6 +223,19 @@
             display: none !important;
         }
     }
+
+    @media screen and (max-width: 769px) {
+        left: 1.5em;
+        right: 1.5em;
+        top: 1.5em;
+        bottom: 1.5em;
+
+        .media-frame-title h1 {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
 }
 .media-modal .tainacan-item-attachments-modal button.check {
     display: none !important;
diff --git a/src/views/admin/scss/_tabs.scss b/src/views/admin/scss/_tabs.scss
index 3e22e1903..f6e668f75 100644
--- a/src/views/admin/scss/_tabs.scss
+++ b/src/views/admin/scss/_tabs.scss
@@ -43,4 +43,10 @@
     .tabs a:hover:not([href]) {
         text-decoration: none;
     }
+    @media screen and (max-width: 769px) {
+        .tab-content {         
+            padding-left: 0.5em;
+            padding-right: 00.5em;
+        }
+    }
 }
\ No newline at end of file