Changed more tags button design.

This commit is contained in:
DebaucheryLibrarian 2021-02-05 02:49:43 +01:00
parent 980f66fb33
commit e0e584658e
2 changed files with 24 additions and 15 deletions

View File

@ -24,18 +24,21 @@
v-if="overflowing && !expanded"
class="tags-more"
@click="expanded = true"
>More tags</button>
>more tags</button>
<button
v-if="expanded"
class="tags-more"
@click="expanded = false"
>Fewer tags</button>
>fewer tags</button>
</div>
</template>
<script>
import { nextTick } from 'vue';
function updateOverflowing() {
nextTick(() => {
const containerBoundaries = this.$refs.tags.getBoundingClientRect();
const containerBottom = containerBoundaries.top + containerBoundaries.height;
@ -44,6 +47,7 @@ function updateOverflowing() {
return tagBoundaries.top > containerBottom;
});
});
}
function mounted() {
@ -68,6 +72,9 @@ export default {
expanded: false,
};
},
watch: {
expanded: updateOverflowing,
},
mounted,
beforeUnmount,
methods: {
@ -88,6 +95,7 @@ export default {
.tags {
max-height: 4.6rem;
padding: 2px 1rem 0 1rem;
text-align: left;
overflow: hidden;
&.expanded {
@ -111,19 +119,18 @@ export default {
}
.tags-more {
width: 100%;
background: none;
background: var(--shadow-touch);
padding: .5rem 1rem;
border: solid 1px var(--shadow-hint);
border-left: none;
border-right: none;
margin: .25rem 0 .5rem 0;
border: none;
margin: .25rem 0 .5rem 1rem;
color: var(--shadow);
font-size: .9rem;
font-size: .8rem;
font-weight: bold;
&:hover {
cursor: pointer;
background: var(--shadow-hint);
color: var(--shadow-strong);
cursor: pointer;
}
}
</style>

View File

@ -61,6 +61,7 @@ $breakpoint4: 1500px;
--shadow-modest: rgba(0, 0, 0, .3);
--shadow-weak: rgba(0, 0, 0, .2);
--shadow-hint: rgba(0, 0, 0, .1);
--shadow-touch: rgba(0, 0, 0, .05);
--highlight: rgba(255, 255, 255, .5);
--highlight-extreme: rgba(255, 255, 255, .9);
@ -92,6 +93,7 @@ $breakpoint4: 1500px;
--shadow-modest: rgba(255, 255, 255, .3);
--shadow-weak: rgba(255, 255, 255, .2);
--shadow-hint: rgba(255, 255, 255, .075);
--shadow-touch: rgba(255, 255, 255, .05);
--highlight: rgba(0, 0, 0, .5);
--highlight-extreme: rgba(0, 0, 0, .9);