anulax
/
blogbuntu.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Finished main design

Browse Source
main
anulax1225 ago%!(EXTRA string=8 months)
parent c02a51a4dd
commit 6e6f86323e
19 changed files with 238 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      app/Http/Controllers/BlogController.php
  2. 2
      package-lock.json
  3. 39
      resources/css/app.css
  4. 6
      resources/js/blog.js
  5. 106
      resources/js/user.js
  6. 22
      resources/views/auth/login.blade.php
  7. 32
      resources/views/auth/register.blade.php
  8. 26
      resources/views/auth/verify_email.blade.php
  9. 2
      resources/views/base/icon.blade.php
  10. 2
      resources/views/base/layout.blade.php
  11. 2
      resources/views/base/menu.blade.php
  12. 12
      resources/views/blog/create.blade.php
  13. 2
      resources/views/blog/list.blade.php
  14. 28
      resources/views/blog/modal_update.blade.php
  15. 18
      resources/views/blog/single.blade.php
  16. 2
      resources/views/blog/view.blade.php
  17. 22
      resources/views/user/modal_update.blade.php
  18. 56
      resources/views/user/profile.blade.php
  19. 2
      tailwind.config.js

7
app/Http/Controllers/BlogController.php
Unescape View File

@ -9,6 +9,7 @@
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Database\QueryException; use Illuminate\Database\QueryException;
use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\Log;
class BlogController extends Controller class BlogController extends Controller
{ {
@ -47,7 +48,6 @@ public function like($id)
"error" => "Blog already liked" "error" => "Blog already liked"
]); ]);
} }
return redirect('/blog/' . $id); return redirect('/blog/' . $id);
} }
@ -66,13 +66,16 @@ public function insert()
$image = BlogController::getRequestImage(); $image = BlogController::getRequestImage();
Log::info($image);
Log::info("Helllo");
$blog = Blog::create([ $blog = Blog::create([
'title' => request('title'), 'title' => request('title'),
'containt' => request('containt'), 'containt' => request('containt'),
'epilog' => request('epilog'), 'epilog' => request('epilog'),
'image' => $image,
'user_id' => $id, 'user_id' => $id,
]); ]);
if($image) $blog->image = $image;
$blog->save();
return redirect('/blog/' . $blog->id); return redirect('/blog/' . $blog->id);
} }

2
package-lock.json generated
Unescape View File

