deliadmin/ceinture-culturelle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Avancement sur le front

Browse Source
This commit is contained in:
Gilles Van Assche 2024-11-25 16:43:13 +01:00
parent cbadad3737
commit c16527615d
12 changed files with 408 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
css/app.css
View File

@ -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{

123
css/editor-style.css
View File

@ -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 {
height: 2rem
.h-full {
height: 100%
}
.h-12 {
height: 3rem
.min-h-12 {
min-height: 3rem
}
.min-h-screen {
min-height: 100vh
@ -106,11 +122,9 @@
.w-full {
width: 100%
}
.w-1\/2 {
width: 50%
}
.w-2\/3 {
width: 66.666667%
.min-w-max {
min-width: -moz-max-content;
min-width: max-content
}
.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 {
--tw-bg-opacity: 1;
background-color: rgb(232 241 240 / 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
@ -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 {
padding-left: 1.5rem;
padding-right: 1.5rem
.text-left {
text-align: left
}
.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;

20
front-page.php Normal file
View File

@ -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();

1
functions.php
View File

@ -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');

11
includes/add-form.php Normal file
View File

@ -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');

25
js/app.js
View File

@ -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":

1
resources/css/app.css
View File

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

14
resources/css/events-add.css Normal file
View File

@ -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;
}
}

28
resources/js/app.js
View File

@ -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 }
);
}
});
});

12
template-parts/content.php
View File

@ -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">

21
template-parts/events-add.php Normal file
View File

@ -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>

47
template-parts/events-display.php Normal file
View File

@ -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>