Skip to content

Commit

Permalink
fix: mobile style issues (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@colinlienard
colinlienard authored May 18, 2024
1 parent 31c1444 commit 0d14c77
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 82 deletions.
6 changes: 3 additions & 3 deletions components/Layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ onUnmounted(() => {
</h1>
<GitHubLink />
</header>
<main class="flex w-full flex-col items-center gap-12 *:max-md:px-6 md:gap-16">
<div class="relative flex w-full flex-col items-center gap-6">
<main class="flex w-full flex-col items-center gap-12 md:gap-16">
<div class="relative flex w-full flex-col items-center gap-6 max-md:px-6">
<h2
class="max-w-96 text-center font-serif text-5xl font-semibold md:max-w-2xl md:text-6xl"
>
Expand Down Expand Up @@ -64,7 +64,7 @@ onUnmounted(() => {
</div>
</div>
<Navigation />
<div class="w-full max-md:overflow-auto">
<div class="w-full">
<slot />
</div>
</main>
Expand Down
2 changes: 1 addition & 1 deletion components/Navigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const isHome = computed(() => route.path === '/');

<template>
<nav
class="relative flex rounded-full border-8 border-solid border-slate-100 bg-slate-200 *:z-10 *:flex *:w-32 *:items-center *:justify-center *:gap-1 *:p-3 *:text-center *:transition-all"
class="relative flex rounded-full border-8 border-solid border-slate-100 bg-slate-200 *:z-10 *:flex *:w-32 *:items-center *:justify-center *:gap-1 *:p-2 *:text-center *:transition-all"
>
<NuxtLink to="/" :style="{ color: isHome ? 'white' : '' }">
<ListBulletIcon class="h-4" />
Expand Down
167 changes: 89 additions & 78 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ onUnmounted(() => {
</script>

<template>
<section class="flex w-full flex-col">
<section class="flex w-full flex-col *:max-md:px-6">
<div
class="grid w-full grid-cols-[1fr_1fr] gap-2 py-8 [grid-template-areas:'a_a''b_b''c_d'] md:flex"
>
Expand Down Expand Up @@ -102,91 +102,102 @@ onUnmounted(() => {
</Button>
</div>

<div class="table w-[64rem] table-fixed">
<div
:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"
>
<div class="relative table-row bg-slate-50 text-slate-500 *:table-cell *:px-4 *:py-6">
<div class="w-[8%]">Rank</div>
<div class="w-[30%]">Name</div>
<div class="w-[12%]">Stars</div>
<div class="w-[30%]">Description</div>
<div class="w-[12%]">Language</div>
<div class="w-[8%]">Age</div>
<div class="max-md:overflow-auto">
<div class="table w-[64rem] table-fixed">
<div
:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"
>
<div class="relative table-row bg-slate-50 text-slate-500 *:table-cell *:px-4 *:py-6">
<div class="w-[8%]">Rank</div>
<div class="w-[30%]">Name</div>
<div class="w-[12%]">Stars</div>
<div class="w-[30%]">Description</div>
<div class="w-[12%]">Language</div>
<div class="w-[8%]">Age</div>
</div>
</div>
</div>
<div
v-if="repositories?.length"
class="relative table-row-group"
@mouseleave="hoverEffect.opacity = 0"
>
<div ref="topOfTableRef" class="w-[1200%]" />
<div
class="absolute h-10 w-full bg-white transition-all"
:style="{
height: `${hoverEffect.height}px`,
top: `${hoverEffect.top}px`,
opacity: hoverEffect.opacity,
}"
/>
<NuxtLink
v-for="repo in repositories"
:key="repo.name"
:to="repo.url"
target="_blank"
class="relative table-row cursor-alias *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:content-[''] [&:not(:first-of-type):after]:bg-slate-300"
@mouseenter="onHoverEffectMouseEnter"
v-if="repositories?.length"
class="relative table-row-group"
@mouseleave="hoverEffect.opacity = 0"
>
<div>
<div
class="relative w-8 text-center after:absolute after:inset-1/2 after:h-8 after:w-8 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-solid after:border-slate-300 after:content-['']"
>
{{ repo.rank }}
<div ref="topOfTableRef" class="w-[1200%]" />
<div
class="absolute h-10 w-full bg-white transition-all"
:style="{
height: `${hoverEffect.height}px`,
top: `${hoverEffect.top}px`,
opacity: hoverEffect.opacity,
}"
/>
<NuxtLink
v-for="repo in repositories"
:key="repo.name"
:to="repo.url"
target="_blank"
class="relative table-row cursor-alias *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:content-[''] [&:not(:first-of-type):after]:bg-slate-300"
@mouseenter="onHoverEffectMouseEnter"
>
<div>
<div
class="relative w-8 text-center after:absolute after:inset-1/2 after:h-8 after:w-8 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-solid after:border-slate-300 after:content-['']"
>
{{ repo.rank }}
</div>
</div>
</div>
<div>
<div class="flex items-center gap-2">
<img :src="repo.image" :alt="`GitHub ${repo.ownerName} avatar`" class="h-6 rounded" />
<h3>
<span v-if="settings.showOwners" class="text-slate-500">{{ repo.ownerName }}/</span>
<span>{{ repo.name }}</span>
</h3>
<div>
<div class="flex items-center gap-2">
<img
:src="repo.image"
:alt="`GitHub ${repo.ownerName} avatar`"
class="h-6 rounded"
/>
<h3>
<span v-if="settings.showOwners" class="text-slate-500">
{{ repo.ownerName }}/
</span>
<span>{{ repo.name }}</span>
</h3>
</div>
</div>
</div>
<div>
<div class="flex items-center gap-1">
<StarIcon class="h-4" />
<span>{{ repo.stargazerCount.toLocaleString() }}</span>
<div>
<div class="flex items-center gap-1">
<StarIcon class="h-4" />
<span>{{ repo.stargazerCount.toLocaleString() }}</span>
</div>
</div>
</div>
<div class="text-slate-500">
<p v-if="settings.showFullDescription">{{ repo.description }}</p>
<p v-else class="overflow-hidden text-ellipsis whitespace-nowrap">
{{ repo.description }}
</p>
</div>
<div>
<div v-if="repo.language" class="flex items-center gap-1">
<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: repo.language.color }" />
{{ repo.language?.name }}
<div class="text-slate-500">
<p v-if="settings.showFullDescription">{{ repo.description }}</p>
<p v-else class="overflow-hidden text-ellipsis whitespace-nowrap">
{{ repo.description }}
</p>
</div>
<span v-else>-</span>
</div>
<div>{{ formatDuration(repo.age) }}</div>
</NuxtLink>
<div>
<div v-if="repo.language" class="flex items-center gap-1">
<div
class="h-2 w-2 rounded-full"
:style="{ backgroundColor: repo.language.color }"
/>
{{ repo.language?.name }}
</div>
<span v-else>-</span>
</div>
<div>{{ formatDuration(repo.age) }}</div>
</NuxtLink>
</div>
<div v-else class="text-nowrap px-4 pt-8 text-slate-500">No results for this search.</div>
<Teleport to="body">
<Transition>
<button
v-if="hasScrolled"
class="fixed bottom-4 right-4 z-50 rounded-full bg-slate-50 p-4"
@click="onClickScrollUp"
>
<ArrowUpIcon class="h-4" />
</button>
</Transition>
</Teleport>
</div>
<div v-else class="text-nowrap px-4 pt-8 text-slate-500">No results for this search.</div>
<Teleport to="body">
<Transition>
<button
v-if="hasScrolled"
class="fixed bottom-4 right-4 z-50 rounded-full bg-slate-50 p-4"
@click="onClickScrollUp"
>
<ArrowUpIcon class="h-4" />
</button>
</Transition>
</Teleport>
</div>
</section>
</template>
Expand Down

0 comments on commit 0d14c77

Please sign in to comment.