Skip to content

Commit

Permalink
updated styles and loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabioklr
fabioklr committed Jul 8, 2024
1 parent 6338d03 commit a1a3334
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 108 deletions.
58 changes: 29 additions & 29 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,42 @@
<template>
<div class="bg-gradient-to-t from-magenta-haze px-4 to-eerie-black min-h-screen text-white">
<div :class="{ 'blur-sm': showMenu }">
<div class="relative min-h-screen bg-gradient-to-t from-magenta-haze to-eerie-black text-white">
<div :class="{ 'blur-sm': showMenu }" class="min-h-screen">
<!-- Header -->
<div class="text-white items-center px-4 py-6 flex justify-between">
<router-link :to="{name: 'home'}" class="text-xl md:text-3xl italic font-bold z-20">architektur rolf keller</router-link>
<div v-if="windowWidth < 768" @click="showMenu = !showMenu" class="text-xl">
<div v-if="windowWidth < 768" @click="showMenu = !showMenu" class="text-xl">
<i v-if="showMenu" class="fa-sharp fa-solid fa-xmark"></i>
<i v-else class="fa-sharp fa-solid fa-bars"></i>
</div>
<div v-else class="flex flex-row md:text-2xl">
<div class="mx-4 my-0 opacity-100 self-center">
<router-link :to="{name: 'projects'}" class="font-semibold hover:text-gray">Projekte</router-link>
</div>
<div class="mx-4 my-0 opacity-100 self-center">
<router-link :to="{name: 'about'}" class="font-semibold hover:text-gray">Unternehmen</router-link>
<div v-else class="flex flex-row md:text-2xl">
<div class="mx-4 my-0 opacity-100 self-center">
<router-link :to="{name: 'projects'}" class="font-semibold hover:text-gray">projekte</router-link>
</div>
<div class="mx-4 my-0 opacity-100 self-center">
<router-link :to="{name: 'about'}" class="font-semibold hover:text-gray">unternehmen</router-link>
</div>
<router-link :to="{name: 'contact'}" class="bg-magenta-haze hover:bg-chinese-violet font-sm text-white font-semibold skew-x-[-8deg] py-1.5 px-4 opacity-100">kontakt</router-link>
</div>
<router-link :to="{name: 'contact'}" class="bg-magenta-haze hover:bg-chinese-violet font-sm
text-white font-semibold skew-x-[-8deg] py-1.5 px-4 opacity-100">
Kontakt
</router-link>
</div>
</div>
<router-view v-if="!isLoading" />
<div class="bottom-0 inset-x-0 top-0 text-white items-end py-6 text-xs col-span-full flex justify-between z-10 h-12">
<p>Copyright &copy; {{ new Date().getFullYear() }} Architektur Rolf Keller.<br> Alle Rechte vorbehalten.</p>
<p>ark@arkeller.ch</p>
</div>
<!-- Main content -->
<main>
<router-view v-if="!isLoading" />
</main>
</div>
<!-- Copyright section -->
<div class="absolute inset-4 pointer-events-none">
<div class="flex justify-between items-end h-full text-white text-xs">
<p>Copyright &copy; {{ new Date().getFullYear() }} Architektur Rolf Keller.<br> Alle Rechte vorbehalten.</p>
<p>ark@arkeller.ch</p>
</div>
<MenuModal
:showMenu="showMenu"
@update-show-menu="showMenu = $event"
v-if="showMenu" />
</div>
</template>

