From 1e74fe248e8f54b4c3f20a53efc30a1416fd6f3b Mon Sep 17 00:00:00 2001
From: orangix <uleo8b8g@anonaddy.me>
Date: Tue, 15 Aug 2023 22:20:54 +0200
Subject: [PATCH] improve mobile view

---
 views/partials/contextComment.hbs | 6 +++---
 views/userComments.hbs            | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/views/partials/contextComment.hbs b/views/partials/contextComment.hbs
index 5d06633..5c9017f 100644
--- a/views/partials/contextComment.hbs
+++ b/views/partials/contextComment.hbs
@@ -1,7 +1,7 @@
 <a href="{{Post.Link}}">
-  <div class="flex flex-row gap-2 w-full bg-slate-600 p-2 rounded-lg">
-    <img class="object-cover hidden sm:block w-[80px] h-[100px] rounded-lg" src="{{this.Post.Cover.Url}}" alt="">
-    <div class="flex flex-col gap-2">
+  <div class="sm:grid gap-4 w-full" style="grid-template-columns: 120px 1fr;">
+    <img class="object-cover block w-full h-[300px] sm:w-[120px] sm:h-[140px] rounded-lg rounded-b-none sm:rounded-b-lg" src="{{this.Post.Cover.Url}}" alt="">
+    <div class="flex flex-col gap-2 bg-slate-600 p-4 rounded-lg rounded-t-none sm:rounded-t-lg" w-full">
       <div class="flex gap-2 items-center">
         {{#noteq this.User.Username "[deleted]"}}
         <img src="{{this.User.Avatar}}" class="rounded-full" width="24" height="24" loading="lazy">
diff --git a/views/userComments.hbs b/views/userComments.hbs
index 0247a21..b0f223e 100644
--- a/views/userComments.hbs
+++ b/views/userComments.hbs
@@ -15,14 +15,14 @@
   </section>
   
   <header class="p-4 rounded-xl text-white mb-4" style="background-image: url('{{user.Cover}}');">
-    <div class="flex items-center gap-2">
+    <div class="flex flex-col sm:flex-row items-center gap-2">
       <img class="rounded-full" src="{{user.Avatar}}" width="72" height="72">
-      <div>
+      <div class="items-center sm:items-start text-center sm:text-left">
         <h2 class="font-bold text-2xl">{{user.Username}}</h2>
         <p>{{user.Points}} pts · {{user.CreatedAt}}</p>
       </div>
       <hr class="sm:border-0 flex-grow">
-      <div class="flex flex-col sm:items-end">
+      <div class="flex flex-col items-center sm:items-end">
         <a href="/user/{{user.Username}}">Submissions</a>
         <a href="/user/{{user.Username}}/comments"><b>Comments</b></a>
       </div>
@@ -31,7 +31,7 @@
   </header>
 
   <main>
-    <div class="comments flex flex-col gap-2">
+    <div class="comments flex flex-col gap-4">
       {{#each comments}}
       {{> partials/contextComment }}
       {{/each}}