DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improved entity header logo scaling. Fixed entity scenes sticky footer.

This commit is contained in:
DebaucheryLibrarian 2024-06-12 03:54:38 +02:00
parent aef0198cab
commit 3254f6a3f2
2 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/scenes/scenes.vue
View File

@ -297,6 +297,7 @@ function updateFilter(prop, value, reload = true) {
display: flex; display: flex;
background: var(--background-base-10); background: var(--background-base-10);
position: relative; position: relative;
flex-grow: 1;
} }
.scenes-header { .scenes-header {

37
pages/entities/@entitySlug/+Page.vue
View File

@ -119,13 +119,11 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: hidden;
} }
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto;
flex-grow: 1; flex-grow: 1;
} }
@ -133,12 +131,20 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
position: sticky;
top: 0;
z-index: 1;
color: var(--text-light); color: var(--text-light);
background: var(--grey-dark-50); background: var(--grey-dark-50);
.link {
display: flex;
align-items: center;
}
} }
.logo { .logo {
height: 2.5rem; height: 2rem;
max-width: 15rem; max-width: 15rem;
padding: .75rem 1rem; padding: .75rem 1rem;
object-fit: contain; object-fit: contain;
@ -152,6 +158,7 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
.favicon { .favicon {
display: none; display: none;
padding: .75rem 1rem; padding: .75rem 1rem;
height: 1.5rem;
} }
.children-container { .children-container {
@ -222,7 +229,11 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
} }
} }
@media(--small-10) { @media(--compact) {
.logo {
height: 1.25rem;
}
.logo-parent { .logo-parent {
display: none; display: none;
} }
@ -230,12 +241,6 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
.favicon { .favicon {
display: inline-block; display: inline-block;
} }
}
@media(--compact) {
.logo {
height: 1.75rem;
}
.expand-text { .expand-text {
display: none; display: none;
@ -245,4 +250,16 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
margin-right: 1rem; margin-right: 1rem;
} }
} }
@media(--small-20) {
.logo {
height: 1rem;
padding: .5rem 1rem;
}
.favicon {
height: 1rem;
padding: .5rem 1rem;
}
}
</style> </style>