Avancement sur le front

css/app.css

@@ -537,6 +537,15 @@ video {
         max-width: 1440px
     }
 }
+.relative{
+    position: relative
+}
+.float-right{
+    float: right
+}
+.clear-both{
+    clear: both
+}
 .m-8{
     margin: 2rem
 }
@@ -548,6 +557,10 @@ video {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem
 }
+.my-4{
+    margin-top: 1rem;
+    margin-bottom: 1rem
+}
 .my-8{
     margin-top: 2rem;
     margin-bottom: 2rem
@@ -573,6 +586,9 @@ video {
 .flex{
     display: flex
 }
+.table{
+    display: table
+}
 .hidden{
     display: none
 }
@@ -585,6 +601,12 @@ video {
 .h-6{
     height: 1.5rem
 }
+.h-full{
+    height: 100%
+}
+.min-h-12{
+    min-height: 3rem
+}
 .min-h-screen{
     min-height: 100vh
 }
@@ -600,12 +622,32 @@ video {
 .w-full{
     width: 100%
 }
+.min-w-max{
+    min-width: -moz-max-content;
+    min-width: max-content
+}
 .max-w-sm{
     max-width: 24rem
 }
 .flex-grow{
     flex-grow: 1
 }
+.table-auto{
+    table-layout: auto
+}
+.scale-100{
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.scale-95{
+    --tw-scale-x: .95;
+    --tw-scale-y: .95;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.transform{
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
 .cursor-pointer{
     cursor: pointer
 }
@@ -633,12 +675,18 @@ video {
 .self-center{
     align-self: center
 }
+.overflow-scroll{
+    overflow: scroll
+}
 .rounded{
     border-radius: 0.25rem
 }
 .rounded-md{
     border-radius: 0.375rem
 }
+.rounded-xl{
+    border-radius: 0.75rem
+}
 .border-b{
     border-bottom-width: 1px
 }
@@ -646,6 +694,10 @@ video {
     --tw-border-opacity: 1;
     border-color: rgb(0 104 91 / var(--tw-border-opacity))
 }
+.border-slate-300{
+    --tw-border-opacity: 1;
+    border-color: rgb(203 213 225 / var(--tw-border-opacity))
+}
 .bg-gray-100{
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity))
@@ -666,13 +718,28 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(0 104 91 / var(--tw-bg-opacity))
 }
+.bg-secondary{
+    --tw-bg-opacity: 1;
+    background-color: rgb(20 184 166 / var(--tw-bg-opacity))
+}
+.bg-slate-200{
+    --tw-bg-opacity: 1;
+    background-color: rgb(226 232 240 / var(--tw-bg-opacity))
+}
 .bg-white{
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
+.bg-clip-border{
+    background-clip: border-box
+}
 .p-4{
     padding: 1rem
 }
+.px-12{
+    padding-left: 3rem;
+    padding-right: 3rem
+}
 .px-3{
     padding-left: 0.75rem;
     padding-right: 0.75rem
@@ -681,6 +748,10 @@ video {
     padding-left: 1rem;
     padding-right: 1rem
 }
+.px-6{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem
+}
 .py-12{
     padding-top: 3rem;
     padding-bottom: 3rem
@@ -693,6 +764,13 @@ video {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem
 }
+.py-8{
+    padding-top: 2rem;
+    padding-bottom: 2rem
+}
+.text-left{
+    text-align: left
+}
 .text-center{
     text-align: center
 }
@@ -712,9 +790,6 @@ video {
     font-size: 0.875rem;
     line-height: 1.25rem
 }
-.text-xl{
-    font-size: 1.25rem
-}
 .text-xxl{
     font-size: 1.5rem
 }
@@ -768,6 +843,32 @@ video {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
 }
+.opacity-0{
+    opacity: 0
+}
+.opacity-100{
+    opacity: 1
+}
+.shadow-md{
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.transition{
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-all{
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.duration-500{
+    transition-duration: 500ms
+}
 .alignfull{
     margin: 2rem calc(50% - 50vw) !important;
     max-width: 100vw !important;
@@ -880,6 +981,29 @@ article > *:not(.entry-content),
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }
+.form-add-event input, .form-add-event .acf-field input[type=text], .form-add-event .acf-field input[type=number]{
+    min-height: 3rem;
+    border-radius: 0.375rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    line-height: 2.5rem
+}
+.form-add-event .acf-icon.-small{
+    line-height: 2rem
+}
+.form-add-event .acf-form-submit{
+    text-align: center
+}
+.form-add-event input[type=submit]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(20 184 166 / var(--tw-bg-opacity));
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity))
+}
 @media (min-width: 782px){
 
     .md\:my-6{

css/editor-style.css

@@ -37,6 +37,15 @@
         max-width: 1440px
     }
 }
+.relative {
+    position: relative
+}
+.float-right {
+    float: right
+}
+.clear-both {
+    clear: both
+}
 .m-8 {
     margin: 2rem
 }
@@ -48,6 +57,10 @@
     margin-top: 0.75rem;
     margin-bottom: 0.75rem
 }
+.my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem
+}
 .my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem
@@ -64,9 +77,6 @@
 .mt-4 {
     margin-top: 1rem
 }
-.mb-2 {
-    margin-bottom: 0.5rem
-}
 .block {
     display: block
 }
@@ -76,20 +86,26 @@
 .flex {
     display: flex
 }
+.table {
+    display: table
+}
 .hidden {
     display: none
 }
 .h-1 {
     height: 0.25rem
 }
+.h-12 {
+    height: 3rem
+}
 .h-6 {
     height: 1.5rem
 }
-.h-8 {
+.h-full {
-    height: 2rem
+    height: 100%
 }
-.h-12 {
+.min-h-12 {
-    height: 3rem
+    min-height: 3rem
 }
 .min-h-screen {
     min-height: 100vh
@@ -106,11 +122,9 @@
 .w-full {
     width: 100%
 }
-.w-1\/2 {
+.min-w-max {
-    width: 50%
+    min-width: -moz-max-content;
-}
+    min-width: max-content
-.w-2\/3 {
-    width: 66.666667%
 }
 .max-w-sm {
     max-width: 24rem
@@ -118,6 +132,22 @@
 .flex-grow {
     flex-grow: 1
 }
+.table-auto {
+    table-layout: auto
+}
+.scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.scale-95 {
+    --tw-scale-x: .95;
+    --tw-scale-y: .95;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.transform {
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
 .cursor-pointer {
     cursor: pointer
 }
@@ -145,12 +175,18 @@
 .self-center {
     align-self: center
 }
+.overflow-scroll {
+    overflow: scroll
+}
 .rounded {
     border-radius: 0.25rem
 }
 .rounded-md {
     border-radius: 0.375rem
 }
+.rounded-xl {
+    border-radius: 0.75rem
+}
 .border-b {
     border-bottom-width: 1px
 }
@@ -158,6 +194,10 @@
     --tw-border-opacity: 1;
     border-color: rgb(0 104 91 / var(--tw-border-opacity))
 }
+.border-slate-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(203 213 225 / var(--tw-border-opacity))
+}
 .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity))
@@ -170,21 +210,36 @@
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity))
 }
+.bg-light {
+    --tw-bg-opacity: 1;
+    background-color: rgb(232 241 240 / var(--tw-bg-opacity))
+}
 .bg-primary {
     --tw-bg-opacity: 1;
     background-color: rgb(0 104 91 / var(--tw-bg-opacity))
 }
+.bg-secondary {
+    --tw-bg-opacity: 1;
+    background-color: rgb(20 184 166 / var(--tw-bg-opacity))
+}
+.bg-slate-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(226 232 240 / var(--tw-bg-opacity))
+}
 .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
-.bg-light {
+.bg-clip-border {
-    --tw-bg-opacity: 1;
+    background-clip: border-box
-    background-color: rgb(232 241 240 / var(--tw-bg-opacity))
 }
 .p-4 {
     padding: 1rem
 }
+.px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem
+}
 .px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem
@@ -193,6 +248,10 @@
     padding-left: 1rem;
     padding-right: 1rem
 }
+.px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem
+}
 .py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem
@@ -209,9 +268,8 @@
     padding-top: 2rem;
     padding-bottom: 2rem
 }
-.px-6 {
+.text-left {
-    padding-left: 1.5rem;
+    text-align: left
-    padding-right: 1.5rem
 }
 .text-center {
     text-align: center
@@ -232,9 +290,6 @@
     font-size: 0.875rem;
     line-height: 1.25rem
 }
-.text-xl {
-    font-size: 1.25rem
-}
 .text-xxl {
     font-size: 1.5rem
 }
@@ -288,6 +343,32 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
 }
+.opacity-0 {
+    opacity: 0
+}
+.opacity-100 {
+    opacity: 1
+}
+.shadow-md {
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.transition {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.duration-500 {
+    transition-duration: 500ms
+}
 .alignfull {
     margin: 2rem calc(50% - 50vw) !important;
     max-width: 100vw !important;

front-page.php

@@ -0,0 +1,20 @@
+<?php get_header(); ?>
+
+<div class="container mx-auto my-8">
+
+	<?php if ( have_posts() ) : ?>
+		<?php
+		while ( have_posts() ) :
+			the_post();
+			?>
+
+			<?php get_template_part( 'template-parts/content', get_post_format() ); ?>
+
+		<?php endwhile; ?>
+
+	<?php endif; ?>
+
+</div>
+
+<?php
+get_footer();

functions.php

@@ -111,3 +111,4 @@ function tailpress_nav_menu_add_submenu_class( $classes, $args, $depth ) {
 add_filter( 'nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3 );
 
 require_once(__DIR__ . '/includes/post-type.php');
+require_once(__DIR__ . '/includes/add-form.php');

includes/add-form.php

@@ -0,0 +1,11 @@
+<?php
+function my_acf_prepare_field( $field ) {
+	
+    $field['label'] = "Titre";
+    $field['value'] ='';
+    $field['placeholder'] = "Titre de l'événement";
+
+    return $field;
+    
+}
+add_filter('acf/prepare_field/name=_post_title', 'my_acf_prepare_field');

js/app.js

@@ -16,6 +16,31 @@ window.addEventListener('load', function () {
   });
 });
 
+// Display form add event
+document.addEventListener("DOMContentLoaded", function () {
+  var button = document.querySelector('.add-event');
+  var form = document.querySelector('.form-add-event');
+  button.addEventListener('click', function () {
+    if (form.classList.contains('hidden')) {
+      // Afficher le formulaire
+      form.classList.remove('hidden');
+      setTimeout(function () {
+        form.classList.remove('opacity-0', 'scale-95');
+        form.classList.add('opacity-100', 'scale-100');
+      }, 10); // Petit délai pour permettre à la transition de s'exécuter
+    } else {
+      // Masquer le formulaire
+      form.classList.remove('opacity-100', 'scale-100');
+      form.classList.add('opacity-0', 'scale-95');
+      form.addEventListener('transitionend', function () {
+        form.classList.add('hidden');
+      }, {
+        once: true
+      });
+    }
+  });
+});
+
 /***/ }),
 
 /***/ "./resources/css/app.css":

resources/css/app.css

@@ -4,3 +4,4 @@
 
 @import "custom.css";
 @import "form.css";
+@import "events-add.css";

resources/css/events-add.css

@@ -0,0 +1,14 @@
+.form-add-event{
+    input, .acf-field input[type=text], .acf-field input[type=number]{
+        @apply min-h-12 rounded-md px-6 leading-10;
+    }
+    .acf-icon.-small {
+        @apply leading-8;
+    }
+    .acf-form-submit{
+        @apply text-center;
+    }
+    input[type=submit]{
+        @apply px-4 py-2 bg-secondary text-white;
+    }
+}

resources/js/app.js

@@ -6,3 +6,31 @@ window.addEventListener('load', function () {
             main_navigation.classList.toggle('hidden');
       });
 });
+
+// Display form add event
+document.addEventListener("DOMContentLoaded", () => {
+      const button = document.querySelector('.add-event');
+      const form = document.querySelector('.form-add-event');
+    
+      button.addEventListener('click', () => {
+        if (form.classList.contains('hidden')) {
+          // Afficher le formulaire
+          form.classList.remove('hidden');
+          setTimeout(() => {
+            form.classList.remove('opacity-0', 'scale-95');
+            form.classList.add('opacity-100', 'scale-100');
+          }, 10); // Petit délai pour permettre à la transition de s'exécuter
+        } else {
+          // Masquer le formulaire
+          form.classList.remove('opacity-100', 'scale-100');
+          form.classList.add('opacity-0', 'scale-95');
+          form.addEventListener(
+            'transitionend',
+            () => {
+              form.classList.add('hidden');
+            },
+            { once: true }
+          );
+        }
+      });
+    });

template-parts/content.php

@@ -1,7 +1,17 @@
 <?php 
 
 if (is_front_page() && is_user_logged_in()):
-	echo 'je suis connected';
+	// Add event
+	get_template_part(
+		'template-parts/events-add',
+		null
+	);
+	//Les events
+	get_template_part(
+		'template-parts/events-display',
+		null
+	);
+
 else:
 	?>
 	<div class="form-connection w-4/6 mx-auto bg-light rounded-md">

template-parts/events-add.php

@@ -0,0 +1,21 @@
+<section class="section-add-event rounded-md mb-4">
+    <div>
+        <h2 class="add-event bg-secondary py-2 px-4 rounded-md text-white float-right cursor-pointer block">Ajouter un événement +</h2>
+        <div class="clear-both"></div>
+    </div>
+    <div class="form-add-event hidden opacity-0 transform scale-95 transition-all duration-500 my-4 py-8 px-12 bg-slate-200 rounded-md">
+        <?php acf_form_head(); ?>
+        <?php 
+            acf_form(array(
+                'post_id'       => 'new_post',
+                'new_post'      => array(
+                    'post_type'     => 'evenements',
+                    'post_status'   => 'publish'
+                ),
+                'submit_value'  => 'Ajouter un événement',
+                'post_title' => true,
+                'field_groups' => array('group_67405fd4d1648'),
+            )); 
+        ?>
+    </div>
+</section>

template-parts/events-display.php

@@ -0,0 +1,47 @@
+<?php 
+
+// WP_Query arguments
+$args = array(
+	'post_type' => 'evenements',
+);
+
+// The Query
+$query = new WP_Query( $args );
+
+?>
+
+<section>
+    <div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-xl bg-clip-border">
+        <table class="w-full text-left table-auto min-w-max">
+            <thead>
+                <tr>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">Début</th>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">Fin</th>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">CP</th>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">Organisme</th>
+                    <th class="p-4 border-b border-slate-300 bg-slate-200">Titre</th>
+                </tr>
+            </thead>
+            <tbody>
+            <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
+            <?php 
+                $date_debut = get_field('date_debut');
+                $date_fin = get_field('date_fin');
+                $code_postal = get_field('code_postal');
+                $organisme = get_field('organisme');
+                $lien_de_levenement = get_field('lien_de_levenement');
+            ?>
+                <tr>
+                    <td class="p-4 border-b border-slate-300"><?php echo $date_debut; ?></td>
+                    <td class="p-4 border-b border-slate-300"><?php echo $date_fin; ?></td>
+                    <td class="p-4 border-b border-slate-300"><?php echo $code_postal; ?></td>
+                    <td class="p-4 border-b border-slate-300"><?php echo $organisme; ?></td>
+                    <td class="p-4 border-b border-slate-300"><a href="<?php echo $lien_de_levenement; ?>" target="_blank"><?php the_title(); ?></a></td>
+                </tr>
+            <?php endwhile; else : ?>
+            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
+            <?php endif; ?>
+            </tbody>
+        </table>
+    </div>
+</section>