summaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorjulian laplace <julescarbon@gmail.com>2022-10-26 15:50:25 +0200
committerjulian laplace <julescarbon@gmail.com>2022-10-26 15:50:25 +0200
commit8fe5a1cf652fd4bd0b737bd18605a8d4c4028407 (patch)
treeb1a65a0421020c9f51aabea4401ef0c6f1093520 /views
parent3dc50a84e6ae99d991caf0dae9c3a222ec4a37f1 (diff)
update padding still lol hi :)
Diffstat (limited to 'views')
-rw-r--r--views/partials/header.ejs1
-rw-r--r--views/partials/hootstream.ejs306
2 files changed, 18 insertions, 289 deletions
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 664e236..1be8e7d 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<link rel="stylesheet" href="/assets/css/bucky.css">
+<link rel="stylesheet" href="/assets/css/hootstream.css">
<meta name="_csrf" value="<%= csrfToken %>">
</head>
<body class="loading">
diff --git a/views/partials/hootstream.ejs b/views/partials/hootstream.ejs
index 755f83c..dfc1ee6 100644
--- a/views/partials/hootstream.ejs
+++ b/views/partials/hootstream.ejs
@@ -21,6 +21,22 @@
</div>
</script>
+ <script class="threadTemplate" type="text/html">
+ <div class="{{className}}">
+ <a class="userLink" href="/profile/{{username}}" style="opacity: {{age_opacity}}">
+ {{username}}
+ </a>
+ <a class="avatarLink" href="/profile/{{username}}" style="opacity: {{age_opacity}}">
+ <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
+ </a>
+ <div class="text" style="opacity: {{age_opacity}}">{{hoot}}</div>
+ <div class="keyword">{{keyword_link}}</div>
+ <div class="commentCount date" style="opacity: {{comment_opacity}}">{{comment_count}}</div>
+ <div class="fileCount date" style="opacity: {{file_opacity}}">{{file_count}}</div>
+ <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
+ </div>
+ </script>
+
<script class="lastlogTemplate" type="text/html">
<div class="{{className}}" style="opacity: {{opacity}}">
<a class="userLink" href="/profile/{{username}}">
@@ -36,7 +52,7 @@
<div class="filename" style="opacity: {{age_opacity}}">
<a href="{{link}}" title="{{id}}" class="file">{{filename}}</a>
</div>
- <div class="size {{size_class}}" style="opacity: {{age_opacity}}">
+ <div class="size" style="opacity: {{age_opacity}}">
{{size}}
</div>
<div class="age {{date_class}}" style="opacity: {{age_opacity}}">
@@ -57,291 +73,3 @@
</div>
</div>
-
-<style>
- #hootstream {
- margin-top: 3rem;
- font-size: 16px;
- }
- #hootstream form {
- display: flex;
- width: 100%;
- justify-content: space-between;
- align-items: center;
- flex-direction: row;
- margin-bottom: 0.75rem;
- }
- #hootstream form input {
- flex: 1;
- font-size: 16px;
- padding: 0.25rem;
- margin-bottom: 0;
- }
- #hootstream form button {
- margin: 0;
- padding: 0.25rem;
- margin-left: 0.5rem;
- min-width: 2.5rem;
- }
- #hootevents {
- font-size: 14px;
- padding-right: 3rem;
- }
- #hootevents .hoot {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 0.5rem;
- width: 100%;
- }
- #hootevents .age {
- width: 40px;
- display: flex;
- justify-content: flex-end;
- align-items: flex-start;
- text-align: right;
- margin: 0px 0.75rem 0px 0px;
- }
- #hootevents .userLink {
- color: #118;
- opacity: 0.8;
- text-align: right;
- width: 6rem;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-right: 0.5rem;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- margin-top: 0.175rem;
- }
- #hootevents .avatar {
- width: 1.5rem;
- height: 1.5rem;
- background-size: cover;
- border-radius: 2px;
- border: 1px solid #000;
- margin: 0px 0.5rem 0px 0px;
- box-shadow: 0 0 1px 1px rgba(128,128,128,0.1);
- position: relative;
- top: -0.25rem;
- }
- #hootevents .hoot .text {
- text-align: left;
- flex: 1;
- margin: 0px 0.5rem 0px 0px;
- white-space: pre-wrap;
- line-height: 1.5;
- }
-
- #hootevents .hoot.isRecent .threadLink {
- font-weight: bold;
- text-shadow: 0 0 3px #fed;
- }
- #hootevents .hoot .threadLink {
- color: #38f;
- font-size: 16px;
- }
-
- /** DiViDErZ */
-
- #hootevents .divider {
- border-top: 0;
- border-bottom: 1px solid rgba(88,88,88,0.4);
- margin: 0 auto;
- width: 80%;
- height: 0rem;
- margin-bottom: 1rem;
- }
- #hootevents .divider.dark {
- border-top: 1px solid rgba(88,88,88,0.4);
- border-bottom: 0;
- height: 1rem;
- margin-bottom: 0rem;
- margin-top: 0rem;
- }
- #hootevents .thread {
- background: linear-gradient(90deg, rgba(127,127,127,0.0), rgba(127,127,127,0.05), rgba(127,127,127,0.0));
- }
-
- /** LastLog */
-
- #hootevents .hoot.streamLastlog {
- font-size: 13px;
- margin-bottom: 1rem;
- align-items: center;
- }
- #hootevents .hoot.streamLastlog .userLink {
- margin-top: 0;
- margin-right: 0.375rem;
- }
- #hootevents .hoot.streamLastlog .text {
- line-height: 0;
- }
- #hootevents .hoot.streamLastlog .age {
-
- }
-
- /** Files */
- #hootevents .fileList {
- width: calc(100% - 8.25rem + 1px);
- margin-top: 0.5rem;
- margin-bottom: 1rem;
- margin-left: 8rem;
- margin-bottom: 1rem;
- }
- #hootevents .fileRow {
- width: 100%;
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- #hootevents .fileRow .age {
- margin-right: 0;
- }
- #hootevents .fileRow .filename {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- #hootevents .fileRow div {
- color: rgba(64,64,64,1.0);
- background: transparent;
- padding: 0.5rem;
- white-space: nowrap;
- position: relative;
- transition: opacity 0.1s;
- }
- #hootevents .fileRow div::after {
- content: '';
- width: 100%;
- height: 100%;
- opacity: 0.2;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- }
- #hootevents .fileRow:nth-child(odd) div::after {
- background-color: #448;
- }
- #hootevents .fileRow:nth-child(even) div::after {
- background-color: #88b;
- }
- #hootevents .fileRow:nth-child(even):hover div::after,
- #hootevents .fileRow:nth-child(odd):hover div::after {
- background-color: #bbf;
- }
-
- /** Misc */
- #hootevents code, #hootevents pre {
- background: rgba(127,127,127,0.2);
- border: 1px solid rgba(127,127,127,0.2);
- max-width: calc(100vw - 12.5rem);
- margin: 0.25rem;
- padding: 0.5rem;
- }
-
- /** HOOT FORM */
-
- #hootform {
- margin-bottom: 0.5rem;
- padding: 0.5rem;
- }
- #hootform input[type="text"] {
- border-top: 0;
- border-left: 0;
- border-right: 0;
- border-bottom: 1px solid rgba(127,127,127,0.5);
- padding-bottom: 3px;
- font-size: 14px;
- font-family: "Trebuchet MS", sans-serif;
- background: transparent;
- outline: 0;
- width: 270px;
- transition: background 200ms;
- background: white;
- }
- #hootform input[type="text"]:invalid {
- background: transparent;
- }
- #hootform input[type="text"]:focus {
- border-bottom: 1px solid rgba(40,20,20,0.2);
- border-radius: 2px 2px 0 0;
- color: #211;
- }
- #hootform input[type="text"]:focus {
- border-bottom-color: rgba(127,127,127,0.2);
- }
- #hootform input[type="text"]:invalid {
- caret-color: #888;
- }
-
- /** MEDIA QUERY: DARK MODE */
- @media (prefers-color-scheme: dark) {
- .search_form input[type="text"]:focus {
- border-bottom-color: rgba(127,127,127,0.2);
- }
- .search_form input[type="text"]:invalid {
- caret-color: #888;
- }
- #hootstream .userLink {
- color: #def;
- }
- #hootevents .fileRow div {
- color: rgba(192,192,192,1.0);
- }
- #hootevents .fileRow:nth-child(odd) div::after {
- background-color: #88b;
- }
- #hootevents .fileRow:nth-child(even) div::after {
- background-color: #448;
- }
- #hootevents .fileRow:nth-child(even):hover div::after,
- #hootevents .fileRow:nth-child(odd):hover div::after {
- background-color: #bbf;
- }
- #hootevents .hoot .threadLink:hover,
- .desktop a:hover {
- color: #2bf;
- }
- }
-
- /** MEDIA QUERY: PHONE */
- @media (max-width: 700px) {
- html, body {
- overflow-x: hidden;
- }
- #hootform {
- margin-bottom: 0rem;
- }
- #hootstream {
- padding-right: 0;
- margin-top: 1rem;
- }
- #hootevents .userLink {
- display: none;
- }
- #hootevents .streamLastlog .userLink {
- display: block;
- width: auto;
- margin-left: 2rem;
- }
- #hootevents .avatarLink {
- margin-left: 0.25rem;
- }
- #hootevents .fileList {
- margin-top: 0.5rem;
- margin-bottom: 1rem;
- margin-left: 1.75rem;
- width: calc(100% - 2rem);
- }
- #hootevents code, #hootevents pre {
- max-width: calc(100vw - 5.75rem);
- margin-right: 0;
- padding: 0.25rem 0.25rem 0.75rem 0.25rem;
- }
- }
-</style> \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 17:09:33 +0000