Skip to content

Commit

Permalink
Frontend: Display amount of pictures nearby
Browse files Browse the repository at this point in the history
  • Loading branch information
bierik committed Sep 7, 2024
1 parent 31668d4 commit e9e3839
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 8 deletions.
4 changes: 4 additions & 0 deletions frontend/assets/css/tailwind.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
background: black;
}
30 changes: 22 additions & 8 deletions frontend/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,28 @@
<div
v-for="(radarPoint, index) in radarPoints"
:key="index"
class="absolute size-4 origin-center rounded-full bg-blue-400 opacity-80"
class="absolute z-10 size-4 origin-center rounded-full bg-blue-400 opacity-80"
:style="radarPoint"
/>
<div class="flex h-screen snap-x snap-mandatory overflow-x-auto bg-black">
<img
v-for="photoInProximity in photosInProximity"
:key="photoInProximity.id"
:src="photoInProximity.image_url"
class="snap-center object-contain"
/>
<div class="flex h-screen flex-col items-center justify-center">
<span class="mb-10 font-bold text-white"
>{{ pointsInProximityCount }} pictures nearby</span
>
<div class="flex w-full snap-x snap-mandatory items-center overflow-x-auto">
<nuxt-link
v-for="photoInProximity in photosInProximity"
:key="photoInProximity.id"
:to="{
name: 'iiif',
query: { manifestURL: photoInProximity.iiif_url },
}"
class="flex shrink-0 snap-center flex-col"
style="max-width: 100%; height: auto"
>
<img :src="photoInProximity.image_url" class="object-contain" />
<span class="px-2 text-white">{{ photoInProximity.title }}</span>
</nuxt-link>
</div>
</div>
<Navigation />
</template>
Expand All @@ -21,6 +33,7 @@ import {
useDeviceOrientation,
useWindowSize,
} from "@vueuse/core";
import { size } from "lodash-es";
const { coords } = useGeolocation();
const { alpha } = useDeviceOrientation();
Expand Down Expand Up @@ -58,4 +71,5 @@ const radarPoints = computed(() => {
const photosInProximity = computed(() => {
return (toValue(data) || []).filter((o) => o.distance <= 400);
});
const pointsInProximityCount = computed(() => size(toValue(photosInProximity)));
</script>

0 comments on commit e9e3839

Please sign in to comment.