From a64a4da8cd20f69e99f8ccf342f515fec26b4423 Mon Sep 17 00:00:00 2001 From: schrumpel <Âgit@f0ck.it> Date: Thu, 27 Oct 2022 22:19:27 +0200 Subject: [PATCH] comment mockup --- public/s/css/f0ck.css | 126 +++++++++++++++++++++++++++++++- views/comments.html | 165 ++++++++++++++++++++++++++++++++++++++++++ views/item.html | 1 + 3 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 views/comments.html diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css index e65faed..63d38bc 100644 --- a/public/s/css/f0ck.css +++ b/public/s/css/f0ck.css @@ -2798,4 +2798,128 @@ ul.navbar-nav-guests li.nav-item { .random:active { background: #00000036; } -} \ No newline at end of file +} + +/* 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; + } \ No newline at end of file diff --git a/views/comments.html b/views/comments.html new file mode 100644 index 0000000..764baf9 --- /dev/null +++ b/views/comments.html @@ -0,0 +1,165 @@ +
+
+ Comments +
+
+ + +
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
+ +
+
+ {{ session.user }} +
+
+

Lorem Ipsum Lorem Ipsum

+
+
+
+
\ No newline at end of file diff --git a/views/item.html b/views/item.html index 78869f3..d0acbfa 100644 --- a/views/item.html +++ b/views/item.html @@ -101,5 +101,6 @@ +@include(comments) @include(snippets/footer) \ No newline at end of file