Skip to content

Commit 9ee3965

Browse files
mckenzieartsmckenziearts
committed
🏗️ mis a jour de la vue listings
1 parent 67a4d3b commit 9ee3965

File tree

2 files changed

+85
-69
lines changed

2 files changed

+85
-69
lines changed

‎resources/views/livewire/articles/_form.blade.php

Lines changed: 65 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg
8787
x-transition:leave-end="translate-x-full"
8888
class="w-screen max-w-md"
8989
>
90-
<div class="h-full flex flex-col py-6 bg-skin-card shadow-xl overflow-y-scroll">
90+
<div class="h-full flex flex-col py-6 bg-skin-card shadow-xl overflow-y-scroll lg:pb-12">
9191
<div class="px-4 sm:px-6">
9292
<div class="flex items-start justify-between">
9393
<h2 class="text-lg font-medium text-skin-inverted" id="slide-over-title">
@@ -102,68 +102,72 @@ class="w-screen max-w-md"
102102
</div>
103103
</div>
104104
<div class="mt-6 relative flex-1 px-4 sm:px-6">
105-
<div class="absolute inset-0 px-4 sm:px-6">
106-
<div class="h-full" aria-hidden="true">
107-
<x-label for="cover_photo">
108-
Image de couverture
109-
</x-label>
110-
<div class="mt-2">
111-
<x-forms.single-upload
112-
id="file"
113-
wire:click="removeImage"
114-
wire:model="file"
115-
:file="$file"
116-
:preview="isset($preview) ? $preview : null"
117-
:error="$errors->first('file')"
118-
/>
119-
</div>
105+
<div class="h-full" aria-hidden="true">
106+
<x-label for="cover_photo">
107+
Image de couverture
108+
</x-label>
109+
<div class="mt-2">
110+
<x-forms.single-upload
111+
id="file"
112+
wire:click="removeImage"
113+
wire:model="file"
114+
:file="$file"
115+
:preview="isset($preview) ? $preview : null"
116+
:error="$errors->first('file')"
117+
/>
118+
</div>
120119

121-
<div x-data="{ on: @entangle('show_toc') }" class="mt-8 flex-grow flex items-center justify-between">
122-
<div>
123-
<dt class="text-sm leading-7 font-semibold text-skin-base">Afficher le Sommaire</dt>
124-
</div>
125-
<button type="button"
126-
class="relative inline-flex shrink-0 h-6 w-11 border border-skin-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 bg-skin-card-muted"
127-
:class="{ 'bg-green-600': on, 'bg-skin-card-muted': !(on) }"
128-
aria-pressed="false"
129-
x-ref="switch"
130-
x-state:on="Enabled"
131-
x-state:off="Not Enabled"
132-
aria-labelledby="availability-label"
133-
:aria-pressed="on.toString()"
134-
@click="on = !on"
135-
>
136-
<span class="sr-only">{{ __('Afficher le sommaire') }}</span>
137-
<span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-skin-menu shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
138-
</button>
120+
<div x-data="{ on: @entangle('show_toc') }" class="mt-8 flex-grow flex items-center justify-between">
121+
<div>
122+
<dt class="text-sm leading-7 font-semibold text-skin-base">Afficher le Sommaire</dt>
139123
</div>
124+
<button type="button"
125+
class="relative inline-flex items-center shrink-0 h-6 w-11 border border-skin-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 bg-skin-card-muted"
126+
:class="{ 'bg-green-600': on, 'bg-skin-card-muted': !(on) }"
127+
aria-pressed="false"
128+
x-ref="switch"
129+
x-state:on="Enabled"
130+
x-state:off="Not Enabled"
131+
aria-labelledby="availability-label"
132+
:aria-pressed="on.toString()"
133+
@click="on = !on"
134+
>
135+
<span class="sr-only">{{ __('Afficher le sommaire') }}</span>
136+
<span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
137+
</button>
138+
</div>
140139

141-
@if(Auth::user()->hasAnyRole(['admin', 'moderator']))
142-
<div class="mt-8">
143-
<x-label for="published_at">Date de publication</x-label>
144-
<x-input wire:model.defer="published_at" id="published_at" name="published_at" class="mt-1" type="date" />
145-
</div>
146-
@endif
140+
<div class="mt-8">
141+
<x-label for="published_at">Date de publication</x-label>
142+
<x-datetime-picker
143+
placeholder="Sélectionner une date"
144+
name="published_at"
145+
class="mt-1"
146+
wire:model.defer="published_at"
147+
:min="now()->subDay()"
148+
time-format="24"
149+
without-timezone
150+
/>
151+
</div>
147152

148-
<div class="mt-8">
149-
<x-label for="slug">URL Slug</x-label>
150-
<x-input wire:model.debounce.500ms="slug" id="slug" name="slug" class="mt-1" type="text" autocomplete="off" required />
151-
</div>
153+
<div class="mt-8">
154+
<x-label for="slug">URL Slug</x-label>
155+
<x-input wire:model.debounce.500ms="slug" id="slug" name="slug" class="mt-1" type="text" autocomplete="off" required />
156+
</div>
152157

153-
<div class="mt-8">
154-
<x-label for="canonical_url">Canonical URL</x-label>
155-
<span class="text-xs leading-3 text-skin-muted">Modifiez si l'article a été publié pour la première fois ailleurs (comme sur votre propre blog).</span>
156-
<x-input wire:model.defer="canonical_url" id="canonical_url" name="canonical_url" class="mt-1" type="text" autocomplete="off" required />
157-
</div>
158+
<div class="mt-8">
159+
<x-label for="canonical_url">Canonical URL</x-label>
160+
<span class="text-xs leading-3 text-skin-muted">Modifiez si l'article a été publié pour la première fois ailleurs (comme sur votre propre blog).</span>
161+
<x-input wire:model.defer="canonical_url" id="canonical_url" name="canonical_url" class="mt-1" type="text" autocomplete="off" />
162+
</div>
158163

