Skip to content

Commit

Permalink
feat(store): responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@veryCrunchy
veryCrunchy committed Mar 4, 2024
1 parent b24d0e6 commit a86f806
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 82 deletions.
4 changes: 2 additions & 2 deletions components/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const { t } = useI18n(),
</script>

<template>
<div
class="flex items-center absolute select-none flex-justify-between top-0 w-full p-3"
<div id="header"
class="flex lt-sm:sticky z-1000 items-center absolute select-none flex-justify-between top-0 w-full p-3"
>
<a href="/" class="color-primary font-discord font-size-8">PreMiD</a>
<div class="lt-lg:hidden">
Expand Down
83 changes: 44 additions & 39 deletions components/StoreCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,27 +30,12 @@ const { presence } = defineProps<{
<div
:class="{
'opacity-60 delay-0': hovered,
'delay-200 transition-ease-out': !hovered,
'delay-100 transition-ease-out': !hovered,
}"
style="background-color: var(--shadowTint)"
class="card-dimensions rounded-lg absolute border-primary border-1.5 transition-all border-solid object-cover opacity-0 z-10"
class="card-dimensions rounded-lg absolute border-primary border-1.5 transition-opacity border-solid object-cover opacity-0 z-10"
></div>
<div
:class="{ 'opacity100 w-70 delay-200': hovered }"
class="absolute h-full z-200 transition-all transition-ease right-0 flex gap-2 w-0 justify-center items-center rounded-md opacity-0"
>
<button
class="bg-primary rounded-full text-white w-40 h-10 border-none gap-2 flex items-center justify-center"
>
<FAIcon class="h5 w5" icon="fa-solid fa-plus" />
<p class="">add presence</p>
</button>
<button
class="bg-red rounded-full text-white w-10 h-10 border-none gap-2 flex items-center justify-center"
>
<FAIcon class="h5 w5" icon="fa-solid fa-heart" />
</button>
</div>

