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

Compare commits

merge into: f0ck:master
Branches Tags
f0ck:master
f0ck:dev
f0ck:f0ck_local
f0ck:comments
...
pull from: f0ck:comments
Branches Tags
f0ck:master
f0ck:dev
f0ck:f0ck_local
f0ck:comments

2 Commits
master ... comments

Author SHA1 Message Date
schrumpel
d951a072ee dev progress 2022-10-28 04:08:35 +02:00
schrumpel
a64a4da8cd comment mockup 2022-10-27 22:19:27 +02:00
3 changed files with 318 additions and 1 deletions
Show Stats Expand all files Collapse all files

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

@ -2769,7 +2769,7 @@ ul.navbar-nav-guests li.nav-item {
}
/* mobile random button */
.random {
/* .random {
display: none;
}
@ -2798,4 +2798,155 @@ 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-top: 1px solid #363636;
border-right: 1px solid #363636;
background-color: var(--metadata-bg);
}
.commentbox {
display: grid;
grid-template-rows: 1fr 0fr;
padding: 5px;
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;
}
/* comments responsive */
@media (max-width: 799px) {
#main {
display: grid;
grid-template-columns: 1fr;
height: calc(100% - 40px);
}
.commentholder {
overflow: unset;
}
.container {
overflow: unset;
}
body {
overflow: scroll;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}

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>