diff --git a/ImageBoardServerApp/Shared/Components/Comment.razor b/ImageBoardServerApp/Shared/Components/Comment.razor index 9aa8f77..d5b30ed 100644 --- a/ImageBoardServerApp/Shared/Components/Comment.razor +++ b/ImageBoardServerApp/Shared/Components/Comment.razor @@ -4,8 +4,8 @@ @using System.Text.RegularExpressions @using System.ComponentModel.DataAnnotations @inject AuthenticationStateProvider authStateProvider - -
+
+
[ @toggleText ] @@ -84,55 +84,20 @@
- [ - Delete - - ] - [ - Report - ] + Report + @if (canDel) + { + + }
} + +
@code { + private string reportURL { get; set; } private bool isActive { get; set; } = false; @@ -187,7 +152,11 @@ opacity: .75; { canDel = true; } - canDel = false; + else + { + canDel = false; + } + hoverComment = new Dictionary(); hoverPost = new Dictionary(); @@ -223,6 +192,7 @@ opacity: .75; } } } + reportURL = $"/sys/report/comment/{comment.Board}/{comment.CommentID}"; } protected override async Task OnInitializedAsync() diff --git a/ImageBoardServerApp/Shared/Components/Comment.razor.css b/ImageBoardServerApp/Shared/Components/Comment.razor.css index 4600449..e5877f7 100644 --- a/ImageBoardServerApp/Shared/Components/Comment.razor.css +++ b/ImageBoardServerApp/Shared/Components/Comment.razor.css @@ -27,6 +27,9 @@ .threadHeader{ text-align: left; + background-color: #241938; + border-bottom: 2px solid #2d2a42; + margin-inside: 2px; } .threadFooter{ @@ -48,6 +51,8 @@ max-width: 500px; max-height: 500px; padding: 5px; + border: 1px solid #2d2a42; + border-radius: 5px; } .threadImage img{ @@ -76,4 +81,59 @@ .Mod{ color: #bd93f9; +} + +.comment{ + border: 2px solid #2d2a42; + border-radius: 4px; +} + +.threadFooter button{ + border: none; + color: white; + padding: 4px 8px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border-radius: 3px; +} + +.threadFooter a{ + border: none; + color: white; + padding: 4px 8px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border-radius: 3px; +} + +.delButton{ + background-color: #433F6B; + color: white; + border: 2px solid #ff5555; +} + +.delButton:hover{ + background-color: #ff5555; + color: white; +} + +.repButton{ + background-color: #433F6B; + color: white; + border: 2px solid #ffa255; +} + +.repButton:hover{ + background-color: #ffa255; + color: white; } \ No newline at end of file diff --git a/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor b/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor index 8b58538..5963a85 100644 --- a/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor +++ b/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor @@ -5,9 +5,9 @@ @inject IWebHostEnvironment env @inject AuthenticationStateProvider authStateProvider -
+
[ - @toggleText + ]
@if (opened) diff --git a/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css b/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css index 3b0bbb0..fd8cef7 100644 --- a/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css +++ b/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css @@ -41,4 +41,24 @@ .postError{ color: #ff191c; +} + +.toggler button{ + color: white; + padding: 4px 8px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border-radius: 3px; + background-color: #433F6B; + border: none; +} + +.toggler button:hover{ + background-color: #0de873; + color: black; } \ No newline at end of file diff --git a/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor b/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor index 5241ea4..5f91849 100644 --- a/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor +++ b/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor @@ -6,9 +6,9 @@ @inject IWebHostEnvironment env @inject AuthenticationStateProvider authStateProvider -
+
[ - @toggleText + ]
@if (opened) diff --git a/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css b/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css index 3b0bbb0..72679f4 100644 --- a/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css +++ b/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css @@ -41,4 +41,24 @@ .postError{ color: #ff191c; +} + +.toggler button{ + color: white; + padding: 4px 8px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border-radius: 3px; + background-color: #433F6B; + border: none; +} + +.toggler button:hover{ + background-color: #0de873; + color: black; } \ No newline at end of file diff --git a/ImageBoardServerApp/Shared/Components/Post.razor b/ImageBoardServerApp/Shared/Components/Post.razor index 75d440e..a24a83b 100644 --- a/ImageBoardServerApp/Shared/Components/Post.razor +++ b/ImageBoardServerApp/Shared/Components/Post.razor @@ -7,144 +7,128 @@ @inject NavigationManager navigationManager; -
- @if (showOpenThread) - { - [ - @toggleText - ] - } - @post.Title - @post.Username - @if (post.User.Role != "User") - { - ##@post.User.Role - } - - @getTimeFromUnix(post.CreatedAt) - No.@post.GET - - - - (@value) - - - @if (post.IsSticky) - { - Stickied - } - @if (post.IsLocked) - { - Locked - } -
-@if (opened) -{ -
-
- @if (@post.Image != null) - { - string isActiveClass = isActive ? "active" : ""; - No Image found - } - else - { - [No Image] - } -
-
- @if (showOpenThread) - { - @foreach (string s in post.Content.Split("\n").ToList().Take(6)) - { - var className = ""; - @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}")) - { - className = "greenText"; - } - - @s  - } - @if (post.Content.Split("\n").Length > 6) - { -
- [Open Thread to read more...] - } - } - else - { - @foreach (string s in post.Content.Split("\n")) - { - var className = ""; - @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}")) - { - className = "greenText"; - } - - @s  - } - } -
-
-
-
- -
- - - [ - @if (post.IsSticky) - { - Unsticky - } - else - { - Sticky - } - ] - [ - @if (post.IsLocked) - { - Unlock - } - else - { - Lock - } - ] - - - @if (canDel) - { - [ - Delete - ] - } - [ - Report - ] +
+
@if (showOpenThread) { [ - (@post.Comments.Count) View Thread - ] + @toggleText + ] } - else + @post.Title + @post.Username + @if (post.User.Role != "User") + { + ##@post.User.Role + } + + @getTimeFromUnix(post.CreatedAt) + No.@post.GET + @if (post.IsSticky) { - [ - @post.Comments.Count Comments - ] + Stickied + } + @if (post.IsLocked) + { + Locked }
-} + @if (opened) + { +
+
+ @if (@post.Image != null) + { + string isActiveClass = isActive ? "active" : ""; + No Image found + } + else + { + [No Image] + } +
+
+ @if (showOpenThread) + { + @foreach (string s in post.Content.Split("\n").ToList().Take(6)) + { + var className = ""; + @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}")) + { + className = "greenText"; + } + + @s  + } + @if (post.Content.Split("\n").Length > 6) + { +
+ [Open Thread to read more...] + } + } + else + { + @foreach (string s in post.Content.Split("\n")) + { + var className = ""; + @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}")) + { + className = "greenText"; + } + + @s  + } + } +
+
+
+ + + @if (post.IsSticky) + { + + } + else + { + + } + @if (post.IsLocked) + { + + } + else + { + + } + + + Report + @if (canDel) + { + + } + @if (showOpenThread) + { + @openThreadName + } + else + { + @post.Comments.Count Comments + } +
+ } +
@code { + private string reportURL { get; set; } + private string threadURL { get; set; } + private string openThreadName { get; set; } + public bool canDel { get; set; } public bool isActive { get; set; } = false; private int linecnt = 0; - private async void lockMe() { @@ -202,6 +186,11 @@ var user = await cauthStateProvder.GetAuthenticationStateAsync(); var usr = user.User; UserData foundusr = await UsersRepository.getUserByEmailAsync(usr.Identity.Name); + + reportURL = $"/sys/report/op/{post.Board}/{post.PostID}"; + threadURL = $"/{post.Board}/thread/{post.PostID}"; + openThreadName = $"({post.Comments.Count}) View Thread"; + if (foundusr != null && (foundusr.Role != "User" || post.UserID == foundusr.UserID)) { canDel = true; diff --git a/ImageBoardServerApp/Shared/Components/Post.razor.css b/ImageBoardServerApp/Shared/Components/Post.razor.css index f507cb1..f7a8fee 100644 --- a/ImageBoardServerApp/Shared/Components/Post.razor.css +++ b/ImageBoardServerApp/Shared/Components/Post.razor.css @@ -23,9 +23,11 @@ .Mod{ color: #bd93f9; } - .threadHeader{ text-align: left; + background-color: #241938; + border-bottom: 2px solid #2d2a42; + margin-inside: 2px; } .threadFooter{ @@ -33,6 +35,78 @@ align-self: end; !important; } +.threadFooter button{ + border: none; + color: white; + padding: 4px 8px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border-radius: 3px; +} + +.threadFooter a{ + border: none; + color: white; + padding: 4px 8px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border-radius: 3px; +} + +.delButton{ + background-color: #433F6B; + color: white; + border: 2px solid #ff5555; +} + +.delButton:hover{ + background-color: #ff5555; + color: white; +} + +.repButton{ + background-color: #433F6B; + color: white; + border: 2px solid #ffa255; +} + +.repButton:hover{ + background-color: #ffa255; + color: white; +} + +.opButton{ + background-color: #433F6B; + color: white; + border: 2px solid #55ff77; +} + +.opButton:hover{ + background-color: #55ff77; + color: white; +} + +.statButton{ + background-color: #433F6B; + color: white; + border: 2px solid #008CBA; +} + +.statButton:hover{ + background-color: #008CBA; + color: white; +} + .threadFooter.a{ color: #6272a4; } @@ -74,4 +148,14 @@ .threadMsg { display: inline-block; +} + +.post{ + border: 2px solid #2d2a42; + border-radius: 4px; +} + +.threadImage{ + border: 1px solid #2d2a42; + border-radius: 5px; } \ No newline at end of file