Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use base page y-overflow and make the nav, tab nav and table headers sticky #93

Closed
wants to merge 3 commits into from
Closed

Use base page y-overflow and make the nav, tab nav and table headers sticky #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f0515e
fix(client): use sticky and normal browser y overflow
May 11, 2023
e11349c
chore: lint
May 11, 2023
4cf2897
Merge branch 'harlan-zw:main' into use-base-overflow-and-sticky
NathanBeddoeWebDev May 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/client/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<main class="text-gray-700 dark:text-gray-200 overflow-y-hidden max-h-screen h-screen grid grid-rows-[min-content,1fr]">
<main class="text-gray-700 dark:text-gray-200 grid grid-rows-[min-content,1fr]">
<router-view />
</main>
</template>
2 changes: 1 addition & 1 deletion packages/client/components/NavBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const favIcon = computed(() => {
</script>

<template>
<nav class="bg-white dark:(bg-transparent) font-light border-b border-main flex items-center gap-4 children:my-auto px-3 md:px-6 py-2 ">
<nav class="bg-white dark:bg-teal-900 sticky top-0 z-20 font-light border-b border-main flex items-center gap-4 children:my-auto px-3 md:px-6 py-2 ">
<a class="text-md font-medium text-teal-700 dark:text-teal-200 font-mono items-center hidden md:flex" href="https://unlighthouse.dev" target="_blank">
<img :src="`${basePath}assets/logo-light.svg`" height="24" width="24" class="w-24px h-24px mr-2 hidden dark:block">
<img :src="`${basePath}assets/logo-dark.svg`" height="24" width="24" class="w-24px h-24px mr-2 block dark:hidden">
Expand Down
130 changes: 65 additions & 65 deletions packages/client/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,64 +39,70 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)

<template>
<NavBar />
<div class="2xl:flex mt-2">
<div class="xl:ml-3 mx-3 mr-0 w-full 2xl:(mr-5 w-250px mb-0) mb-3">
<TabGroup vertical @change="changedTab">
<TabList class="p-1 dark:(bg-blue-900/20 border-none) border-2 border-blue-900/30 rounded-xl 2xl:(mt-8 block) flex">
<Tab
v-for="(category, key) in tabs"
:key="key"
v-slot="{ selected }"
as="template"
<div class="2xl:flex">
<div class="relative">
<div class="xl:ml-3 mx-3 mr-0 w-full 2xl:(mr-5 w-250px mb-0) mb-3 sticky top-16 2xl:top-[5.5rem]">
<TabGroup vertical @change="changedTab">
<TabList
class="p-1 dark:(bg-blue-900/20 border-none) border-2 border-blue-900/30 rounded-xl 2xl:block flex"
>
<btn-tab
:selected="selected"
>
<span class="inline-flex items-center">{{ category }}
<tooltip v-if="category === 'Performance'" class="text-left">
<i-carbon-warning class="inline text-xs mx-1" />
<template #tooltip>
<div class="mb-2">Lighthouse is running with variability. Performance scores should not be considered accurate.</div>
<div>Unlighthouse is running <span class="underline">with{{ throttle ? '' : 'out' }} throttling</span> which will also effect scores.</div>
</template>
</tooltip>
</span>
<metric-guage v-if="category !== 'Overview' && !Number.isNaN(categoryScores[key - 1])" :score="categoryScores[key - 1]" :stripped="true" class="dark:font-bold" :class="selected ? ['dark:bg-teal-900 bg-blue-100 rounded px-2'] : []" />
</btn-tab>
</Tab>
</TabList>
</TabGroup>
<div class="hidden 2xl:block">
<div class="px-2 text-center 2xl:text-left">
<div class="text-xs opacity-75 2xl:mt-4">
<a href="https://unlighthouse.dev" target="_blank" class="underline hover:no-underline">Documentation</a>
<btn-action v-if="!isStatic" class="underline hover:no-underline ml-3" @click="openDebugModal">
Debug
</btn-action>
</div>
<div class="text-xs opacity-75 2xl:mt-4">
Made with <i-simple-line-icons-heart title="Love" class="inline" /> by <a href="https://twitter.com/harlan_zw" target="_blank" class="underline hover:no-underline">@harlan_zw</a>
</div>
<div class="text-xs opacity-50 2xl:mt-4 mt-1">
Portions of this report use Lighthouse. For more information visit <a href="https://developers.google.com/web/tools/lighthouse" class="underline hover:no-underline">here</a>.
<Tab v-for="(category, key) in tabs" :key="key" v-slot="{ selected }" as="template">
<btn-tab :selected="selected">
<span class="inline-flex items-center">{{ category }}
<tooltip v-if="category === 'Performance'" class="text-left">
<i-carbon-warning class="inline text-xs mx-1" />
<template #tooltip>
<div class="mb-2">Lighthouse is running with variability. Performance scores should not be
considered accurate.</div>
<div>Unlighthouse is running <span class="underline">with{{ throttle ? '' : 'out' }}
throttling</span> which will also effect scores.</div>
</template>
</tooltip>
</span>
<metric-guage
v-if="category !== 'Overview' && !Number.isNaN(categoryScores[key - 1])"
:score="categoryScores[key - 1]" :stripped="true" class="dark:font-bold"
:class="selected ? ['dark:bg-teal-900 bg-blue-100 rounded px-2'] : []"
/>
</btn-tab>
</Tab>
</TabList>
</TabGroup>
<div class="hidden 2xl:block">
<div class="px-2 text-center 2xl:text-left">
<div class="text-xs opacity-75 2xl:mt-4">
<a href="https://unlighthouse.dev" target="_blank" class="underline hover:no-underline">Documentation</a>
<btn-action v-if="!isStatic" class="underline hover:no-underline ml-3" @click="openDebugModal">
Debug
</btn-action>
</div>
<div class="text-xs opacity-75 2xl:mt-4">
Made with <i-simple-line-icons-heart title="Love" class="inline" /> by <a
href="https://twitter.com/harlan_zw" target="_blank" class="underline hover:no-underline"
>@harlan_zw</a>
</div>
<div class="text-xs opacity-50 2xl:mt-4 mt-1">
Portions of this report use Lighthouse. For more information visit <a
href="https://developers.google.com/web/tools/lighthouse" class="underline hover:no-underline"
>here</a>.
</div>
</div>
<lighthouse-three-d v-if="!isStatic" />
</div>
<lighthouse-three-d v-if="!isStatic" />
</div>
</div>
<div class="xl:w-full w-screen overflow-x-auto px-3">
<div class="pr-10 py-1 w-full min-w-1500px">
<div class="xl:w-full w-screen px-3">
<div class="dark:bg-teal-900 pr-10 py-1 px-2 pt-2 sticky top-14 z-10 w-full min-w-1500px">
<div class="grid grid-cols-12 gap-4 text-sm dark:(text-gray-300) text-gray-700">
<results-table-head
v-for="(column, key) in resultColumns"
:key="key"
:sorting="sorting"
:column="column"
v-for="(column, key) in resultColumns" :key="key" :sorting="sorting" :column="column"
@sort="incrementSort"
/>
</div>
</div>
<div class="w-full min-w-1500px 2xl:(max-h-[calc(100vh-100px)]) lg:max-h-[calc(100vh-205px)] sm:max-h-[calc(100vh-220px)] max-h-[calc(100vh-250px)] overflow-auto pr-5 mr-4">
<div
class="w-full min-w-1500px pr-5 mr-4"
>
<div v-if="Object.values(searchResults).length === 0" class="px-4 py-3">
<template v-if="searchText">
<p class="mb-2">
Expand All @@ -115,9 +121,7 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
<p>Showing {{ Object.values(searchResults).flat().length }} routes for search "{{ searchText }}":</p>
</div>
<results-row
v-for="(reports, routeName) in searchResults"
:key="routeName"
:reports="reports"
v-for="(reports, routeName) in searchResults" :key="routeName" :reports="reports"
:route-name="routeName"
>
<template #actions="{ report }">
Expand Down Expand Up @@ -171,11 +175,16 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
<a href="https://unlighthouse.dev" target="_blank" class="underline">Unlighthouse</a>
</div>
<div class="text-xs opacity-75 2xl:mt-4">
Made with <i-simple-line-icons-heart title="Love" class="inline" /> by <a href="https://twitter.com/harlan_zw" target="_blank" class="underline">@harlan_zw</a>
Made with <i-simple-line-icons-heart title="Love" class="inline" /> by <a
href="https://twitter.com/harlan_zw"
target="_blank" class="underline"
>@harlan_zw</a>
</div>
</div>
<div class="text-xs opacity-50 2xl:mt-4 mt-1">
Portions of this report use Lighthouse. For more information visit <a href="https://developers.google.com/web/tools/lighthouse" class="underline">here</a>.
Portions of this report use Lighthouse. For more information visit <a
href="https://developers.google.com/web/tools/lighthouse" class="underline"
>here</a>.
</div>
</div>
</footer>
Expand All @@ -185,13 +194,8 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="min-h-screen px-4 text-center">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
leave-to="opacity-0"
as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0"
>
<DialogOverlay class="fixed inset-0" />
</TransitionChild>
Expand All @@ -201,12 +205,8 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
</span>

<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100"
leave="duration-200 ease-in"
leave-from="opacity-100 scale-100"
as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95"
>
<div
Expand Down