f0ck/f0ckv2
3
4
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

comment mockup

Browse Source
This commit is contained in:
schrumpel 2022-10-27 22:19:27 +02:00
parent ddaaaee502
commit a64a4da8cd
3 changed files with 291 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
public/s/css/f0ck.css
View File

@ -2798,4 +2798,128 @@ ul.navbar-nav-guests li.nav-item {
.random:active {
background: #00000036;
}
}
}
/* changes for comment mockup */
body {
overflow: hidden;
}
.container {
padding-top: 0;
max-width: 100%;
overflow: scroll;
padding-bottom: 0;
}
#main {
display: grid;
grid-template-columns: 3fr 1fr;
height: calc(100% - 40px);
}
#comments1 {
width: 100%;
}
.comment {
background: black;
padding: 5px;
margin: 10px;
display: grid;
grid-template-rows: 0fr 1fr;
grid-template-columns: 0fr 1fr;
}
.sidebar {
display: grid;
grid-template-columns: auto;
grid-template-rows: 0fr 0fr auto 0fr;
border: 1px solid #363636;
background-color: var(--metadata-bg);
}
.commentbox {
display: grid;
grid-template-rows: 1fr 0fr;
padding: 5px;
border-bottom: 2px solid black;
background: #373737;
grid-gap: 5px;
}
#comments1 {
background: #131313;
border: 1px solid black;
color: white;
}
button.commentbutton {
width: 5rem;
border: 1px solid black;
background: #131313;
color: white;
}
.commentholder {
overflow: scroll;
min-height: 100%;
width: 100%;
height: 0;
}
img.avatar_comments {
height: auto;
position: relative;
width: 35px;
margin: 0;
left: 0;
top: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.comment_content {
grid-column: 2;
}
.comment_content p {
margin: 0;
padding: 5px;
}
.comment_username {
align-items: baseline;
display: grid;
position: relative;
height: 100%;
padding-left: 5px;
position: relative;
top: -5px;
}
.comment {
background: #171717;
padding: 5px;
margin: 10px;
display: grid;
grid-template-rows: 0fr 0fr;
grid-template-columns: 0fr 1fr;
border: 1px solid black;
}
.comment_content img {
max-width: 150px;
}
.header_sidebar {
background: -webkit-linear-gradient(left, #4f4a4f, #131313);
color: var(--accent);
}
.header_sidebar span {
position: relative;
left: 4px;
font-weight: bold;
}

165
views/comments.html Normal file
View File

@ -0,0 +1,165 @@
<div class="sidebar">
<div class="header_sidebar">
<span>Comments</span>
</div>
<div class="commentbox">
<textarea name="comments" id="comments1" cols="30" rows="5" placeholder="Write a shitpost?"></textarea>
<button class="commentbutton">Shit</button>
</div>
<div class="commentholder">
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
<div class="comment">
<div class="comment_userimg">
<img src="@if(session.avatar)/t/{{ session.avatar }}.webp@else/s/img/ava/default.png@endif" class="avatar_comments" />
</div>
<div class="comment_username">
{{ session.user }}
</div>
<div class="comment_content">
<p>Lorem Ipsum Lorem Ipsum <br><img src="https://f0ck.me/b/63144b2b.webp" alt=""></p>
</div>
</div>
</div>
</div>

1
views/item.html
View File

@ -101,5 +101,6 @@
<a href="/random"></a>
</div>
</div>
@include(comments)
@include(snippets/footer)
</div>