-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #37 from semanadeinformatica/feature/home-page
Index Page
- Loading branch information
Showing
13 changed files
with
736 additions
and
2,853 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <script setup lang="ts"> | ||
| import { LMap, LTileLayer, LMarker, LIcon } from "@vue-leaflet/vue-leaflet"; | ||
| import "leaflet/dist/leaflet.css"; | ||
| const zoom = 17; | ||
| const center = [41.17835293313974, -8.595830311142494]; | ||
| const url = "https://tile.openstreetmap.de/{z}/{x}/{y}.png"; | ||
| const attribution = | ||
| '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| class="align-center flex h-full w-full justify-center overflow-hidden rounded" | ||
| > | ||
| <LMap | ||
| v-model:zoom="zoom" | ||
| class="cursor-auto border border-solid border-black" | ||
| :minZoom="4" | ||
| :maxZoom="18" | ||
| :zoomAnimation="true" | ||
| :center="center" | ||
| :use-global-leaflet="false" | ||
| style="height: 400px; width: 800px" | ||
| > | ||
| <LTileLayer | ||
| :url="url" | ||
| :attribution="attribution" | ||
| layer-type="base" | ||
| /> | ||
| <LMarker :lat-lng="[41.17835293313974, -8.595830311142494]"> | ||
| <LIcon> | ||
| <v-icon | ||
| class="absolute -bottom-[9px] -right-[14px]" | ||
| name="io-location-sharp" | ||
| fill="#d94f04" | ||
| scale="2" | ||
| ></v-icon> | ||
| </LIcon> | ||
| </LMarker> | ||
| </LMap> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <script setup lang="ts"></script> | ||
|
|
||
| <template> | ||
| <div class="transition-all duration-500"> | ||
| <img | ||
| src="https://picsum.photos/200" | ||
| class="w-[200px] rounded-full border-2 border-solid border-black object-cover" | ||
| alt="" | ||
| /> | ||
| <p class="py-4 text-lg text-2023-teal-dark">John Doe</p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .carousel__slide--active div { | ||
| transform: scale(1.1); | ||
| } | ||
| .carousel__slide--active { | ||
| z-index: 99; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script setup lang="ts"> | ||
| import { onMounted, ref } from "vue"; | ||
| import { Carousel, Slide } from "vue3-carousel"; | ||
| import "vue3-carousel/dist/carousel.css"; | ||
| import SpeakerSlide from "./SpeakerSlide.vue"; | ||
| const carousel = ref<typeof Carousel | null>(null); | ||
| const breakpoints = { | ||
| 1024: { | ||
| itemsToShow: 4, | ||
| }, | ||
| }; | ||
| const next = () => { | ||
| carousel.value?.next(); | ||
| }; | ||
| const prev = () => { | ||
| carousel.value?.prev(); | ||
| }; | ||
| const wrapperHeight = () => { | ||
| const wrapperHeight: number | undefined = document.querySelector( | ||
| "li.carousel__slide--next > div", | ||
| )?.scrollHeight; | ||
| const track: HTMLElement | null = | ||
| document.querySelector("ol.carousel__track"); | ||
| if (track) | ||
| track.style.height = wrapperHeight ? wrapperHeight + 80 + "px" : "100%"; | ||
| }; | ||
| onMounted(async () => { | ||
| window.addEventListener("resize", wrapperHeight); | ||
| await new Promise((r) => setTimeout(r, 500)).then(wrapperHeight); | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <Carousel | ||
| ref="carousel" | ||
| snap-align="center" | ||
| :autoplay="0" | ||
| :items-to-show="2" | ||
| :wrap-around="true" | ||
| :breakpoints="breakpoints" | ||
| > | ||
| <Slide v-for="slide in 10" :key="slide"> | ||
| <SpeakerSlide /> | ||
| </Slide> | ||
| </Carousel> | ||
| <div class="align-center flex justify-center gap-3"> | ||
| <button @click="prev"> | ||
| <v-icon name="fa-arrow-left" fill="#007172" scale="2"></v-icon> | ||
| </button> | ||
| <button @click="next"> | ||
| <v-icon name="fa-arrow-right" fill="#007172" scale="2"></v-icon> | ||
| </button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .carousel__slide--active { | ||
| opacity: 1; | ||
| transform: scale(1.1); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from "vue"; | ||
| import { VueFinalModal } from "vue-final-modal"; | ||
| import "vue-final-modal/style.css"; | ||
| const options = ref({ | ||
| modelValue: false, | ||
| }); | ||
| defineProps<{ | ||
| src: string; | ||
| description: number; | ||
| title: number; | ||
| url: string; | ||
| position?: string; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="ml-auto mr-auto cursor-pointer" :style="position"> | ||
| <img | ||
| class="ml-auto mr-auto" | ||
| :src="src" | ||
| :alt="title + ''" | ||
| @click="options.modelValue = true" | ||
| /> | ||
| <VueFinalModal | ||
| v-model="options.modelValue" | ||
| class="flex items-center justify-center" | ||
| content-class="max-w-xl mx-4 p-4 bg-2023-bg border border-black border-solid flex relative justify-center felx-col" | ||
| > | ||
| <img | ||
| :src="src" | ||
| class="absolute -top-20 w-48 border border-solid border-black shadow-xl shadow-2023-teal-dark" | ||
| /> | ||
| <div | ||
| class="flex w-full flex-col items-center gap-4 pt-20 text-2023-red" | ||
| > | ||
| <a | ||
| class="text-xl font-bold underline" | ||
| :href="url" | ||
| target="_blank" | ||
| > | ||
| Title: {{ title }} | ||
| <v-icon | ||
| class="ml-1" | ||
| name="io-open" | ||
| fill="#d94f04" | ||
| scale="1.3" | ||
| ></v-icon> | ||
| </a> | ||
| <p class="text-justify"> | ||
| {{ description }} | ||
| <br /> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | ||
| Natus adipisci voluptatem quod reprehenderit commodi nostrum | ||
| ipsum eius eligendi qui vitae rerum dicta iure, officiis | ||
| reiciendis totam veniam animi quidem laborum. | ||
| </p> | ||
| </div> | ||
| </VueFinalModal> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from "vue"; | ||
| import { Carousel, Slide } from "vue3-carousel"; | ||
| import Sponsor from "./Sponsor.vue"; | ||
| const carousel = ref<typeof Carousel | null>(null); | ||
| const shadowColor: Record<string, string> = { | ||
| orange: "shadow-2023-orange", | ||
| "teal-dark": "shadow-2023-teal-dark", | ||
| "red-dark": "shadow-2023-red-dark", | ||
| }; | ||
| const textColor: Record<string, string> = { | ||
| orange: "text-2023-orange", | ||
| "teal-dark": "text-2023-teal-dark", | ||
| "red-dark": "text-2023-red-dark", | ||
| }; | ||
| const next = () => { | ||
| carousel.value?.next(); | ||
| }; | ||
| const prev = () => { | ||
| carousel.value?.prev(); | ||
| }; | ||
| const props = defineProps<{ | ||
| sponsors: number; | ||
| color: string; | ||
| title: string; | ||
| }>(); | ||
| const numCols: number = | ||
| props.sponsors > 3 | ||
| ? props.sponsors % 2 | ||
| ? Math.ceil(props.sponsors / 2) * 2 | ||
| : Math.ceil(props.sponsors / 2) | ||
| : props.sponsors; | ||
| const numRows: number = props.sponsors > 3 ? 2 : 1; | ||
| const calculateSponsorPosition = (sponsor: number) => { | ||
| const span = props.sponsors > 3 ? (props.sponsors % 2 ? 2 : 1) : 1; | ||
| const col = | ||
| props.sponsors % 2 ? sponsor : sponsor % Math.ceil(props.sponsors / 2); | ||
| const row = props.sponsors > 3 ? (sponsor % 2 ? 1 : 2) : 1; | ||
| console.log(`grid-area: ${col} ${col + span} ${row} ${row + 1};`); | ||
| return `grid-area: ${row} / ${col} / ${row + 1} / ${col + span} ;`; | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <p class="text-2xl font-bold" :class="textColor[color]">{{ title }}</p> | ||
| <div | ||
| class="grid justify-around gap-4 border border-solid border-black p-10 shadow-2xl max-lg:hidden" | ||
| :class="shadowColor[color]" | ||
| :style="`grid-template-columns: repeat(${numCols}, 1fr); grid-template-rows: repeat(${numRows}, 1fr);`" | ||
| > | ||
| <Sponsor | ||
| v-for="sponsor in sponsors" | ||
| :key="sponsor" | ||
| :position="calculateSponsorPosition(sponsor)" | ||
| src="https://picsum.photos/300/200" | ||
| :url="'https://google.com'" | ||
| :title="sponsor" | ||
| :description="sponsor" | ||
| ></Sponsor> | ||
| </div> | ||
| <div | ||
| class="relative border border-solid border-black p-10 shadow-2xl lg:hidden" | ||
| :class="shadowColor[color]" | ||
| > | ||
| <Carousel ref="carousel" :wrap-around="true" :autoplay="2000"> | ||
| <Slide v-for="sponsor in sponsors" :key="sponsor"> | ||
| <Sponsor | ||
| src="https://picsum.photos/300/200" | ||
| :url="'https://google.com'" | ||
| :title="sponsor" | ||
| :description="sponsor" | ||
| ></Sponsor> | ||
| </Slide> | ||
| </Carousel> | ||
| <button class="absolute left-2 top-[calc(50%-20px)]" @click="prev"> | ||
| <v-icon name="fa-arrow-left" fill="#f29325" scale="2"></v-icon> | ||
| </button> | ||
| <button class="absolute right-2 top-[calc(50%-20px)]" @click="next"> | ||
| <v-icon name="fa-arrow-right" fill="#f29325" scale="2"></v-icon> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style> | ||
| .vfm__overlay { | ||
| background-color: rgba(248, 245, 231, 0.5); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.