diff options
| -rw-r--r-- | public/assets/css/hootstream.css | 72 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 20 | ||||
| -rw-r--r-- | public/assets/js/util/icons.js | 6 | ||||
| -rw-r--r-- | views/hootstream/filters.ejs | 39 | ||||
| -rw-r--r-- | views/hootstream/templates.ejs | 6 | ||||
| -rw-r--r-- | views/partials/scripts.ejs | 1 |
6 files changed, 82 insertions, 62 deletions
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css index eee0e9b..2acd5ce 100644 --- a/public/assets/css/hootstream.css +++ b/public/assets/css/hootstream.css @@ -41,36 +41,55 @@ justify-content: flex-start; align-items: center; } -#hootevents .threadTitle .text .actions { +#hootevents .threadTitle .actions { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; - transition: opacity 0.1s; - opacity: 0.8; user-select: none; } -#hootevents .threadTitle:hover .text .actions { +#hootevents .threadTitle:hover .actions { opacity: 1; } -#hootevents .threadTitle .text .actions div { +#hootevents .threadTitle .actions div { cursor: default; margin-left: 0.5rem; } -#hootevents .threadTitle .text .actions .action { +#hootevents .threadTitle .actions .action { + font-size: 0.75rem; cursor: pointer; - color: #48f; - opacity: 0.9; + color: #bef; transition: opacity 0.1s; + display: flex; + flex-direction: row; + flex-wrap: ; + align-items: flex-start; + justify-content: center; } -#hootevents .threadTitle .text .actions .action:hover { +#hootevents .threadTitle .actions .action:hover { text-decoration: underline; opacity: 1; } -#hootevents .threadTitle .text .actions .action[data-action="play"] { +#hootevents .threadTitle .actions .action[data-action="play"] { color: #8df; } +.icon:not(:root) { + overflow: hidden; +} +.icon { + pointer-events: none; + user-select: none; + width: 0.675em; + height: 0.675em; + display: inline-block; + fill: currentcolor; + flex-shrink: 0; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + font-size: 1.5rem; + margin: 0; +} + /** ImAgeS and other image lISTS!! */ #hootevents .imageList { padding-left: 7.5rem; @@ -192,8 +211,6 @@ #hootevents .hoot .threadLink { color: #6bf; font-size: 16px; - text-decoration: none; - border-bottom: 1px solid; } /** DiViDErZ */ @@ -221,17 +238,17 @@ #hootevents .thread:nth-child(odd) { background: linear-gradient( 90deg, - rgba(127, 127, 127, 0), - rgba(127, 127, 127, 0.05), - rgba(127, 127, 127, 0) + rgba(127, 127, 127, 0.01), + rgba(127, 127, 127, 0.08), + rgba(127, 127, 127, 0.01) ); } #hootevents .thread:nth-child(even) { background: linear-gradient( 90deg, - rgba(96, 96, 96, 0), - rgba(96, 96, 96, 0.05), - rgba(96, 96, 96, 0) + rgba(96, 96, 96, 0.01), + rgba(96, 96, 96, 0.1), + rgba(96, 96, 96, 0.01) ); } #hootevents .thread + .thread { @@ -465,20 +482,35 @@ color: #888; } #hootfilters .filter, -#hootfilters .sort label { +#hootfilters .sort label, +#hootfilters .links a { background: rgba(127, 127, 167, 0.4); border-radius: 0.5rem; padding: 0.375rem 0.5rem; opacity: 0.9; } +#hootevents .threadTitle .actions .action { + background: rgba(127, 127, 167, 0.4); + border-radius: 0.5rem; + padding: 0.125rem; + opacity: 0.9; +} +#hootfilters .links a { + margin: 0 0.125rem; + background: rgba(127, 127, 167, 0.2); +} #hootfilters .filterSet { opacity: 0.9; transition: opacity 0.1s; } #hootfilters .filter:hover, -#hootfilters .sort:hover label { +#hootfilters .sort:hover label, +#hootfilters .links a:hover { opacity: 1; } +#hootfilters .links a:hover { + background: rgba(127, 127, 167, 0.3); +} #hootfilters .filterSet:hover { opacity: 1; } diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js index 1ab9725..cd25719 100644 --- a/public/assets/js/lib/views/stream/hootstream.js +++ b/public/assets/js/lib/views/stream/hootstream.js @@ -388,6 +388,10 @@ var HootStream = View.extend({ thread = thread[0]; const isViewingKeyword = query.keyword === thread.keyword; const isViewingThread = query.thread === thread.id; + const isCompleteThread = !!( + thread.file_count === files.length + images.length && + thread.comment_count === comments.length + ); // console.log(thread, comments, files, images); const postedToday = +new Date() / 1000 - thread.lastmodified < 86400; const age_opacity = get_age_opacity(thread.lastmodified); @@ -412,15 +416,19 @@ var HootStream = View.extend({ const sortedFiles = this.sortFiles(files, thread.settings?.sort); const actions = [ - hasAudio && { action: "play", label: "Play music" }, - !isViewingThread && { action: "expand", label: "Expand" }, - { action: "post", label: "Post" }, + hasAudio && { action: "play", label: "play music", icon: "play" }, + !isViewingThread && + !isCompleteThread && { + action: "expand", + label: "expand", + icon: "expand", + }, + { action: "post", label: "post", icon: "edit" }, ] .filter((action) => !!action) .map( - ({ action, label }) => - "<div>·</div>" + - `<div class="action" data-action="${action}">${label}</div>` + ({ action, icon, label }) => + `<div class="action" data-action="${action}" title="${label}">${ICONS[icon]}</div>` ) .join(""); diff --git a/public/assets/js/util/icons.js b/public/assets/js/util/icons.js new file mode 100644 index 0000000..27afb90 --- /dev/null +++ b/public/assets/js/util/icons.js @@ -0,0 +1,6 @@ +const ICONS = { + edit: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>', + play: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>', + expand: + '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>', +}; diff --git a/views/hootstream/filters.ejs b/views/hootstream/filters.ejs index 7e29d95..6b80163 100644 --- a/views/hootstream/filters.ejs +++ b/views/hootstream/filters.ejs @@ -29,42 +29,15 @@ </div> <div class="links"> - <div> - <a href="/stream">home</a> - </div> - <div> - · - </div> - <div> - <a href="/index">index</a> - </div> - <div> - · - </div> - <div> - <a href="/keywords">keywords</a> - </div> - <div> - · - </div> - <div> - <a href="/mail">mail</a> - </div> + <a href="/stream">home</a> + <a href="/index">index</a> + <a href="/keywords">keywords</a> + <a href="/mail">mail</a> <div class="classicLink"> - <div> - · - </div> - <div> - <a href="/"></a> - </div> + <a href="/"></a> </div> <div class="editLink"> - <div> - · - </div> - <div> - <a href="/"></a> - </div> + <a href="/"></a> </div> </div> </div> diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs index bcb4670..6eea47f 100644 --- a/views/hootstream/templates.ejs +++ b/views/hootstream/templates.ejs @@ -21,13 +21,13 @@ </a> <div class="text" style="opacity: {{age_opacity}}"> {{hoot}} - <div class="actions"> - {{actions}} - </div> </div> <div class="keyword">{{keyword_link}}</div> <div class="commentCount" style="opacity: {{comment_opacity}}">{{comment_count}}</div> <div class="fileCount" style="opacity: {{file_opacity}}">{{file_count}}</div> + <div class="actions"> + {{actions}} + </div> <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div> </div> </script> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 0d69bd3..d26c146 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -16,6 +16,7 @@ <script src="/assets/js/util/format.js"></script> <script src="/assets/js/util/color.js"></script> +<script src="/assets/js/util/icons.js"></script> <script src="/assets/js/lib/views/login/login.js"></script> <script src="/assets/js/lib/views/login/signup.js"></script> |