Merge pull request #28 from laravelcm/update-responsive-design

Update responsive design

Author: mckenziearts

app/Http/Controllers/ArticlesController.php

@@ -5,6 +5,7 @@
 use App\Models\Article;
 use App\Policies\ArticlePolicy;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Cache;
 
 class ArticlesController extends Controller
 {
@@ -24,6 +25,8 @@ public function show(Article $article)
 
         views($article)->record();
 
+        $article = Cache::remember('post-' . $article->id, now()->addDays(2), fn () => $article);
+
         abort_unless(
             $article->isPublished() || ($user && $user->hasAnyRole(['admin', 'moderator'])),
             404

app/Http/Controllers/ThreadController.php

@@ -10,7 +10,7 @@ class ThreadController extends Controller
 {
     public function __construct()
     {
-        $this->middleware(['auth', 'verified'], ['only' => ['create']]);
+        $this->middleware(['auth', 'verified'], ['only' => ['create', 'edit']]);
     }
 
     public function index(Request $request)

app/Models/Discussion.php

@@ -64,15 +64,6 @@ class Discussion extends Model implements ReactableInterface, ReplyInterface, Su
         'author',
     ];
 
-    /**
-     * The relationship counts that should be eager loaded on every query.
-     *
-     * @var array
-     */
-    protected $withCount = [
-        'replies',
-    ];
-
     /**
      * The accessors to append to the model's array form.
      *

app/View/Composers/ChannelsComposer.php

@@ -3,6 +3,7 @@
 namespace App\View\Composers;
 
 use App\Models\Channel;
+use Illuminate\Support\Facades\Cache;
 use Illuminate\View\View;
 
 class ChannelsComposer
@@ -11,9 +12,11 @@ public function compose(View $view)
     {
         $view->with(
             'channels',
-            Channel::with('items')
-            ->whereNull('parent_id')
-            ->get()
+            Cache::remember(
+                'channels',
+                now()->addDay(),
+                fn () => Channel::with('items')->whereNull('parent_id')->get()
+            )
         );
     }
 }

public/css/app.css

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=7d557689434ab2f122d8",
-    "/css/app.css": "/css/app.css?id=fdf410c5697f754950ed"
+    "/js/app.js": "/js/app.js?id=9abd09e80a5426001802",
+    "/css/app.css": "/css/app.css?id=2d48602df6b458ee81ad"
 }

public/js/app.js

@@ -358,15 +358,15 @@ const Comment = memo(({ comment, editing, onEdit, onUpdate, onDelete, onReply, o
             />
           </div>
           <div className="flex-1">
-            <div className="flex items-center text-sm space-x-2">
+            <div className="text-sm sm:flex sm:items-center sm:space-x-2">
               <a href={`/user/${comment.author.username}`} className="font-medium text-skin-primary font-sans hover:text-skin-primary-hover">
                 {comment.author.name}
               </a>
               <span className="text-skin-base font-normal"><time-ago time={comment.created_at} /></span>
               {canEdit && (
-                <div className="flex">
-                  <span className="text-skin-base font-medium">·</span>
-                  <div className="pl-2 flex items-center divide-x divide-skin-base">
+                <div className="mt-1 flex sm:mt-0">
+                  <span className="hidden sm:inline-block text-skin-base font-medium">·</span>
+                  <div className="sm:pl-2 flex items-center divide-x divide-skin-base">
                     <button type="button" onClick={handleEdit} className="pr-2 text-sm leading-5 font-sans text-skin-base focus:outline-none hover:underline">Éditer</button>
                     <button type="button" onClick={handleDelete} className="pl-2 text-sm leading-5 font-sans text-red-500 focus:outline-none hover:underline">Supprimer</button>
                   </div>
@@ -452,13 +452,13 @@ function CommentForm ({ onSubmit, parent, isRoot = false, onCancel = null }) {
             rows={4}
             required
           />
-          <div className="mt-6 flex items-center justify-between space-x-4">
+          <div className="mt-4 sm:flex sm:items-center sm:justify-between sm:space-x-4">
             {isRoot && (
               <p className="text-sm text-skin-base max-w-xl font-normal">
                 Veuillez vous assurer d'avoir lu nos <a href="/rules" className="font-medium text-skin-primary hover:text-skin-primary-hover">règles de conduite</a> avant de répondre à ce fil de conversation.
               </p>
             )}
-            <div className="flex items-center justify-end space-x-3">
+            <div className="mt-3 flex items-center justify-end space-x-3 sm:mt-0">
               {onCancel && <DefaultButton type="reset" onClick={handleCancel}>Annuler</DefaultButton>}
               <PrimaryButton type="submit" loading={loading}>
                 Commenter

public/mix-manifest.json

@@ -52,7 +52,7 @@ class="{{ $selectedSortBy === 'trending' ? 'bg-skin-link text-skin-inverted': 't
                 type="button"
                 wire:click="sortBy('recent')"
                 aria-current="{{ $selectedSortBy === 'recent' ? 'page' : 'false' }}"
-                class="w-full {{ $selectedSortBy === 'recent' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card py-4 px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
+                class="w-full {{ $selectedSortBy === 'recent' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card p-4 sm:px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
             >
                 <span>Récents</span>
                 <span aria-hidden="true" class="{{ $selectedSortBy === 'recent' ? 'bg-skin-primary': 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"></span>
@@ -62,7 +62,7 @@ class="w-full {{ $selectedSortBy === 'recent' ? 'text-skin-inverted': 'text-skin
                 type="button"
                 wire:click="sortBy('popular')"
                 aria-current="{{ $selectedSortBy === 'popular' ? 'page' : 'false' }}"
-                class="w-full {{ $selectedSortBy === 'popular' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} group relative min-w-0 flex-1 overflow-hidden bg-skin-card py-4 px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
+                class="w-full {{ $selectedSortBy === 'popular' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} group relative min-w-0 flex-1 overflow-hidden bg-skin-card p-4 sm:px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
             >
                 <span>Populaire</span>
                 <span aria-hidden="true" class="{{ $selectedSortBy === 'popular' ? 'bg-skin-primary': 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"></span>
@@ -72,7 +72,7 @@ class="w-full {{ $selectedSortBy === 'popular' ? 'text-skin-inverted': 'text-ski
                 type="button"
                 wire:click="sortBy('trending')"
                 aria-current="{{ $selectedSortBy === 'trending' ? 'page' : 'false' }}"
-                class="w-full {{ $selectedSortBy === 'trending' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-r-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card py-4 px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
+                class="w-full {{ $selectedSortBy === 'trending' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-r-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card p-4 sm:px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
             >
                 <span>Tendance</span>
                 <span aria-hidden="true" class="{{ $selectedSortBy === 'trending' ? 'bg-skin-primary': 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"></span>

resources/js/components/Comments.jsx

@@ -20,19 +20,19 @@
     <p class="mt-1 text-sm font-normal text-skin-base leading-5">
         {!! $discussion->excerpt(175) !!}
     </p>
-    <div class="mt-3 flex justify-between">
+    <div class="mt-3 sm:flex sm:justify-between">
         <div class="flex items-center text-sm font-sans text-skin-muted">
             <a class="flex-shrink-0" href="/user/{{ $discussion->author->username }}">
                 <img class="h-6 w-6 rounded-full" src="{{ $discussion->author->profile_photo_url }}" alt="{{ $discussion->author->name }}">
             </a>
             <span class="ml-2 pr-1">Posté par</span>
             <div class="flex items-center space-x-1">
-                <a href="/user/{{ $discussion->author->username }}" class="text-skin-inverted hover:underline">{{ $discussion->author->name }}</a>
+                <a href="{{ route('profile', $discussion->author->username) }}" class="text-skin-inverted hover:underline">{{ $discussion->author->name }}</a>
                 <span aria-hidden="true">&middot;</span>
                 <time-ago time="{{ $discussion->created_at->getTimestamp() }}"/>
             </div>
         </div>
-        <div class="flex items-center space-x-4">
+        <div class="hidden sm:flex sm:items-center space-x-3">
             <livewire:reactions
                 wire:key="{{ $discussion->id }}"
                 :model="$discussion"

resources/views/articles/show.blade.php

@@ -1,19 +1,19 @@
 <div class="relative flex items-center h-full px-4 font-medium text-skin-base space-x-4">
-    <button x-data="{}" title="Codepen" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'codepen')">
+    <button x-data title="Codepen" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'codepen')">
         <svg class="text-skin-menu fill-current w-5 h-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fill-rule="evenodd">
                 <circle fill="#374151" cx="100" cy="100" r="100"/>
                 <path d="M42.275 122.561l54.845 36.57c1.87 1.15 3.87 1.165 5.76 0l54.845-36.57c1.405-.935 2.275-2.61 2.275-4.285v-36.56c0-1.675-.87-3.35-2.275-4.285L102.88 40.866c-1.87-1.15-3.87-1.16-5.76 0L42.275 77.431C40.87 78.366 40 80.041 40 81.716v36.56c0 1.675.87 3.35 2.275 4.285zm52.57 22.64l-40.38-26.92 18.015-12.055 22.365 14.935v24.04zm10.31 0v-24.04l22.365-14.935 18.015 12.055-40.38 26.92zm44.535-36.57l-12.925-8.635 12.925-8.64v17.275zm-44.535-53.835l40.38 26.92-18.015 12.055-22.365-14.935v-24.04zM100 87.806l18.215 12.19L100 112.186l-18.215-12.19L100 87.806zm-5.155-33.01v24.04L72.48 93.771 54.465 81.716l40.38-26.92zm-44.53 36.57v-.005l12.925 8.64-12.925 8.64V91.366z" fill="#FFF" fill-rule="nonzero"/>
             </g>
         </svg>
     </button>
-    <button x-data="{}" title="Code sample" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'code')">
+    <button x-data title="Code sample" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'code')">
         <x-heroicon-o-code class="w-5 h-5" />
     </button>
-    <button x-data="{}" title="Link" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'link')">
+    <button x-data title="Link" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'link')">
         <x-heroicon-o-link class="w-5 h-5" />
     </button>
-    <button x-data="{}" title="Image" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'image')">
+    <button x-data title="Image" type="button" class="text-skin-base hover:text-skin-inverted-muted cursor-pointer focus:outline-none" @click="$dispatch('editor-control-clicked', 'image')">
         <x-heroicon-o-photograph class="w-5 h-5" />
     </button>
 </div>

resources/views/components/articles/filter.blade.php

@@ -2,7 +2,7 @@
     <a
         href="{{ url(request()->url() . '?sortBy=recent') }}"
         aria-current="{{ $filter === 'recent' ? 'page' : 'false' }}"
-        class="w-full {{ $filter === 'recent' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card py-4 px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
+        class="w-full {{ $filter === 'recent' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-l-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card p-4 sm:px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
     >
         <span>Récent</span>
         <span aria-hidden="true" class="{{ $filter === 'recent' ? 'bg-skin-primary': 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"></span>
@@ -11,7 +11,7 @@ class="w-full {{ $filter === 'recent' ? 'text-skin-inverted': 'text-skin-base ho
     <a
         href="{{ url(request()->url() . '?sortBy=resolved') }}"
         aria-current="{{ $filter === 'resolved' ? 'page' : 'false' }}"
-        class="w-full {{ $filter === 'resolved' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} group relative min-w-0 flex-1 overflow-hidden bg-skin-card py-4 px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
+        class="w-full {{ $filter === 'resolved' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} group relative min-w-0 flex-1 overflow-hidden bg-skin-card p-4 sm:px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
     >
         <span>Résolu</span>
         <span aria-hidden="true" class="{{ $filter === 'resolved' ? 'bg-skin-primary': 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"></span>
@@ -20,7 +20,7 @@ class="w-full {{ $filter === 'resolved' ? 'text-skin-inverted': 'text-skin-base
     <a
         href="{{ url(request()->url() . '?sortBy=unresolved') }}"
         aria-current="{{ $filter === 'unresolved' ? 'page' : 'false' }}"
-        class="w-full {{ $filter === 'unresolved' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-r-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card py-4 px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
+        class="w-full {{ $filter === 'unresolved' ? 'text-skin-inverted': 'text-skin-base hover:text-skin-inverted' }} rounded-r-lg group relative min-w-0 flex-1 overflow-hidden bg-skin-card p-4 sm:px-6 text-sm font-medium text-center hover:bg-skin-card-muted focus:z-10"
     >
         <span>Non résolu</span>
         <span aria-hidden="true" class="{{ $filter === 'unresolved' ? 'bg-skin-primary': 'bg-transparent' }} absolute inset-x-0 bottom-0 h-0.5"></span>

resources/views/components/discussions/overview.blade.php

@@ -41,7 +41,7 @@
         </div>
         <div class="mt-6 flex justify-between space-x-8">
             <div class="flex items-center space-x-4">
-                <livewire:reactions :model="$thread" :with-place-holder="false"/>
+                <livewire:reactions :model="$thread" :with-place-holder="false" :with-background="false"/>
                 <p class="inline-flex text-sm space-x-2 text-skin-base">
                     <x-heroicon-o-chat-alt class="h-5 w-5" />
                     <span class="font-normal text-skin-inverted-muted">{{ count($thread->replies) }}</span>

resources/views/components/forms/editor/controls.blade.php

@@ -0,0 +1,3 @@
+<svg {{ $attributes }} fill="currentColor" viewBox="0 0 210 27" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.356 26.187H0V.767h11.356c1.758 0 3.425.317 4.957.994A13.88 13.88 0 0 1 20.37 4.47c1.172 1.129 2.073 2.483 2.749 4.063.676 1.536.991 3.206.991 4.922 0 1.76-.315 3.386-.991 4.966-.676 1.535-1.577 2.89-2.749 4.064a13.881 13.881 0 0 1-4.056 2.709c-1.532.677-3.2.993-4.957.993Zm-.81-19.189H6.67v13.049h3.875a7.03 7.03 0 0 0 2.569-.497c.81-.316 1.487-.813 2.073-1.4.586-.586 1.036-1.264 1.397-2.076.315-.813.495-1.626.495-2.529s-.18-1.76-.495-2.528c-.36-.813-.811-1.49-1.397-2.077s-1.262-1.039-2.073-1.4c-.766-.361-1.623-.542-2.569-.542ZM38.936.993h-5.994L23.57 26.097h7.165L35.96 9.933l5.183 16.164h7.165L38.936.993ZM67.1 26.187l-4.415-7.856h-4.282l.046 7.856h-6.985V.767h12.708c.63 0 1.216.136 1.847.362.631.226 1.262.542 1.848.903a8.974 8.974 0 0 1 1.622 1.31c.496.496.947.992 1.262 1.49.45.631.766 1.354.992 2.211.225.858.36 1.626.36 2.393a7.308 7.308 0 0 1-.901 3.522c-.586 1.084-1.397 1.987-2.434 2.754l5.949 10.475H67.1Zm-4.956-19.73h-3.966v5.463h3.966c.405 0 .766-.09 1.126-.226.36-.136.676-.316.902-.587.27-.27.45-.542.63-.858a2.733 2.733 0 0 0 0-2.167 2.358 2.358 0 0 0-.63-.858 2.817 2.817 0 0 0-.902-.587c-.36-.09-.72-.18-1.126-.18Zm26.678 6.366 10.05 13.41h-8.248l-6.94-8.534v8.533h-6.94V.812h6.94v8.534l6.94-8.533h8.563l-10.365 12.01ZM121.989 27c-1.892 0-3.605-.361-5.227-1.084-1.623-.722-3.02-1.67-4.236-2.934-1.217-1.22-2.163-2.664-2.839-4.29a13.346 13.346 0 0 1-1.037-5.192c0-1.851.361-3.567 1.037-5.192a13.944 13.944 0 0 1 2.839-4.29 13.95 13.95 0 0 1 4.236-2.934C118.384.36 120.142 0 121.989 0c1.713 0 3.335.316 4.912.948a14.5 14.5 0 0 1 4.326 2.71L126 8.307c-1.262-.903-2.614-1.355-3.966-1.355a6.23 6.23 0 0 0-2.568.542c-.766.361-1.442.813-2.028 1.445-.586.632-.992 1.31-1.352 2.122-.316.813-.496 1.625-.496 2.483 0 .903.18 1.761.496 2.529a5.91 5.91 0 0 0 1.352 2.076c.586.587 1.217 1.084 2.028 1.445a5.888 5.888 0 0 0 2.523.542c1.037 0 2.028-.226 2.929-.722a7.853 7.853 0 0 0 2.389-2.032l5.408 4.38c-1.352 1.67-2.93 2.934-4.777 3.837a13.092 13.092 0 0 1-5.949 1.4Zm23.975 0a13.56 13.56 0 0 1-5.273-1.038c-1.622-.678-3.064-1.671-4.281-2.845-1.217-1.219-2.163-2.619-2.884-4.29-.721-1.625-1.082-3.386-1.082-5.237 0-1.85.361-3.612 1.082-5.237.721-1.626 1.667-3.07 2.884-4.29 1.217-1.219 2.659-2.167 4.281-2.89 1.622-.721 3.38-1.083 5.273-1.083 1.847 0 3.605.362 5.227 1.084 1.667.722 3.064 1.67 4.281 2.89 1.217 1.219 2.163 2.618 2.884 4.289.721 1.625 1.082 3.386 1.082 5.237s-.361 3.612-1.082 5.238c-.721 1.625-1.667 3.07-2.884 4.289a13.163 13.163 0 0 1-4.281 2.845A13.499 13.499 0 0 1 145.964 27Zm0-20.408c-.947 0-1.848.18-2.659.587a6.556 6.556 0 0 0-2.118 1.535c-.586.632-1.037 1.355-1.397 2.212-.316.858-.496 1.716-.496 2.664 0 .903.18 1.806.496 2.664.315.858.811 1.58 1.397 2.212.586.633 1.307 1.13 2.118 1.536a6.54 6.54 0 0 0 2.659.587c.946 0 1.847-.181 2.658-.587a6.555 6.555 0 0 0 2.118-1.535c.586-.633 1.037-1.355 1.397-2.213.316-.858.496-1.716.496-2.664 0-.948-.18-1.806-.496-2.664-.315-.857-.811-1.58-1.397-2.212-.586-.632-1.307-1.129-2.118-1.535-.811-.406-1.667-.587-2.658-.587Zm28.12 19.595h-11.357V.767h11.357c1.757 0 3.425.317 4.957.994a13.888 13.888 0 0 1 4.056 2.709c1.171 1.129 2.073 2.483 2.748 4.063.676 1.536.992 3.206.992 4.922 0 1.76-.316 3.386-.992 4.966-.675 1.535-1.577 2.89-2.748 4.064a13.889 13.889 0 0 1-4.056 2.709c-1.532.677-3.2.993-4.957.993Zm-.766-19.189h-3.876v13.049h3.876c.901 0 1.757-.18 2.568-.497.811-.316 1.487-.813 2.073-1.4.586-.586 1.037-1.264 1.397-2.076.361-.813.496-1.626.496-2.529s-.18-1.76-.496-2.528c-.315-.813-.811-1.49-1.397-2.077s-1.262-1.039-2.073-1.4a6.242 6.242 0 0 0-2.568-.542ZM189.811.993v5.915H210V.993h-20.189Zm0 9.392v6.275h19.153v-6.275h-19.153Zm0 9.797v5.915H210v-5.915h-20.189Z"/>
+</svg>