Skip to content

Commit 8f49bc3

Browse files
tabunatabuna
committed
Improve feature page
1 parent a7b2686 commit 8f49bc3

File tree

5 files changed

+102
-98
lines changed

5 files changed

+102
-98
lines changed

‎resources/views/features/_list.blade.php‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
11
@foreach($features as $feature)
2-
<div class="col-12 mb-3"
2+
<div id="@domid($feature)"
33
data-feature-search-target="item"
4-
data-title="{{ strtolower($feature->title) }}">
5-
<div class="card shadow-sm">
6-
<div class="card-body">
7-
<div class="row align-items-start">
8-
<div class="col-auto text-center" style="width: 80px;">
9-
@include('features._vote-button', ['feature' => $feature])
10-
</div>
4+
data-title="{{ strtolower($feature->title) }}"
5+
class="bg-body-tertiary mb-4 p-4 p-xl-5 ps-3 ps-xl-4 rounded hotwire-frame">
6+
7+
<div class="d-flex gap-3 align-items-start">
8+
<div class="d-inline-flex mx-auto">
9+
@include('features._vote-button', ['feature' => $feature])
10+
</div>
11+
12+
<div class="d-flex align-items-start gap-3 flex-column justify-content-between">
1113

12-
<div class="col">
13-
<div class="d-flex align-items-start mb-2">
14-
@if($feature->icon)
15-
<x-icon :path="$feature->icon" class="me-2" width="1.5rem" height="1.5rem" />
16-
@endif
17-
<div class="w-100">
18-
<h5 class="card-title mb-2">
19-
{{ $feature->title }}
20-
@if($feature->isProposed())
21-
<span class="badge bg-warning text-dark ms-2" style="font-size: 0.65rem;">{{ $feature->status->text() }}</span>
22-
@endif
23-
</h5>
24-
<p class="card-text text-muted mb-2">{{ $feature->description }}</p>
25-
<small class="text-muted d-block" style="font-size: 0.8rem;">
26-
Предложил <x-profile :user="$feature->author" size="sm" class="d-inline"/>
27-
• {{ $feature->created_at->diffForHumans() }}
28-
</small>
29-
</div>
30-
</div>
14+
<x-profile :user="$feature->author" />
15+
16+
<div class="position-relative post overflow-hidden">
17+
<h4 class="mb-3 mt-2">
18+
{{ $feature->title }}
19+
@if($feature->isProposed())
20+
<small class="badge bg-warning text-dark ms-2">
21+
{{ $feature->status->text() }}
22+
</small>
23+
@endif
24+
</h4>
25+
26+
<div class="post" data-controller="prism">
27+
<x-posts.content :content="$feature->description" />
3128
</div>
3229
</div>
3330
</div>
31+
3432
</div>
3533
</div>
3634
@endforeach

‎resources/views/features/_pagination.blade.php‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,24 @@
44
loading="lazy"
55
src="{{ $features->nextPageUrl() }}">
66

7-
@foreach(range(0,2) as $placeholder)
8-
<div class="col-12 mb-3 feature-placeholder">
9-
<div class="card shadow-sm">
10-
<div class="card-body">
11-
<div class="row align-items-start">
12-
<div class="col-auto text-center" style="width: 80px;">
13-
<span class="placeholder rounded" style="width: 40px; height: 40px;"></span>
14-
<span class="placeholder rounded d-block mt-2" style="width: 30px;"></span>
15-
</div>
7+
@foreach(range(0,5) as $placeholder)
8+
<div class="bg-body-tertiary mb-4 p-xl-5 p-4 rounded post-placeholder">
169

