assets/styles/app.css

@@ -9,21 +9,21 @@ body {
   background-color: #fff;
   border: 1px solid #5c5d7f;
   border-radius: 8px;
-    max-width: 600px;
   margin: 20px auto;
   padding: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
+  width: 70%;
+}
 
-    .profile-header {
+.profile-header {
   display: flex;
   align-items: center;
   border-bottom: 1px solid #5c5d7f;
   padding-bottom: 10px;
   margin-bottom: 20px;
-    }
+}
 
-    .profile-image {
+.profile-image {
   border-radius: 50%;
   width: 100px;
   height: 100px;
@@ -33,13 +33,13 @@ body {
 
 .profile-info {
   flex-grow: 1;
-    }
+}
 
-    .profile-info h1 {
+.profile-info h1 {
   font-size: 24px;
   margin: 0;
   color: #1a2c4c;
-    }
+}
 
 .profile-info p {
   margin: 5px 0;
@@ -74,9 +74,11 @@ body {
   text-decoration: none;
   margin: 4px;
 }
+
 .count-container {
   display: flex;
-    margin-left: auto; /* Pushes the container to the right */
+  margin-left: auto;
+  /* Pushes the container to the right */
 }
 
 .count-button {
@@ -93,7 +95,7 @@ body {
 
 
 
-.count-button:hover{
+.count-button:hover {
   background-color: #5c5d7f;
 }
 
@@ -107,7 +109,8 @@ body {
 /* Ajoutez les styles existants ici */
 
 .popup {
-    display: none; /* Hidden by default */
+  display: none;
+  /* Hidden by default */
   position: fixed;
   z-index: 1;
   left: 0;
@@ -115,8 +118,9 @@ body {
   width: 100%;
   height: 100%;
   overflow: auto;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+  /* Black w/ opacity */
 }
 
 .popup-content {
@@ -159,9 +163,9 @@ html {
   background-size:
     calc(2*var(--s)) calc(9*var(--s)/4),
     calc(2*var(--s)) calc(3*var(--s)/4);
-  }
+}
 
-  header {
+header {
   background-color: #bda3b6;
   padding: 4px;
   border-radius: 10px;
@@ -176,13 +180,13 @@ nav {
   align-items: center;
 }
 
-.nav-logo{
+.nav-logo {
   text-decoration: none;
   color: #333;
   margin-left: 15px;
 }
 
-.nav-link{
+.nav-link {
   text-decoration: none;
   color: #333;
   margin-right: 30px;

config/packages/twig.yaml

@@ -1,5 +1,6 @@
 twig:
     file_name_pattern: '*.twig'
+    form_themes: ['form_div_layout.html.twig']
 
 when@test:
     twig:

migrations/Version20240612225056.php

@@ -10,7 +10,7 @@ use Doctrine\Migrations\AbstractMigration;
 /**
  * Auto-generated Migration: Please modify to your needs!
  */
-final class Version20240612212104 extends AbstractMigration
+final class Version20240612225056 extends AbstractMigration
 {
     public function getDescription(): string
     {

public/css/components/form.css

@@ -0,0 +1,107 @@
+.form-container {
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+  }
+
+  label {
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+
+  textarea {
+    padding: 10px;
+    border: 1px solid black;
+    border-radius: 1em;
+    resize: none;
+  }
+
+  input {
+    font-size: 1.2em;
+    padding: 10px;
+    border: 1px solid black;
+    border-radius: 16px;
+  }
+
+  input[type="checkbox"] {
+    font-size: 10px;
+    width: 20px;
+    height: 20px;
+    transform: scale(1.25);
+    accent-color: #3a3c6e;
+    border: 5px solid black;
+  }
+
+  button[type="submit"] {
+    border: 3px solid #3a3c6e;
+    padding: 10px 30px;
+    display: block;
+    font-size: 1.5em;
+    font-weight: bold;
+    border-radius: 10px;
+    background-color: #3a3c6e;
+    color: white;
+    transition: 0.5s;
+    width: fit-content;
+  }
+
+  button[type="submit"]:hover {
+    cursor: pointer;
+    background-color: white;
+    color: #3a3c6e;
+  }
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+.form-error {
+  color: #e74c3c;
+  font-size: 14px;
+  margin-left: -25px;
+}
+
+.form-errors {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.form-errors li {
+  margin-bottom: 5px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background-color: #3498db;
+  color: #fff;
+  border: none;
+}
+
+.btn-primary:hover {
+  background-color: #2980b9;
+}

public/css/components/post.css

@@ -1,7 +1,3 @@
-:root {
-  font-family: "Helvetica", 'Courier New', Courier, monospace;
-}
-
 #post-wrapper {
   width: 70%;
   background-color: #f2f2f7;
@@ -37,20 +33,3 @@ p {
 hr {
   color: black;
 }
-
-html {
-  --s: 257px;
-  /* control the size */
-  --c1: #38476b;
-  --c2: #bda3b6;
-
-  --_c: var(--c1) calc(100% - var(--s)/2) 99%, #0000;
-  --_g: var(--s), #0000 calc(99% - var(--s)/2), var(--_c);
-  background:
-    radial-gradient(var(--s) at 100% var(--_g)),
-    radial-gradient(calc(var(--s)/4) at 50% calc(100%/3), var(--_c)) var(--s) 0,
-    radial-gradient(var(--s) at 0% var(--_g)) 0 calc(3*var(--s)) var(--c2);
-  background-size:
-    calc(2*var(--s)) calc(9*var(--s)/4),
-    calc(2*var(--s)) calc(3*var(--s)/4);
-}

public/css/components/post_mini.css

@@ -3,6 +3,11 @@
   border: 3px solid black;
   border-radius: 1rem;
   padding: 20px;
+  transition: .3s;
+}
+
+#post-wrapper:hover {
+  transform: scale(1.02);
 }
 
 #post-info {
@@ -22,3 +27,8 @@
     font-size: 1em;
   }
 }
+
+a {
+  text-decoration: none;
+  color: black;
+}

src/Controller/PostController.php

@@ -34,7 +34,7 @@ class PostController extends AbstractController
 
     #[Route(
         '/post/{id}',
-        name: 'display post',
+        name: 'display_post',
         methods: ['GET'],
         requirements: ['id' => '\d+']
     )]
@@ -68,7 +68,8 @@ class PostController extends AbstractController
 
             $this->em->persist($post);
             $this->em->flush();
-            return $this->redirectToRoute('display post', ['id' => $post->getId()]);
+
+            return $this->redirectToRoute('display_post', ['id' => $post->getId()]);
         }
 
         return $this->render('post/new.html.twig', [

src/Entity/Post.php

@@ -7,6 +7,8 @@ use DateTime;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Validator\Constraints as Assert;
+use Symfony\Component\Validator\Mapping\ClassMetadata;
 
 #[ORM\Entity(repositoryClass: PostRepository::class)]
 class Post
@@ -98,7 +100,6 @@ class Post
         return $this;
     }
 
-
     public function getUpVote(): ?int
     {
         return $this->upVote;
@@ -189,6 +190,16 @@ class Post
         return $this;
     }
 
+    public static function loadValidatorMetadata(ClassMetadata $metadata): void
+    {
+        $metadata->addPropertyConstraint('title', new Assert\Length([
+            'min' => 10,
+            'max' => 200,
+            'minMessage' => 'Your title must be at least {{ limit }} characters long',
+            'maxMessage' => 'Your title cannot be longer than {{ limit }} characters',
+        ]));
+    }
+    
     public function getCreatedAt(): ?\DateTimeImmutable
     {
         return $this->createdAt;

src/Form/Type/PostType.php

@@ -4,7 +4,6 @@ namespace App\Form\Type;
 
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
-use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
@@ -16,12 +15,20 @@ class PostType extends AbstractType
     {
         $builder
             ->add('title', TextType::class)
-            ->add('text', TextareaType::class)
-            ->add('dream', CheckboxType::class)
+            ->add('text', TextareaType::class, [
+                    'attr' => ['rows' => '10'],
+                    'label' => 'Your dream'
+                ])
+            ->add('dream', CheckboxType::class, [
+                    'required' => false,
+                    'label' => 'Was it a nightmare ?'
+                                    ])
             // ->add('tags', ChoiceType::class, [
             //         "multiple" => true
             //     ])
-            ->add('submit', SubmitType::class)
+            ->add('submit', SubmitType::class, [
+                'label' => 'Publish'
+                ])
         ;
     }
 }

templates/base.html.twig

@@ -2,13 +2,15 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <title>{% block title %}Welcome!{% endblock %}</title>
+        <title>{% block title %}Fukafukashita{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+        <link rel="stylesheet" href="{{ asset('css/base.css') }}">
+        <link rel="stylesheet" href="{{ asset('styles/app.css')}}">
+
         {% block stylesheets %}
         {% endblock %}
 
         {% block javascripts %}
-            {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
     <body>

templates/form/theme.html.twig

@@ -0,0 +1,21 @@
+{% block form_row %}
+    {% if form.vars.block_prefixes[1] == 'checkbox' %}
+        <div class="form-group">
+            <div class="form-checkbox">
+                {{ form_widget(form) }}
+                {{ form_label(form) }}
+            </div>
+            <div class="form-error">
+                {{ form_errors(form) }}
+            </div>
+        </div>
+    {% else %}
+        <div class="form-group">
+            {{ form_label(form) }}
+            {{ form_widget(form, {'attr': {'class': 'form-control'}}) }}
+            <div class="form-error">
+                {{ form_errors(form) }}
+            </div>
+        </div>
+    {% endif %}
+{% endblock %}

templates/post/all.html.twig

@@ -1,12 +1,13 @@
 {% extends 'base.html.twig' %}
 
-
-
-{% block body %}
-
+{% block stylesheets %}
+<link rel="stylesheet" href="{{ asset ('styles/app.css')}}">
 <link rel="stylesheet" href="{{ asset('css/components/post_mini.css') }}">
-<link rel="stylesheet" href="{{ asset('css/components/post_all.css') }}">
+{% endblock %}
+
+{% block title %}All posts{% endblock %}
 
+{% block body%}
 <div id="wrapper">
   <h1>{{title}}</h1>
   

templates/post/new.html.twig

@@ -1,5 +1,21 @@
 {% extends 'base.html.twig' %}
 
+{% block stylesheets %}
+<link rel="stylesheet" href="{{ asset ('styles/app.css')}}">
+<link rel="stylesheet" href="{{ asset('css/components/form.css') }}">
+<link rel="stylesheet" href="{{ asset('css/components/post.css') }}">
+{% endblock %}
+
+{% block title %}New post{% endblock %}
+
+{% form_theme form 'form/theme.html.twig' %}
+
 {% block body %}
-{{ form(form) }}
+<div id="post-wrapper">
+  <h1>Post your dream</h1>
+
+  <div class="form-container">
+    {{ form(form) }}
+  </div>
+</div>
 {% endblock %}

templates/post/post.html.twig

@@ -1,10 +1,12 @@
 {% extends 'base.html.twig' %}
 
-
-{% block body %}
+{% block stylesheets %}
 <link rel="stylesheet" href="{{ asset('css/components/post.css') }}">
+{% endblock %}
 
-<title>{{ post.title }}</title>
+{% block title %}{{ post.title }}{% endblock %}
+
+{% block body %}
 <div id="post-wrapper">
   <div id="post">
     <div id="post-info">

templates/post/post_mini.html.twig

@@ -1,4 +1,5 @@
 {% block body %}
+<a href="{{ path('display_post', {'id': post.id}) }}">
 <div id="post-wrapper">
   <div id="post">
     <div id="post-info">
@@ -12,4 +13,5 @@
     <p>{{ post.text|u.truncate(150, true, '...') }}</p>
   </div>
 </div>
+</a>
 {% endblock %}

templates/profil/index.html.twig

@@ -1,12 +1,10 @@
-{# templates/profil/show.html.twig #}
-
 {% extends 'base.html.twig' %}
 
 {% block title %}Profil - {{ profil.name }}{% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
-    <link rel="stylesheet" href="{{ asset('public/css/components/profil.css') }}">
+<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+<link rel="stylesheet" href="{{ asset('css/components/post_mini.css')}}">
 {% endblock %}
 
 {% block body %}
@@ -17,7 +15,6 @@
                 <h1>{{ profil.name }}</h1>
                 <br>
                 <p>{{ profil.description }}</p>
-                
             </div>
         </div>
         <div class="horizontal-layout">
@@ -37,7 +34,6 @@
                 <a href="{{ path('profil_following', {id: profil.id}) }}" class="count-button">{{ profil.following.count() }} following</a>
             </div>
         </div>    
-    </div>
 
     <div class="posts-container">
         {% if posts|length > 0 %}
@@ -48,6 +44,7 @@
             </ul>
         {% endif %}
     </div>
+</div>
 {% endblock %}
 
 {% block javascripts %}

templates/registration/register.html.twig

@@ -2,6 +2,10 @@
 
 {% block title %}Register{% endblock %}
 
+{% block stylesheets %}
+<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+{% endblock %}
+
 {% block body %}
     <h1>Register</h1>
 

templates/security/login.html.twig

@@ -2,6 +2,10 @@
 
 {% block title %}Log in!{% endblock %}
 
+{% block stylesheets %}
+<link rel="stylesheet" href="{{ asset ('styles/app.css')}}">
+{% endblock %}
+
 {% block body %}
     <form method="post">
         {% if error %}