Improved responsiveness of stash header.

This commit is contained in:
DebaucheryLibrarian 2021-03-20 23:40:05 +01:00
parent 565cf551f0
commit de5d104e1e
1 changed files with 40 additions and 13 deletions

View File

@ -4,14 +4,17 @@
class="stash content" class="stash content"
> >
<div class="stash-header"> <div class="stash-header">
<h2 class="stash-name">{{ stash.name }}</h2> <h2
:title="stash.name"
class="stash-name"
>{{ stash.name }}</h2>
<span class="header-section"> <span class="header-section">
<router-link <router-link
v-if="stash.user" v-if="stash.user"
:to="{ name: 'user', params: { username: stash.user.username } }" :to="{ name: 'user', params: { username: stash.user.username } }"
class="header-item stash-username nolink" class="header-item stash-username nolink"
><Icon icon="user3" />{{ stash.user.username }}</router-link> ><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></router-link>
<label <label
v-if="isMine" v-if="isMine"
@ -133,6 +136,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'breakpoints';
.stash-header { .stash-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -153,12 +158,29 @@ export default {
align-items: center; align-items: center;
} }
.header-item:not(:last-child) { .stash-name,
margin: 0 1rem 0 0; .stash-username {
box-sizing: border-box;
padding: .5rem 1rem;
font-weight: bold;
}
.stash-username {
display: inline-flex;
align-items: center;
margin: 0 .5rem 0 0;
}
.stash-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
} }
.stash-public { .stash-public {
cursor: pointer; cursor: pointer;
margin: 0 .5rem 0 0;
.icon { .icon {
margin: 0 .75rem 0 0; margin: 0 .75rem 0 0;
@ -177,15 +199,6 @@ export default {
} }
} }
.stash-name,
.stash-username {
display: inline-flex;
align-items: center;
padding: .5rem 1rem;
margin: 0;
font-weight: bold;
}
.stash-section:not(:last-child) { .stash-section:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint); border-bottom: solid 1px var(--shadow-hint);
} }
@ -205,4 +218,18 @@ export default {
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
} }
} }
@media(max-width: $breakpoint-small) {
.stash-name {
font-size: 1.25rem;
}
.username-name {
display: none;
}
.stash-username {
margin: 0;
}
}
</style> </style>