Changed home page layout for next options

This commit is contained in:
Alexis
2023-04-30 13:46:00 +02:00
parent 1ab7e26146
commit 72b8004847
4 changed files with 23 additions and 13 deletions

View File

@@ -1,7 +1,3 @@
<script setup lang="ts">
import Navbar from "./components/navbar/Navbar.vue";
</script>
<template> <template>
<div id="wrapper"> <div id="wrapper">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useRepStore } from "@/stores/repStore"; import { useRepStore } from "@/stores/repStore";
import { useGeolocation } from "@vueuse/core"; import { useGeolocation } from "@vueuse/core";
import RepButton from "./RepButton.vue";
const { coords } = useGeolocation(); const { coords } = useGeolocation();
const { getRep, setRep } = useRepStore(); const { getRep, setRep } = useRepStore();
@@ -12,10 +13,13 @@ async function handleGeolocClick() {
</script> </script>
<template> <template>
<button <section class="text-center">
class="py-2 px-4 rounded-sm bg-white text-sm text-slate-950" <header class="mb-4">
@click="handleGeolocClick" <h1 class="mt-4 text-center font-bold text-3xl">Trouver mon député</h1>
> </header>
Trouver mon député <RepButton @click="handleGeolocClick" :style="'btn-red'">
</button> <font-awesome-icon :icon="['fass', 'location-dot']" size="lg" />
<span>Géolocalisation</span>
</RepButton>
</section>
</template> </template>

View File

@@ -52,7 +52,10 @@ const repSocials = {
<template> <template>
<section> <section>
<header> <header>
<figure class="mt-8 mx-auto w-60 h-60 rounded-full overflow-hidden"> <div class="text-center">
<small class="text-base font-bold"> Votre député est... </small>
</div>
<figure class="mt-4 mx-auto w-60 h-60 rounded-full overflow-hidden">
<img <img
:src="repImage" :src="repImage"
:alt="repFullName" :alt="repFullName"

View File

@@ -15,9 +15,16 @@ import {
faLinkedin, faLinkedin,
faInstagram, faInstagram,
} from "@fortawesome/free-brands-svg-icons"; } from "@fortawesome/free-brands-svg-icons";
import { faLandmark } from "@fortawesome/free-solid-svg-icons"; import { faLandmark, faLocationDot } from "@fortawesome/free-solid-svg-icons";
library.add(faTwitter, faFacebook, faLinkedin, faInstagram, faLandmark); library.add(
faTwitter,
faFacebook,
faLinkedin,
faInstagram,
faLandmark,
faLocationDot
);
const app = createApp(App); const app = createApp(App);