Wip portfolio

R0mm1 · Sep 2, 2022 · 86b1c83 · 86b1c83
1 parent ca0bcff
commit 86b1c83
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 9 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -72,6  72,10 @@ button {
 a {
   color: inherit;
 }
 
 h1{
   margin: 20px 0;
 }
 </style>
 <style scoped lang="scss">
 @import "assets/colors";

diff --git a/pages/photos/[id].vue b/pages/photos/[id].vue
@@ -1,10  1,45 @@
 <template>
   <div id="photo-page">
-    <div id="photo-container">
-      <img :src="data.data.photo.url_m"/>
     <div id="expanded-view" :class="{'opened': isExpandedViewOpened}">
       <button @click="isExpandedViewOpened = false">
         <font-awesome-icon class="caret-right" :icon="['fas', 'xmark']"/>
       </button>
       <div id="expanded-image-container">
         <img :src="photoResponse.data.photo.url_b"/>
       </div>
     </div>
     <div id="photo-view">
       <div id="photo-container">
         <div id="photo-tools">
           <div id="icons">
             <button aria-label="Agrandir la photo" title="Agrandir" @click="isExpandedViewOpened = true">
               <font-awesome-icon :icon="['fas', 'expand']"/>
             </button>
             <a aria-label="Aller sur ma galerie Flickr"
                title="Voir sur Flickr"
                target="_blank"
                :href="photoResponse.data.photo.flickr_page">
               <font-awesome-icon :icon="['fab', 'flickr']"/>
             </a>
           </div>
         </div>
         <img :src="photoResponse.data.photo.url_m"/>
       </div>
     </div>
     <div>
-      <h1>{{ data.data.photo.title }}</h1>
       <h1>{{ photoResponse.data.photo.title }}</h1>
       <p>
         {{ photoResponse.data.photo.description }}
       </p>
       <div id="tech-details">
         <div id="camera-lens">{{ cameraLens }}</div>
         <table>
           <tr v-for="spec in specs">
             <th>{{ spec[0] }}</th>
             <td>{{ spec[1] }}</td>
           </tr>
         </table>
       </div>
     </div>
   </div>
 </template>
@@ -14,11  49,15 @@
 import Photo from "~/ts/contracts/photos/Photo";
 
 const route = useRoute()
-const {data} = await useAsyncData<{ data: { photo: Photo } }>('get', () => {
 type response = { data: { photo: Photo } }
 const {data: photoResponse} = await useAsyncData<response>('photo-page-'   route.params.id, () => {
   const query = `{
   photo(photoId:"`   route.params.id   `"){
     title
     url_m
     url_b
     description
     flickr_page
     exifs{
       iso
       lens
@@ -34,7  73,46 @@ const {data} = await useAsyncData<{ data: { photo: Photo } }>('get', () => {
     body: JSON.stringify({query})
   })
 })
-console.log(data.value)
 
 const cameraLens = computed(() => {
   const data = []
   const camera = photoResponse.value.data.photo.exifs.camera
   const lens = photoResponse.value.data.photo.exifs.lens
   if (typeof camera === 'string' && camera.length > 0) {
     data.push(camera)
   }
 
   if (typeof lens === 'string' && lens.length > 0) {
     data.push(lens)
   }
 
   return data.join('   ')
 })
 
 const specs = computed(() => {
   const specs = {
     'Longueur focale': photoResponse.value.data.photo.exifs.focalLength,
     'ISO': photoResponse.value.data.photo.exifs.iso,
     'Ouverture': 'f/'   photoResponse.value.data.photo.exifs.fNumber,
     'Temps d\'exposition': photoResponse.value.data.photo.exifs.exposureTime   ' s'
   }
 
   return Object.entries(specs)
       .filter(entry => typeof entry[1] === 'string' && entry[1].length > 0)
 })
 
 const isExpandedViewOpened = ref<boolean>(false)
 
 useMeta({
   title: photoResponse.value.data.photo.title,
   meta: [
     {
       hid: 'description',
       name: 'description',
       content: photoResponse.value.data.photo.description
     }
   ]
 })
 </script>
 
 <style scoped lang="scss">
@@ -44,16  122,100 @@ console.log(data.value)
   min-height: 100%;
   background-color: $bg1;
   display: flex;
 
   h1 {
     margin-top: 40px;
   }
 }
 
-#photo-container {
 #expanded-view {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: $bg1;
 
   z-index: -1;
   opacity: 0;
   transition: opacity .1s;
 
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
 
   &.opened {
     z-index: 20;
     opacity: 1;
   }
 
   #expanded-image-container:before {
     content: ' ';
     display: block;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
   }
 
   button {
     position: absolute;
     right: 40px;
     top: 40px;
     z-index: 21;
   }
 }
 
 #photo-view {
 
   #photo-container {
     position: relative;
     margin: 40px;
 
     #photo-tools {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
 
       #icons {
         position: absolute;
         bottom: 0;
         right: 45px;
         color: $bg1;
         opacity: 0;
         transition: opacity .1s;
       }
 
       &:hover #icons {
         opacity: 1;
       }
 
       button {
         border: none;
       }
     }
   }
 
   img {
     border: 40px solid white;
-    margin: 40px;
     display: block;
   }
 }
 
 #tech-details {
   font-size: .9rem;
   line-height: 1.3rem;
 
   #camera-lens {
     line-height: 1.5rem;
   }
 
   th {
     text-align: left;
   }
 }
 </style>
diff --git a/pages/photos/index.vue b/pages/photos/index.vue
@@ -22,7  22,7 @@ import Photoset from "~/ts/contracts/photos/Photoset";
 
 const config = useRuntimeConfig()
 
-const {data, pending, error} = await useAsyncData<{ data: { photoset: Photoset } } | null>('post', () => {
 const {data, pending, error} = await useAsyncData<{ data: { photoset: Photoset } } | null>('photos-page', () => {
   const query = `{
   photoset{
     photos{

diff --git a/plugins/fontAwesome.ts b/plugins/fontAwesome.ts
@@ -1,6  1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faBars, faCaretRight, faCaretLeft, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { faBars, faCaretRight, faCaretLeft, faXmark, faExpand } from '@fortawesome/free-solid-svg-icons'
 import {faFlickr, faGithub, faLinkedin} from "@fortawesome/free-brands-svg-icons";
 
 // @ts-ignore
@@ -17,6  17,8 @@ library.add(faGithub)
 library.add(faLinkedin)
 // @ts-ignore
 library.add(faFlickr)
 // @ts-ignore
 library.add(faExpand)
 
 export default defineNuxtPlugin((nuxtApp) => {
     // @ts-ignore

diff --git a/ts/contracts/photos/Photo.ts b/ts/contracts/photos/Photo.ts
@@ -14,5  14,11 @@ export default interface Photo{
     height_m?: string
     width_m?: string
 
     url_b?: string
     height_b?: string
     width_b?: string
 
     flickr_page?: string
 
     exifs: PhotoExif
 }