nextcloud · MarcelRobitaille · Mar 8, 2022 · Jul 20, 2022 · Jul 20, 2022 · Jul 20, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@
 ### Fixed
 - Prevent slow loading of recipes due to iteration over all files
   [#1072](https://github.com/nextcloud/cookbook/pull/1072) @christianlupus
+- Fix UI glitch with narrow devices
+  [#1091](https://github.com/nextcloud/cookbook/pull/1091) @MarcelRobitaille
 
 ### Maintenance
 - Add composer.json to version control to have unique installed dependency versions

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "sass-loader": "^12.6.0",
     "vue": "^2.6.11",
     "vue-i18n": "^8.17.1",
+    "vue-material-design-icons": "^5.0.0",
     "vue-router": "^3.1.6",
     "vue-showdown": "^2.4.1",
     "vuex": "^3.1.3"

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -0,0 +1,57 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
+// recommended is 48px
+// 44px is what we choose and have very good visual-to-usability ratio
+$clickable-area: 44px;
+
+// background icon size
+// also used for the scss icon font
+$icon-size: 16px;
+
+// icon padding for a $clickable-area width and a $icon-size icon
+// ( 44px - 16px ) / 2
+$icon-margin: math.div($clickable-area - $icon-size, 2);
+
+// transparency background for icons
+$icon-focus-bg: rgba(127, 127, 127, 0.25);
+
+// popovermenu arrow width from the triangle center
+$arrow-width: 9px;
+
+// opacities
+$opacity_disabled: 0.5;
+$opacity_normal: 0.7;
+$opacity_full: 1;
+
+// menu round background hover feedback
+// good looking on dark AND white bg
+$action-background-hover: rgba(127, 127, 127, 0.25);
+
+// various structure data used in the
+// `AppNavigation` component
+$header-height: 50px;
+$navigation-width: 300px;
+
+// mobile breakpoint
+$breakpoint-mobile: 1024px;
diff --git a/src/components/AppControls.vue b/src/components/AppControls.vue
@@ -63,38 +63,13 @@
                 :disable-drop="true"
             >
             </Breadcrumb>
-            <Breadcrumb
-                v-if="isLoading || isLoadingRecipe"
-                class="active"
-                :title="t('cookbook', 'Loading…')"
-                :disable-drop="true"
-            >
-            </Breadcrumb>
             <!-- Create new recipe -->
             <Breadcrumb
                 v-else-if="isCreate"
                 class="active"
                 :title="t('cookbook', 'New recipe')"
                 :disable-drop="true"
             />
-            <Breadcrumb
-                v-if="isEdit || isCreate"
-                class="no-arrow"
-                title=""
-                :disable-drop="true"
-            >
-                <ActionButton
-                    :icon="
-                        $store.state.savingRecipe
-                            ? 'icon-loading-small'
-                            : 'icon-checkmark'
-                    "
-                    class="action-button"
-                    :aria-label="t('cookbook', 'Save changes')"
-                    @click="saveChanges()"
-                    >{{ t("cookbook", "Save changes") }}</ActionButton
-                >
-            </Breadcrumb>
             <!-- View recipe -->
             <Breadcrumb
                 v-if="isRecipe"
@@ -103,86 +78,6 @@
                 :disable-drop="true"
             >
             </Breadcrumb>
-            <Breadcrumb
-                v-if="isRecipe"
-                class="no-arrow"
-                title=""
-                :disable-drop="true"
-            >
-                <ActionButton
-                    icon="icon-rename"
-                    class="action-button"
-                    :aria-label="t('cookbook', 'Edit recipe')"
-                    @click="goToRecipe($store.state.recipe.id)"
-                    >{{ t("cookbook", "Edit recipe") }}</ActionButton
-                >
-            </Breadcrumb>
-            <Breadcrumb
-                v-if="isEdit"
-                class="no-arrow"
-                title=""
-                :disable-drop="true"
-            >
-                <ActionButton
-                    :icon="
-                        $store.state.reloadingRecipe ===
-                        parseInt($route.params.id)
-                            ? 'icon-loading-small'
-                            : 'icon-history'
-                    "
-                    class="action-button"
-                    :aria-label="t('cookbook', 'Reload recipe')"
-                    @click="reloadRecipeEdit()"
-                    >{{ t("cookbook", "Reload recipe") }}</ActionButton
-                >
-            </Breadcrumb>
-            <Breadcrumb
-                v-if="isRecipe"
-                class="no-arrow"
-                title=""
-                :disable-drop="true"
-            >
-                <ActionButton
-                    :icon="
-                        $store.state.reloadingRecipe ===
-                        parseInt($route.params.id)
-                            ? 'icon-loading-small'
-                            : 'icon-history'
-                    "
-                    class="action-button"
-                    :aria-label="t('cookbook', 'Reload recipe')"
-                    @click="reloadRecipeView()"
-                    >{{ t("cookbook", "Reload recipe") }}</ActionButton
-                >
-            </Breadcrumb>
-            <Breadcrumb
-                v-if="isRecipe"
-                class="no-arrow"
-                title=""
-                :disable-drop="true"
-            >
-                <ActionButton
-                    icon="icon-category-office"
-                    class="action-button"
-                    :aria-label="t('cookbook', 'Print recipe')"
-                    @click="printRecipe()"
-                    >{{ t("cookbook", "Print recipe") }}</ActionButton
-                >
-            </Breadcrumb>
-            <Breadcrumb
-                v-if="isRecipe"
-                class="no-arrow"
-                title=""
-                :disable-drop="true"
-            >
-                <ActionButton
-                    icon="icon-delete"
-                    class="action-button"
-                    :aria-label="t('cookbook', 'Delete recipe')"
-                    @click="deleteRecipe()"
-                    >{{ t("cookbook", "Delete recipe") }}</ActionButton
-                >
-            </Breadcrumb>
             <!-- Is the app loading? -->
             <Breadcrumb
                 v-if="isLoading"
@@ -222,16 +117,83 @@
                 :disable-drop="true"
             />
         </Breadcrumbs>
+        <Actions>
+            <ActionButton
+                v-if="isRecipe"
+                key="reloadRecipeView"
+                :icon="
+                    $store.state.reloadingRecipe === parseInt($route.params.id)
+                        ? 'icon-loading-small'
+                        : 'icon-history'
+                "
+                :aria-label="t('cookbook', 'Reload recipe')"
+                @click="reloadRecipeView()"
+                >{{ t("cookbook", "Reload recipe") }}</ActionButton
+            >
+            <ActionButton
+                v-if="isEdit"
+                key="reloadRecipeEdit"
+                :icon="
+                    $store.state.reloadingRecipe === parseInt($route.params.id)
+                        ? 'icon-loading-small'
+                        : 'icon-history'
+                "
+                :aria-label="t('cookbook', 'Reload recipe')"
+                @click="reloadRecipeEdit()"
+                >{{ t("cookbook", "Reload recipe") }}</ActionButton
+            >
+            <ActionButton
+                v-if="isRecipe"
+                key="editRecipe"
+                icon="icon-rename"
+                :aria-label="t('cookbook', 'Edit recipe')"
+                @click="goToRecipe($store.state.recipe.id)"
+            >
+                {{ t("cookbook", "Edit recipe") }}
+            </ActionButton>
+            <ActionButton
+                v-if="isRecipe"
+                key="printRecipe"
+                icon="icon-category-office"
+                :aria-label="t('cookbook', 'Print recipe')"
+                @click="printRecipe()"
+                >{{ t("cookbook", "Print recipe") }}</ActionButton
+            >
+            <ActionButton
+                v-if="isRecipe"
+                key="deleteRecipe"
+                icon="icon-delete"
+                :aria-label="t('cookbook', 'Delete recipe')"
+                @click="deleteRecipe()"
+                >{{ t("cookbook", "Delete recipe") }}</ActionButton
+            >
+            <ActionButton
+                v-if="isEdit || isCreate"
+                key="save"
+                :icon="
+                    $store.state.savingRecipe
+                        ? 'icon-loading-small'
+                        : 'icon-checkmark'
+                "
+                :aria-label="t('cookbook', 'Save changes')"
+                :title="t('cookbook', 'Save changes')"
+                class="has-tooltip"
+                @click="saveChanges()"
+            />
+        </Actions>
     </div>
 </template>
 
 <script>
 import helpers from "cookbook/js/helper"
 
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
+/* import Actions from "@nextcloud/vue/dist/Components/Actions" */
 import ActionInput from "@nextcloud/vue/dist/Components/ActionInput"
 import Breadcrumbs from "@nextcloud/vue/dist/Components/Breadcrumbs"
+// import Breadcrumbs from "./Breadcrumbs"
 import Breadcrumb from "@nextcloud/vue/dist/Components/Breadcrumb"
+import Actions from "./ResponsiveActions.vue"
 
 export default {
     name: "AppControls",
@@ -240,6 +202,7 @@ export default {
         ActionInput,
         Breadcrumbs,
         Breadcrumb,
+        Actions,
     },
     data() {
         return {
@@ -373,8 +336,13 @@ export default {
 
     /* The height of the nextcloud header */
     top: var(--header-height);
+    display: flex;
+
+    /*width: calc(100% - 40px);*/
     width: 100%;
+    flex-direction: row;
     padding-left: 4px;
+    padding-left: 40px;
     border-bottom: 1px solid var(--color-border);
     background-color: var(--color-main-background);
 }
@@ -385,9 +353,18 @@ export default {
 }
 
 .breadcrumbs {
-    width: calc(100% - 60px);
-    flex-basis: 100%;
-    margin-left: 40px;
+    /* flex-basis: 100%; */
+    width: auto;
+    flex-grow: 0;
+    overflow-x: hidden;
+}
+
+.button-container {
+    display: flex;
+    flex-direction: row;
+    /*& /deep/ button.action-button {
+        padding-right: 0;
+    }*/
 }
 
 .no-arrow::before {
@@ -402,6 +379,9 @@ export default {
 </style>
 
 <style>
+.wrapper .breadcrumbs .breadcrumb__crumbs {
+    min-width: unset;
+}
 @media print {
     .vue-tooltip {
         display: none !important;