<NuxtImg
placeholder
preload
Expand All @@ -73,45 +58,65 @@ const { presence } = defineProps<{
:src="presence.metadata.logo"
:alt="presence.metadata.service"
/>
<div class="relative my-a text-color mr-4 text-3 font-50 w-6/9">
<div
class="relative my-a z-20 mr-4 text-color text-3 font-50 w-6/9 transition-color"
>
<h1
class="card-shadow font-bold text-xl text-ellipsis text-nowrap overflow-hidden"
>
{{ presence.metadata.service }}
</h1>
<Transition name="card-animation" mode="out-in">
<div :key="presence.metadata.service + '_desc'">
<p class="card-shadow line-clamp-2 line-height-3.5">
{{ presence.metadata.description.en }}
</p>
</div>
<!-- <div v-if="!hovered" :key="presence.metadata.service + '_desc'">
<p class="card-shadow line-clamp-2 line-height-3.5">
<p v-if="!hovered" class="card-shadow line-clamp-2 line-height-3.5">
{{ presence.metadata.description.en }}
</p>
</div>
<div v-else-if="hovered" :key="presence.metadata.service + '_test'">
<button
class="h-10 w-45 mt-2 bg-primary card-shadow border-none rounded-3xl"
<div
v-else-if="hovered"
class="flex gap-2"
>
Add Presence
</button>
</div> -->
<button
class="bg-primary rounded-full text-white w-40 h-10 border-none gap-2 flex items-center justify-center"
>
<FAIcon class="h5 w5" icon="fa-solid fa-plus" />
<p class="">add presence</p>
</button>
<button
class="bg-red rounded-full text-white w-10 h-10 border-none gap-2 flex items-center justify-center"
>
<FAIcon class="h5 w5" icon="fa-solid fa-heart" />
</button>
</div>
</div>
</Transition>
</div>
<p class="text-color absolute right-0 shadow-tint mt-3 mr-2">
{{ presence.users }} <FAIcon class="h-4 w-4" icon="fa-solid fa-bolt" />
</p>
<div
class="text-color op-50 absolute right-0 shadow-tint mt-2 mr-2 flex gap-2 flex-col"
>
<p>
<!-- {{ presence.users }}/{{ presence.users }} live <FAIcon class="h-4 w-4" beat-fade icon="fa-duotone fa-signal-stream" style="--fa-primary-color: #ff0000; --fa-secondary-color: #1e3050;" /> -->
{{ Math.round(presence.users / 5) }}
<FAIcon class="h-4 w-4" icon="fa-sold fa-bolt" />
</p>
</div>
</div>
</div>
</template>

<style scoped>
.card-dimensions {
width: 23rem;
height: 9rem;
@screen lt-xs {
.card-dimensions {
width: 80vw;
height: 35vw;
}
}
@screen xs {
.card-dimensions {
width: 23rem;
height: 9rem;
}
}
@media (min-width: 1400px) {
@screen lg {
.card-dimensions {
width: 25rem;
height: 10rem;
Expand Down
2 changes: 1 addition & 1 deletion pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ onBeforeUnmount(() => {
>
<a
href="/downloads"
class="font-semibold text-nowrap text-center py-3 rounded-full uppercase font-inter text-4 px-10 bg-btn-gray"
class="font-semibold text-nowrap text-center py-3 rounded-full uppercase font-inter text-4 px-10 bg-gray"
>
<FAIcon class="w-4 mr-1 h-4" :icon="'fa-solid fa-download'" />{{
$t("header.links.downloads")
Expand Down
106 changes: 70 additions & 36 deletions pages/store.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
<script setup lang="ts">
import { useWindowSize } from "@vueuse/core";
import type { LocationQuery } from "vue-router";
useHead({
title: "Store",
});
const { t } = useI18n(),
{ data } = await useAsyncGql({ operation: "presences" }),
pageSize = ref(12),
pageSize = computed(() => {
const { width } = useWindowSize();
if (width.value < 1024) return 5;
if (width.value < 1536) return 8;
return 12;
}),
totalPages = ref(0),
presences = computed(() => getPresencePage()),
route = useRoute(),
Expand All @@ -28,18 +34,11 @@ function handleQuery(query: LocationQuery) {
parsedPage = Number.parseInt(
Number.isNaN(Number(pageQuery)) ? "1" : pageQuery,
);
currentPage.value = Math.min(parsedPage, totalPages.value);
currentPage.value = Math.max(1, Math.min(parsedPage, totalPages.value));
searchTerm.value = query.search?.toString() || "";
selectedCategory.value = query.category?.toString() || "";
}
watch(
() => route.query,
(query) => {
handleQuery(query);
},
);
function getPresencePage(page = currentPage.value, search = searchTerm.value) {
const startIndex = (page - 1) * pageSize.value,
endIndex = startIndex + pageSize.value,
Expand Down Expand Up @@ -86,52 +85,75 @@ function startPage() {
? Math.max(2, totalPages.value - 5)
: Math.max(2, currentPage - middleOffset);
}
watch(
() => route.query,
(query) => {
handleQuery(query);
},
);
onMounted(() => {
handleQuery(route.query);
});
</script>

<template>
<main class="items-center justify-center flex mx-3vw h-screen">
<div class="rounded-md bg-card-filter w-70 p-5 mb-3.6rem">
<h1 class="header color-primary">{{ $t("store.header.search") }}</h1>
<main
class="relative items-center justify-center flex mx-3vw lt-sm:flex-col min-h-dvh"
>
<div
id="filters"
class="rounded-lg sticky z-30 text-nowrap bg-card p-5 sm:max-w-70 lt-sm:max-h-50 lt-sm:overflow-scroll w-full top-14"
>
<h1 class="filter-header color-primary">
{{ $t("store.header.search") }}
</h1>
<input
v-model="searchTerm"
type="text"
class="text-white border-none bg-gray p-2 w-full h-8 rounded"
:placeholder="$t('store.filter.search')"
@:input="$router.replace(getLinkProperties({}))"
/>
<h1 class="header color-primary mt-8">
<h1 class="filter-header color-primary mt-8">
{{ $t("store.header.categories") }}
</h1>
<div class="flex w-full items-center flex-col">
<NuxtLink
v-for="c of categories"
:key="c.text"
:class="{ 'bg-primary text-white': c.tag === selectedCategory }"
class="w-full h-8 p-2 font-bold rounded border-solid m-1 text-link-inactive border-gray-secondary border-1"
class="w-full flex items-center h-8 p-2 rounded font-bold border-solid m-1 text-link-inactive border-gray-secondary border-1"
:to="getLinkProperties({ category: c.tag })"
>
{{ c.text }}
</NuxtLink>
</div>
</div>
<div class="items-center flex-col flex min-h-688px ml-3vw max-w-content">
<div class="card-columns grid-cols-2 overflow-unset">
<div v-if="presences.data.length === 0" class="w-2/3 h-50 flex justify-center items-center ml-5 rounded-lg">
couldn't find any presences
</div>
<div
v-if="presences.data.length > 0"
class="items-center mt-5 sm:mt-10 flex-col flex min-h-688px sm:ml-3vw">
<div
class="gap-4 grid grid-cols-[fit-content(0%)] lg:grid-cols-[repeat(2,fit-content(0%))] 2xl:grid-cols-[repeat(3,fit-content(0%))] overflow-unset"
>
<StoreCard
v-for="presence in presences.data"
:key="presence.metadata.service"
tabindex="0"
:presence="presence"
/>
</div>
<div class="flex mt-5">
<div
v-if="presences.data.length > 0"
class="flex mt-5 sticky bottom-1 z-40"
>
<NuxtLink
:to="getLinkProperties({ page: 1 })"
:replace="true"
prefetch
class="button"
class="page-nav-button"
:class="{ active: 1 === presences.currentPage }"
>
1
Expand All @@ -142,7 +164,7 @@ onMounted(() => {
:key="i"
prefetch
:to="getLinkProperties({ page: startPage() + i - 1 })"
class="button"
class="page-nav-button"
:class="{ active: startPage() + i - 1 === presences.currentPage }"
>
{{ startPage() + i - 1 }}
Expand All @@ -152,7 +174,7 @@ onMounted(() => {
:to="getLinkProperties({ page: totalPages })"
prefetch
:class="{ active: totalPages === presences.currentPage }"
class="button"
class="page-nav-button"
>
{{ totalPages }}
</NuxtLink>
Expand All @@ -162,30 +184,43 @@ onMounted(() => {
</template>

<style scoped>
.header {
#filters {
&::-webkit-scrollbar {
width: 0.4rem;
height: 100%;
overflow: hidden;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
}
.filter-header {
margin-bottom: 0.6rem;
font-size: 1.3rem;
font-weight: 700;
}
.card-columns {
display: grid;
gap: 1rem;
grid-template-columns: fit-content(20%) fit-content(20%) fit-content(200%);
@screen lt-xs {
.page-nav-button {
font-size: 4.5vw;
height: 12vw;
width: 12vw;
}
}
@screen lt-2xl {
.card-columns {
grid-template-columns: fit-content(0%) fit-content(0%);
@screen xs {
.page-nav-button {
font-size: 1.3rem;
height: 3.4rem;
width: 3.4rem;
}
}
.button {
.page-nav-button {
color: white;
font-size: 1.3rem;
font-weight: 600;
height: 3.4rem;
width: 3.4rem;
background-color: #2e3242;
border-radius: 10vw;
border: none;
Expand All @@ -195,11 +230,10 @@ onMounted(() => {
justify-content: center;
align-items: center;
}
.button:hover {
.page-nav-button:hover {
background-color: #373b4f;
}
.button.active {
.page-nav-button.active {
transition: background-color 400ms;
background-color: #7289da;
}
Expand Down
6 changes: 6 additions & 0 deletions scss/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
font-display: swap;
}

@screen lt-sm {
#header {
background-color: hsl(227, 18%, 8%);
}
}

html,
body {
background-color: hsl(227, 18%, 8%);
Expand Down
6 changes: 2 additions & 4 deletions uno.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,8 @@ export default defineConfig({
primary: "hsl(227, 18 %, 8 %)",
secondary: "hsl(227, 18 %, 12 %)",
},
card: {
filter: "#191b24",
primary: "#151719",
},
card: "#191b24",

gray: "#212530",
"gray-secondary": "#323748",
link: {
Expand Down

0 comments on commit a86f806

Please sign in to comment.