@ -1,5 +1,5 @@
{ {
"name": "blog", "name": "blogbuntu",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {

39
resources/css/app.css
Unescape View File

@ -11,7 +11,10 @@ @layer utilities {
.no-scrollbar { .no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.modal::backdrop {
background-color: rgba(0, 0, 0, 0.63);
}
} }
:root { :root {
@ -27,29 +30,53 @@ .md-content {
} }
.md-content h1 { .md-content h1 {
font-size: 45px;
border-bottom: 2px solid gray;
margin-top: 5px;
} }
.md-content h2 { .md-content h2 {
font-size: 40px;
border-bottom: 1px solid gray;
margin-top: 5px;
} }
.md-content h3 { .md-content h3 {
font-size: 30px;
margin-top: 5px;
} }
.md-content h4 { .md-content h4 {
font-size: 25px;
margin-top: 5px;
} }
.md-content h5 { .md-content h5 {
font-size: 20px;
margin-top: 5px;
} }
.md-content p { .md-content p {
margin-top: 5px;
}
.md-content h6 {
font-size: 15px;
margin-top: 5px;
} }
.md-content ul { .md-content ul {
margin-left: 20px;
margin-right: 20px;
list-style: circle;
margin-top: 5px;
}
.md-content code {
width: 100%;
display: flex;
background-color: rgba(128, 128, 128, 0.13);
border-radius: 7px;
padding: 5px 10px 5px 10px;
margin-top: 15px;
} }

6
resources/js/blog.js
Unescape View File

@ -33,7 +33,7 @@ window.addEventListener("DOMContentLoaded", () => {
addEvent(likeBtn, (btn) => { addEvent(likeBtn, (btn) => {
btn.addEventListener("click", (e) => { btn.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
let id = document.querySelector(".btn-like").getAttribute("data-id"); let id = e.target.getAttribute("data-id");
let token = document.querySelector('input[name=_token]').value; let token = document.querySelector('input[name=_token]').value;
fetch(`/blog/like/${id}`, { fetch(`/blog/like/${id}`, {
method: "POST", method: "POST",
@ -64,7 +64,7 @@ window.addEventListener("DOMContentLoaded", () => {
e.preventDefault(); e.preventDefault();
let id = e.target.getAttribute("data-id"); let id = e.target.getAttribute("data-id");
let token = document.querySelector('input[name=_token]').value; let token = document.querySelector('input[name=_token]').value;
let form = document.querySelector('.update-form'); let form = document.querySelector('#update-form');
let formData = new FormData(form); let formData = new FormData(form);
fetch(`/blog/${id}`, { fetch(`/blog/${id}`, {
method: "POST", method: "POST",
@ -72,8 +72,6 @@ window.addEventListener("DOMContentLoaded", () => {
"X-CSRF-Token": token "X-CSRF-Token": token
}, },
body: formData body: formData
}).then((res) => {
window.location.href = "/blog/" + id;
}); });
}); });
}); });

106
resources/js/user.js
Unescape View File

@ -1,64 +1,78 @@
import './bootstrap'; import './bootstrap';
function addEvent(btn, func) {
if(btn) func(btn);
}
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
let modal = document.querySelector('#modal-update'); let modal = document.querySelector('#modal-update');
let openModalBtn = document.querySelector("#open-modal"); let openModalBtn = document.querySelector("#open-modal");
let closeModalBtn = document.querySelector(".close-modal"); let closeModalBtn = document.querySelector("#close-modal");
let deleteUserBtn = document.querySelector(".btn-user-delete"); let deleteUserBtn = document.querySelector("#btn-user-delete");
let updateUserBtn = document.querySelector(".btn-user-update"); let updateUserBtn = document.querySelector("#btn-user-update");
let followBtn = document.querySelector(".btn-follow"); let followBtn = document.querySelector("#btn-follow");
followBtn.addEventListener("click", (e) => { addEvent(followBtn, (btn) => {
e.preventDefault(); btn.addEventListener("click", (e) => {
let id = e.target.getAttribute("data-id"); e.preventDefault();
let token = document.querySelector('input[name=_token]').value; let id = e.target.getAttribute("data-id");
fetch(`/follow/${id}`, { let token = document.querySelector('input[name=_token]').value;
method: "POST", fetch(`/follow/${id}`, {
headers: { method: "POST",
"X-CSRF-Token": token headers: {
} "X-CSRF-Token": token
}).then((res) => { }
if (res.status === 400) alert("Couldn't follow this user"); }).then((res) => {
//else if (res.status === 200) window.location.href = "/profile/" + id; if (res.status === 400) alert("Couldn't follow this user");
//else if (res.status === 200) window.location.href = "/profile/" + id;
});
}); });
}); });
openModalBtn.addEventListener("click", (e) => { addEvent(openModalBtn, (btn) => {
modal.showModal(); btn.addEventListener("click", (e) => {
modal.showModal();
});
}); });
closeModalBtn.addEventListener("click", (e) => { addEvent(closeModalBtn, (btn) => {
modal.close(); btn.addEventListener("click", (e) => {
modal.close();
});
}); });
updateUserBtn.addEventListener("click", (e) => { addEvent(updateUserBtn, (btn) => {
e.preventDefault(); btn.addEventListener("click", (e) => {
let id = e.target.getAttribute("data-id"); e.preventDefault();
let token = document.querySelector('input[name=_token]').value; let id = e.target.getAttribute("data-id");
let form = document.querySelector('.update-form'); let token = document.querySelector('input[name=_token]').value;
let formData = new FormData(form); let form = document.querySelector('#update-form');
fetch(`/user/${id}`, { let formData = new FormData(form);
method: "POST", fetch(`/user/${id}`, {
headers: { method: "POST",
"X-CSRF-Token": token headers: {
}, "X-CSRF-Token": token
body: formData },
}).then((res) => { body: formData
window.location.href = "/profile/" + id; }).then((res) => {
window.location.href = "/profile/" + id;
});
}); });
}); });
deleteUserBtn.addEventListener("click", (e) => { addEvent(deleteUserBtn, (btn) => {
e.preventDefault(); btn.addEventListener("click", (e) => {
let id = e.target.getAttribute("data-id"); e.preventDefault();
let token = document.querySelector('input[name=_token]').value; let id = e.target.getAttribute("data-id");
fetch(`/user/${id}`, { let token = document.querySelector('input[name=_token]').value;
method: "DELETE", fetch(`/user/${id}`, {
headers: { method: "DELETE",
"X-CSRF-Token": token headers: {
} "X-CSRF-Token": token
}).then((res) => { }
window.location.href = "/" }).then((res) => {
window.location.href = "/"
});
}); });
}); });
}) });

22
resources/views/auth/login.blade.php
Unescape View File

@ -1,11 +1,19 @@
@extends('base.layout') @extends('base.layout')
@section('content') @section('content')
<h1>Login</h1> <div class="w-full flex justify-center items-center">
<form action="/login" method="post"> <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
@csrf <h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Login</h1>
<p>Email</p><input name="email" type="email" value="{{ old('email') }}"> <form action="/login" method="post" class="flex flex-col items-center">
<p>Password</p><input name="password" type="password"> <div class="grid grid-cols-4 w-full">
<input type="submit"> <p>Email :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
</form> name="email" type="email" value="{{ old('email') }}">
<p>Password :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="password" type="password">
</div>
@csrf
<button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
</form>
</div>
</div>
@endsection @endsection

32
resources/views/auth/register.blade.php
Unescape View File

@ -1,15 +1,25 @@
@extends('base.layout') @extends('base.layout')
@section('content') @section('content')
<h1>Register</h1> <div class="w-full flex justify-center items-center">
<form action="/register" method="post"> <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
@csrf <h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Register</h1>
<p>Username</p><input name="username" type="text" value="{{ old('username') }}"> <form action="/register" method="post" class="flex flex-col items-center">
<p>Name</p><input name="name" type="text" value="{{ old('name') }}"> <div class="grid grid-cols-4 w-full">
<p>Email</p><input name="email" type="email" value="{{ old('email') }}"> <p>Username :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
<p>Description</p><textarea name="description" type="text">{{ old('description') }}</textarea> name="username" type="text" value="{{ old('username') }}">
<p>Password</p><input name="password" type="password" > <p>Name (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
<br> name="name" type="text" value="{{ old('name') }}">
<input type="submit"> <p>Email :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
</form> name="email" type="email" value="{{ old('email') }}">
<p>Description (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="description" type="text">{{ old('description') }}</textarea>
<p>Password :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="password" type="password" >
</div>
@csrf
<button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
</form>
</div>
</div>
@endsection @endsection

26
resources/views/auth/verify_email.blade.php
Unescape View File

@ -1,23 +1,17 @@
@extends('base.layout') @extends('base.layout')
@section('content') @section('content')
<div> <div class="w-full flex justify-center items-center">
<h1>Email verification</h1> <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
<h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Email verification</h1>
@if(session('resent')) <div class="flex flex-col">
<div> <p class="mr-5">Before proceeding, please check your email for a verification link. If you did not receive the email,<p>
A fresh verification link has been sent to your email address. <form action="/email/verification-notification" method="post" class="mr-5">
@csrf
<button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">click here</button>
</form>
<p>to request another.</p>
</div> </div>
@endif
<div>
Before proceeding, please check your email for a verification link. If you did not receive the email,
<form action="/email/verification-notification" method="POST">
@csrf
<button type="submit">
click here to request another
</button>.
</form>
</div> </div>
</div> </div>
@endsection @endsection

2
resources/views/base/icon.blade.php
Unescape View File

@ -1,5 +1,5 @@
<li class="flex justify-center mb-5"> <li class="flex justify-center mb-5">
<a href="{{ $link }}"> <a href="{{ $link }}">
<img class="size-12" src="/img/{{ $icon }}"> <img class="size-12 text-black dark:brightness-0 dark:invert" src="/img/{{ $icon }}">
</a> </a>
</li> </li>

2
resources/views/base/layout.blade.php
Unescape View File

@ -7,7 +7,7 @@
<title>BlogBuntu</title> <title>BlogBuntu</title>
@vite('resources/css/app.css') @vite('resources/css/app.css')
</head> </head>
<body class="w-full flex p-0 m-0 bg-white dark:bg-black text-black dark:text-white"> <body class="w-full flex h-screen overflow-y-hidden bg-white dark:bg-black text-black dark:text-white">
@include('base.menu') @include('base.menu')
@include('base.errors') @include('base.errors')
@yield("content") @yield("content")

2
resources/views/base/menu.blade.php
Unescape View File

@ -1,4 +1,4 @@
<nav class="flex flex-col justify-between w-fit h-screen bg-white border-black pb-5 px-3 <nav class="flex flex-col justify-between w-fit h-full bg-white border-black pb-5 px-3
dark:bg-black border-r dark:border-white"> dark:bg-black border-r dark:border-white">
<a href="/" class="w-full flex justify-center mb-12"> <a href="/" class="w-full flex justify-center mb-12">
<img class="size-[6rem] mx-auto" src="/img/blog_logo.webp"> <img class="size-[6rem] mx-auto" src="/img/blog_logo.webp">

12
resources/views/blog/create.blade.php
Unescape View File

@ -4,18 +4,18 @@
<div class="w-full flex justify-center items-center"> <div class="w-full flex justify-center items-center">
<div class="w-2/3 p-10 border border-black dark:border-white rounded-lg"> <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
<h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Create a blog</h1> <h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Create a blog</h1>
<form action="/blog/" method="post" class="flex flex-col items-center"> <form action="/blog" method="post" class="flex flex-col items-center">
<div class="grid grid-cols-4 w-full"> <div class="grid grid-cols-4 w-full">
<p class="mr-">Title :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" <p>Title :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="title" type="text" value="{{ old('title') }}"> name="title" type="text" value="{{ old('title') }}">
<p>Image (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" <p>Image (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="image" type="file" value="{{ old('image') }}"> name="image" type="file" value="{{ old('image') }}">
<p>Epilog (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" <p>Epilog (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="epilog" type="text">{{ old('epilog') }}</textarea> name="epilog" type="text">{{ old('epilog') }}</textarea>
<p>Content (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" <p>Content (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="containt" type="text">{{ old('containt') }}</textarea> name="containt" type="text">{{ old('containt') }}</textarea>
</div> </div>
<input type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit"> <button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
@csrf @csrf
</form> </form>
</div> </div>

2
resources/views/blog/list.blade.php
Unescape View File

@ -1,7 +1,7 @@
@extends('base.layout') @extends('base.layout')
@section('content') @section('content')
<div class="w-full mx-2 grid grid-cols-2"> <div class="w-full mx-2 h-screen overflow-y-auto">
@foreach($blogs as $blog) @foreach($blogs as $blog)
@include('blog.view') @include('blog.view')
@endforeach @endforeach

28
resources/views/blog/modal_update.blade.php
Unescape View File

@ -1,13 +1,23 @@
<dialog id="modal-update" modal-disable> <dialog id="modal-update" modal-disable
<button class="close-modal">Cancel</button> class="modal w-2/3 p-10 border rounded-lg border-black dark:border-white dark:bg-black dark:text-white">
<form class="update-form"> <div class="flex flex-row-reverse">
<button id="close-modal" class="rounded-lg bg-red-500 text-white p-2 w-fit">Cancel</button>
</div>
<h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Update blog</h1>
<form id="update-form" class="flex flex-col items-center">
<div class="grid grid-cols-4 w-full">
<p>Title</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="title" type="text" value="{{ old('title') ? old('title') : $blog->title }}">
<p>Image</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="image" type="file" value="{{ old('image') ? old('image') : $blog->image }}">
<p>Epilog</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="epilog" type="text">{{ old('epilog') ? old('epilog') : $blog->epilog }}</textarea>
<p>Content</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="containt" type="text">{{ old('containt') ? old('containt') : $blog->containt }}</textarea>
</div>
<button id="btn-blog-update" data-id="{{$blog->id}}"
class="rounded-lg bg-blue-500 text-white p-2 w-fit">Update</button>
@csrf @csrf
<p>Title</p><input name="title" type="text" value="{{ old('title') ? old('title') : $blog->title }}">
<p>Image</p><input name="image" type="file" value="{{ old('image') ? old('image') : $blog->image }}">
<p>Epilog</p><textarea name="epilog" type="text">{{ old('epilog') ? old('epilog') : $blog->epilog }}</textarea>
<p>Content</p><textarea name="containt" type="text">{{ old('containt') ? old('containt') : $blog->containt }}</textarea>
<br>
<button class="btn btn-blog-update" data-id="{{$blog->id}}">Update</button>
</form> </form>
</dialog> </dialog>

18
resources/views/blog/single.blade.php
Unescape View File

@ -3,16 +3,18 @@
@section('content') @section('content')
@vite('resources/js/blog.js') @vite('resources/js/blog.js')
<div class="w-full h-screen overflow-y-auto"> <div class="w-full h-screen overflow-y-auto">
<div class="w-full flex flex-col pt-10 items-center px-[230px]"> <div class="w-full flex flex-col pt-10 items-center px-[200px]">
<div class="w-full flex justify-between"> <div class="w-full flex justify-between mb-8">
@csrf @csrf
<div> <div>
@if(request()->user() && $blog->user->id == request()->user()->id) @if(request()->user() && $blog->user->id == request()->user()->id)
<button id="open-modal">Update</button> <button id="open-modal" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Update</button>
<button id="btn-blog-delete" data-id="{{$blog->id}}">Delete</button> <button id="btn-blog-delete" class="rounded-lg bg-red-500 text-white p-2 w-fit"
data-id="{{$blog->id}}">Delete</button>
@include('blog.modal_update') @include('blog.modal_update')
@else @else
<button id="btn-follow" data-id="{{$blog->user->id}}">Follow</button> <button id="btn-follow" class="rounded-lg bg-blue-500 text-white p-2 w-fit"
data-id="{{$blog->user->id}}">Follow</button>
@endif @endif
</div> </div>
<div class="flex"> <div class="flex">
@ -21,13 +23,13 @@
</div> </div>
<div class="flex justify-around items-center bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded-lg"> <div class="flex justify-around items-center bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded-lg">
<p class="text-lg mr-2">{{ $blog->likes()->count() }}</p> <p class="text-lg mr-2">{{ $blog->likes()->count() }}</p>
<button id="btn-like" data-id="{{$blog->id}}"><img class="w-[30px]" src="/img/like_icon.svg"></button> <button id="btn-like" data-id="{{$blog->id}}"><img class="w-[30px]" data-id="{{$blog->id}}" src="/img/like_icon.svg"></button>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-col items-center"> <div class="w-full flex flex-col items-center">
<div class="w-full flex items-end justify-center border-b border-black pb-5"> <div class="w-full flex items-end justify-center border-b border-black pb-5">
<p class="text-8xl">{{ $blog->title }}</p> <p class="text-6xl">{{ $blog->title }}</p>
<p class="pl-10 text-3xl">by</p> <p class="pl-10 text-3xl">by</p>
<a class="pl-3 text-3xl" href="/profile/{{ $blog->user->id }}">{{ $blog->user->username }}</a> <a class="pl-3 text-3xl" href="/profile/{{ $blog->user->id }}">{{ $blog->user->username }}</a>
</div> </div>
@ -38,7 +40,7 @@
<p class="w-full px-[80px] py-10 italic">{{ $blog->epilog }}</p> <p class="w-full px-[80px] py-10 italic">{{ $blog->epilog }}</p>
</div> </div>
@if($blog->containt) @if($blog->containt)
<div class="md-content"> <div class="w-full mb-10 md-content">
{!! html_entity_decode(app(Spatie\LaravelMarkdown\MarkdownRenderer::class)->toHtml($blog->containt)) !!} {!! html_entity_decode(app(Spatie\LaravelMarkdown\MarkdownRenderer::class)->toHtml($blog->containt)) !!}
</div> </div>
@endif @endif

2
resources/views/blog/view.blade.php
Unescape View File

@ -1,5 +1,5 @@
<div class="grid grid-cols-3 w-full bg-white dark:bg-black hover:bg-gray-300 dark:hover:bg-gray-900 h-fit rounded-xl p-2 mt-5"> <div class="grid grid-cols-3 w-full bg-white dark:bg-black hover:bg-gray-300 dark:hover:bg-gray-900 h-fit rounded-xl p-2 mt-5">
<a class="row-span-2 m-auto h-[150px] w-[266px] w-max-[266px] bg-black dark:bg-white rounded-xl" href="/blog/{{ $blog->id }}"> <a class="row-span-2 m-auto h-[150px] w-[266px] w-max-[266px] bg-black dark:bg-white rounded-xl overflow-hidden" href="/blog/{{ $blog->id }}">
@if($blog->image) @if($blog->image)
<img class="h-[150px] w-min w-max-[266px] m-auto" <img class="h-[150px] w-min w-max-[266px] m-auto"
src="{{ asset('storage/images/blog/' . $blog->image) }}" alt="{{ $blog->image }}"> src="{{ asset('storage/images/blog/' . $blog->image) }}" alt="{{ $blog->image }}">

22
resources/views/user/modal_update.blade.php
Unescape View File

@ -1,9 +1,19 @@
<dialog id="modal-update" modal-disable> <dialog class="modal w-2/3 p-10 border rounded-lg border-black dark:border-white dark:bg-black dark:text-white"
<button class="close-modal">Cancel</button> id="modal-update" modal-disable>
<form class="update-form"> <div class="flex flex-row-reverse">
<button id="close-modal" class="rounded-lg bg-red-500 text-white p-2 w-fit">Cancel</button>
</div>
<h1 class="text-6xl font-bold pb-3 mb-5 border-b border-black dark:border-white">Update user info</h1>
<form id="update-form" class="flex flex-col items-center" >
<div class="grid grid-cols-4 w-full">
<p>Username :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="username" type="text" value="{{ old('username') ? old('username') : $user->username }}">
<p>Name (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="name" type="text" value="{{ old('name') ? old('name') : $user->name }}">
<p>Description (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
name="description" type="text">{{ old('description') ? old('description') : $user->description }}</textarea>
</div>
@csrf @csrf
<input name="name" type="text" required value="{{ $user->name }}"> <button id="btn-user-update" data-id="{{$user->id}}" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
<button class="btn btn-user-update" data-id="{{$user->id}}">Update</button>
</form> </form>
</dialog> </dialog>

56
resources/views/user/profile.blade.php
Unescape View File

@ -2,32 +2,38 @@
@section('content') @section('content')
@vite('resources/js/user.js') @vite('resources/js/user.js')
<h1>{{ $user->username }}</h1> <div class="w-full flex flex-col h-full items-center px-[140px] mt-[20px]">
<p>Name : {{ $user->name }}</p> <div class="w-full h-max flex h-pb-5 border-b border-black dark:border-white">
<p>Description {{ $user->description }}</p> <div class="w-max overflow-hidden rounded-[150px]">
<p>Contact : {{ $user->email }}</p> <img src="/img/profile_icon.svg" class="w-[300px]">
<p>Number of followers : {{ $user->followed->count() }}</p> </div>
@if(request()->user() && $user->id == request()->user()->id) <div class="w-full grid grid-rows-3 items-center">
<button id="open-modal">Update</button> <p class="w-full text-right">{{ $user->followed->count() }} followers</p>
<form class="delete-form"> <h1 class="text-6xl font-bold pb-3">{{ $user->name }}</h1>
@csrf <div class="flex">
<button class="btn btn-user-delete" data-id="{{$user->id}}">Delete</button> <p>@</p>
</form> <p>{{ $user->username }}</p>
@include('user.modal_update') <p class="ml-3">{{ $user->description }}</p>
<div> </div>
<h1>Follows</h1> </div>
@foreach($user->follows as $follow)
<p>{{ $follow->username }}</p>
@endforeach
</div> </div>
@else
@csrf @csrf
<button class="btn-follow" data-id="{{$user->id}}">Follow</button> <div class="w-full flex justify-end my-2">
@endif @if(request()->user() && $user->id == request()->user()->id)
<div class="blogs-block"> <button class="rounded-lg bg-blue-500 text-white p-2 w-fit mr-2"
<h1>Blogs</h1> id="open-modal">Update</button>
@foreach($user->blogs as $blog) <button class="rounded-lg bg-red-500 text-white p-2 w-fit"
@include('blog.view') id="btn-user-delete" data-id="{{$user->id}}">Delete</button>
@endforeach @include('user.modal_update')
@else
<button class="rounded-lg bg-blue-500 text-white p-2 w-fit mr-2"
id="btn-follow" data-id="{{$user->id}}">Follow</button>
@endif
</div>
<div class="w-full h-full overflow-y-scroll pb-300">
@foreach($user->blogs as $blog)
@include('blog.view')
@endforeach
</div>
</div> </div>
@endsection @endsection

2
tailwind.config.js
Unescape View File

@ -1,6 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
darkMode: 'selector', darkMode: 'class',
content: [ content: [
"./resources/**/*.blade.php", "./resources/**/*.blade.php",
"./resources/**/*.js", "./resources/**/*.js",

Write Preview
Loading…
Cancel
Save