Skip to content

Commit 139e64b

Browse files
tabunatabuna
committed
WIP
1 parent 0cd4ff1 commit 139e64b

File tree

8 files changed

+130
-30
lines changed

8 files changed

+130
-30
lines changed

‎package-lock.json

+18-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@editorjs/editorjs": "^2.28.2",
23+
"stimulus-textarea-autogrow": "^4.1.0",
2324
"vite-plugin-prismjs": "^0.0.8"
2425
}
2526
}

‎public/img/ui/user-deleted.png

35 KB
Loading

‎resources/css/app.scss

+64-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $primary: #f9322c;
66
$dark: #212529;
77

88
$body-secondary-bg: #EBEEF4;
9-
$body-secondary-bg-dark: shade-color($body-secondary-bg, 85);
9+
$body-secondary-bg-dark: #1A1E28;//shade-color($body-secondary-bg, 85);
1010

1111
/*
1212
$secondary: $gray-600 !default;
@@ -221,3 +221,66 @@ $utilities: (
221221
opacity: 0;
222222
animation: fade-in 0.5s ease-in-out forwards;
223223
}
224+
225+
.thread {
226+
position: relative;
227+
overflow: hidden;
228+
229+
&:before {
230+
position: absolute;
231+
display: block;
232+
top: 0;
233+
left: 1rem;
234+
content: "";
235+
width: 2px;
236+
height: 100%;
237+
background-color: rgb(234, 154, 154);//rgba($primary, .3)
238+
}
239+
240+
.comment:last-child:before {
241+
display: none;
242+
}
243+
}
244+
245+
.comment {
246+
position: relative;
247+
overflow: hidden;
248+
&:before {
249+
position: absolute;
250+
display: block;
251+
top: 3.5rem;
252+
left: 1rem;
253+
content: "";
254+
width: 2px;
255+
height: 100%;
256+
background-color: rgb(234, 154, 154);//rgba($primary, .2)
257+
}
258+
259+
/*
260+
.comment-reply {
261+
.comment {
262+
:before{
263+
position: relative;
264+
display: block;
265+
top: 57px;
266+
content: "";
267+
width: 23px;
268+
height: 3px;
269+
background-color: opacify($primary, 0.1);
270+
}
271+
272+
:after{
273+
position: absolute;
274+
display: block;
275+
top: 60px;
276+
left: -36px;
277+
content: "";
278+
width: 3px;
279+
height: calc(100% - 60px);
280+
background-color: opacify($primary, 0.1);
281+
}
282+
}
283+
}
284+
285+
*/
286+
}

‎resources/js/app.js

+2
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,14 @@ import ViewportEntranceToggleController from './controllers/viewport-entrance-to
2424
import ScrollController from './controllers/scroll_controller.js';
2525
import FormLoadController from './controllers/form-load_controller';
2626
import Clipboard from './controllers/clipboard_controller';
27+
import TextareaAutogrow from 'stimulus-textarea-autogrow'
2728

2829
application.register('theme', ThemeController);
2930
application.register('viewport-entrance-toggle', ViewportEntranceToggleController);
3031
application.register('scroll', ScrollController);
3132
application.register('form-load', FormLoadController);
3233
application.register('clipboard', Clipboard);
34+
application.register('textarea-autogrow', TextareaAutogrow)
3335

3436
import LoadMoreController from './controllers/load-more_controller';
3537
application.register('load-more', LoadMoreController);

‎resources/views/particles/comments/comment.blade.php

+25-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
1-
<div id="comment-{{ $comment->getKey() }}" class="position-relative my-4">
1+
<div id="comment-{{ $comment->getKey() }}" class="comment mt-4">
22

33
@if($comment->trashed())
4-
<div class="alert alert-warning opacity-25">Сообщение было удалено</div>
4+
<div class="d-flex position-relative overflow-hidden align-items-center mb-5">
5+
<div class="avatar avatar-sm me-3">
6+
<img class="avatar-img rounded-circle"
7+
src="/img/ui/user-deleted.png" alt="Комментарий был удалён">
8+
</div>
9+
10+
<div class="w-100 opacity-50">
11+
<p class="mb-0">Сообщение было удалено</p>
12+
</div>
13+
</div>
514
@endif
615

716
@if(!$comment->trashed())
@@ -97,25 +106,24 @@ class="d-grid gap-3 d-md-flex justify-content-md-start position-absolute bottom-
97106
@endcan
98107
@endif
99108
@endif
109+
</div>
100110

