aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpacien2020-02-08 18:15:50 +0100
committerpacien2020-02-08 18:15:50 +0100
commita286e822c37a17efc80e99b13d5cc02fef4ee138 (patch)
treef361bc62a3b6a0049b0acb976080f361440668fb
parent4cae756b5c2a3544675eb5eb011b9a90e003ae6b (diff)
downloadldgallery-a286e822c37a17efc80e99b13d5cc02fef4ee138.tar.gz
viewer: ldcommand: reduce command bar on mobile
Hiding secondary buttons and allowing the bar to collapse. GitHub: closes #100
-rw-r--r--viewer/src/components/LdCommand.vue13
1 files changed, 11 insertions, 2 deletions
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8257c1f..eeab89f 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,10 +23,10 @@
23 <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()"> 23 <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
24 <fa-icon :icon="commandTagsIcon()" size="lg" /> 24 <fa-icon :icon="commandTagsIcon()" size="lg" />
25 </a> 25 </a>
26 <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')"> 26 <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('title.home')">
27 <fa-icon icon="home" size="lg" /> 27 <fa-icon icon="home" size="lg" />
28 </router-link> 28 </router-link>
29 <a class="link" :title="$t('title.back')" @click="$router.go(-1)"> 29 <a class="link command-secondary" :title="$t('title.back')" @click="$router.go(-1)">
30 <fa-icon icon="arrow-left" size="lg" /> 30 <fa-icon icon="arrow-left" size="lg" />
31 </a> 31 </a>
32 <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()"> 32 <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
@@ -58,6 +58,7 @@ export default class LdCommand extends Vue {
58</script> 58</script>
59 59
60<style lang="scss"> 60<style lang="scss">
61@import "@/assets/scss/_buefy_variables.scss";
61@import "@/assets/scss/theme.scss"; 62@import "@/assets/scss/theme.scss";
62 63
63.command-btns { 64.command-btns {
@@ -73,5 +74,13 @@ export default class LdCommand extends Vue {
73 text-align: center; 74 text-align: center;
74 vertical-align: middle; 75 vertical-align: middle;
75 } 76 }
77
78 @media only screen and (max-width: $tablet) {
79 flex: 0 1;
80
81 > .command-secondary {
82 display: none;
83 }
84 }
76} 85}
77</style> 86</style>