3 files changed, 54 insertions, 25 deletions

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 171e96a..ebefc50 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -45,7 +45,6 @@ export default class LdBreadcrumb extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .ld-breadcrumb {
-  border-left: 1px solid $disabled-color;
   padding-left: 15px;
   display: flex;
   list-style: none;
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..7590ea7 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -19,16 +20,21 @@
 
 <template>
   <div class="flex command-btns">
-    <div class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
-      <fa-icon :icon="commandTagsIcon()" size="lg" />
-    </div>
-    <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
+    <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
+      <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
+    </a>
+    <router-link
+      to="/"
+      class="command-secondary"
+      :class="{'disabled': isRoot()}"
+      :title="$t('command.home')"
+    >
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <div class="link" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
-    </div>
-    <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
+    </a>
+    <router-link :class="{'disabled': isRoot()}" :title="$t('command.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
     </router-link>
@@ -41,8 +47,8 @@ import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  commandTagsIcon(): string {
-    return this.$uiStore.fullWidth ? "tags" : "window-close";
+  commandToggleSearchPanelIcon(): string {
+    return this.$uiStore.fullWidth ? "search" : "angle-double-left";
   }
 
   isRoot(): boolean {
@@ -57,18 +63,30 @@ export default class LdCommand extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/_buefy_variables.scss";
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
+  background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;
-  width: $layout-left;
-  > * {
-    // Unify the minor size differences between icons
-    width: 26px;
-    height: 26px;
-    margin-top: 2px;
+  flex: 0 0 $layout-left;
+
+  > a {
+    // normalise icon active boxes
+    width: $layout-top;
+    line-height: $layout-top;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  @media only screen and (max-width: $tablet) {
+    flex: 0 1;
+
+    > .command-secondary {
+      display: none;
+    }
   }
 }
 </style>
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 0a293a9..395611f 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -20,17 +21,28 @@
 <template>
   <div>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
-      <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
-        <fa-icon icon="minus" />
-      </div>
-      <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
-        <fa-icon icon="plus" />
-      </div>
-      <div
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.substraction')"
+        @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
+      ><fa-icon icon="minus" alt="[-]" /></a>
+
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.addition')"
+        @click="add(Operation.ADDITION, proposed.rawTag)"
+      ><fa-icon icon="plus" alt="[+]" /></a>
+
+      <a
         class="operation-tag link"
+        :title="$t('tag-propositions.intersection')"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
-      >{{proposed.rawTag}}</div>
-      <div class="disabled">x{{proposed.count}}</div>
+      >{{proposed.rawTag}}</a>
+
+      <div
+        class="disabled"
+        :title="$t('tag-propositions.item-count')"
+      >{{proposed.count}}</div>
     </div>
   </div>
 </template>