159-
<div class="mt-8 standard" wire:ignore>
160-
<x-label for="tags_selected">Tags</x-label>
161-
<x-forms.select wire:model="tags_selected" id="tags_selected" class="mt-2" x-data="{}" x-init="function () { choices($el) }" multiple>
162-
@foreach($tags as $tag)
163-
<option value="{{ $tag->id }}" @if(in_array($tag->id, $tags_selected)) selected @endif>{{ $tag->name }}</option>
164-
@endforeach
165-
</x-forms.select>
166-
</div>
164+
<div class="mt-8 standard" wire:ignore>
165+
<x-label for="tags_selected">Tags</x-label>
166+
<x-forms.select wire:model="tags_selected" id="tags_selected" class="mt-2" x-data="{}" x-init="function () { choices($el) }" multiple>
167+
@foreach($tags as $tag)
168+
<option value="{{ $tag->id }}" @if(in_array($tag->id, $tags_selected)) selected @endif>{{ $tag->name }}</option>
169+
@endforeach
170+
</x-forms.select>
167171
</div>
168172
</div>
169173
</div>
@@ -174,7 +178,7 @@ class="relative inline-flex shrink-0 h-6 w-11 border border-skin-base rounded-fu
174178
</div>
175179
</div>
176180

177-
<main class="relative max-w-4xl mx-auto py-10 px-4 sm:px-6 lg:px-8 z-0">
181+
<main class="relative max-w-4xl mx-auto py-10 z-0 px-4 sm:px-6 lg:px-8 lg:pb-16">
178182
<x-validation-errors />
179183

180184
@if(! isset($article))
@@ -193,6 +197,9 @@ class="block w-full h-auto px-0 py-4 text-3xl sm:text-4xl font-bold placeholder-
193197
autocomplete="off"
194198
/>
195199
<livewire:markdown-x :content="$body" />
200+
<div class="mt-6 text-right text-skin-base">
201+
Temps de lecture estimé : <span class="text-skin-inverted">{{ $reading_time }} min</span>
202+
</div>
196203
</div>
197204
</main>
198205

‎resources/views/livewire/articles/browse.blade.php

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
<div class="lg:grid lg:grid-cols-9 lg:gap-10">
22
<div class="hidden lg:block lg:col-span-2">
33
<x-sticky-content class="divide-y divide-skin-base">
4-
<x-articles.filter :selectedSortBy="$selectedSortBy" />
5-
6-
<div class="pt-8">
7-
<span class="inline-flex items-center px-2 py-1 rounded-md text-sm font-medium bg-skin-link text-skin-base font-sans">
8-
<svg class="mr-1.5 h-2 w-2 text-skin-base" fill="currentColor" viewBox="0 0 8 8">
9-
<circle cx="4" cy="4" r="3" />
10-
</svg>
11-
Tous les tags
12-
</span>
4+
<div class="pb-8">
5+
<h4 class="text-skin-inverted text-base leading-6 font-medium">Affichage des articles</h4>
6+
<div class="mt-5 flex items-center space-x-3">
7+
<x-view-mode mode="list" :isViewMode="$viewMode === 'list'">
8+
<svg class="h-5 w-5 mr-2 text-skin-base/60" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
9+
<path d="M17.8 10C18.9201 10 19.4802 10 19.908 9.78201C20.2843 9.59027 20.5903 9.28431 20.782 8.90798C21 8.48016 21 7.92011 21 6.8V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.7157 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3L6.2 3C5.0799 3 4.51984 3 4.09202 3.21799C3.71569 3.40973 3.40973 3.71569 3.21799 4.09202C3 4.51984 3 5.07989 3 6.2L3 6.8C3 7.9201 3 8.48016 3.21799 8.90798C3.40973 9.28431 3.71569 9.59027 4.09202 9.78201C4.51984 10 5.07989 10 6.2 10L17.8 10Z" />
10+
<path d="M17.8 21C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V17.2C21 16.0799 21 15.5198 20.782 15.092C20.5903 14.7157 20.2843 14.4097 19.908 14.218C19.4802 14 18.9201 14 17.8 14L6.2 14C5.0799 14 4.51984 14 4.09202 14.218C3.71569 14.4097 3.40973 14.7157 3.21799 15.092C3 15.5198 3 16.0799 3 17.2L3 17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8Z" />
11+
</svg>
12+
Liste
13+
</x-view-mode>
14+
<x-view-mode mode="card" :isViewMode="$viewMode === 'card'">
15+
<svg class="h-5 w-5 mr-2 text-skin-base/60" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
16+
<path d="M3 15h18M7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3Z" />
17+
</svg>
18+
Card
19+
</x-view-mode>
20+
</div>
21+
</div>
22+
<div class="py-8">
23+
<h4 class="text-skin-inverted text-base leading-6 font-medium">Tous les tags</h4>
1324

1425
<x-tags :tags="$tags" :selected-tag="$selectedTag" isLowercase showHashTag />
1526
</div>
@@ -28,8 +39,6 @@ class="lg:grid lg:grid-cols-8 lg:gap-8 lg:col-span-7"
2839
<p class="mt-2 max-w-4xl text-skin-base leading-5">Tous les articles récemment publiés.</p>
2940
</div>
3041

31-
<x-articles.filter :selectedSortBy="$selectedSortBy" forMobile/>
32-
3342
<div class="py-12 space-y-8 sm:space-y-10 max-w-lg mx-auto lg:max-w-none">
3443
@foreach ($articles as $article)
3544
<x-articles.overview :article="$article" />

0 commit comments

Comments
 (0)