<MenuModal
:showMenu="showMenu"
@update-show-menu="showMenu = $event"
v-if="showMenu" />
</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
Expand All @@ -53,9 +58,4 @@ onMounted(async () => {
windowWidth.value = window.innerWidth;
});
});
// Show the menu if the window width is less than 768px
if (windowWidth.value < 768) {
showMenu.value = true;
}
</script>
2 changes: 1 addition & 1 deletion src/assets/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const createMap = (projects) => {
// Create a marker for each project in projects
projects.forEach((project) => {
const el = document.createElement('div');
el.innerHTML = `&#127959;`;
el.innerHTML = `🏗️`;
el.style.fontSize = '30px';
// Add a popup to the marker that links to the project's page
const popup = new mapboxgl.Popup({
Expand Down
14 changes: 3 additions & 11 deletions src/components/MenuModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,29 @@
<template>
<div @click="updateMenu" class="absolute inset-0 h-full bg-transparent px-24 pt-28 z-10">
<Transition
enter-active-class="duration-300 ease-out"
enter-from-class="transform opacity-0"
enter-to-class="opacity-100"
leave-active-class="duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="transform opacity-0">
<ul class="bg-eerie-black bg-opacity-90 drop-shadow-lg flex flex-col p-4 text-lg text-center font-semibold text-white blur-none">
<li class="mb-6 opacity-100">
<router-link
:to="{name: 'projects'}"
@click="updateMenu"
class="hover:text-gray">
Projekte
projekte
</router-link>
</li>
<li class="mb-6 opacity-100">
<router-link
:to="{name: 'about'}"
@click="updateMenu"
class="hover:text-gray">
Unternehmen
unternehmen
</router-link>
</li>
<router-link
:to="{name: 'contact'}"
@click="updateMenu"
class="bg-magenta-haze hover:bg-chinese-violet skew-x-[-8deg] py-1.5 opacity-100">
Kontakt
kontakt
</router-link>
</ul>
</Transition>
</div>
</template>

Expand Down
2 changes: 2 additions & 0 deletions src/components/ProjectCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@
bg-eerie-black rounded-lg cursor-pointer
grayscale hover:grayscale-0">
<img
v-if="project.photos.length > 0"
:src="`${backendUrl}/api/files/nbz149u8u9p575z/${project.id}/${project.photos[0]}`"
alt="Project image"
width="640"
height="360"
class="w-full h-2/3 object-cover rounded-lg">
<div v-else class="w-full h-2/3 bg-gray-300 rounded-lg text-center flex items-center justify-center text-4xl">🚧🏰🚧</div>
<!-- Project card text -->
<div class="p-4 overflow-hidden">
<p class="text-lg font-bold truncate">
Expand Down
4 changes: 2 additions & 2 deletions src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
<!-- Hero -->
<div class="md:mb-24 flex flex-col md:px-44 gap-y-2 text-center">
<h1 class="text-4xl md:text-7xl font-bold">
Design, Planung und Bauleitung aus einer Hand.
design, planung und bauleitung aus einer hand.
</h1>
<h2 class="text-lg md:text-2xl text-gray">
Seit 30 Jahren realisiere ich in der ganzen Schweiz Wohnhäuser, Gewerbeflächen, Fitnesscenter und mehr.
seit 30 jahren realisiere ich in der ganzen Schweiz wohnhäuser, gewerbeflächen, fitnesscenter und mehr.
</h2>
</div>

Expand Down
96 changes: 44 additions & 52 deletions src/views/ProjectDetailsView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,56 @@
<template>
<Suspense>
<div class="flex flex-col items-center">
<!-- Title -->
<h1 class="text-4xl text-center pt-20 pb-12 font-bold">{{ singleProject.name }}</h1>
<!-- Photo carousel -->
<div class="relative w-full md:w-2/3 h-64 md:h-[36rem]">
<div v-for="(photoUrl, index) in singleProject.photos">
<Transition
enter-active-class="transition-opacity duration-700 ease-in-out"
leave-active-class="transition-opacity duration-700 ease-in-out"
enter-from-class="opacity-0"
leave-to-class="opacity-0"
enter-to-class="opacity-100"
leave-from-class="opacity-100">
<div v-if="currentSlide === index + 1">
<img
:src="`${backendUrl}/api/files/nbz149u8u9p575z/${singleProject.id}/${photoUrl}`"
alt="Project image"
width="640"
height="360"
class="absolute w-full h-full object-contain rounded">
</div>
</Transition>
</div>
<div v-if="singleProject.photos?.length > 1" class="absolute inset-0 py-0 px-2 w-full flex items-center">
<div class="flex-1">
<i @click="prevSlide" class="fas fa-chevron-left cursor-pointer flex items-center justify-center
rounded-full w-8 h-8 bg-eerie-black bg-opacity-90 text-white"></i>
</div>
<div @click="nextSlide" class="flex-1 flex justify-end ">
<i class="fas fa-chevron-right cursor-pointer flex items-center justify-center
rounded-full w-8 h-8 bg-eerie-black bg-opacity-90 text-white"></i>
<div class="flex flex-col items-center">
<!-- Title -->
<h1 class="text-4xl text-center pt-20 pb-12 font-bold">{{ singleProject.name }}</h1>
<!-- Photo carousel -->
<div v-if="singleProject.photos?.length > 1" class="relative w-full md:w-2/3 h-64 md:h-[36rem]">
<div v-for="(photoUrl, index) in singleProject.photos">
<Transition
enter-active-class="transition-opacity duration-700 ease-in-out"
leave-active-class="transition-opacity duration-700 ease-in-out"
enter-from-class="opacity-0"
leave-to-class="opacity-0"
enter-to-class="opacity-100"
leave-from-class="opacity-100">
<div v-if="currentSlide === index + 1">
<img
:src="`${backendUrl}/api/files/nbz149u8u9p575z/${singleProject.id}/${photoUrl}`"
alt="Project image"
width="640"
height="360"
class="absolute w-full h-full object-contain rounded">
</div>
</Transition>
</div>
<div class="absolute inset-0 py-0 px-2 w-full flex items-center">
<div class="flex-1">
<i @click="prevSlide" class="fas fa-chevron-left cursor-pointer flex items-center justify-center
rounded-full w-8 h-8 bg-eerie-black bg-opacity-90 text-white"></i>
</div>
<div v-if="singleProject.photos?.length > 1" class="absolute bottom-0 w-full flex justify-center my-2">
<div v-for="(photo, index) in singleProject.photos" class="mx-1">
<div @click="currentSlide = index + 1" class="w-3 h-3 rounded-full bg-eerie-black bg-opacity-90
cursor-pointer" :class="{'bg-magenta-haze': currentSlide === index + 1}"></div>
</div>
<div @click="nextSlide" class="flex-1 flex justify-end ">
<i class="fas fa-chevron-right cursor-pointer flex items-center justify-center
rounded-full w-8 h-8 bg-eerie-black bg-opacity-90 text-white"></i>
</div>
</div>
<!-- Project description, location and year of completion -->
<p class="text-lg my-6">
{{ singleProject.ort + ', ' + singleProject.year_completed?.slice(0, 4) }}
</p>
<p class="text-xl mb-24">
{{ singleProject.description }}
</p>
</div>
<template #fallback>
<div class="flex justify-center items-center h-screen">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
<div class="absolute bottom-0 w-full flex justify-center my-2">
<div v-for="(photo, index) in singleProject.photos" class="mx-1">
<div @click="currentSlide = index + 1" class="w-3 h-3 rounded-full bg-eerie-black bg-opacity-90
cursor-pointer" :class="{'bg-magenta-haze': currentSlide === index + 1}"></div>
</div>
</div>
</template>
</Suspense>
</div>
<!-- Project description, location and year of completion -->
<p class="text-lg my-6">
{{ singleProject.ort + ', ' + singleProject.year_completed?.slice(0, 4) }}
</p>
<p class="text-xl text-center mb-24">
{{ singleProject.description }}
</p>
</div>
</template>

<script setup>
import { ref, Suspense, computed } from 'vue'
import { ref, computed } from 'vue'
import { useProjectsStore } from '@/stores/projects';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
Expand Down Expand Up @@ -105,7 +98,6 @@ const singleProject = computed(() => {
project = p;
}
});
console.log(project);
return project;
});
</script>
38 changes: 25 additions & 13 deletions src/views/ProjectView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<div class="mt-16">
<div class="mt-16 pb-12 p-4">
<div v-if="showMap" class="flex flex-col items-center w-full h-96 md:h-[64vh]">
<!-- Header -->
<h1 class="text-4xl text-center font-bold">Übersicht</h1>
<h1 class="text-4xl text-center font-bold">übersicht</h1>
<!-- Map showing the projects' location -->
<div class="w-full h-full mt-16 md:w-2/3">
<ProjectsMap />
Expand All @@ -21,21 +21,17 @@
<ProjectCard v-for="project in projectType[1]" :project="project" />
</div>
</div>
<div class="flex justify-evenly my-12">
<SiteButton
v-if="typesToDisplay < projectsByType.length"
@click="typesToDisplay += 1"
class="text-lg"
buttonText="Mehr">
</SiteButton>
<div v-if="typesToDisplay < projectsByType.length" class="flex justify-evenly my-12">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-270" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
</div>
</template>

<script setup>
import { computed, ref, watchEffect, defineAsyncComponent } from 'vue'
import SiteButton from '../components/SiteButton.vue'
import { computed, ref, watchEffect, defineAsyncComponent, onMounted, onUnmounted } from 'vue'
import ProjectsMap from '../components/ProjectsMap.vue'
import { useProjectsStore } from '../stores/projects';
import { storeToRefs } from 'pinia';
Expand All @@ -47,14 +43,13 @@ const ProjectCard = defineAsyncComponent(() =>
const projectStore = useProjectsStore();
const { projects } = storeToRefs(projectStore);
const typesToDisplay = ref(3);
const typesToDisplay = ref(3); // Start with 1 type displayed
const showMap = ref(false);
const route = useRoute();
// If the URL ends with '/projekte', set the number of projects to display to 10
watchEffect(() => {
if (route.path === '/projekte') {
typesToDisplay.value = 7;
showMap.value = true;
}
});
Expand All @@ -72,6 +67,23 @@ const projectsByType = computed(() => {
});
return Object.entries(projectsByType).sort((a, b) => b[1].length - a[1].length);
});
const handleScroll = () => {
const bottomOfWindow =
window.innerHeight + window.scrollY >= document.documentElement.offsetHeight - 100;
if (bottomOfWindow && typesToDisplay.value < projectsByType.value.length) {
typesToDisplay.value += 1;
}
};
onMounted(() => {
window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
</script>

<style>
Expand Down

0 comments on commit a1a3334

Please sign in to comment.