anulax
/
scout-baslac.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Adaptation mobile

Browse Source
beta
anulax1225 ago%!(EXTRA string=3 months)
parent 7d8a1e1450
commit 17cefcaa30
11 changed files with 95 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      resources/js/Components/ResponsiveNavLink.vue
  2. 4
      resources/js/Layouts/AuthLayout.vue
  3. 59
      resources/js/Layouts/Layout.vue
  4. 2
      resources/js/Pages/Album/Partials/Show.vue
  5. 8
      resources/js/Pages/Album/Show.vue
  6. 12
      resources/js/Pages/Home.vue
  7. 19
      resources/js/Pages/Photo/Index.vue
  8. 4
      resources/js/Pages/Photo/Partials/Panel.vue
  9. 12
      resources/js/Pages/Photo/Partials/PanelDisplay.vue
  10. 10
      resources/js/Pages/Profile/Edit.vue
  11. 6
      resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

2
resources/js/Components/ResponsiveNavLink.vue
Unescape View File

@ -14,7 +14,7 @@ const props = defineProps({
const classes = computed(() => const classes = computed(() =>
props.active props.active
? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 text-start text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out' ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-gray-400 text-start text-base font-medium text-gray-700 bg-gray-50 focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-700 transition duration-150 ease-in-out'
: 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out', : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out',
); );
</script> </script>

4
resources/js/Layouts/AuthLayout.vue
Unescape View File

@ -5,7 +5,7 @@ import { Link } from '@inertiajs/vue3';
<template> <template>
<div <div
class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0" class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 laptop:justify-center sm:pt-0"
> >
<div> <div>
<Link href="/"> <Link href="/">
@ -14,7 +14,7 @@ import { Link } from '@inertiajs/vue3';
</div> </div>
<div <div
class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg" class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md laptop:max-w-md laptop:rounded-lg"
> >
<slot /> <slot />
</div> </div>

59
resources/js/Layouts/Layout.vue
Unescape View File

@ -4,6 +4,7 @@ import NavLink from '@/Components/NavLink.vue';
import Dropdown from '@/Components/Dropdown.vue'; import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue'; import DropdownLink from '@/Components/DropdownLink.vue';
import { useSlots } from 'vue'; import { useSlots } from 'vue';
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
const slots = useSlots(); const slots = useSlots();
const pic = usePage().props.user ? usePage().props.user.pic : ""; const pic = usePage().props.user ? usePage().props.user.pic : "";
usePage().props.user, usePage().props; usePage().props.user, usePage().props;
@ -15,10 +16,10 @@ const toggleMenu = () => {
</script> </script>
<template> <template>
<nav class="sticky w-full z-30 top-0 right-0 left-0"> <nav class="sticky z-20 w-full top-0 right-0 left-0">
<div class="w-full h-16 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2 justify-between border-b border-gray-300 bg-gray-100 text-gray-900"> <div class="w-full h-16 z-40 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2 justify-between border-b border-gray-300 bg-gray-100 text-gray-900">
<div :class="{ 'w-full': !user }" class="flex h-full justify-between"> <div :class="{ 'w-full': !user }" class="flex h-full justify-between">
<Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 w-fit'"> <Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 z-40 w-fit'">
<img src="/img/logo.png" class="h-full laptop:py-1.5 py-3"> <img src="/img/logo.png" class="h-full laptop:py-1.5 py-3">
</Link> </Link>
<div class="laptop:flex hidden text-black/80"> <div class="laptop:flex hidden text-black/80">
@ -69,16 +70,60 @@ const toggleMenu = () => {
</template> </template>
</Dropdown> </Dropdown>
</div> </div>
<div class="h-full flex items-center"> <div class="laptop:hidden h-full z-40 flex items-center">
<button @click="toggleMenu"><img src="/icons/menu.svg" class="h-10"></button> <button @click="toggleMenu"><img src="/icons/menu.svg" class="h-10"></button>
</div> </div>
</div> </div>
<div v-if="slots.header" class="w-full max-h-[3.5rem] desktop:px-[17.5%] laptop:px-[12.5%] px-2 py-auto bg-gray-50 border-b border-gray-300 text-gray-900"> <div v-if="slots.header" class="w-full z-20 max-h-[3.5rem] desktop:px-[17.5%] laptop:px-[12.5%] py-auto bg-gray-50 border-b border-gray-300 text-gray-900">
<slot name="header"/> <slot name="header"/>
</div> </div>
</nav> </nav>
<div id="menu-content" class="laptop:hidden hidden fixed z-10 top-0 bottom-0 right-0 left-0 bg-gray-100"> <div id="menu-content" class="laptop:hidden hidden fixed z-30 top-0 bottom-0 right-0 left-0 bg-gray-100 mt-[64px] overflow-y-auto">
<div class="z-10 flex flex-col border-b border-gray-200">
<ResponsiveNavLink v-if="!user" :href="route('home')" :active="route().current('home')">
Home
</ResponsiveNavLink>
<!-- <NavLink v-if="!user" :href="'#'" :active="false">
Posts
</NavLink>
<NavLink v-if="!user" :href="route('info')" :active="route().current('info')">
Infos
</NavLink>
<NavLink v-if="!user" :href="'#'" :active="false">
News letter
</NavLink> -->
<ResponsiveNavLink v-if="!user" :href="route('login')" :active="route().current('login')">
Log in
</ResponsiveNavLink>
<ResponsiveNavLink v-if="user" :href="route('photo.index')" :active="route().current('photo.*')">
Photothèque
</ResponsiveNavLink>
<ResponsiveNavLink v-if="user" :href="route('album.index')" :active="route().current('album.*')">
Albums
</ResponsiveNavLink>
<ResponsiveNavLink v-if="user" :href="route('admin.user.index')" :active="route().current('admin.*')">
Admin
</ResponsiveNavLink>
</div>
<div v-if="user" class="z-10 flex flex-col border-b border-gray-200">
<span class="w-full flex rounded-md hover:cursor-pointer focus:cursor-pointer">
<button type="button" class="w-full flex items-center justify-between px-3 py-2 border border-transparent text-sm leading-4
font-medium rounded-md text-black/80 hover:text-gray-700
dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
<p class="mr-2">{{ user.name }}</p>
<div class="w-10 overflow-hidden rounded-full bg-black/80 flex justify-center items-center">
<img :src="pic" class="h-10" :class="{ 'invert': user.path === 'profiles/none.svg' }">
</div>
</button>
</span>
<ResponsiveNavLink v-if="user" :href="route('profile.edit')" :active="route().current('profile.edit')">
Profile
</ResponsiveNavLink>
<ResponsiveNavLink v-if="user" :href="route('logout')">
Log Out
</ResponsiveNavLink>
</div>
</div> </div>
<slot name="content"/> <slot name="content"/>
<footer class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 bg-gray-50 text-gray-900 flex items-center justify-between"> <footer class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 bg-gray-50 text-gray-900 flex items-center justify-between">

2
resources/js/Pages/Album/Partials/Show.vue
Unescape View File

@ -46,7 +46,7 @@ const deletePhoto = async () => {
<Link :href="'/album/' + props.album.uuid" :class="{ <Link :href="'/album/' + props.album.uuid" :class="{
'border-r': (props.index + 1) % props.columns != 0, 'border-r': (props.index + 1) % props.columns != 0,
'border-b': props.index < props.length - props.columns, 'border-b': props.index < props.length - props.columns,
'h-96': props.columns === 3, 'laptop:h-96 h-44': props.columns === 3,
'h-[25rem]': props.columns !== 3, 'h-[25rem]': props.columns !== 3,
}" }"
class="group relative w-full overflow-hidden border-white hover:scale-[1.003] flex items-center bg-black/90"> class="group relative w-full overflow-hidden border-white hover:scale-[1.003] flex items-center bg-black/90">

8
resources/js/Pages/Album/Show.vue
Unescape View File

@ -104,7 +104,8 @@ const toggle = () => {
<p @click="toggle" <p @click="toggle"
class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm laptop:hidden">Affichage</p> class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm laptop:hidden">Affichage</p>
<div id="affichage" class="absolute laptop:static hidden top-full mt-1 laptop:flex laptop:flex-row flex-col items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden"> <div id="affichage" class="absolute laptop:static hidden top-full mt-1 laptop:flex laptop:flex-row flex-col items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
<button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1 <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full
laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1
hover:bg-black/5"> hover:bg-black/5">
<img src="/icons/block-content.svg" class="h-7"> <img src="/icons/block-content.svg" class="h-7">
</button> </button>
@ -119,13 +120,12 @@ const toggle = () => {
</div> </div>
</div> </div>
<div class="relative flex items-center"> <div class="relative flex items-center">
<button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md laptop:px-2 py-1">
<button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
<p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p> <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p>
<img src="/icons/add.svg" class="h-8"> <img src="/icons/add.svg" class="h-8">
</button> </button>
<Panel @data="(uuids) => addPhotos(uuids)" @close="create.active = !create.active" v-if="create.active" :album="props.album" <Panel @data="(uuids) => addPhotos(uuids)" @close="create.active = !create.active" v-if="create.active" :album="props.album"
class="absolute laptop:-right-0 top-[110%] z-10 mt-4" /> class="absolute right-0 top-[110%] z-10 mt-4 " />
</div> </div>
</div> </div>
</template> </template>

12
resources/js/Pages/Home.vue
Unescape View File

@ -8,13 +8,13 @@ import Layout from '@/Layouts/Layout.vue';
<Head title="Home"/> <Head title="Home"/>
<Layout> <Layout>
<template #content> <template #content>
<div class="relative w-full h-96 flex items-center overflow-hidden"> <div class="relative w-full laptop:h-96 flex items-center overflow-hidden max-h-96">
<img src="/img/sarasin.png" class="w-full pb-96"> <img src="/img/sarasin.png" class="w-full laptop:pb-96">
<p class="text-center absolute text-white/65 text-[180px] leading-[180px] font-bold left-0 right-0">Scout Baslac</p> <p class="text-center absolute text-white/65 laptop:text-[180px] text-8xl laptop:leading-[180px] font-bold left-0 right-0">Scout Baslac</p>
</div> </div>
<div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 flex flex-col"> <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 flex flex-col">
<div class="my-5"> <div class="my-5">
<p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Qui sommes-nous?</p> <p class="w-full laptop:text-5xl text-3xl border-b border-gray-300 pb-2 mb-2 font-semibold">Qui sommes-nous?</p>
<p class="mb-2"> <p class="mb-2">
Le Groupement scout du Bas-Lac existe depuis bientôt trente ans mais repose sur une tradition depuis 1920 sur Saint-Blaise. Le Groupement scout du Bas-Lac existe depuis bientôt trente ans mais repose sur une tradition depuis 1920 sur Saint-Blaise.
La base du scoutisme est la relation avec la nature (respect de l’environnement, reconnaissance de la faune et de la flore, construction de cabanes ou abris, La base du scoutisme est la relation avec la nature (respect de l’environnement, reconnaissance de la faune et de la flore, construction de cabanes ou abris,
@ -44,7 +44,7 @@ import Layout from '@/Layouts/Layout.vue';
</p> </p>
</div> </div>
<div class="my-5"> <div class="my-5">
<p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Nos groupes par âge</p> <p class="w-full laptop:text-5xl text-3xl border-b border-gray-300 pb-2 mb-2 font-semibold">Nos groupes par âge</p>
<p class="mb-2">Notre groupe est divisé par tranche d'âge allant de 7 à 25 ans pour les participants</p> <p class="mb-2">Notre groupe est divisé par tranche d'âge allant de 7 à 25 ans pour les participants</p>
<ul class="list-disc px-6"> <ul class="list-disc px-6">
<li class="mb-2"> <li class="mb-2">
@ -88,7 +88,7 @@ import Layout from '@/Layouts/Layout.vue';
</ul> </ul>
</div> </div>
<div class="my-5"> <div class="my-5">
<p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Information pratique</p> <p class="w-full laptop:text-5xl text-3xl border-b border-gray-300 pb-2 mb-2 font-semibold">Information pratique</p>
<p class="mb-2">Voici les informations principal pour s'engager.</p> <p class="mb-2">Voici les informations principal pour s'engager.</p>
<ul class="list-disc px-6"> <ul class="list-disc px-6">
<li class="mb-2"> <li class="mb-2">

19
resources/js/Pages/Photo/Index.vue
Unescape View File

@ -67,6 +67,11 @@ const deletePhoto = (uuid) => {
}); });
} }
} }
const toggle = () => {
document.querySelector('#affichage').classList.toggle('hidden');
document.querySelector('#affichage').classList.toggle('flex');
}
</script> </script>
<template> <template>
@ -75,13 +80,15 @@ const deletePhoto = (uuid) => {
<template #header> <template #header>
<div class="w-full flex justify-between items-center py-1"> <div class="w-full flex justify-between items-center py-1">
<div class="relative flex items-center"> <div class="relative flex items-center">
<p class="font-semibold mr-4">Affichage</p> <p class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm hidden laptop:block">Affichage</p>
<div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden"> <p @click="toggle"
<button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r border-gray-400 p-1 class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm laptop:hidden">Affichage</p>
<div id="affichage" class="absolute laptop:static hidden top-full mt-1 laptop:flex laptop:flex-row flex-col items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
<button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1
hover:bg-black/5"> hover:bg-black/5">
<img src="/icons/block-content.svg" class="h-7"> <img src="/icons/block-content.svg" class="h-7">
</button> </button>
<button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1 <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1
hover:bg-black/5"> hover:bg-black/5">
<img src="/icons/list.svg" class="h-7"> <img src="/icons/list.svg" class="h-7">
</button> </button>
@ -94,10 +101,10 @@ const deletePhoto = (uuid) => {
<div class="relative flex items-center"> <div class="relative flex items-center">
<button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1"> <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
<p class="font-medium mr-4">Ajouter une photo</p> <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p>
<img src="/icons/add.svg" class="h-8"> <img src="/icons/add.svg" class="h-8">
</button> </button>
<Create @close="create.active = !create.active" v-if="create.active" class="absolute -right-0 top-[110%] z-10 mt-4" /> <Create @close="create.active = !create.active" v-if="create.active" class="absolute right-0 top-[110%] z-10 mt-4" />
</div> </div>
</div> </div>
</template> </template>

4
resources/js/Pages/Photo/Partials/Panel.vue
Unescape View File

@ -38,11 +38,11 @@ uuids();
<template> <template>
<div class="text-left text-black shadow-3xl shadow-gray-900 rounded-lg bg-gray-100 overflow-y-auto <div class="text-left text-black shadow-3xl shadow-gray-900 rounded-lg bg-gray-100 overflow-y-auto
border border-gray-500" :class="{ 'w-[30rem] max-h-[calc(100vh/2)]': !panelState.toggle, 'w-[60rem] h-[40rem]': panelState.toggle, }"> border border-gray-500" :class="{ 'laptop:w-[30rem] w-screen max-h-[calc(100vh/2)]': !panelState.toggle, 'laptop:w-[60rem] w-screen laptop:h-[40rem] laptop:pb-0 pb-32 h-screen': panelState.toggle, }">
<div v-if="imageState.url && !panelState.toggle" class="max-h-72 overflow-hidden flex items-center"> <div v-if="imageState.url && !panelState.toggle" class="max-h-72 overflow-hidden flex items-center">
<img :src="imageState.url"> <img :src="imageState.url">
</div> </div>
<div class="px-10 pb-5 pt-5"> <div class="laptop:px-10 px-2 pb-5 pt-5">
<div class="w-full flex justify-between mb-5 items-center"> <div class="w-full flex justify-between mb-5 items-center">
<select @change="panelState.toggle = !panelState.toggle" class="bg-gray-200 border-none rounded shadow"> <select @change="panelState.toggle = !panelState.toggle" class="bg-gray-200 border-none rounded shadow">
<option>Photo Existante</option> <option>Photo Existante</option>

12
resources/js/Pages/Photo/Partials/PanelDisplay.vue
Unescape View File

@ -46,24 +46,24 @@ initLoad();
</script> </script>
<template> <template>
<div class="flex pb-10 h-[35rem]"> <div class="flex pb-10 laptop:h-[35rem] h-full overflow-y-auto">
<div class="flex flex-col items-start justify-between w-32 border-r border-gray-200 pr-2"> <div class="flex flex-col items-start justify-between w-32 border-r border-gray-200 pr-2">
<div class="w-full"> <div class="w-full">
<p class="px-1 mb-4 py-1 border-b border-gray-200 text-gray-400 font-semibold">Les albums</p> <p class="px-1 mb-4 py-1 border-b border-gray-200 text-gray-400 font-semibold">Les albums</p>
<p class="mb-4 py-1 px-2 text-gray-700 rounded shadow" <p class="mb-4 py-1 laptop:px-2 pl-1 text-gray-700 rounded shadow laptop:text-lg text-sm"
@click="loadAlbum('')" @click="loadAlbum('')"
:class="{ 'bg-gray-200': albumState.focusAlbum === '', 'bg-gray-100': albumState.focusAlbum !== ''}">Photothèque</p> :class="{ 'bg-gray-200': albumState.focusAlbum === '', 'bg-gray-100': albumState.focusAlbum !== ''}">Photothèque</p>
<p v-for="album in albumState.albums" <p v-for="album in albumState.albums"
@click="loadAlbum(album.uuid)" @click="loadAlbum(album.uuid)"
class="mb-2 py-1 px-2 bg-gray-100 text-gray-700 class="mb-2 py-1 laptop:px-2 pl-1 bg-gray-100 text-gray-700 laptop:text-lg text-sm
overflow-hidden text-nowrap rounded shadow" overflow-hidden text-nowrap rounded shadow"
:class="{ 'bg-gray-200': albumState.focusAlbum === album.uuid, 'bg-gray-100': albumState.focusAlbum !== album.uuid}">{{ album.name }}</p> :class="{ 'bg-gray-200': albumState.focusAlbum === album.uuid, 'bg-gray-100': albumState.focusAlbum !== album.uuid}">{{ album.name }}</p>
<p class="my-1 py-1 px-2 bg-gray-100 text-gray-700 rounded shadow">plus d'album</p> <p class="hidden my-1 py-1 laptop:px-2 pl-1 bg-gray-100 text-gray-700 rounded shadow laptop:text-lg text-sm">plus d'album</p>
</div> </div>
<button @click="emits('data', photos)" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Ajouter</button> <button @click="emits('data', photos)" class="text-white font-semibold p-1 px-2 bg-primary rounded-md">Ajouter</button>
</div> </div>
<div class="w-[calc(100%-8rem)] h-full overflow-y-scroll py-5 ml-2"> <div class="w-[calc(100%-8rem)] h-full overflow-y-scroll py-5 ml-2">
<div class="grid grid-cols-3"> <div class="grid tablet:grid-cols-3">
<PanelShow v-for="(photo, index) in albumState.photos" v-show="!props.hiddenPhotos.includes(photo.uuid)" :photo="photo" <PanelShow v-for="(photo, index) in albumState.photos" v-show="!props.hiddenPhotos.includes(photo.uuid)" :photo="photo"
:index="index" :length="albumState.photos.length" :columns="3" :active="photos.includes(photo.uuid)" :index="index" :length="albumState.photos.length" :columns="3" :active="photos.includes(photo.uuid)"
@photo-added="(uuid) => { if(!photos.includes(uuid)) photos.push(uuid) }" @photo-added="(uuid) => { if(!photos.includes(uuid)) photos.push(uuid) }"
@ -72,7 +72,7 @@ initLoad();
</div> </div>
<div v-if="albumState.pageCount < albumState.lastPage" class="py-2 w-full flex justify-center"> <div v-if="albumState.pageCount < albumState.lastPage" class="py-2 w-full flex justify-center">
<button @click="loadPhotos(albumState.focusAlbum, ++albumState.pageCount)" class="bg-gray-100 p-2 font-medium text-gray-700 <button @click="loadPhotos(albumState.focusAlbum, ++albumState.pageCount)" class="bg-gray-100 p-2 font-medium text-gray-700
rounded shadow hover:scale-[1.01]">Afficher plus de photos</button> rounded shadow hover:scale-[1.01] laptop:text-lg text-sm">Afficher plus de photos</button>
</div> </div>
</div> </div>
</div> </div>

10
resources/js/Pages/Profile/Edit.vue
Unescape View File

@ -25,21 +25,21 @@ defineProps({
</template> </template>
<template #content> <template #content>
<div class="py-12"> <div class="py-12">
<div class="mx-auto max-w-7xl space-y-6 sm:px-6 lg:px-8"> <div class="mx-auto max-w-7xl space-y-6 laptop:px-6 desktop:px-8">
<div <div
class="bg-gray-50 p-4 shadow sm:rounded-lg sm:p-8" class="bg-gray-50 p-4 shadow laptop:rounded-lg laptop:p-8"
> >
<UpdateProfileInformationForm <UpdateProfileInformationForm
:must-verify-email="mustVerifyEmail" :must-verify-email="mustVerifyEmail"
:status="status" :status="status"
class="pr-64" class="tablet:pr-64"
/> />
</div> </div>
<div <div
class="bg-gray-50 p-4 shadow sm:rounded-lg sm:p-8" class="bg-gray-50 p-4 shadow laptop:rounded-lg laptop:p-8"
> >
<UpdatePasswordForm class="pr-64" /> <UpdatePasswordForm class="tablet:pr-64" />
</div> </div>
</div> </div>
</div> </div>

6
resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
Unescape View File

@ -45,8 +45,8 @@ const submit = () => {
<template> <template>
<section class=""> <section class="">
<header :class="{'items-center' : !pic.edit}" class="flex justify-between"> <header :class="{'items-center' : !pic.edit}" class="flex tablet:flex-row flex-col-reverse tablet:justify-between justify-center">
<div> <div class="tablet:w-fit tablet:mt-0 w-full mt-5">
<h2 class="text-xl font-medium text-gray-900"> <h2 class="text-xl font-medium text-gray-900">
Information Profile Information Profile
</h2> </h2>
@ -59,7 +59,7 @@ const submit = () => {
<img :src="user.pic" class="h-32" :class="{ 'invert': user.path === 'profiles/none.svg' }"> <img :src="user.pic" class="h-32" :class="{ 'invert': user.path === 'profiles/none.svg' }">
</div> </div>
<div @click="(e) => { Utils.Prevent(e); pic.edit = true; }" :class="{ 'hidden': !pic.active }" <div @click="(e) => { Utils.Prevent(e); pic.edit = true; }" :class="{ 'hidden': !pic.active }"
class="absolute top-full right-0 w-40 mt-1 bg-white text-sm text-black/80 rounded-md shadow-xl overflow-hidden"> class="absolute top-full tablet:right-0 w-40 mt-1 bg-white text-sm text-black/80 rounded-md shadow-xl overflow-hidden">
<p class="px-3 py-2 hover:bg-gray-100 hover:scale-[1.01]">Changer la photo</p> <p class="px-3 py-2 hover:bg-gray-100 hover:scale-[1.01]">Changer la photo</p>
<p class="px-3 py-2 hover:bg-gray-100 hover:scale-[1.01]" >Retirer la photo</p> <p class="px-3 py-2 hover:bg-gray-100 hover:scale-[1.01]" >Retirer la photo</p>
</div> </div>

Write Preview
Loading…
Cancel
Save