DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/components/releases/tags.vue
View File

@ -24,25 +24,29 @@
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() {
const containerBoundaries = this.$refs.tags.getBoundingClientRect();
const containerBottom = containerBoundaries.top + containerBoundaries.height;
nextTick(() => {
const containerBoundaries = this.$refs.tags.getBoundingClientRect();
const containerBottom = containerBoundaries.top + containerBoundaries.height;
this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
const tagBoundaries = tag.getBoundingClientRect();
this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
const tagBoundaries = tag.getBoundingClientRect();
return tagBoundaries.top > containerBottom;
return tagBoundaries.top > containerBottom;
});
});
}
@ -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>

2
assets/css/_theme.scss
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);