Less home code more F3

app/Views/admin/media.html

@@ -14,8 +14,8 @@
     <include href="partials/csrf_field.html" />
     <label class="field">
       <span class="field-label">Nouvelle image</span>
-      <input class="control" type="file" name="image" accept="image/jpeg,image/png,image/webp" required>
-      <span class="field-help">Formats acceptés : JPG, PNG, WebP. Limite : 10 Mo, 8000 × 8000 px et 40 mégapixels.</span>
+      <input class="control" type="file" name="image" accept="image/jpeg,image/png" required>
+      <span class="field-help">Formats acceptés : JPG et PNG. Limite : 10 Mo. Les fichiers sont stockés tels quels, sans transformation.</span>
     </label>
     <button class="button" type="submit">Envoyer</button>
   </form>

app/Views/admin/post_form.html

@@ -10,7 +10,6 @@
   <div class="editor-layout" data-editor-layout>
     <form class="panel stack editor-form" method="post" action="{{ @formAction }}">
       <include href="partials/csrf_field.html" />
-      <input type="hidden" name="cover_media_id" value="{{ @post.cover_media_id }}" data-cover-input>
 
       <label class="field">
         <span class="field-label">Titre</span>
@@ -24,38 +23,11 @@
         <span class="char-counter"><span data-char-count-value>0</span> / {{ @excerptMax }}</span>
       </label>
 
-      <section class="field cover-field">
-        <div class="field-head">
-          <div>
-            <h2 class="field-label">Image de couverture</h2>
-            <p class="field-help">Choisis une image si tu veux une couverture.</p>
-          </div>
-        </div>
-
-        <div class="cover-picker">
-          <check if="{{ @coverPreview }}">
-            <true>
-              <img class="media-frame media-frame--large cover-preview" data-cover-preview src="{{ @coverPreview.url }}" alt="">
-              <div class="media-frame media-frame--large media-frame--placeholder is-hidden" data-cover-placeholder>Aucune image</div>
-            </true>
-            <false>
-              <div class="media-frame media-frame--large media-frame--placeholder" data-cover-placeholder>Aucune image</div>
-              <img class="media-frame media-frame--large cover-preview is-hidden" data-cover-preview alt="Aperçu couverture">
-            </false>
-          </check>
-
-          <div class="button-row">
-            <button class="button button--ghost" type="button" data-media-picker-open="cover">Choisir une image</button>
-            <button class="button button--ghost" type="button" data-cover-clear {{ @post.cover_media_id ? '' : 'disabled' }}>Retirer</button>
-          </div>
-        </div>
-      </section>
-
       <section class="field">
         <div class="field-head">
           <div>
             <h2 class="field-label">Contenu</h2>
-            <p class="field-help">Markdown simple, avec insertion d’image au curseur.</p>
+            <p class="field-help">Markdown simple, avec insertion d’image au curseur. La première image sert aussi de vignette sur les cartes d’article.</p>
           </div>
         </div>
 
@@ -67,10 +39,11 @@
           <button class="tool-button" type="button" data-md-action="quote">Citation</button>
           <button class="tool-button" type="button" data-md-action="link">Lien</button>
           <button class="tool-button" type="button" data-md-action="code">Code</button>
-          <button class="tool-button" type="button" data-media-picker-open="markdown">Image</button>
+          <button class="tool-button" type="button" data-media-picker-open>Image</button>
         </div>
 
         <textarea class="control editor-textarea" name="body_markdown" rows="18" required data-markdown-editor>{{ @post.body_markdown }}</textarea>
+        <p class="field-help">Astuce : avec le parseur Markdown de F3, laisse une ligne vide entre deux blocs (titre, liste, citation, image, code) pour un rendu fiable.</p>
       </section>
 
       <button class="button" type="submit">Enregistrer</button>
@@ -79,8 +52,8 @@
     <aside class="media-picker is-hidden" data-media-picker>
       <div class="media-picker__head">
         <div>
