Merge pull request #655 from tainacan/feature/647

Feature/647

src/views/admin/admin.vue

@@ -4,6 +4,7 @@
             class="has-mounted columns is-fullheight"
             :class="{ 
                 'tainacan-admin-iframe-mode': isIframeMode, 
+                'tainacan-admin-mobile-mode': isMobileMode, 
                 'tainacan-admin-read-mode': isReadMode
             }">
         <template v-if="activeRoute == 'HomePage'">
@@ -11,7 +12,7 @@
             <router-view /> 
         </template>
         <template v-else>
-            <template v-if="!isIframeMode">
+            <template v-if="!isIframeMode && !isMobileMode">
                 <primary-menu 
                         :active-route="activeRoute"
                         :is-menu-compressed="isMenuCompressed"/>
@@ -68,11 +69,14 @@
             }
         },
         computed: {
-            isReadMode () {
+            isReadMode() {
                 return this.$route && this.$route.query && this.$route.query.readmode;
             },
-            isIframeMode () {
+            isIframeMode() {
                 return this.$route && this.$route.query && this.$route.query.iframemode;
+            },
+            isMobileMode() {
+                return this.$route && this.$route.query && this.$route.query.mobilemode;
             }
         },
         watch: {
@@ -128,8 +132,10 @@
         height: 100%;
         margin-bottom: 0px;
         margin-top: 0px;
+    }  
 
     @media screen and (max-width: 769px) {
+        .is-fullheight:not(.tainacan-admin-mobile-mode):not(.tainacan-admin-collection-mobile-mode) {
             height: auto;
         }
     }

src/views/admin/components/edition/item-bulk-edition-form.vue

@@ -4,7 +4,9 @@
                 :is-full-page="false"
                 :active.sync="isLoading"
                 :can-cancel="false"/>
-        <div class="tainacan-page-title">
+        <div 
+                v-if="!isMobileMode"
+                class="tainacan-page-title">
             <h1>{{ $i18n.get('add_items_bulk') }}</h1>
             <a 
                     @click="$router.go(-1)"
@@ -207,6 +209,9 @@ export default {
         },
         collection() {
             return this.getCollection()
+        },
+        isMobileMode() {
+            return this.$route && this.$route.query && this.$route.query.mobilemode;
         }
     },
     created() {

src/views/admin/components/edition/item-edition-form.vue

@@ -5,7 +5,9 @@
                 :active.sync="isLoading"
                 :can-cancel="false"/>
 
-        <div class="tainacan-page-title">
+        <div 
+                v-if="!isMobileMode || (isMobileMode && isEditingMetadataIframeMode)"
+                class="tainacan-page-title">
             <h1 v-if="isCreatingNewItem">
                 <span
                         v-if="(item != null && item != undefined && item.status != undefined && !isLoading)"
@@ -54,7 +56,9 @@
                         <div class="columns">
 
                             <!-- Collection -------------------------------- -->
-                            <div class="column is-narrow">
+                            <div 
+                                    v-if="!isMobileMode"
+                                    class="column is-narrow">
                                 <div class="section-label">
                                     <label>{{ $i18n.get('collection') }}</label>
                                 </div>
@@ -1058,6 +1062,9 @@ export default {
         },
         isEditingMetadataIframeMode() {
             return this.$route.query && this.$route.query.editingmetadata;
+        },
+        isMobileMode() {
+            return this.$route.query && this.$route.query.mobilemode;
         }
     },
     watch: {
@@ -1879,6 +1886,7 @@ export default {
                 padding-left: var(--tainacan-one-column);
                 padding-right: var(--tainacan-one-column);
 
+                @media screen and (min-width: 770px) {
                     .sticky-container {
                         position: relative;
                         position: sticky;
@@ -1889,6 +1897,7 @@ export default {
                         overflow-x: hidden;
                     }
                 }
+            }
             .column.is-7 {
                 padding-left: var(--tainacan-one-column);
                 padding-right: 0;
@@ -1928,7 +1937,7 @@ export default {
                     widows: 100%;
 
                     .field {
-                        padding-left: 16px;
+                        padding-left: 18px;
                         
                         /deep/ .label {
                             margin-left: 0;

src/views/admin/components/lists/related-items-list.vue

@@ -137,7 +137,7 @@
                     <iframe 
                             width="100%"
                             style="height: 85vh"
-                            :src="adminFullURL + $routerHelper.getItemEditPath(collectionId, editItemId) + '?iframemode=true&editingmetadata=' + editMetadataId" />
+                            :src="adminFullURL + $routerHelper.getItemEditPath(collectionId, editItemId) + '?iframemode=true&editingmetadata=' + editMetadataId + (isMobileMode ? '&mobilemode=true' : '')" />
                 </b-modal>
             </div>
         </div>
@@ -170,6 +170,9 @@
             },
             displayLoading() {
                 return this.isLoading || this.isUpdatingRelatedItems;
+            },
+            isMobileMode() {
+                return this.$route && this.$route.query && this.$route.query.mobilemode;
             }
         },
         watch: {

src/views/admin/components/metadata-types/relationship/Relationship.vue

@@ -178,9 +178,9 @@
             },
             itemModalSrc() {
                 if (this.editingItemId)
-                    return this.adminFullURL + this.$routerHelper.getItemEditPath(this.collectionId, this.editingItemId) + '?iframemode=true';
+                    return this.adminFullURL + this.$routerHelper.getItemEditPath(this.collectionId, this.editingItemId) + '?iframemode=true' + (this.isMobileMode ? '&mobilemode=true' : '');
                 else
-                    return this.adminFullURL + this.$routerHelper.getNewItemPath(this.collectionId) + '?iframemode=true&newmetadatumid=' + this.itemMetadatum.metadatum.metadata_type_options.search + '&newitemtitle=' + this.searchQuery;
+                    return this.adminFullURL + this.$routerHelper.getNewItemPath(this.collectionId) + '?iframemode=true&newmetadatumid=' + this.itemMetadatum.metadatum.metadata_type_options.search + '&newitemtitle=' + this.searchQuery + (this.isMobileMode ? '&mobilemode=true' : '');
             },
             relationshipInputId() {
                 if (this.itemMetadatum && this.itemMetadatum.metadatum)
@@ -195,6 +195,9 @@
                        this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata &&
                        this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.length &&
                        this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.length > 1;
+            },
+            isMobileMode() {
+                return this.$route && this.$route.query && this.$route.query.mobilemode;
             }
         },
         watch: {

src/views/admin/pages/singles/collection-page.vue

@@ -1,7 +1,9 @@
 <template>
-    <div class="columns is-fullheight">
+    <div 
+            class="columns is-fullheight"
+            :class="{ 'tainacan-admin-collection-mobile-mode': isMobileMode }">
         <section class="column is-secondary-content">
-            <tainacan-collection-subheader />
+            <tainacan-collection-subheader v-if="!isIframeMode && !isMobileMode" />
 
             <router-view
                     id="collection-page-container"
@@ -25,6 +27,14 @@ export default {
             collectionId: Number
         }
     },
+    computed: {
+        isIframeMode() {
+            return this.$route && this.$route.query && this.$route.query.iframemode;
+        },
+        isMobileMode() {
+            return this.$route && this.$route.query && this.$route.query.mobilemode;
+        }
+    },
     watch: {
         '$route' (to, from) {
             if (!this.isRepositoryLevel && from.path != undefined && to.path != from.path && this.collectionId != this.$route.params.collectionId) {
@@ -51,8 +61,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
-
 

src/views/admin/scss/_iframe_special_modes_overrides.scss

@@ -1,5 +1,5 @@
-// IFRAME MODE AND READ MODE
-// Used on gutenberg blocks, hiding content not relevant to be rendered inside iframe
+// IFRAME MODE
+// Used on gutenberg block modals, hiding content not relevant to be rendered inside iframe
 #tainacan-admin-app.tainacan-admin-iframe-mode {
     #primary-menu,
     #menu-compress-button,
@@ -30,6 +30,9 @@
         }
     }
 }
+
+// READ MODE
+// Used on gutenberg block modals, hiding content related to selecting the items
 #tainacan-admin-app.tainacan-admin-read-mode {
 
     #items-list-area {
@@ -58,3 +61,36 @@
         }
     }
 }
+
+// MOBILE MODE
+// Used on the mobile app, to show only necessary elements inside the webview
+#tainacan-admin-app.tainacan-admin-mobile-mode {
+    #primary-menu,
+    #menu-compress-button,
+    #tainacan-header,
+    #tainacan-repository-subheader,
+    #tainacan-subheader {
+        display: none;
+        visibility: hidden;
+    }
+    #repository-container .is-secondary-content {
+        margin-top: 0;
+        height: 100%;
+        
+        .page-container-small {
+            height: 100%;
+
+            #item-creation-options-dropdown,
+            #items-list-results .selection-control .field {
+                display: none;
+                visibility: hidden;
+            }
+
+            @media screen and (min-width: 769px) {
+                #filters-modal {
+                    padding-left: 0em;
+                }
+            }
+        }
+    }
+}

src/views/admin/scss/tainacan-admin.scss

@@ -29,7 +29,7 @@
 @import "../scss/_notices.scss";
 @import "../scss/_filters-menu-modal.scss";
 @import "../scss/_repository-level-overrides.scss";
-@import "../scss/_iframe_read_mode_overrides.scss";
+@import "../scss/_iframe_special_modes_overrides.scss";
 @import "../scss/_custom_variables.scss";
 
 // Clears wordpress content