forked from DebaucheryLibrarian/traxxx
Changed more tags button design.
This commit is contained in:
parent
980f66fb33
commit
e0e584658e
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue