Skip to content

Commit

Permalink
chore: make the site responsible for tablet-view
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviareichl
oliviareichl committed Oct 22, 2024
1 parent ad03c21 commit ba271fb
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 36 deletions.
5 changes: 4 additions & 1 deletion components/character-fictionality.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ import { UserRoundIcon, UserRoundPenIcon, VenetianMaskIcon } from "lucide-vue-ne
const props = defineProps<{
fictionality: string;
isMobile: boolean;
isTablet: boolean;
}>();
console.log(props.isMobile, props.isTablet);

Check warning on line 10 in components/character-fictionality.vue

View workflow job for this annotation

GitHub Actions / Validate (20.x, ubuntu-latest) 

Unexpected console statement
type Icon = typeof UserRoundIcon;
const characterIcons: Record<string, Icon> = {
Expand All @@ -24,7 +27,7 @@ const iconComponent = computed(() => {
</script>

<template>
<div v-if="props.isMobile">
<div v-if="props.isMobile || props.isTablet">
<Popover>
<PopoverTrigger>
<component :is="iconComponent" :size="16" class="inline text-frisch-orange" />
Expand Down
2 changes: 1 addition & 1 deletion components/ui/card/CardContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const props = defineProps<{
</script>

<template>
<div :class="cn('p-6 pt-0', props.class)">
<div :class="cn('p-6', props.class)">
<slot />
</div>
</template>
14 changes: 8 additions & 6 deletions pages/about.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,11 @@ useErrorMessage(teamError ?? approachError ?? membersError, {
</script>

<template>
<MainContent class="grid gap-8 p-4 lg:grid-cols-[2fr_3fr] lg:px-12">
<div class="flex lg:justify-end">
<Card class="aspect-square size-full bg-frisch-grey lg:size-72">
<MainContent
class="grid gap-8 p-4 md:grid-cols-[1fr_3fr] md:justify-center md:px-12 2xl:grid-cols-[2fr_3fr]"
>
<div class="flex md:justify-end">
<Card class="aspect-square size-full bg-frisch-grey md:size-72">
<CardContent class="flex size-full py-4 text-2xl font-bold text-white">
<h1 class="uppercase">{{ t("AboutPage.title") }}</h1>
</CardContent>
Expand All @@ -60,13 +62,13 @@ useErrorMessage(teamError ?? approachError ?? membersError, {
<template #empty></template>
</ContentRenderer>

<ul class="list-none px-0 pt-4 lg:pt-8">
<ul class="list-none px-0 pt-4 md:pt-8">
<li
v-for="member of members"
:key="member._id"
class="grid gap-4 p-0 lg:grid-cols-[auto_1fr]"
class="grid gap-4 p-0 md:grid-cols-[auto_1fr]"
>
<div class="relative aspect-square overflow-hidden lg:size-72">
<div class="relative aspect-square overflow-hidden md:size-72">
<img
v-if="member.image != null"
alt=""
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 @@ -35,7 +35,7 @@ const links = {
class="grid h-full gap-4 text-2xl font-bold sm:grid-cols-[repeat(3,minmax(0,350px))] sm:justify-center"
>
<NuxtLink v-for="(link, id) of links" :key="id" :href="link.href">
<Card class="size-full transition hover:scale-105" :class="link.color">
<Card class="size-full transition hover:scale-105 sm:items-center" :class="link.color">
<CardContent class="flex size-full items-center uppercase text-white">
{{ link.label }}
</CardContent>
Expand Down
10 changes: 5 additions & 5 deletions pages/search.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,22 @@ const facets = computed(() => {
</script>

<template>
<MainContent class="overflow-x-hidden bg-frisch-marine lg:overflow-x-auto lg:pr-20">
<MainContent class="overflow-x-hidden bg-frisch-marine md:pr-0 lg:overflow-x-auto 2xl:pr-20">
<h1 class="sr-only">{{ t("SearchPage.title") }}</h1>
<div
v-if="!isLoading"
class="grid h-full grid-rows-[auto_1fr] lg:grid-cols-[minmax(650px,_1fr)_auto_3fr] lg:grid-rows-none"
class="grid h-full grid-rows-[auto_1fr] md:grid-cols-[1fr_auto_1fr] lg:grid-rows-none 2xl:grid-cols-[minmax(650px,_1fr)_auto_3fr]"
>
<div class="hidden lg:block">
<div class="hidden md:block">
<SearchForm query="" @submit="onChange">
<SearchTextInput />
<SearchFilter :facets="facets" />
</SearchForm>
</div>
<div
class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange lg:block"
class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange md:block md:border-y-[65px] md:border-l-[65px]"
/>
<div class="flex lg:hidden">
<div class="flex md:hidden">
<Drawer v-model:open="isMobileSearchOpen">
<DrawerTrigger class="w-full">
<span class="flex w-full items-center bg-frisch-orange-searchform">
Expand Down
71 changes: 49 additions & 22 deletions pages/work/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
const route = useRoute();
const isMobile = computed(() => {
return window.innerWidth < 1024;
return window.innerWidth < 820;
});
const isTablet = computed(() => {
return window.innerWidth < 1536;
});
const id = computed(() => {
Expand Down Expand Up @@ -145,13 +149,12 @@ const icon = computed(() => {
</script>

<template>
<MainContent class="relative grid h-full bg-frisch-marine lg:pr-20">
<div v-if="!isLoading" class="grid h-full grid-cols-[auto_1fr]">
<MainContent class="relative grid h-full bg-frisch-marine md:pr-14 2xl:pr-20">
<div v-if="!isLoading" class="grid h-full md:grid-cols-[auto_1fr]">
<div
v-if="!isMobile"
class="size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange"
class="hidden size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange md:block md:border-y-[65px] md:border-l-[65px]"
/>
<div class="grid lg:grid-cols-2 lg:gap-8">
<div class="grid md:grid-cols-2 md:gap-8">
<div v-if="work != null" class="bg-white p-8 lg:p-16">
<!-- TODO: maybe display siglum here -->
<div v-if="work?.work_type != null" class="flex items-center gap-2 pb-2">
Expand Down Expand Up @@ -182,7 +185,12 @@ const icon = computed(() => {

<div class="flex items-center">
<GlobeIcon :size="16" class="mr-2" />
<div v-if="work?.expression_data[0]?.language != null">
<div
v-if="
work?.expression_data[0]?.language != null &&
work?.expression_data[0]?.language.length > 0
"
>
<div v-for="(language, index) in work?.expression_data[0]?.language" :key="index">
<span>{{ language }}</span>
<span v-if="index !== work?.expression_data[0]?.language.length - 1">
Expand All @@ -207,7 +215,7 @@ const icon = computed(() => {
</NuxtLink>
</div>
</span>
<div v-if="isMobile">
<div class="block md:hidden">
<Drawer>
<DrawerTrigger class="w-full">
<span class="grid grid-cols-[auto_1fr] items-center gap-2 pt-2 text-frisch-orange">
Expand Down Expand Up @@ -294,7 +302,7 @@ const icon = computed(() => {
<div class="text-lg font-semibold">Charaktere</div>
</AccordionTrigger>
<AccordionContent class="text-base">
<div class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-3">
<div class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-3">
<div>
<div class="pb-2 font-semibold">Hauptfiguren</div>
<div v-if="characters.main != null && characters.main.length > 0">
Expand All @@ -303,6 +311,7 @@ const icon = computed(() => {
<CharacterFictionality
:fictionality="character.fictionality"
:is-mobile="isMobile"
:is-tablet="isTablet"
/>

{{ character.name }}
Expand All @@ -321,6 +330,7 @@ const icon = computed(() => {
<CharacterFictionality
:fictionality="character.fictionality"
:is-mobile="isMobile"
:is-tablet="isTablet"
/>

{{ character.name }}
Expand All @@ -339,6 +349,7 @@ const icon = computed(() => {
<CharacterFictionality
:fictionality="character.fictionality"
:is-mobile="isMobile"
:is-tablet="isTablet"
/>

{{ character.name }}
Expand All @@ -362,7 +373,7 @@ const icon = computed(() => {
</AccordionTrigger>
<AccordionContent class="text-base">
<div>
<div class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-3">
<div class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-3">
<div>
<div class="pb-2 font-semibold">Schauplätze</div>
<div v-if="places.takesPlaceIn != null && places.takesPlaceIn.length > 0">
Expand Down Expand Up @@ -476,7 +487,7 @@ const icon = computed(() => {
</AccordionTrigger>
<AccordionContent class="text-base">
<div>
<div class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-3">
<div class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-3">
<div>
<div class="pb-2 font-semibold">Erwähnte Werke</div>
<div v-if="relatedWork.references && relatedWork.references.length > 0">
Expand Down Expand Up @@ -542,7 +553,7 @@ const icon = computed(() => {
<div>
<div v-if="work?.physical_objects && work?.physical_objects.length > 0">
<div
class="grid grid-rows-[auto_auto_auto] gap-4 lg:grid-cols-[auto_1fr] lg:gap-10"
class="grid grid-rows-[auto_auto_auto] gap-4 2xl:grid-cols-[auto_1fr] 2xl:gap-10"
>
<div>
<div class="pb-2 font-semibold">Archiv</div>
Expand Down Expand Up @@ -570,7 +581,7 @@ const icon = computed(() => {
</Accordion>
</div>
</div>
<div v-if="!isMobile" class="bg-white py-8">
<div class="hidden md:block md:bg-white md:py-8">
<div class="grid grid-cols-[auto_1fr] items-center gap-4">
<div
class="size-0 border-y-[55px] border-l-[55px] border-y-transparent border-l-frisch-marine"
Expand All @@ -586,20 +597,36 @@ const icon = computed(() => {
</div>
<div v-if="analysisTags.length > 0" class="py-4">
<span v-for="tag in analysisTags" :key="tag.name" class="mb-2 mr-1">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<span v-if="!isTablet">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<span
class="mb-1 inline-block cursor-default bg-frisch-orange px-2 py-1 text-xs text-white opacity-85"
>
{{ tag.value }}
</span>
</TooltipTrigger>
<TooltipContent>
<p>{{ tag.name }}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</span>
<span v-else>
<Popover>
<PopoverTrigger>
<span
class="mb-1 inline-block cursor-default bg-frisch-orange px-2 py-1 text-xs text-white opacity-85"
>
{{ tag.value }}
</span>
</TooltipTrigger>
<TooltipContent>
<p>{{ tag.name }}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</PopoverTrigger>
<PopoverContent>
{{ tag.name }}
</PopoverContent>
</Popover>
</span>
</span>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,9 @@ const config = {
"collapsible-down": "collapsible-down 0.2s ease-in-out",
"collapsible-up": "collapsible-up 0.2s ease-in-out",
},
screens: {
md: "820px",
},
},
},
plugins: [animate, typography, fluidColumnsPlugin],
Expand Down

0 comments on commit ba271fb

Please sign in to comment.