Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Fix app layout issues #1257

Merged
merged 47 commits into from
May 10, 2022
Merged

Fix app layout issues #1257

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
c2fe971
Fix app layout issues
zackkrida Apr 11, 2022
3be1239
Fix sidebar height class
zackkrida Apr 11, 2022
40b83b9
Fix app layout issues
zackkrida Apr 11, 2022
0c10b27
Fix sidebar height class
zackkrida Apr 11, 2022
23b992f
Merge branch 'main' into really_fix_load_more
obulat Apr 14, 2022
b32edcf
Merge branch 'layout-fixes' of github.com:WordPress/openverse-fronten…
zackkrida Apr 14, 2022
03251a4
merge main
zackkrida Apr 14, 2022
0cb7d57
Cleanup for rtl and remove horizontal scrollbar
zackkrida Apr 14, 2022
087bea5
Window scroll detection and proper input width
zackkrida Apr 14, 2022
e34a05b
Fix search count alignment
zackkrida Apr 14, 2022
172d552
Complement to app layout issues (#1312)
krysal Apr 24, 2022
f85cf1e
Standardize sidebar with in CSS var; make filter sidebar border condi…
zackkrida Apr 24, 2022
cac0c0d
Make banner styles more consistient on mobile
zackkrida Apr 24, 2022
aa58a33
Reduce height of desktop translation bar
zackkrida Apr 24, 2022
75a32d6
Merge
zackkrida Apr 24, 2022
7d47472
Delete unused VNoticeBar
zackkrida Apr 24, 2022
843b6f4
Remove hardcoded leading for search result title
zackkrida Apr 24, 2022
0780ea1
Add POT file
obulat Apr 26, 2022
6e205de
Remove z-index from BackToSearchResultsLink
obulat Apr 26, 2022
22f5917
Merge branch 'main' into layout-fixes
obulat May 2, 2022
5c5033b
Add POT file
obulat May 2, 2022
4795035
Use css variable to set header height
obulat May 2, 2022
0510040
Merge branch 'main' into layout-fixes
obulat May 4, 2022
8969bf6
Update visual regression testing snapshots
obulat May 4, 2022
d36dc66
Remove header twitch and size change on scroll
zackkrida May 9, 2022
bb77591
Keep header height consistient
zackkrida May 9, 2022
a14144f
z-index cleanup
zackkrida May 9, 2022
2788ad0
Fix body scroll lock for mobile filters
zackkrida May 9, 2022
3e37bfd
merge main
zackkrida May 9, 2022
65b2300
Add an updated pot file
zackkrida May 9, 2022
64e2ec7
Remove logs
zackkrida May 10, 2022
30bf3da
Stop SearchBar SearchButton from shrinking
obulat May 10, 2022
880f216
Remove unused classes and simplify applying common classes
obulat May 10, 2022
45cdde5
Set main width to `w-screen` to prevent it from overflowing on xs scr…
obulat May 10, 2022
189beef
Update mobile header paddings (make them smaller)
obulat May 10, 2022
40d7614
Extract `dismissTranslationBanner` util function
obulat May 10, 2022
dd28c44
Update snapshots
obulat May 10, 2022
fab148c
Update POT file
obulat May 10, 2022
ca3198a
Update snapshots
obulat May 10, 2022
91094d2
Revert updates to xs media reuse snapshot
obulat May 10, 2022
2cb96db
Remove unnecessary header-height CSS variable
obulat May 10, 2022
c61aa76
Switch the "main" element to w-full instead of w-screen
zackkrida May 10, 2022
3bb8f23
Use viewport width on mobile; switch to full-width above
zackkrida May 10, 2022
c0599cd
Fix related image width
zackkrida May 10, 2022
f0359e3
Merge branch 'main' into layout-fixes
zackkrida May 10, 2022
3221063
Merge main
zackkrida May 10, 2022
cf4044e
.pot file update
zackkrida May 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletions src/components/VFilters/VSearchGridFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<template>
<div
class="filters py-8 px-10 min-h-full md:bg-dark-charcoal-06"
data-testid="filters-list"
>
<div class="filters py-8 px-10" data-testid="filters-list">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Styles specific to the search filter sidebar have been moved up in the component tree.

<div class="flex items-center justify-between mt-2 mb-6">
<h4 class="text-sr font-semibold py-2 uppercase">
{{ $t('filter-list.filter-by') }}
Expand Down Expand Up @@ -108,14 +105,3 @@ export default {
},
}
</script>
<style scoped>
.filters {
border-inline-start: 1px solid transparent;
}
@screen md {
.filters {
/* dark-charcoal-20*/
border-inline-start: 1px solid #d6d4d5;
}
}
</style>
6 changes: 3 additions & 3 deletions src/components/VHeader/VSidebarContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<VTeleport v-if="visible" :to="to"
><VSearchGridFilter @close="$emit('close')"
/></VTeleport>
<VTeleport v-if="visible" :to="to">
krysal marked this conversation as resolved.
Show resolved Hide resolved
<VSearchGridFilter @close="$emit('close')" />
</VTeleport>
</template>

<script>
Expand Down
21 changes: 6 additions & 15 deletions src/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
<template>
<div class="app grid h-screen overflow-hidden relative">
<div>
<div class="app grid relative">
<div class="sticky top-0 block z-40">
<VTeleportTarget name="skip-to-content" :force-destroy="true" />
<VMigrationNotice v-show="isReferredFromCc" />
<VTranslationStatusBanner />
<VHeader />
</div>
<main
class="main embedded overflow-x-hidden"
:class="{ 'has-sidebar': isSidebarVisible }"
>
<main class="main embedded" :class="{ 'has-sidebar': isSidebarVisible }">
<Nuxt ref="mainContentRef" class="min-w-0 main-page" />
<VSidebarTarget class="sidebar" />
<VSidebarTarget
class="sidebar fixed pb-20 right-0 h-[calc(100%-81px)] bg-dark-charcoal-06 border-s border-dark-charcoal-20 overflow-y-scroll"
zackkrida marked this conversation as resolved.
Show resolved Hide resolved
/>
</main>
<VModalTarget class="modal" />
<VGlobalAudioSection />
Expand Down Expand Up @@ -121,12 +120,4 @@ export default embeddedPage
grid-column: 1;
}
}

.main {
overflow: hidden;
}
.main > *:not(:empty) {
overflow-y: scroll;
height: 100%;
}
</style>