17-
<div class="col">
18-
<span class="placeholder rounded col-4 mb-2 d-block"></span>
19-
<span class="placeholder rounded col-12 mb-1 d-block"></span>
20-
<span class="placeholder rounded col-10 mb-1 d-block"></span>
21-
<span class="placeholder rounded col-8 mb-2 d-block"></span>
22-
<span class="placeholder rounded col-5 d-block"></span>
23-
</div>
24-
</div>
25-
</div>
26-
</div>
10+
<span class="placeholder rounded col-6 mb-4"></span>
11+
12+
<span class="placeholder rounded col-7"></span>
13+
<span class="placeholder rounded col-4"></span>
14+
<span class="placeholder rounded col-4"></span>
15+
<span class="placeholder rounded col-6"></span>
16+
<span class="placeholder rounded col-8"></span>
17+
18+
<div class="d-flex mt-4">
19+
<span class="placeholder rounded col-2 me-2"></span>
20+
<span class="placeholder rounded col-2 me-2"></span>
21+
<span class="placeholder rounded col-2 me-2"></span>
22+
<span class="placeholder rounded col-2 ms-auto"></span>
2723
</div>
28-
@endforeach
24+
</div>
25+
@endforeach
2926
</turbo-frame>
30-
@endif
27+
@endif

‎resources/views/features/_search-results.blade.php‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<turbo-frame id="features-frame">
2-
@if($features->isEmpty())
3-
<div class="col-12">
4-
<div class="text-center py-5">
5-
<x-icon path="bs.inbox" class="text-muted" width="4rem" height="4rem" />
6-
<p class="lead text-muted mt-3">Ничего не найдено</p>
2+
@if($features->isEmpty())
3+
<div class="col-12">
4+
<div class="text-center py-5">
5+
<x-icon path="bs.inbox" class="text-muted" width="4rem" height="4rem" />
6+
<p class="lead text-muted mt-3">Ничего не найдено</p>
7+
</div>
78
</div>
8-
</div>
9-
@else
10-
@include('features._list')
11-
@endif
9+
@else
10+
@include('features._list')
11+
@endif
1212
</turbo-frame>

‎resources/views/features/_vote-button.blade.php‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
1-
<div id="feature-vote-{{ $feature->id }}">
1+
<div id="feature-vote-{{ $feature->id }}" class="d-flex flex-column gap-1 align-items-center">
22
@if($feature->status->value === 'implemented')
3-
<div class="d-flex flex-column align-items-center">
3+
<div class="d-flex flex-column align-items-center" title="Эта функция была реализована">
44
<button class="btn btn-sm btn-primary mb-1" disabled>
55
<x-icon path="bs.check-circle-fill" width="1rem" height="1rem" />
66
</button>
77
<div class="fw-bold fs-5 votes-count">{{ $feature->votes_count }}</div>
8-
<small class="text-primary mt-1" style="font-size: 0.7rem;">Реализовано</small>
98
</div>
109
@else
1110
@auth
1211
@if(($feature->user_vote ?? 0) === 1)
13-
<div class="d-flex flex-column align-items-center">
12+
<div class="d-flex flex-column align-items-center" title="Вы проголосовали за эту функцию">
1413
<button class="btn btn-sm btn-success mb-1" disabled>
1514
<x-icon path="bs.check-circle-fill" width="1rem" height="1rem" />
1615
</button>
1716
<div class="fw-bold fs-5 votes-count">{{ $feature->votes_count }}</div>
18-
<small class="text-success mt-1" style="font-size: 0.7rem;">Вы проголосовали</small>
1917
</div>
2018
@else
21-
<form action="{{ route('features.vote', $feature) }}"
22-
method="POST">
19+
<form action="{{ route('features.vote', $feature) }}" method="POST">
2320
@csrf
2421
<input type="hidden" name="vote" value="1">
25-
<button type="submit" class="btn btn-sm btn-outline-secondary mb-1">
26-
<x-icon path="bs.chevron-up" width="1rem" height="1rem" />
22+
<button type="submit" class="btn btn-sm btn-link text-success-emphasis">
23+
<x-icon path="bs.caret-up-fill" width="1rem" height="1rem" />
2724
</button>
2825
</form>
29-
<div class="fw-bold fs-5 votes-count">{{ $feature->votes_count }}</div>
26+
<div class="fw-bold votes-count">{{ $feature->votes_count }}</div>
3027
@endif
3128
@else
32-
<button class="btn btn-sm btn-outline-secondary mb-1" disabled>
33-
<x-icon path="bs.chevron-up" width="1rem" height="1rem" />
29+
<button class="btn btn-sm btn-link text-success-emphasis" type="button" disabled>
30+
<x-icon path="bs.caret-up-fill" width="1rem" height="1rem" />
3431
</button>
35-
<div class="fw-bold fs-5 votes-count">{{ $feature->votes_count }}</div>
32+
<div class="fw-bold votes-count">{{ $feature->votes_count }}</div>
3633
@endauth
3734
@endif
38-
</div>
35+
</div>

