comment mockup
This commit is contained in:
schrumpel
@@ -2799,3 +2799,127 @@ ul.navbar-nav-guests li.nav-item {
|
|||||||
background: #00000036;
|
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
165
views/comments.html
Normal 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>
|
||||||
@@ -101,5 +101,6 @@
|
|||||||
<a href="/random"></a>
|
<a href="/random"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@include(comments)
|
||||||
@include(snippets/footer)
|
@include(snippets/footer)
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user