From bc8e849ad0033f8385c0ff7052a3c44cf1e729b5 Mon Sep 17 00:00:00 2001 From: julian laplace Date: Sun, 30 Oct 2022 21:03:16 +0100 Subject: expand/post icons --- public/assets/css/hootstream.css | 72 ++++++++++++++++++------- public/assets/js/lib/views/stream/hootstream.js | 20 ++++--- public/assets/js/util/icons.js | 6 +++ views/hootstream/filters.ejs | 39 +++----------- views/hootstream/templates.ejs | 6 +-- views/partials/scripts.ejs | 1 + 6 files changed, 82 insertions(+), 62 deletions(-) create mode 100644 public/assets/js/util/icons.js 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 }) => - "
·
" + - `
${label}
` + ({ action, icon, label }) => + `
${ICONS[icon]}
` ) .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: '', + play: '', + expand: + '', +}; 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 @@
-
- home -
-
- · -
-
- index -
-
- · -
-
- keywords -
-
- · -
-
- mail -
+ home + index + keywords + mail
-
- · -
-
- -
+
-
- · -
-
- -
+
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 @@
{{hoot}} -
- {{actions}} -
{{keyword_link}}
{{comment_count}}
{{file_count}}
+
+ {{actions}} +
{{age}}
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 @@ + -- cgit v1.2.3-70-g09d2