diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue
index c9e82322..37cc07ad 100644
--- a/assets/components/entities/entity.vue
+++ b/assets/components/entities/entity.vue
@@ -58,7 +58,7 @@
>
@@ -133,8 +133,9 @@ async function fetchEntity() {
}
function updateScroll() {
- this.unscrolled = this.$refs.children.scrollLeft === 0;
- this.scrolled = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
+ this.scrollable = this.$refs.children.scrollWidth > this.$refs.children.clientWidth;
+ this.scrollAtStart = this.$refs.children.scrollLeft === 0;
+ this.scrollAtEnd = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
}
function scroll(direction) {
@@ -175,8 +176,9 @@ export default {
totalCount: null,
limit: 10,
expanded: false,
- unscrolled: true,
- scrolled: false,
+ scrollable: true,
+ scrollAtStart: true,
+ scrollAtEnd: false,
};
},
watch: {
@@ -298,9 +300,14 @@ export default {
top: 0;
bottom: 0;
- &.unscrolled,
- &.scrolled {
+ &.scroll-start ,
+ &.scroll-end {
+ /* use over v-show so button stays visible while still hovered */
display: none;
+
+ .icon {
+ fill: var(--lighten-weak);
+ }
}
.icon {
@@ -311,8 +318,10 @@ export default {
display: flex;
cursor: pointer;
- .icon {
- fill: var(--text-light);
+ &:not(.scroll-start):not(.scroll-end) {
+ .icon {
+ fill: var(--text-light);
+ }
}
}
}
diff --git a/assets/components/tags/tile.vue b/assets/components/tags/tile.vue
new file mode 100644
index 00000000..ddea41a1
--- /dev/null
+++ b/assets/components/tags/tile.vue
@@ -0,0 +1,107 @@
+
+
+ {{ tag.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/icons/arrow-left2.svg b/assets/img/icons/arrow-left2.svg
new file mode 100644
index 00000000..af13b97a
--- /dev/null
+++ b/assets/img/icons/arrow-left2.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/assets/img/icons/arrow-right2.svg b/assets/img/icons/arrow-right2.svg
new file mode 100644
index 00000000..b9fc62d3
--- /dev/null
+++ b/assets/img/icons/arrow-right2.svg
@@ -0,0 +1,5 @@
+
+