post new ui + post all ui + links for posts

config/packages/twig.yaml

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

migrations/Version20240612095513.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20240612095513 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+
+    }
+}

migrations/Version20240612095600.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20240612095600 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+
+    }
+}

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

@@ -33,7 +33,7 @@ class PostController extends AbstractController
 
     #[Route(
         '/post/{id}',
-        name: 'display post',
+        name: 'display_post',
         methods: ['GET'],
         requirements: ['id' => '\d+']
     )]
@@ -66,7 +66,7 @@ class PostController extends AbstractController
             $this->em->persist($post);
             $this->em->flush();
 
-            return new Response($user->getUserIdentifier());
+            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
@@ -25,9 +27,6 @@ class Post
     #[ORM\Column]
     private ?bool $isDream = null;
 
-    // #[ORM\Column()]
-    // private ?DateTime $dateCreated = null;
-
     #[ORM\Column(options: ["default" => 0])]
     private int $upVote = 0;
 
@@ -97,18 +96,6 @@ class Post
         return $this;
     }
 
-    public function getDateCreated(): ?DateTime
-    {
-        return $this->dateCreated;
-    }
-
-    public function setDateCreated(?DateTime $dateCreated): static
-    {
-        $this->dateCreated = $dateCreated;
-
-        return $this;
-    }
-
     public function getUpVote(): ?int
     {
         return $this->upVote;
@@ -198,4 +185,14 @@ 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',
+        ]));
+    }
 }

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('text', TextareaType::class, [
-            ->add('dream', CheckboxType::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') }}">
+
         {% block stylesheets %}
         {% endblock %}
 
         {% block javascripts %}
-            {% block importmap %}{{ importmap('app') }}{% endblock %}
+            {# {% 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,7 +1,12 @@
+{% extends 'base.html.twig' %}
+
+{% block stylesheets %}
 <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>All posts</h1>
   
@@ -9,3 +14,4 @@
     {% include 'post/post_mini.html.twig' with {'post' : post} %}
   {% endfor %}
 </div>
+{% endblock %}

templates/post/new.html.twig

@@ -1 +1,20 @@
+{% extends 'base.html.twig' %}
+
+{% block stylesheets %}
+<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 %}
+<div id="post-wrapper">
+  <h1>Post your dream</h1>
+
+  <div class="form-container">
     {{ form(form) }}
+  </div>
+</div>
+{% endblock %}

templates/post/post.html.twig

@@ -1,6 +1,10 @@
+{% extends 'base.html.twig' %}
+
+{% 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">

templates/post/post_mini.html.twig

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