diff options
Diffstat (limited to 'views/partials')
| -rw-r--r-- | views/partials/hootstream.ejs | 276 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 4 |
2 files changed, 280 insertions, 0 deletions
diff --git a/views/partials/hootstream.ejs b/views/partials/hootstream.ejs new file mode 100644 index 0000000..988df01 --- /dev/null +++ b/views/partials/hootstream.ejs @@ -0,0 +1,276 @@ +<div id="hootstream"> + <div id="hootform"> + <form autocomplete="off"> + <input type="text" name="comment" autocomplete="off" required> + <button class="hoot"><%= hoot_text %></button> + </form> + <div class="errors"></div> + </div> + <div id="hootevents"> + + <script class="hootTemplate" type="text/html"> + <div class="{{className}}"> + <a class="userLink" href="/profile/{{username}}"> + {{username}} + </a> + <a class="avatarLink" href="/profile/{{username}}"> + <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div> + </a> + <div class="text">{{hoot}}</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}}"> + {{username}} + </a> + <div class="text"> + {{hoot}} + </div> + <div class="age date">{{age}}</div> + </div> + </script> + + <script class="fileTemplate" type="text/html"> + <tr class="file"> + <td class="filename"> + <a href="{{link}}" title="{{id}}" class="file">{{filename}}</a> + </td> + <td class="size"> + {{size}} + </td> + <td class="age {{date_class}}"> + {{age}} + </td> + </tr> + </script> + + <script class="imageTemplate" type="text/html"> + <div class="image"><a href="{{link}}"><img src="{{src}}"></a></div> + </script> + + <script class="hootFirstPost" type="text/html"> + </script> + + <script class="hootImages" type="text/html"> + </script> + + </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.25rem; + min-width: 2.5rem; + } + #hootevents { + font-size: 14px; + } + #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.5rem 0px 0px; + } + #hootevents .userLink { + color: #def; + opacity: 0.8; + text-align: right; + width: 50px; + whitespace: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 0.5rem; + } + #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; + } + + #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; + } + #hootevents .hoot.streamLastlog .userLink { + margin-right: 0.375rem; + } + + /** Files */ + #hootevents table, + #hootevents tr, + #hootevents td { + padding: 0; + margin: 0; + } + #hootevents table { + width: calc(100% - 24px); + margin-left: 24px; + margin-bottom: 0.5rem; + } + #hootevents table td:first-of-type { + border-left: 1px solid; + padding-right: 0.5rem; + } + #hootevents table td.filename { + overflow: hidden; + text-overflow: ellipsis; + } + #hootevents table td { + border-top: 1px solid; + border-bottom: 1px solid; + padding: 0.5rem; + white-space: nowrap; + } + #hootevents table td:last-of-type { + border-right: 1px solid; + } + + #hootevents table { + margin-top: 1rem; + margin-bottom: 1rem; + } + #hootevents table td { + color: rgba(192,192,192,1.0); + border-color: rgba(96,96,96,0.5); + background: transparent; + } + #hootevents table td:first-of-type { + border-color: rgba(96,96,96,0.5); + } + #hootevents table td:last-of-type { + border-color: rgba(96,96,96,0.5); + } + #hootevents table td { height: 45px; position: relative; } + #hootevents table td::after { + content: ''; + width: 100%; + height: 100%; + background-color: #def; + opacity: 0.05; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + #hootevents table td.age { + align-items: center; + } + + /** HOOT FORM */ + + #hootform { + margin-bottom: 2rem; + } + #hootform input[type="text"] { + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 1px solid rgba(127,127,127,0.2); + 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 (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; + } + } +</style>
\ No newline at end of file diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 765bf61..6cfaf4d 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -32,6 +32,10 @@ <script src="/assets/js/lib/views/search/results.js"></script> +<script src="/assets/js/lib/views/stream/index.js"></script> +<script src="/assets/js/lib/views/stream/hootstream.js"></script> +<script src="/assets/js/lib/views/stream/hootform.js"></script> + <script src="/assets/js/lib/views/keywords/keywords.js"></script> <script src="/assets/js/lib/views/keywords/newkeyword.js"></script> |