101-
<?php
111+
<?php
102112
if (!isset($indentationLevel)) {
103113
$indentationLevel = 1;
104114
} else {
105115
$indentationLevel++;
106116
}
107-
?>
108-
117+
?>
109118

110-
{{-- Recursion for children --}}
111-
@if($grouped_comments->has($comment->getKey()))
112-
<div class="{{ $indentationLevel <= $maxIndentationLevel ? 'ms-5' : '' }}">
113-
@foreach($grouped_comments[$comment->getKey()] as $child)
114-
@include('particles.comments.comment', [
115-
'comment' => $child,
116-
'grouped_comments' => $grouped_comments
117-
])
118-
@endforeach
119-
</div>
120-
@endif
121-
</div>
119+
{{-- Recursion for children --}}
120+
@if($grouped_comments->has($comment->getKey()))
121+
<div class="thread {{ $indentationLevel <= $maxIndentationLevel ? 'ps-5 comment-reply' : 'position-relative overflow-hidden' }}">
122+
@foreach($grouped_comments[$comment->getKey()] as $child)
123+
@include('particles.comments.comment', [
124+
'comment' => $child,
125+
'grouped_comments' => $grouped_comments
126+
])
127+
@endforeach
128+
</div>
129+
@endif

‎resources/views/particles/posts/list.blade.php

+11-4
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,14 @@ class="text-body-secondary text-decoration-none">{{ $post->user->name }}</a>
4747
</a>
4848
<ul class="dropdown-menu">
4949
@can('isOwner',$post)
50-
<li><a class="dropdown-item" href="{{route('post.edit',$post)}}">Редактировать</a>
50+
<li>
51+
<a class="dropdown-item" href="{{route('post.edit',$post)}}">Редактировать</a>
5152
</li>
5253

53-
<li><a class="dropdown-item" data-turbo-method="delete"
54+
<li>
55+
<a class="dropdown-item" data-turbo-method="delete"
5456
href="{{route('post.delete',request()->collect()->merge(['post' => $post])->all())}}">Удалить</a>
5557
</li>
56-
5758
@endcan
5859
</ul>
5960
</div>
@@ -76,11 +77,17 @@ class="position-absolute start-0 end-0 top-0 bottom-0"></a>
7677
<span class="ms-2">~56</span>
7778
</a>
7879

79-
<a class="d-flex align-items-center text-body-secondary text-decoration-none" href="#!">
80+
<a class="d-flex align-items-center text-body-secondary text-decoration-none me-4"
81+
href="{{ route('post.show', $post) }}">
8082
<x-icon path="bs.chat"/>
8183
<span class="ms-2">{{ $post->comments_count }}</span>
8284
</a>
8385

86+
<span class="d-flex align-items-center text-body-secondary text-decoration-none">
87+
<x-icon path="bs.clock"/>
88+
<span class="ms-2">{{ $post->estimatedReadingTime() }} мин</span>
89+
</span>
90+
8491
<span
8592
class="text-body-secondary ms-auto user-select-none small">{{ $post->created_at->diffForHumans() }}</span>
8693
</div>

‎resources/views/post/edit.blade.php

+9-3
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,16 @@
1414

1515

1616
<div class="bg-secondary-subtle">
17-
<input class="form-control border-0 p-5 pb-0 rounded-0" type="text" value="{{ old('title', $post->title) }}"
18-
id="title" name="title" placeholder="Заголовок" style="font-weight: 600;font-size: 2em;">
17+
<textarea data-controller="textarea-autogrow"
18+
data-textarea-autogrow-resize-debounce-delay-value="500"
19+
style="resize:none;font-weight: 600;font-size: 2em;" id="title" name="title"
20+
placeholder="Заголовок" rows="1"
21+
class="form-control border-start-0 border-end-0 border-top-0 px-5 py-4 rounded-0">{{ old('title', $post->title) }}</textarea>
1922

20-
<textarea id="content" name="content" placeholder="Контент" rows="10" class="form-control mb-5 border-0 p-5 rounded-0">{{ old('content', $post->content) }}</textarea>
23+
<textarea data-controller="textarea-autogrow"
24+
data-textarea-autogrow-resize-debounce-delay-value="500" id="content"
25+
name="content" placeholder="Контент" rows="10"
26+
class="form-control mb-5 border-0 p-5 rounded-0">{{ old('content', $post->content) }}</textarea>
2127
</div>
2228

2329
<button type="submit" class="btn btn-primary">Сохранить</button>

0 commit comments

Comments
 (0)