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

2
assets/css/_theme.scss
View File

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