adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Remove extra whitespace on CV.vue and stopped height becoming 0 on image transitions
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m28s
Details

Browse Source
This commit is contained in:
Adam French
2026-03-09 12:07:05 +00:00
parent a6bc1d5126
commit 1578a05762
3 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
nginx/vue/src/components/util/Slideshow.vue
View File

@@ -35,19 +35,28 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<Transition name="fade" mode="out-in"> <div class="slideshow-wrapper">
<div class="image-viewer" @click="nextImage" :key="currentIndex"> <Transition name="fade">
<Header v-if="currentComment"> <div class="image-viewer" @click="nextImage" :key="currentIndex">
{{ currentComment }} <Header v-if="currentComment">
</Header> {{ currentComment }}
<img :src="currentUrl" alt="Image Viewer" /> </Header>
</div> <img :src="currentUrl" alt="Image Viewer" />
</Transition> </div>
</Transition>
</div>
</template> </template>
<style scoped> <style scoped>
.slideshow-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.image-viewer { .image-viewer {
width: 100%; width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
} }
@@ -61,6 +70,12 @@ img {
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
.fade-leave-active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;

5
nginx/vue/src/views/CV/CV.vue
View File

@@ -6,11 +6,6 @@ import Project from "./Project.vue";
<main> <main>
<div class="no-print w-full h-20"> <div class="no-print w-full h-20">
</div>
<div class="no-print w-full text-center flex flex-row place-content-around">
</div>
<div class="no-print w-full h-20">
</div> </div>
<div class="a4page"> <div class="a4page">
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">

22
nginx/vue/src/views/home/Listening.vue
View File

@@ -29,7 +29,8 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<Transition name="fade" mode="out-in"> <div class="listening-wrapper">
<Transition name="fade">
<div <div
@click="nextSong" @click="nextSong"
:key="song.track.id" :key="song.track.id"
@@ -45,9 +46,16 @@ onUnmounted(() => {
</p> </p>
</div> </div>
</Transition> </Transition>
</div>
</template> </template>
<style scoped> <style scoped>
.listening-wrapper {
position: relative;
width: 100%;
height: 100%;
}
img { img {
width: 70%; width: 70%;
} }
@@ -56,15 +64,17 @@ p {
margin: 0 auto; margin: 0 auto;
} }
.fade-enter-active { .fade-enter-active,
transition: opacity 0.5s ease;
}
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
.fade-enter-from { .fade-leave-active {
opacity: 0; position: absolute;
top: 0;
left: 0;
right: 0;
} }
.fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }