Changed affichage btns designe

beta
anulax1225 ago%!(EXTRA string=3 months)
parent 99a595108b
commit c63e48188d
  1. 3
      resources/js/Pages/Album/Index.vue
  2. 12
      resources/js/Pages/Album/Show.vue
  3. 9
      resources/js/Pages/Photo/Index.vue

@ -42,8 +42,7 @@ const gridState = reactive({ columns: 3 });
<template #header>
<div class="w-full flex justify-between items-center py-1">
<div class="relative flex items-center">
<p class="font-semibold laptop:mr-4 ml-1 laptop:text-lg text-sm">Affichage</p>
<div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
<div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
<button @click="squareView" :class="{'bg-black/5': viewState.square}" class="flex items-center h-full border-r border-gray-400 p-1
hover:bg-black/5">
<img src="/icons/block-content.svg" class="h-7">

@ -108,16 +108,12 @@ onMounted(() => {
<template #header>
<div class="w-full flex justify-between items-center py-1">
<div class="relative flex items-center">
<p class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm hidden laptop:block">Affichage</p>
<p @click="toggle"
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
<div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
<button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r border-gray-400 p-1
hover:bg-black/5">
<img src="/icons/block-content.svg" class="h-7">
</button>
<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
<button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1
hover:bg-black/5">
<img src="/icons/list.svg" class="h-7">
</button>
@ -128,7 +124,7 @@ onMounted(() => {
</div>
</div>
<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>
<img src="/icons/add.svg" class="h-8">
</button>

@ -91,15 +91,12 @@ onMounted(() => {
<template #header>
<div class="w-full flex justify-between items-center py-1">
<div class="relative flex items-center">
<p class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm hidden laptop:block">Affichage</p>
<p @click="toggle"
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
<div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
<button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r border-gray-400 p-1
hover:bg-black/5">
<img src="/icons/block-content.svg" class="h-7">
</button>
<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
<button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1
hover:bg-black/5">
<img src="/icons/list.svg" class="h-7">
</button>

Loading…
Cancel
Save