front: alignement des messages

cmukanisa · Jan 29, 2021 · e3479e6 · e3479e6
1 parent b7b9023
commit e3479e6
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 20 deletions.
diff --git a/assets/css/pages/_forum.scss b/assets/css/pages/_forum.scss
@@ -252,7 +252,7 @@
 // Topic
 // =============
 .forum-messages {
-  --gap: 6;
+  --gap: 5;
   @extend %stack;
 }
 
@@ -271,6 +271,12 @@
   }
 }
 
+.forum-message .forum-avatar {
+  @include up(700) {
+    grid-row: 1 / span 2;
+  }
+}
+
 .forum-message__header,
 .forum-message__footer {
   --gap: 2;
@@ -279,6 +285,15 @@
   align-items: center;
 }
 
+.forum-message__header {
+  align-items: flex-start;
+  padding-right: 90px;
+
+  @include down(700) {
+    display: block;
+  }
+}
+
 .forum-message__footer {
   margin-left: auto;
 }
@@ -289,18 +304,33 @@
   font-family: $font-alt;
   font-weight: 500;
   color: var(--color-dark);
+  white-space: nowrap;
 }
 
 .forum-message__date {
   font-size: 0.9em;
   white-space: nowrap;
   color: var(--color-light);
+  align-self: flex-end;
+  transform: translateY(-1px); // Petit fix pour que la date soit aligné avec le pseudo
 
   button:hover {
     text-decoration: underline;
   }
 }
 
+@include up(700) {
+  .forum-message__date::before {
+    content: ',  '
+  }
+}
+
+.forum-message__body {
+  @include down(700) {
+    grid-column: 1 / span 2;
+  }
+}
+
 .forum-message__body .card {
   display: block;
 }
@@ -315,7 +345,6 @@
   }
 
   .forum-message__body {
-    grid-column: 2 / -1;
 
     pre.with-syntax {
       margin-left: space(-2);
@@ -333,6 +362,13 @@
   flex-wrap: wrap;
   justify-content: flex-end;
   margin-left: auto;
+  position: absolute;
+  top: space(-1);
+  right: 0;
+
+  @include down(700) {
+    top: 0;
+  }
 
   & > * + * {
     margin-left: space(1);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Grafikart.fr",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {

diff --git a/templates/forum/_message.html.twig b/templates/forum/_message.html.twig
@@ -2,22 +2,20 @@
   <div class="forum-avatar">
     <img src="{{ message.author | avatar }}" alt="" class="forum-message__avatar">
   </div>
-  <div class="forum-message__header hstack">
-    <div>
-      <div class="forum-message__author">
-        {{ message.author.username }}
-        {% if message.accepted %}
-          <div class="ml1 forum-message__accepted pill pill-green small">
-            Réponse acceptée
-          </div>
-        {% endif %}
-      </div>
-      <div class="forum-message__date">
+  <div class="forum-message__header">
+    <div class="forum-message__author">
+      {{ message.author.username }}
+      {% if message.accepted %}
+        <div class="ml1 forum-message__accepted pill pill-green small">
+          Réponse acceptée
+        </div>
+      {% endif %}
+    </div>
+    <div class="forum-message__date">
         <a href="#message-{{ message.id }}">{{ message.createdAt | ago }}</a>
         <forum-edit message="{{ message.id }}" owner="{{ message.author.id }}"></forum-edit>
         <forum-delete message="{{ message.id }}" owner="{{ message.author.id }}"></forum-delete>
       </div>
-    </div>
     <div class="forum-message__actions">
       <forum-report message="{{ message.id }}"></forum-report>
       <forum-solve

diff --git a/templates/forum/_topic.html.twig b/templates/forum/_topic.html.twig
@@ -16,10 +16,10 @@
         </div>
         {% if topic.lastMessage %}
           {{icon('reply')}} <a
-          href="{{ path(topic.lastMessage.author) }}">{{ topic.lastMessage.author.username }}</a>, {{ topic.lastMessage.createdAt | ago }}
+          href="{{ path(topic) }}#message-{{ topic.lastMessage.id }}">{{ topic.lastMessage.author.username }}</a>, {{ topic.lastMessage.createdAt | ago }}
         {% else %}
           <a
-          href="{{ path(topic.author) }}">{{ topic.author.username }}</a>, {{ topic.createdAt | ago }}
+          href="{{ path(topic) }}">{{ topic.author.username }}</a>, {{ topic.createdAt | ago }}
         {% endif %}
       </div>
     </div>

diff --git a/templates/forum/show.html.twig b/templates/forum/show.html.twig
@@ -10,12 +10,11 @@
     <div>
       <h1 class="h2 mb2">{{ topic.name }}</h1>
       <div class="flex flex-start">
-        <a href="{{ path(topic.author) }}" class="flex underline flex-start mr1">
+        <a href="{{ path(topic.author) }}" class="flex underline flex-start">
           <img src="{{ topic.author | avatar }}" alt="" class="rounded mr1" width="25">
           {{ topic.author.username }}
         </a>
-        <small class="text-muted">
-          , {{ topic.createdAt | ago }}
+        <small class="text-muted">, {{ topic.createdAt | ago }}
           <forum-edit topic="{{ topic.id }}" owner="{{ topic.author.id }}"></forum-edit>
           <forum-delete topic="{{ topic.id }}" owner="{{ topic.author.id }}"></forum-delete>
         </small>