From 1f8695893fdcca87af192969466cf58fc61935ca Mon Sep 17 00:00:00 2001 From: Ashley Date: Thu, 13 Oct 2022 16:13:27 +0200 Subject: [PATCH] comments on mobile :3 --- html/poketube.ejs | 356 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 343 insertions(+), 13 deletions(-) diff --git a/html/poketube.ejs b/html/poketube.ejs index 2e30126e..be25d86f 100644 --- a/html/poketube.ejs +++ b/html/poketube.ejs @@ -905,6 +905,173 @@ body { -moz-user-select:none; -ms-user-select:none; user-select:none +} + .comments-area { + background: #f1f9ff; + padding: 50px 30px; + margin-top: 50px; +} + +@media (max-width: 414px) { + .comments-area { + padding: 50px 8px; + } +} + +.comments-area h4 { + text-align: center; + margin-bottom: 50px; + color: #002347; + font-size: 18px; +} + +.comments-area h5 { + font-size: 16px; + margin-bottom: 0px; +} + +.comments-area a { + color: #002347; +} + +.comments-area .comment-list { + padding-bottom: 30px; +} + +.comments-area .comment-list:last-child { + padding-bottom: 0px; +} + +.comments-area .comment-list.left-padding { + padding-left: 25px; +} + +@media (max-width: 413px) { + .comments-area .comment-list .single-comment h5 { + font-size: 12px; + } + .comments-area .comment-list .single-comment .date { + font-size: 11px; + } + .comments-area .comment-list .single-comment .comment { + font-size: 10px; + } +} + +.comments-area .thumb { + margin-right: 20px; +} + +.comments-area .date { + font-size: 13px; + color: #777777; + margin-bottom: 13px; +} + +.comments-area .comment { + color: #777777; + margin-bottom: 0px; +} + +.comments-area .btn-reply { + background-color: #fff; + color: #002347; + border: 1px solid #eee; + padding: 2px 18px; + font-size: 12px; + display: block; + font-weight: 600; + -webkit-transition: all 0.3s ease 0s; + -moz-transition: all 0.3s ease 0s; + -o-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} + +.comments-area .btn-reply:hover { + background: #fdc632; + color: #002347; +} + +.comment-form { + background: #f1f9ff; + text-align: center; + padding: 47px 30px 43px; + margin-top: 50px; + margin-bottom: 40px; +} + +.comment-form h4 { + text-align: center; + margin-bottom: 50px; + font-size: 18px; + line-height: 22px; + color: #002347; +} + +.comment-form .name { + padding-left: 0px; +} + +@media (max-width: 767px) { + .comment-form .name { + padding-right: 0px; + margin-bottom: 1rem; + } +} + +.comment-form .email { + padding-right: 0px; +} + +@media (max-width: 991px) { + .comment-form .email { + padding-left: 0px; + } +} + +.comment-form .form-control { + padding: 8px 20px; + background: #fff; + border: none; + border-radius: 0px; + width: 100%; + font-size: 14px; + color: #777777; + border: 1px solid transparent; +} + +.comment-form .form-control:focus { + box-shadow: none; + border: 1px solid #eee; +} + +.comment-form textarea.form-control { + height: 140px; + resize: none; +} + +.comment-form ::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ + font-size: 15px; + color: #777; +} + +.comment-form ::-moz-placeholder { + /* Firefox 19+ */ + font-size: 15px; + color: #777; +} + +.comment-form :-ms-input-placeholder { + /* IE 10+ */ + font-size: 15px; + color: #777; +} + +.comment-form :-moz-placeholder { + /* Firefox 18- */ + font-size: 15px; + color: #777; } .v-application--is-ltr .v-chip .v-chip__close.v-icon.v-icon--right { margin-right:-4px @@ -1227,6 +1394,96 @@ padding: 3px; } #descs span { display: block; } #descs span a { display: inline-block; } + +#comments-container .backtotop { + margin: 0%; + display: none; +} +#comments-container .backtotop a { + margin-top: .5em; +} +#comments .close { display: none; } +#comments { +font-size: .94em; +line-height: 1.2em; +text-align: left; +padding: .6em 3%; +margin: 0; +background: #000; +border-top: none; +border-radius: 23px; +height: 100%; +} +#set-language { margin-bottom: .2em; } +#set-language + p { + display: inline-block; + font-size: 1em; /* 15px */ + margin: .45em 0 0; +} + +#commentss { padding: .4em 0; } +#commentss p {margin: 0; +font-weight: 900; +font-stretch: ultra-expanded; +padding: 3px; + } +#commentss span { + display: inline-block; + width: 10.5em; + line-height: 2em; +} +#commentss span a { + line-height: 1.9em; +} +#commentss span.original { font-weight: bold; } +/* Display/hide language list */ + + #comments-container { display: none; } + #comments-container:target { display: block; } + + #rec-cont:target { display: none; } + #rec-cont { display: block; } + + .backtotop b { display: none; } + + body { position: relative; } + #comments-container { + position: absolute; + margin-top: -12.4em; + left: 0; + width: 100%; + height: 100%; + } + #language-container .backtotop a { + position: absolute; + width: 100%; + height: 100%; + background: transparent; + border: none; + margin-top: 0; + } + #comments .close { + float: right; + display: block; + } + #comments .close span { + display: none; + } + #comments .close:after { + content: "\2A09"; + float: right; + position: relative; bottom: .1em; + cursor: pointer; + } + + #commentss { + column-width: 10em; + column-count: 3; + column-gap: 0; + } + #commentss span { display: block; } + #commentss span a { display: inline-block; } + @@ -1333,6 +1590,7 @@ padding: 3px; +

Description

@@ -1381,6 +1639,7 @@ padding: 3px;
+
@@ -1455,30 +1714,101 @@ PokeTube Mobile v12.10.22a - Node <%=process.version%> - V8 v<%=process.versions + +
+ +
+
+ ▲ +
+
+
+ +
+
+ + +
+
+

Comments

+

+ Top Comments +

+
+ <% if (!Array.isArray( inv.comments)) { %> +

+ Comments couldnt load ;-; (Report dis issue or refresh the god damn page lol) +

+ <% } %> + + + <% if (Array.isArray( inv.comments)) { %> + + <% inv.comments.forEach(x =>{ %> + +
+ +
+
+
+
+
+ + + +
+

+ <%- x.author%>

+

+ <%- x.contentHtml %> +

+ <%- x.publishedText %> • <%- convert(x.likeCount) %> Likes +

+
+
+
+
+ +
+ + <% }) %> + + <% } %> + + +
+ + + + + +
+
+ + +
- <% if (comments) { %> - -
Comments
-
- <% if (!video.Channel.Name.endsWith(' - Topic')) { %> -

- theres <%=comments%> total comments rigth now on this video. view em on invidious + + +

Comments
+

+ View The comments on dis video :3 + + +

- <% } %> <% } %> - <% if (video.Channel.Name.endsWith(' - Topic')) { %> - disabled for topic channels <% } %> - -
+ +
-
+