-          <strong data-media-picker-title>Choisir une image</strong>
-          <p class="field-help" data-media-picker-help>Choisis une image de la médiathèque.</p>
+          <strong data-media-picker-title>Insérer une image</strong>
+          <p class="field-help" data-media-picker-help>Clique sur une image pour l’insérer dans l’article.</p>
         </div>
         <button class="button button--ghost button--small" type="button" data-media-picker-close>Fermer</button>
       </div>
@@ -89,7 +62,7 @@
         <true>
           <div class="media-picker__grid">
             <repeat group="{{ @mediaItems }}" value="{{ @item }}">
-              <button class="media-picker__item" type="button" data-media-picker-select data-media-id="{{ @item.id }}" data-media-url="{{ @item.url }}" data-media-markdown="{{ @item.markdown }}">
+              <button class="media-picker__item" type="button" data-media-picker-select data-media-markdown="{{ @item.markdown }}">
                 <img class="media-frame media-frame--square" src="{{ @item.url }}" alt="">
               </button>
             </repeat>

app/Views/partials/media_card.html

@@ -1,6 +1,6 @@
-<article class="card article-card">
+<article class="card card--stack">
   <img class="media-frame" src="{{ @item.url }}" alt="{{ @item.alt }}">
-  <div class="card-body article-card__body">
+  <div class="card-body">
     <p class="meta-text">{{ @item.width }} × {{ @item.height }}<br>{{ @item.created_at | date_fr }}</p>
 
     <form class="stack" method="post" action="{{ 'media_update_alt', 'id='.@item.id | alias }}">

app/Views/partials/nav_items.html

@@ -2,7 +2,7 @@
   <check if="{{ @currentUser }}">
     <true>
       <li class="nav-items__item">
-        <a class="nav-items__link" href="{{ 'dashboard' | alias }}">Dashboard</a>
+        <a class="nav-items__link" href="{{ 'dashboard' | alias }}">Tableau de bord</a>
       </li>
       <li class="nav-items__item">
         <form class="nav-items__form" method="post" action="{{ 'logout' | alias }}">

app/Views/partials/post_card.html

@@ -1,9 +1,7 @@
-<article class="card article-card">
-  <check if="{{ @post.cover_url }}">
+<article class="card card--stack">
+  <check if="{{ @post.thumbnail_url }}">
     <true>
-      <a class="card-media-link" href="{{ 'post_show', 'slug='.@post.slug | alias }}">
-        <img class="media-frame" src="{{ @post.cover_url }}" alt="{{ @post.cover_alt ?: @post.title }}">
-      </a>
+      <img class="media-frame" src="{{ @post.thumbnail_url }}" alt="{{ @post.thumbnail_alt ?: @post.title }}">
     </true>
     <false>
       <check if="{{ @adminMode }}">
@@ -13,10 +11,8 @@
       </check>
     </false>
   </check>
-  <div class="card-body article-card__body">
-    <h2 class="card-title">
-      <a class="card-title__link" href="{{ 'post_show', 'slug='.@post.slug | alias }}">{{ @post.title }}</a>
-    </h2>
+  <div class="card-body">
+    <h2 class="card-title">{{ @post.title }}</h2>
     <p class="meta-text">
       Publié le <time datetime="{{ @post.created_at }}">{{ @post.created_at | date_fr }}</time>
       <check if="{{ @post.updated_at !== @post.created_at }}">
@@ -34,6 +30,11 @@
           </form>
         </div>
       </true>
+      <false>
+        <div class="card-actions">
+          <a class="button button--ghost" href="{{ 'post_show', 'slug='.@post.slug | alias }}">Lire l'article</a>
+        </div>
+      </false>
     </check>
   </div>
 </article>

app/Views/site/post.html

@@ -9,12 +9,5 @@
     </p>
   </header>
 
-  <check if="{{ @post.cover_url }}">
-    <true>
-      <img class="media-frame media-frame--large article-cover" src="{{ @post.cover_url }}"
-        alt="{{ @post.cover_alt ?: @post.title }}">
-    </true>
-  </check>
-
   <div class="prose">{{ @post.body_html | raw }}</div>
-</article>
+</article>