nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add weather info

Browse source
This commit is contained in:
nemunaire 2025-10-11 11:13:21 +07:00
commit e388890197
8 changed files with 311 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

49
summer2024-frontend/src/components/PostComponent.vue
View file

@ -9,6 +9,7 @@ const section = ref(null)
let postDataVisible = ref(true)
const postData = ref(null)
const postDataTitle = ref(null)
const postDataWeather = ref(null)
const postDataDescription = ref(null)
const postActionBtn = ref(null)
@ -43,28 +44,30 @@ function postDataToggle() {
postData.value.classList.remove('bg-gray-400/10')
postData.value.classList.add('bg-gray-400/0')
postDataTitle.value.classList.add('opacity-0')
postDataWeather.value.classList.add('opacity-0')
postDataDescription.value.classList.add('opacity-0')
postDataDescription.value.classList.remove('scrollable-element')
postActionBtn.value.classList.remove('top-0')
postActionBtn.value.classList.remove('right-0')
postActionBtn.value.classList.add('left-0')
postActionBtn.value.classList.add('absolute')
postActionBtn.value.classList.add('bottom-0')
postDataVisible.value = false
setTimeout(() => {
postDataTitle.value.classList.add('hidden')
postDataWeather.value.classList.add('hidden')
postDataDescription.value.classList.add('hidden')
}, 500)
} else {
postDataTitle.value.classList.remove('hidden')
postDataWeather.value.classList.remove('hidden')
postDataDescription.value.classList.remove('hidden')
postData.value.classList.add('backdrop-blur-sm')
postData.value.classList.add('bg-gray-400/10')
postData.value.classList.remove('bg-gray-400/0')
postDataTitle.value.classList.remove('opacity-0')
postDataWeather.value.classList.remove('opacity-0')
postDataDescription.value.classList.remove('opacity-0')
postDataDescription.value.classList.add('scrollable-element')
postActionBtn.value.classList.add('top-0')
postActionBtn.value.classList.add('right-0')
postActionBtn.value.classList.remove('absolute')
postActionBtn.value.classList.remove('left-0')
postActionBtn.value.classList.remove('bottom-0')
postDataVisible.value = true
@ -150,20 +153,32 @@ function scrollSlideToIndex(index) {
class="m-6 p-2 bg-gray-400/10 h-full w-full backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500"
style="text-shadow: black 0 0 7px"
>
<div
class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100"
ref="postActionBtn"
@click="postDataToggle"
>
<EyeOff v-if="postDataVisible" :size="20" />
<Info :size="20" v-else />
<div class="flex flex-nowrap justify-between">
<h2
ref="postDataTitle"
class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
>
{{ post.city }}, {{ post.country }}
</h2>
<div class="flex items-center">
<div
ref="postDataWeather"
class="ms-2"
v-if="post.weather.temperature"
>
<i :class="'wi wi-forecast-io-' + post.weather.condition" :title="post.weather.condition"></i>
{{ post.weather.temperature }}&nbsp;°C
</div>
<div
class="m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100"
ref="postActionBtn"
@click="postDataToggle"
>
<EyeOff v-if="postDataVisible" :size="20" />
<Info :size="20" v-else />
</div>
</div>
</div>
<h2
ref="postDataTitle"
class="mx-2 scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-opacity duration-500 mt-1"
>
{{ post.city }}, {{ post.country }}
</h2>
<div
ref="postDataDescription"
class="m-2 max-h-48 overflow-y-scroll transition-opacity duration-500 overscroll-y-contain"