Changed home page layout for next options
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
11
src/main.ts
11
src/main.ts
@@ -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);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user