feat: improved visuals

Signed-off-by: limited_dev <loginakkisativ@gmail.com>
2023-06-07 14:46:39 +02:00 · 2023-06-07 14:46:39 +02:00 · 1524d12647
commit 1524d12647
parent 94a705b840
8 changed files with 318 additions and 175 deletions
--- 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
-
-<div class="threadHeader">
+<div class="comment">
+    <div class="threadHeader">
    <span>[</span>
    <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
    <span>]</span>
@ -84,55 +84,20 @@
        </div>
    </div>
    <div class="threadFooter">
-        <span>[</span>
-            <a @onclick="@deletePost" href="javascript:void(0)">Delete</a>
-<!--
-<button class="button-31" role="button">Button 31</button>
-            
-/* CSS */
-.button-31 {
-background-color: #222;
-border-radius: 4px;
-border-style: none;
-box-sizing: border-box;
-color: #fff;
-cursor: pointer;
-display: inline-block;
-font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif;
-font-size: 16px;
-font-weight: 700;
-line-height: 1.5;
-margin: 0;
-max-width: none;
-min-height: 44px;
-min-width: 10px;
-outline: none;
-overflow: hidden;
-padding: 9px 20px 8px;
-position: relative;
-text-align: center;
-text-transform: none;
-user-select: none;
-webkit-user-select: none;
-touch-action: manipulation;
-width: 100%;
-}
-            
-.button-31:hover,
-.button-31:focus {
-opacity: .75;
-}
-!-->
-        <span>]</span>
-        <span>[</span>
-        <a class="report" href="/sys/report/comment/@comment.Board/@comment.CommentID" target="_blank">Report</a>
-        <span>]</span>
+        <a class="repButton" href="@reportURL" target="_blank">Report</a>
+        @if (canDel)
+        {
+            <button class="delButton" onclick="@deletePost">Delete</button>
+        }
    </div>
 }
    
+</div>
+


@code {
+    private string reportURL { get; set; }
    
    private bool isActive { get; set; } = false;

@ -187,7 +152,11 @@ opacity: .75;
        {
            canDel = true;
        }
+        else
+        {
            canDel = false;
+        }
+
        
        hoverComment = new Dictionary<int, CommentData>();
        hoverPost = new Dictionary<int, PostData>();
@ -223,6 +192,7 @@ opacity: .75;
                }
            }
        }
+        reportURL = $"/sys/report/comment/{comment.Board}/{comment.CommentID}";
    }

    protected override async Task OnInitializedAsync()
--- 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{
@ -77,3 +82,58 @@
 .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;
+}
--- a/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor
+++ b/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor
@ -5,9 +5,9 @@
@inject IWebHostEnvironment env
@inject AuthenticationStateProvider authStateProvider

-<div>
+<div class="toggler">
    <span>[</span>
-    <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
+    <button onclick="@ToggleOpened">@toggleText</button>
    <span>]</span>
 </div>
@if (opened)
--- a/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css
+++ b/ImageBoardServerApp/Shared/Components/Forms/CommentForm.razor.css
@ -42,3 +42,23 @@
 .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; 
+}
--- a/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor
+++ b/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor
@ -6,9 +6,9 @@
@inject IWebHostEnvironment env
@inject AuthenticationStateProvider authStateProvider

-<div>
+<div class="toggler">
    <span>[</span>
-    <a class="toggleOpened" onclick="@ToggleOpened">@toggleText</a>
+    <button onclick="@ToggleOpened">@toggleText</button>
    <span>]</span>
 </div>
@if (opened)
--- a/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css
+++ b/ImageBoardServerApp/Shared/Components/Forms/PostForm.razor.css
@ -42,3 +42,23 @@
 .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;
+}
--- a/ImageBoardServerApp/Shared/Components/Post.razor
+++ b/ImageBoardServerApp/Shared/Components/Post.razor
@ -7,7 +7,8 @@
@inject NavigationManager navigationManager;


-<div class="threadHeader">
+<div class="post">
+    <div class="threadHeader">
        @if (showOpenThread)
        {
            <span>[</span>
@ -23,12 +24,6 @@
        <span> </span>
        <span class="date"> @getTimeFromUnix(post.CreatedAt)</span>
        <span class="post-id">No.@post.GET</span>
-    <AuthorizeView Roles="Admin,Mod">
-        <Authorized>
-            <span> </span>
-            <span>(@value)</span>
-        </Authorized>
-    </AuthorizeView>
        @if (post.IsSticky)
        {
            <img src="img/static/sys/sticky.png" alt="Stickied"/>
@ -37,9 +32,9 @@
        {
            <img src="img/static/sys/locked.png" alt="Locked"/>
        }
-</div>
-@if (opened) 
-{
+    </div>
+    @if (opened) 
+    {
        <div class="threadContent">
            <div class="threadImage">
                @if (@post.Image != null)
@ -87,65 +82,54 @@
            </div>
        </div>
        <div class="threadFooter">
-        <div class="sticky">
-                
-        </div>
            <AuthorizeView Roles="Admin, Mod">
                <Authorized>
-                <span>[ </span>
                    @if (post.IsSticky)
                    {
-                    <a onclick="@stickyMe" href="javascript:void(0)">Unsticky</a>
+                        <button class="statButton" onclick="@stickyMe">Unsticky</button>
                    }
                    else
                    {
-                    <a onclick="@stickyMe" href="javascript:void(0)">Sticky</a>
+                        <button class="statButton" onclick="@stickyMe">Sticky</button>
                    }
-                <span> ]</span>
-                <span>[ </span>
                    @if (post.IsLocked)
                    {
-                    <a onclick="@lockMe" href="javascript:void(0)">Unlock</a>
+                        <button class="statButton" onclick="@lockMe">Unlock</button>
                    }
                    else
                    {
-                    <a onclick="@lockMe" href="javascript:void(0)">Lock</a>
+                        <button class="statButton" onclick="@lockMe">Lock</button>
                    }
-                <span> ]</span>
                </Authorized>
            </AuthorizeView>
+            <a class="repButton" href="@reportURL" target="_blank">Report</a>
            @if (canDel)
            {
-            <span>[</span>
-            <a @onclick="@deletePost" href="javascript:void(0)">Delete</a>
-            <span>]</span>
+                <button class="delButton" onclick="@deletePost">Delete</button>
            }
-        <span>[</span>
-        <a class="report" href="/sys/report/op/@post.Board/@post.PostID" target="_blank">Report</a>
-        <span>] </span>
            @if (showOpenThread)
            {
-            <span>[</span>
-            <a class="openThread" href="/@post.Board/thread/@post.PostID">(@post.Comments.Count) View Thread</a>
-            <span>]</span>
+                <a class="opButton" href="@threadURL">@openThreadName</a>
            }
            else
            {
-            <span>[</span>
                <span class="openThread">@post.Comments.Count Comments</span>
-            <span>]</span>
            }
        </div>
-}
+    }
+</div>

@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()
    {
        post.IsLocked = !post.IsLocked;
@ -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;
--- 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;
 }
@ -75,3 +149,13 @@
 .threadMsg {
    display: inline-block;
 }
+
+.post{
+    border: 2px solid #2d2a42;
+    border-radius: 4px;
+}
+
+.threadImage{
+    border:  1px solid #2d2a42;
+    border-radius: 5px;
+}