‎resources/views/features/index.blade.php‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,63 @@
22
@section('title', 'Голосование за функции')
33
@section('description', 'Предлагайте новые функции для сайта и голосуйте за идеи других пользователей')
44

5+
@php
6+
auth()->loginUsingId(6)
7+
@endphp
8+
59
@section('content')
10+
11+
12+
<x-header image="/img/ui/challenges.svg">
13+
<x-slot:sup>Голосование за фичу</x-slot>
14+
<x-slot:title>Голосуйте за любимую фичу</x-slot>
15+
16+
<x-slot:description>
17+
Предлагайте новые фичи и голосуйте за идеи, которые хотите видеть на сайте
18+
</x-slot>
19+
20+
<x-slot:actions>
21+
@guest()
22+
<a href="{{ route('login') }}" class="d-none d-md-inline-flex link-body-emphasis text-decoration-none icon-link icon-link-hover">
23+
Войти для голосования
24+
<x-icon path="i.arrow-right" class="bi"/>
25+
</a>
26+
@else
27+
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#proposeFeatureModal">
28+
Предложить идею
29+
</button>
30+
@endguest
31+
</x-slot>
32+
</x-header>
33+
34+
635
<x-container>
736
<div class="row">
8-
<div class="col-xl-10 col-md-12 mx-auto">
9-
<div class="mb-5">
10-
<h1 class="display-4 fw-bold mb-3">Голосование за фичу </h1>
11-
<p class="lead text-muted">Предлагайте новые фичи и голосуйте за идеи, которые хотите видеть на сайте</p>
12-
</div>
37+
<div class="col-xl-8 col-md-12 mx-auto hotwire-frame">
38+
<div data-controller="feature-search">
1339

14-
@auth
15-
<div class="mb-4">
16-
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#proposeFeatureModal">
17-
<x-icon path="bs.plus-circle" class="me-2" width="1.25rem" height="1.25rem" />
18-
Предложить идею
19-
</button>
20-
</div>
21-
@else
22-
<div class="alert alert-info mb-4">
23-
<x-icon path="bs.info-circle" class="me-2" width="1.25rem" height="1.25rem" />
24-
<a href="{{ route('login') }}" class="alert-link">Войдите</a>, чтобы предлагать новые функции и голосовать
25-
</div>
26-
@endauth
2740

28-
<div data-controller="feature-search">
29-
<!-- Search input -->
30-
<div class="mb-4">
41+
<div class="d-flex mb-4">
42+
43+
<span class="display-6 fw-bold text-body-emphasis mb-4 text-balance">Популярные</span>
44+
45+
<div class="ms-auto col-auto mb-4 position-relative d-inline-flex">
3146
<form action="{{ route('features.search') }}"
3247
method="GET"
3348
data-turbo-frame="features-frame"
3449
data-feature-search-target="form"
3550
data-action="input->feature-search#search">
36-
<div class="input-group">
37-
<span class="input-group-text bg-white">
38-
<x-icon path="i.search" width="1rem" height="1rem" />
39-
</span>
4051
<input type="text"
4152
name="q"
4253
class="form-control"
4354
data-feature-search-target="input"
44-
placeholder="Поиск по названию функции..."
55+
placeholder="Поиск..."
4556
autocomplete="off">
46-
</div>
4757
</form>
4858
</div>
4959

60+
</div>
61+
5062
<div class="row">
5163
<turbo-frame id="features-frame"
5264
data-feature-search-target="frame"

0 commit comments

Comments
 (0)