Wip portfolio

R0mm1 · Aug 31, 2022 · ca0bcff · ca0bcff
1 parent 5879be0
commit ca0bcff
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 20 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -7,8  7,7 @@
       </div>
       <div id="main-menu" ref="menuRef" :class="{'isOpened': isMenuOpened}">
         <div id="navigation-menu">
-          <a @click="isMenuOpened = false" target="_blank"
-             href="https://www.flickr.com/photos/169546193@N04/">Photos</a>
           <NuxtLink @click="isMenuOpened = false" to="/photos">Photos</NuxtLink>
           <NuxtLink @click="isMenuOpened = false" to="/projets">Projets</NuxtLink>
           <NuxtLink @click="isMenuOpened = false" to="/cv">CV</NuxtLink>
         </div>

diff --git a/pages/photos/[id].vue b/pages/photos/[id].vue
@@ -0,0  1,59 @@
 <template>
   <div id="photo-page">
     <div id="photo-container">
       <img :src="data.data.photo.url_m"/>
     </div>
     <div>
       <h1>{{ data.data.photo.title }}</h1>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import Photo from "~/ts/contracts/photos/Photo";
 
 const route = useRoute()
 const {data} = await useAsyncData<{ data: { photo: Photo } }>('get', () => {
   const query = `{
   photo(photoId:"`   route.params.id   `"){
     title
     url_m
     exifs{
       iso
       lens
       focalLength
       camera
       exposureTime
       fNumber
     }
   }
 }`
   return $fetch('http://localhost:4000/', {
     method: 'POST',
     body: JSON.stringify({query})
   })
 })
 console.log(data.value)
 </script>
 
 <style scoped lang="scss">
 @import "assets/colors.scss";
 
 #photo-page {
   min-height: 100%;
   background-color: $bg1;
   display: flex;
 }
 
 #photo-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
 
   img {
     border: 40px solid white;
     margin: 40px;
   }
 }
 </style>
diff --git a/pages/photos.vue → pages/photos/index.vue b/pages/photos.vue → pages/photos/index.vue
@@ -1,12  1,17 @@
 <template>
-  <div id="photos-page">
-    <div class="photo-container" v-for="photo in data.data.photoset.photos">
-      <div class="photo-data">
   <div id="photos-page" :class="{'err': error}">
     <div class="photo-container" v-if="!error" v-for="photo in data.data.photoset.photos">
       <NuxtLink :to="'/photos/' photo.id" class="photo-data">
         <div class="photo-title-container">
           <div class="photo-title">{{ photo.title }}</div>
         </div>
         <img :src="photo.url_m"/>
-      </div>
       </NuxtLink>
     </div>
 
     <div v-if="error">
       Une erreur s'est produite lors de la récupération des photos...<br>
       Mais vous pouvez toujours visiter ma <a href="https://www.flickr.com/photos/169546193@N04/" target="_blank">galerie Flickr!</a>
     </div>
   </div>
 </template>
@@ -17,12  22,13 @@ import Photoset from "~/ts/contracts/photos/Photoset";
 
 const config = useRuntimeConfig()
 
-const {data} = await useAsyncData<{ data: { photoset: Photoset } }>('post', () => {
 const {data, pending, error} = await useAsyncData<{ data: { photoset: Photoset } } | null>('post', () => {
   const query = `{
   photoset{
     photos{
       url_m
-      url_s
       width_m
       height_m
       title
       id
     }
@@ -34,8  40,6 @@ const {data} = await useAsyncData<{ data: { photoset: Photoset } }>('post', () =
   })
 })
 
-console.log(data.value.data.photoset)
-
 useMeta({
   title: 'Photos',
   meta: [
@@ -56,21  60,32 @@ $imgBorder: 30px;
 $imgBorderMobile: 10px;
 
 #photos-page{
   min-height: 100%;
   background-color: $bg1;
-  display: grid;
-  grid-template-columns: auto auto auto auto;
 
-  //max-width to have x columns = x*imgWidth x(2*imgBorder) x<pretty margin of 10px at least between photos>
-  @media (max-width: 1480px) {
-    grid-template-columns: auto auto auto;
   &.err{
     display: flex;
     text-align: center;
     justify-content: center;
     flex-direction: column;
   }
 
-  @media (max-width: 1110px) {
-    grid-template-columns: auto auto;
-  }
   &:not(.err){
     display: grid;
     grid-template-columns: auto auto auto auto;
 
-  @media (max-width: 740px) {
-    grid-template-columns: auto;
     //max-width to have x columns = x*imgWidth x(2*imgBorder) x<pretty margin of 10px at least between photos>
     @media (max-width: 1480px) {
       grid-template-columns: auto auto auto;
     }
 
     @media (max-width: 1110px) {
       grid-template-columns: auto auto;
     }
 
     @media (max-width: 740px) {
       grid-template-columns: auto;
     }
   }
 }
 

diff --git a/ts/contracts/photos/Photo.ts b/ts/contracts/photos/Photo.ts
@@ -7,7  7,12 @@ export default interface Photo{
     description?: string
 
     url_s?: string
     height_s?: string
     width_s?: string
 
     url_m?: string
     height_m?: string
     width_m?: string
 
     exifs: PhotoExif
 }