aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzeroinformatique2020-10-18 01:12:07 +0200
committerGitHub2020-10-18 01:12:07 +0200
commit7f2231d86bb72c83f50693ec96526e7d9f47dfb8 (patch)
treed089d9f53460a4bc10df6ac1732e286e09e7a4d4
parent5e179a35b23282c4613582755de06a91f6991309 (diff)
downloadldgallery-7f2231d86bb72c83f50693ec96526e7d9f47dfb8.tar.gz
viewer: fix sort order button hitbox (#272)
* viewer: fix sort order button hitbox github: resolves #266 * viewer: fix sort order button hover color That was a conflict between the <a> tag's color and the .link color. I enforced .link priority over <a> * viewer: fix sort order button hover color TODO comment about Buefy issues
-rw-r--r--viewer/src/assets/scss/global.scss2
-rw-r--r--viewer/src/components/LdCommand.vue2
-rw-r--r--viewer/src/components/LdCommandSort.vue9
3 files changed, 9 insertions, 4 deletions
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index c82e1bc..06d975f 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -80,7 +80,7 @@ button svg + span {
80 color: $link; 80 color: $link;
81 cursor: pointer; 81 cursor: pointer;
82 text-decoration: none; 82 text-decoration: none;
83 &:hover { 83 &:hover, &:hover a {
84 color: $link-hover; 84 color: $link-hover;
85 } 85 }
86} 86}
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 2578055..5ba8266 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -78,7 +78,7 @@ export default class LdCommand extends Vue {
78 align-items: center; 78 align-items: center;
79 flex: 0 0 $layout-left; 79 flex: 0 0 $layout-left;
80 80
81 > a { 81 > * {
82 // normalise icon active boxes 82 // normalise icon active boxes
83 width: $layout-top; 83 width: $layout-top;
84 line-height: $layout-top; 84 line-height: $layout-top;
diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue
index cfaa5c1..4c246e6 100644
--- a/viewer/src/components/LdCommandSort.vue
+++ b/viewer/src/components/LdCommandSort.vue
@@ -19,8 +19,9 @@
19--> 19-->
20 20
21<template> 21<template>
22 <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body> 22 <!-- TODO: Find an alternative to this Buefy component; it causes focus and CSS issues -->
23 <a slot="trigger" class="link"> 23 <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body class="link" :class="$style.sortBtn">
24 <a slot="trigger">
24 <fa-icon icon="sort-amount-down" size="lg" /> 25 <fa-icon icon="sort-amount-down" size="lg" />
25 </a> 26 </a>
26 <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="sort"> 27 <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="sort">
@@ -52,4 +53,8 @@ export default class LdCommandSort extends Vue {
52.dropdownLabel { 53.dropdownLabel {
53 margin-left: 0.5em; 54 margin-left: 0.5em;
54} 55}
56.sortBtn > div[role="button"] {
57 width: 100%;
58 height: 100%;
59}
55</style> 60</style>