diff --git a/public/js/snippetedit.js b/public/js/snippetedit.js index 8716b528..d866b07e 100644 --- a/public/js/snippetedit.js +++ b/public/js/snippetedit.js @@ -375,7 +375,7 @@ function editTimelineSnippet(timelineItemEl, stickyProjectId) { let ownerAvatar = timelineItemEl.querySelector(".avatar")?.src; let creationDate = new Date(timelineItemEl.querySelector("time").dateTime); let rawDesc = timelineItemEl.querySelector(".rawdesc").textContent; - let attachment = timelineItemEl.querySelector(".timeline-content-box")?.children?.[0]; + let attachment = timelineItemEl.querySelector(".timeline-media")?.children?.[0]; let projectIds = []; let projectEls = timelineItemEl.querySelectorAll(".projects > a"); for (let i = 0; i < projectEls.length; ++i) { diff --git a/public/style.css b/public/style.css index b0393d95..cb30d6d0 100644 --- a/public/style.css +++ b/public/style.css @@ -7214,6 +7214,7 @@ code { --card-background: #494949; --card-background-hover: #333; --card-background-transparent: #24242400; + --timeline-media-background: #24242466; --bg-1: #1f1f1f; --bg-2: #2f2f2f; --bg-3: #494949; @@ -8909,16 +8910,28 @@ code .ss, --fade-color: var(--card-background); color: var(--main-color); } -.timeline-item .timeline-content-box.timeline-item-bg { - background-color: var(--timeline-content-background); +.timeline-item .timeline-media { + background-color: var(--timeline-media-background); + max-height: 60vh; } -.timeline-item .timeline-content-box > * { +.timeline-item .timeline-media.timeline-embed { + height: 0; + position: relative; + padding-bottom: 56.25%; +} +.timeline-item .timeline-media.timeline-embed > iframe { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} +.timeline-item .timeline-media > * { display: block; max-width: 100%; - max-height: 80vh; -} -.timeline-item .avatar { - width: 2.5rem; } .timeline-modal .container { max-height: 100vh; diff --git a/public/themes/dark/theme.css b/public/themes/dark/theme.css deleted file mode 100644 index bc33ccc9..00000000 --- a/public/themes/dark/theme.css +++ /dev/null @@ -1,309 +0,0 @@ -/* -Inserts a CSS expression with one or more custom variables. -You can provide an arbitrary number of strings in the second -argument, separated by spaces. Any strings corresponding to -variable names will be replaced by the correct values, while -other strings are left untouched. - -Example usage: - -@include usevar(border-color, dimmer-color); -@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); - -For clarity and to avoid syntax issues, you are encouraged to -use unquoted strings for variables and quoted strings for -everything else. - -For convenience in common cases, if only a single argument -is provided and it does not match an existing variable, this -will throw an error. -*/ -pre, code, .codeblock { - /* Comment */ - /* Error */ - /* Keyword */ - /* Literal */ - /* Name */ - /* Operator */ - /* Punctuation */ - /* Comment.Multiline */ - /* Comment.Preproc */ - /* Comment.Single */ - /* Comment.Special */ - /* Generic.Emph */ - /* Generic.Strong */ - /* Keyword.Constant */ - /* Keyword.Declaration */ - /* Keyword.Namespace */ - /* Keyword.Pseudo */ - /* Keyword.Reserved */ - /* Keyword.Type */ - /* Literal.Date */ - /* Literal.Number */ - /* Literal.String */ - /* Name.Attribute */ - /* Name.Builtin */ - /* Name.Class */ - /* Name.Constant */ - /* Name.Decorator */ - /* Name.Entity */ - /* Name.Exception */ - /* Name.Function */ - /* Name.Label */ - /* Name.Namespace */ - /* Name.Other */ - /* Name.Property */ - /* Name.Tag */ - /* Name.Variable */ - /* Operator.Word */ - /* Text.Whitespace */ - /* Literal.Number.Float */ - /* Literal.Number.Hex */ - /* Literal.Number.Integer */ - /* Literal.Number.Oct */ - /* Literal.String.Backtick */ - /* Literal.String.Char */ - /* Literal.String.Doc */ - /* Literal.String.Double */ - /* Literal.String.Escape */ - /* Literal.String.Heredoc */ - /* Literal.String.Interpol */ - /* Literal.String.Other */ - /* Literal.String.Regex */ - /* Literal.String.Single */ - /* Literal.String.Symbol */ - /* Name.Builtin.Pseudo */ - /* Name.Variable.Class */ - /* Name.Variable.Global */ - /* Name.Variable.Instance */ - /* Literal.Number.Integer.Long */ - /* Generic Heading & Diff Header */ - /* Generic.Subheading & Diff Unified/Comment? */ - /* Generic.Deleted & Diff Deleted */ - /* Generic.Inserted & Diff Inserted */ } - pre .hll, code .hll, .codeblock .hll { - background-color: #49483e; } - pre .c, code .c, .codeblock .c { - color: #75715e; } - pre .err, code .err, .codeblock .err { - color: #ff0000; } - pre .k, code .k, .codeblock .k { - color: #66d9ef; } - pre .l, code .l, .codeblock .l { - color: #ae81ff; } - pre .n, code .n, .codeblock .n { - color: #f8f8f2; } - pre .o, code .o, .codeblock .o { - color: #f92672; } - pre .p, code .p, .codeblock .p { - color: #f8f8f2; } - pre .cm, code .cm, .codeblock .cm { - color: #75715e; } - pre .cp, code .cp, .codeblock .cp { - color: #75715e; } - pre .c1, code .c1, .codeblock .c1 { - color: #75715e; } - pre .cs, code .cs, .codeblock .cs { - color: #75715e; } - pre .ge, code .ge, .codeblock .ge { - font-style: italic; } - pre .gs, code .gs, .codeblock .gs { - font-weight: bold; } - pre .kc, code .kc, .codeblock .kc { - color: #66d9ef; } - pre .kd, code .kd, .codeblock .kd { - color: #66d9ef; } - pre .kn, code .kn, .codeblock .kn { - color: #f92672; } - pre .kp, code .kp, .codeblock .kp { - color: #66d9ef; } - pre .kr, code .kr, .codeblock .kr { - color: #66d9ef; } - pre .kt, code .kt, .codeblock .kt { - color: #66d9ef; } - pre .ld, code .ld, .codeblock .ld { - color: #e6db74; } - pre .m, code .m, .codeblock .m { - color: #ae81ff; } - pre .s, code .s, .codeblock .s { - color: #e6db74; } - pre .na, code .na, .codeblock .na { - color: #a6e22e; } - pre .nb, code .nb, .codeblock .nb { - color: #f8f8f2; } - pre .nc, code .nc, .codeblock .nc { - color: #a6e22e; } - pre .no, code .no, .codeblock .no { - color: #66d9ef; } - pre .nd, code .nd, .codeblock .nd { - color: #a6e22e; } - pre .ni, code .ni, .codeblock .ni { - color: #f8f8f2; } - pre .ne, code .ne, .codeblock .ne { - color: #a6e22e; } - pre .nf, code .nf, .codeblock .nf { - color: #a6e22e; } - pre .nl, code .nl, .codeblock .nl { - color: #f8f8f2; } - pre .nn, code .nn, .codeblock .nn { - color: #f8f8f2; } - pre .nx, code .nx, .codeblock .nx { - color: #a6e22e; } - pre .py, code .py, .codeblock .py { - color: #f8f8f2; } - pre .nt, code .nt, .codeblock .nt { - color: #f92672; } - pre .nv, code .nv, .codeblock .nv { - color: #f8f8f2; } - pre .ow, code .ow, .codeblock .ow { - color: #f92672; } - pre .w, code .w, .codeblock .w { - color: #f8f8f2; } - pre .mf, code .mf, .codeblock .mf { - color: #ae81ff; } - pre .mh, code .mh, .codeblock .mh { - color: #ae81ff; } - pre .mi, code .mi, .codeblock .mi { - color: #ae81ff; } - pre .mo, code .mo, .codeblock .mo { - color: #ae81ff; } - pre .sb, code .sb, .codeblock .sb { - color: #e6db74; } - pre .sc, code .sc, .codeblock .sc { - color: #e6db74; } - pre .sd, code .sd, .codeblock .sd { - color: #e6db74; } - pre .s2, code .s2, .codeblock .s2 { - color: #e6db74; } - pre .se, code .se, .codeblock .se { - color: #ae81ff; } - pre .sh, code .sh, .codeblock .sh { - color: #e6db74; } - pre .si, code .si, .codeblock .si { - color: #e6db74; } - pre .sx, code .sx, .codeblock .sx { - color: #e6db74; } - pre .sr, code .sr, .codeblock .sr { - color: #e6db74; } - pre .s1, code .s1, .codeblock .s1 { - color: #e6db74; } - pre .ss, code .ss, .codeblock .ss { - color: #e6db74; } - pre .bp, code .bp, .codeblock .bp { - color: #f8f8f2; } - pre .vc, code .vc, .codeblock .vc { - color: #f8f8f2; } - pre .vg, code .vg, .codeblock .vg { - color: #f8f8f2; } - pre .vi, code .vi, .codeblock .vi { - color: #f8f8f2; } - pre .il, code .il, .codeblock .il { - color: #ae81ff; } - pre .gu, code .gu, .codeblock .gu { - color: #75715e; } - pre .gd, code .gd, .codeblock .gd { - color: #f92672; } - pre .gi, code .gi, .codeblock .gi { - color: #a6e22e; } - -.light { - background-color: #fff; - color: #000; } - -:root { - --fg-font-color: #eee; - --theme-color: #666; - --theme-color-dim: #444; - --theme-color-dimmer: #383838; - --theme-color-dimmest: #333; - --theme-color-dark: #666; - --theme-color-light: #666; - --link-color: #aaa; - --link-border-color: #aaa; - --hr-color: #aaa; - --main-background-color: #202020; - --main-color: #eee; - --dim-color: #bbb; - --dimmer-color: #999; - --dimmest-color: #777; - --menu-bottom-border-color: #444; - --login-popup-background: #181818; - --content-background: #202020; - --content-background-transparent: rgba(32, 32, 32, 0); - --dim-background: #252525; - --dim-background-transparent: rgba(37, 37, 37, 0); - --text-background: #181818; - --spoiler-border: #777; - --background-even-background: #242424; - --project-card-border-color: #333; - --project-user-suggestions-background: #222; - --project-user-suggestions-border-color: #444; - --notice-text-color: #eee; - --notice-unapproved-color: #7a2020; - --notice-hidden-color: #494949; - --notice-hiatus-color: #876327; - --notice-dead-color: #7a2020; - --notice-lts-color: #2a681d; - --notice-lts-reqd-color: #876327; - --notice-success-color: #2a681d; - --notice-warn-color: #876327; - --notice-failure-color: #7a2020; - --optionbar-border-color: #333; - --tab-background: #181818; - --tab-border-color: #3f3f3f; - --tab-button-background: #303030; - --tab-button-background-hover: #383838; - --tab-button-background-current: #181818; - --form-check-background: #252527; - --form-check-border-color: #666; - --form-check-border-color-hover: #084068; - --form-text-background: #181818; - --form-text-background-active: #252527; - --form-text-border-color: #444; - --form-text-border-color-active: #084068; - --form-button-color: #999; - --form-button-color-active: #4c9ed9; - --form-button-background: #383838; - --form-button-background-active: #303840; - --form-button-border-color: transparent; - --form-button-inline-border-color: transparent; - --form-error-color: #c61d24; - --landing-search-background: #282828; - --landing-search-background-hover: #181818; - --editor-toolbar-background: #282828; - --editor-toolbar-border-color: #333; - --editor-toolbar-button-background: #282828; - --editor-toolbar-button-background-hover: #333; - --editor-toolbar-button-border-color: #333; - --post-blockquote-border-color: #555; - --forum-even-background: #242424; - --forum-thread-read-color: #777; - --forum-thread-read-link-color: #999; - --forum-post-author-color: #999; - --forum-diff-source-background: #181818; - --forum-diff-source-border-color: #444; - --forum-diff-replace-background: #18283a; - --forum-diff-replace-border-color: #223d5b; - --forum-diff-delete-background: #3a1818; - --forum-diff-delete-border-color: #6b1e1c; - --forum-diff-insert-background: #233a18; - --forum-diff-insert-border-color: #30591b; - --card-background: #282828; - --card-background-hover: #333; - --timeline-content-background: rgba(255, 255, 255, 0.06); - --irc-border-color: #333; - --irc-tab-current-shadow: 0px 0px 5px #000 inset; - --irc-tab-close-button-color: #bbb; - --irc-tab-close-button-background: #444; - --irc-nick-border-color: #444; - --irc-users-color: #aaa; - --irc-users-background: #181818; - --irc-users-border-color: transparent; - --irc-users-popout-background: #181818; - --irc-users-popout-border-color-left: #444; - --irc-users-popout-border-color-right: #333; - --code-line-number-color: #444; - --library-star-btn-background: #252525; - --library-star-btn-border-color: #bbb; - --library-star-btn-a-border-color: #999; - --library-star-btn-a-hover-background: #333; } diff --git a/public/themes/light/theme.css b/public/themes/light/theme.css deleted file mode 100644 index 00ec130e..00000000 --- a/public/themes/light/theme.css +++ /dev/null @@ -1,327 +0,0 @@ -/* -Inserts a CSS expression with one or more custom variables. -You can provide an arbitrary number of strings in the second -argument, separated by spaces. Any strings corresponding to -variable names will be replaced by the correct values, while -other strings are left untouched. - -Example usage: - -@include usevar(border-color, dimmer-color); -@include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")"); - -For clarity and to avoid syntax issues, you are encouraged to -use unquoted strings for variables and quoted strings for -everything else. - -For convenience in common cases, if only a single argument -is provided and it does not match an existing variable, this -will throw an error. -*/ -pre, code, .codeblock { - /* Comment */ - /* Error */ - /* Keyword */ - /* Operator */ - /* Comment.Multiline */ - /* Comment.Preproc */ - /* Comment.Single */ - /* Comment.Special */ - /* Generic.Deleted */ - /* Generic.Emph */ - /* Generic.Error */ - /* Generic.Heading */ - /* Generic.Inserted */ - /* Generic.Output */ - /* Generic.Prompt */ - /* Generic.Strong */ - /* Generic.Subheading */ - /* Generic.Traceback */ - /* Keyword.Constant */ - /* Keyword.Declaration */ - /* Keyword.Namespace */ - /* Keyword.Pseudo */ - /* Keyword.Reserved */ - /* Keyword.Type */ - /* Literal.Number */ - /* Literal.String */ - /* Name.Attribute */ - /* Name.Builtin */ - /* Name.Class */ - /* Name.Constant */ - /* Name.Decorator */ - /* Name.Entity */ - /* Name.Exception */ - /* Name.Function */ - /* Name.Label */ - /* Name.Namespace */ - /* Name.Tag */ - /* Name.Variable */ - /* Operator.Word */ - /* Text.Whitespace */ - /* Literal.Number.Float */ - /* Literal.Number.Hex */ - /* Literal.Number.Integer */ - /* Literal.Number.Oct */ - /* Literal.String.Backtick */ - /* Literal.String.Char */ - /* Literal.String.Doc */ - /* Literal.String.Double */ - /* Literal.String.Escape */ - /* Literal.String.Heredoc */ - /* Literal.String.Interpol */ - /* Literal.String.Other */ - /* Literal.String.Regex */ - /* Literal.String.Single */ - /* Literal.String.Symbol */ - /* Name.Builtin.Pseudo */ - /* Name.Variable.Class */ - /* Name.Variable.Global */ - /* Name.Variable.Instance */ - /* Literal.Number.Integer.Long */ } - pre .hll, code .hll, .codeblock .hll { - background-color: #ffffcc; } - pre .c, code .c, .codeblock .c { - color: #60a0b0; - font-style: italic; } - pre .err, code .err, .codeblock .err { - color: #FF0000; } - pre .k, code .k, .codeblock .k { - color: #007020; - font-weight: bold; } - pre .o, code .o, .codeblock .o { - color: #666666; } - pre .cm, code .cm, .codeblock .cm { - color: #60a0b0; - font-style: italic; } - pre .cp, code .cp, .codeblock .cp { - color: #007020; } - pre .c1, code .c1, .codeblock .c1 { - color: #60a0b0; - font-style: italic; } - pre .cs, code .cs, .codeblock .cs { - color: #60a0b0; - background-color: #fff0f0; } - pre .gd, code .gd, .codeblock .gd { - color: #A00000; } - pre .ge, code .ge, .codeblock .ge { - font-style: italic; } - pre .gr, code .gr, .codeblock .gr { - color: #FF0000; } - pre .gh, code .gh, .codeblock .gh { - color: #000080; - font-weight: bold; } - pre .gi, code .gi, .codeblock .gi { - color: #00A000; } - pre .go, code .go, .codeblock .go { - color: #808080; } - pre .gp, code .gp, .codeblock .gp { - color: #c65d09; - font-weight: bold; } - pre .gs, code .gs, .codeblock .gs { - font-weight: bold; } - pre .gu, code .gu, .codeblock .gu { - color: #800080; - font-weight: bold; } - pre .gt, code .gt, .codeblock .gt { - color: #0040D0; } - pre .kc, code .kc, .codeblock .kc { - color: #007020; - font-weight: bold; } - pre .kd, code .kd, .codeblock .kd { - color: #007020; - font-weight: bold; } - pre .kn, code .kn, .codeblock .kn { - color: #007020; - font-weight: bold; } - pre .kp, code .kp, .codeblock .kp { - color: #007020; } - pre .kr, code .kr, .codeblock .kr { - color: #007020; - font-weight: bold; } - pre .kt, code .kt, .codeblock .kt { - color: #902000; } - pre .m, code .m, .codeblock .m { - color: #40a070; } - pre .s, code .s, .codeblock .s { - color: #4070a0; } - pre .na, code .na, .codeblock .na { - color: #4070a0; } - pre .nb, code .nb, .codeblock .nb { - color: #007020; } - pre .nc, code .nc, .codeblock .nc { - color: #0e84b5; - font-weight: bold; } - pre .no, code .no, .codeblock .no { - color: #60add5; } - pre .nd, code .nd, .codeblock .nd { - color: #555555; - font-weight: bold; } - pre .ni, code .ni, .codeblock .ni { - color: #d55537; - font-weight: bold; } - pre .ne, code .ne, .codeblock .ne { - color: #007020; } - pre .nf, code .nf, .codeblock .nf { - color: #06287e; } - pre .nl, code .nl, .codeblock .nl { - color: #002070; - font-weight: bold; } - pre .nn, code .nn, .codeblock .nn { - color: #0e84b5; - font-weight: bold; } - pre .nt, code .nt, .codeblock .nt { - color: #062873; - font-weight: bold; } - pre .nv, code .nv, .codeblock .nv { - color: #bb60d5; } - pre .ow, code .ow, .codeblock .ow { - color: #007020; - font-weight: bold; } - pre .w, code .w, .codeblock .w { - color: #bbbbbb; } - pre .mf, code .mf, .codeblock .mf { - color: #40a070; } - pre .mh, code .mh, .codeblock .mh { - color: #40a070; } - pre .mi, code .mi, .codeblock .mi { - color: #40a070; } - pre .mo, code .mo, .codeblock .mo { - color: #40a070; } - pre .sb, code .sb, .codeblock .sb { - color: #4070a0; } - pre .sc, code .sc, .codeblock .sc { - color: #4070a0; } - pre .sd, code .sd, .codeblock .sd { - color: #4070a0; - font-style: italic; } - pre .s2, code .s2, .codeblock .s2 { - color: #4070a0; } - pre .se, code .se, .codeblock .se { - color: #4070a0; - font-weight: bold; } - pre .sh, code .sh, .codeblock .sh { - color: #4070a0; } - pre .si, code .si, .codeblock .si { - color: #70a0d0; - font-style: italic; } - pre .sx, code .sx, .codeblock .sx { - color: #c65d09; } - pre .sr, code .sr, .codeblock .sr { - color: #235388; } - pre .s1, code .s1, .codeblock .s1 { - color: #4070a0; } - pre .ss, code .ss, .codeblock .ss { - color: #517918; } - pre .bp, code .bp, .codeblock .bp { - color: #007020; } - pre .vc, code .vc, .codeblock .vc { - color: #bb60d5; } - pre .vg, code .vg, .codeblock .vg { - color: #bb60d5; } - pre .vi, code .vi, .codeblock .vi { - color: #bb60d5; } - pre .il, code .il, .codeblock .il { - color: #40a070; } - -.dark { - background-color: #222; - color: #bbb; } - -:root { - --fg-font-color: black; - --theme-color: #666; - --theme-color-dim: #aaa; - --theme-color-dimmer: #bbb; - --theme-color-dimmest: #ccc; - --theme-color-dark: #666; - --theme-color-light: #666; - --link-color: #666; - --link-border-color: #666; - --hr-color: #444; - --main-background-color: #fff; - --main-color: black; - --dim-color: #333; - --dimmer-color: #999; - --dimmest-color: #bbb; - --menu-bottom-border-color: black; - --login-popup-background: #fbfbfb; - --content-background: #f8f8f8; - --content-background-transparent: rgba(248, 248, 248, 0); - --dim-background: #f0f0f0; - --dim-background-transparent: rgba(240, 240, 240, 0); - --text-background: #f9f9f9; - --spoiler-border: #aaa; - --background-even-background: #f8f8f8; - --project-card-border-color: #aaa; - --project-user-suggestions-background: #fff; - --project-user-suggestions-border-color: #ddd; - --notice-text-color: #fff; - --notice-unapproved-color: #b42222; - --notice-hidden-color: #b6b6b6; - --notice-hiatus-color: #aa7d30; - --notice-dead-color: #b42222; - --notice-lts-color: #43a52f; - --notice-lts-reqd-color: #aa7d30; - --notice-success-color: #43a52f; - --notice-warn-color: #aa7d30; - --notice-failure-color: #b42222; - --optionbar-border-color: #ccc; - --tab-background: #fff; - --tab-border-color: #d8d8d8; - --tab-button-background: #dfdfdf; - --tab-button-background-hover: #efefef; - --tab-button-background-current: #fff; - --form-check-background: #fafafc; - --form-check-border-color: #999; - --form-check-border-color-hover: #4c9ed9; - --form-text-background: #fff; - --form-text-background-active: #fafafc; - --form-text-border-color: #999; - --form-text-border-color-active: #4c9ed9; - --form-button-color: black; - --form-button-color-active: #4c9ed9; - --form-button-background: #fff; - --form-button-background-active: #f2f2f2; - --form-button-border-color: #ccc; - --form-button-inline-border-color: #999; - --form-error-color: #c61d24; - --landing-search-background: #f8f8f8; - --landing-search-background-hover: #fefeff; - --editor-toolbar-background: #fff; - --editor-toolbar-border-color: transparent; - --editor-toolbar-button-background: transparent; - --editor-toolbar-button-background-hover: #ddd; - --editor-toolbar-button-border-color: #ccc; - --post-blockquote-border-color: #ddd; - --forum-even-background: #f0f0f0; - --forum-thread-read-color: #555; - --forum-thread-read-link-color: #888; - --forum-post-author-color: #333; - --forum-diff-source-background: #fff; - --forum-diff-source-border-color: #999; - --forum-diff-replace-background: #adcef4; - --forum-diff-replace-border-color: #4787d1; - --forum-diff-delete-background: #e57979; - --forum-diff-delete-border-color: #c12626; - --forum-diff-insert-background: #96e579; - --forum-diff-insert-border-color: #5baa3f; - --card-background: #e8e8e8; - --card-background-hover: #f0f0f0; - --timeline-content-background: rgba(0, 0, 0, 0.2); - --irc-border-color: #ddd; - --irc-tab-current-shadow: 0px 0px 5px #bbb inset; - --irc-tab-close-button-color: #fff; - --irc-tab-close-button-background: #aaa; - --irc-nick-border-color: #ccc; - --irc-users-color: black; - --irc-users-background: #fff; - --irc-users-border-color: #ccc; - --irc-users-popout-background: #fff; - --irc-users-popout-border-color-left: #bbb; - --irc-users-popout-border-color-right: #ccc; - --code-line-number-color: #777; - --library-star-btn-background: #fff; - --library-star-btn-border-color: #999; - --library-star-btn-a-border-color: #aaa; - --library-star-btn-a-hover-background: #fafafa; } diff --git a/src/rawdata/scss/timeline.css b/src/rawdata/scss/timeline.css index 821876e1..9959dca4 100644 --- a/src/rawdata/scss/timeline.css +++ b/src/rawdata/scss/timeline.css @@ -23,22 +23,34 @@ --fade-color: var(--card-background); color: var(--main-color); - .timeline-content-box { - &.timeline-item-bg { - background-color: var(--timeline-content-background); + .timeline-media { + background-color: var(--timeline-media-background); + max-height: 60vh; + + &.timeline-embed { + /* aspect-ratio aspect-ratio--16x9 */ + height: 0; + position: relative; + padding-bottom: 56.25%; + + > iframe { + /* aspect-ratio--object */ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } } >* { display: block; max-width: 100%; - max-height: 80vh; } } - - .avatar { - /* 40px */ - width: 2.5rem; - } } .timeline-modal { diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css index 5327bcec..965b877e 100644 --- a/src/rawdata/scss/vars.css +++ b/src/rawdata/scss/vars.css @@ -91,6 +91,8 @@ $breakpoint-large: screen and (min-width: 60em) --card-background-hover: #333; --card-background-transparent: #24242400; + --timeline-media-background: #24242466; + --bg-1: #1f1f1f; --bg-2: #2f2f2f; --bg-3: #494949; diff --git a/src/templates/mapping.go b/src/templates/mapping.go index c53fab39..01724c76 100644 --- a/src/templates/mapping.go +++ b/src/templates/mapping.go @@ -388,16 +388,17 @@ func TimelineItemsToJSON(items []TimelineItem) string { builder.WriteString(item.Url) builder.WriteString(`",`) + // TODO(redesign): This only serializes a single piece of media. var mediaType TimelineItemMediaType var assetUrl string var thumbnailUrl string var width, height int - if len(item.EmbedMedia) > 0 { - mediaType = item.EmbedMedia[0].Type - assetUrl = item.EmbedMedia[0].AssetUrl - thumbnailUrl = item.EmbedMedia[0].ThumbnailUrl - width = item.EmbedMedia[0].Width - height = item.EmbedMedia[0].Height + if len(item.Media) > 0 { + mediaType = item.Media[0].Type + assetUrl = item.Media[0].AssetUrl + thumbnailUrl = item.Media[0].ThumbnailUrl + width = item.Media[0].Width + height = item.Media[0].Height } builder.WriteString(`"media_type":`) diff --git a/src/templates/src/atom.xml b/src/templates/src/atom.xml index 1800ebd5..1a1fb8e1 100644 --- a/src/templates/src/atom.xml +++ b/src/templates/src/atom.xml @@ -59,7 +59,7 @@ {{ cleancontrolchars .Description }} ]]> - {{ range .EmbedMedia }} + {{ range .Media }}
{{ if eq .Type mediaimage }} diff --git a/src/templates/src/include/breadcrumbs.html b/src/templates/src/include/breadcrumbs.html index 837f3489..2b2de9f2 100644 --- a/src/templates/src/include/breadcrumbs.html +++ b/src/templates/src/include/breadcrumbs.html @@ -1,4 +1,4 @@ -
+
{{ range $i, $breadcrumb := . }} {{ if gt $i 0 }} ยป {{ end }} {{ $breadcrumb.Name }} diff --git a/src/templates/src/include/jam_2024_lj_feeditems.html b/src/templates/src/include/jam_2024_lj_feeditems.html index b9269a7b..452b3903 100644 --- a/src/templates/src/include/jam_2024_lj_feeditems.html +++ b/src/templates/src/include/jam_2024_lj_feeditems.html @@ -16,7 +16,7 @@
{{ trim .Description }}
- {{ range .EmbedMedia }} + {{ range .Media }}
{{ if eq .Type mediaimage }} diff --git a/src/templates/src/include/timeline_item.html b/src/templates/src/include/timeline_item.html index 431b761a..01668f30 100644 --- a/src/templates/src/include/timeline_item.html +++ b/src/templates/src/include/timeline_item.html @@ -1,43 +1,65 @@
{{/* top bar - avatar, info, date */}} +
{{ if .OwnerAvatarUrl }} - + {{ end }} - -
- {{ if .Breadcrumbs }} - {{ template "breadcrumbs.html" .Breadcrumbs }} - {{ end }} - {{ if .Title }} -
- {{ with .TypeTitle }}{{ . }}:{{ end }} - {{ .Title }} -
- {{ end }} -
- {{ .OwnerName }} - {{ if not .SmallInfo }} - — {{ timehtml (relativedate .Date) .Date }} + {{ if .ForumLayout }} +
+ {{ with .Breadcrumbs }} + {{ template "breadcrumbs.html" . }} {{ end }} + {{ if .Title }} +
+ {{ with .TypeTitle }}{{ . }}:{{ end }} + {{ .Title }} +
+ {{ end }} +
+ {{ .OwnerName }} + — {{ timehtml (absoluteshortdate .Date) .Date }} +
-
- {{ if .SmallInfo }} - {{ timehtml (relativedate .Date) .Date }} - {{ end }} - {{ if .Editable }} - ✎ -
{{ .RawDescription }}
+ {{ if .Editable }} + ✎ +
{{ .RawDescription }}
+ {{ end }} + {{ else }} +
+ {{ if .Breadcrumbs }} +
Use .ForumLayout if you want breadcrumbs :)
+ {{ end }} + {{ if .Title }} +
Use .ForumLayout if you want a title :)
+ {{ end }} + {{ .OwnerName }} + {{ timehtml (absoluteshortdate .Date) .Date }} +
+ {{ if len .Projects }} + {{ $p := index .Projects 0 }} +
+ {{ $p.Name }} + {{ if gt (len .Projects) 1 }} +
+{{ sub (len .Projects) 1 }} more
+ {{ end }} +
+ {{ if $p.Logo }} + + + + {{ end }} + {{ end }} {{ end }}
{{/* content */}} - {{ range .EmbedMedia }} -
+ {{ range .Media }} +
{{ if eq .Type mediaimage }} {{ else if eq .Type mediavideo }} @@ -72,14 +94,7 @@ {{ end }} {{ end }} - {{ with .Projects }} -
- {{ range $i, $proj := . }} - - -
{{ $proj.Name }}
- - {{ end }} -
+ {{ with .DiscordMessageUrl }} + View original message on Discord {{ end }}
diff --git a/src/templates/src/layouts/jam_2023_visibility_base.html b/src/templates/src/layouts/jam_2023_visibility_base.html index d742aab6..66fb0955 100644 --- a/src/templates/src/layouts/jam_2023_visibility_base.html +++ b/src/templates/src/layouts/jam_2023_visibility_base.html @@ -57,7 +57,7 @@ --theme-color-dimmer: {{ $themeDimmer }}; --theme-color-dimmest: {{ $themeDimmest }}; - --timeline-content-background: rgba(255, 255, 255, 0.1); + --timeline-media-background: rgba(255, 255, 255, 0.1); } body { diff --git a/src/templates/src/layouts/wheeljam_2022_base.html b/src/templates/src/layouts/wheeljam_2022_base.html index 42ca4beb..da765b66 100644 --- a/src/templates/src/layouts/wheeljam_2022_base.html +++ b/src/templates/src/layouts/wheeljam_2022_base.html @@ -57,7 +57,7 @@ --theme-color-dimmer: {{ $themeDimmer }}; --theme-color-dimmest: {{ $themeDimmest }}; - --timeline-content-background: rgba(255, 255, 255, 0.1); + --timeline-media-background: rgba(255, 255, 255, 0.1); } body { diff --git a/src/templates/src/layouts/wheeljam_2023_base.html b/src/templates/src/layouts/wheeljam_2023_base.html index 38274787..d630e579 100644 --- a/src/templates/src/layouts/wheeljam_2023_base.html +++ b/src/templates/src/layouts/wheeljam_2023_base.html @@ -58,7 +58,7 @@ --theme-color-dimmer: {{ $themeDimmer }}; --theme-color-dimmest: {{ $themeDimmest }}; - --timeline-content-background: rgba(255, 255, 255, 0.1); + --timeline-media-background: rgba(255, 255, 255, 0.1); } body { diff --git a/src/templates/src/style_test.html b/src/templates/src/style_test.html index c0ecdf4a..03afe47b 100644 --- a/src/templates/src/style_test.html +++ b/src/templates/src/style_test.html @@ -212,7 +212,7 @@ int main() {

Timeline items

-
+
{{ range .TestTimelineItems }} {{ template "timeline_item.html" . }} {{ end }} diff --git a/src/templates/types.go b/src/templates/types.go index 50c55c25..9d6cad70 100644 --- a/src/templates/types.go +++ b/src/templates/types.go @@ -337,10 +337,9 @@ type TimelineItem struct { Description template.HTML RawDescription string - EmbedMedia []TimelineItemMedia + Media []TimelineItemMedia - SmallInfo bool - AllowTitleWrap bool + ForumLayout bool TruncateDescription bool CanShowcase bool // whether this snippet can be shown in a showcase gallery Editable bool diff --git a/src/website/admin.go b/src/website/admin.go index b659a39f..8afb1d5f 100644 --- a/src/website/admin.go +++ b/src/website/admin.go @@ -188,7 +188,6 @@ func AdminApprovalQueue(c *RequestContext) ResponseData { } timelineItem := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, false) timelineItem.OwnerAvatarUrl = "" - timelineItem.SmallInfo = true userData.Timeline = append(userData.Timeline, timelineItem) } @@ -210,7 +209,6 @@ func AdminApprovalQueue(c *RequestContext) ResponseData { } timelineItem := PostToTimelineItem(hmndata.UrlContextForProject(&p.Project), lineageBuilder, &p.Post, &p.Thread, &p.Author) timelineItem.OwnerAvatarUrl = "" - timelineItem.SmallInfo = true timelineItem.Description = template.HTML(p.CurrentVersion.TextParsed) userData.Timeline = append(userData.Timeline, timelineItem) } diff --git a/src/website/debug.go b/src/website/debug.go index 7debee1e..49aad693 100644 --- a/src/website/debug.go +++ b/src/website/debug.go @@ -16,6 +16,7 @@ func StyleTest(c *RequestContext) ResponseData { TestTimelineItems: []templates.TimelineItem{ // Forum post { + ForumLayout: true, OwnerName: "Cool User", OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), Date: time.Now().Add(-5 * time.Second), @@ -28,45 +29,73 @@ func StyleTest(c *RequestContext) ResponseData { Title: "How can I a website?", }, // Blog post - // Snippet + // Snippet with image { - SmallInfo: true, OwnerName: "Cool User", OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), Date: time.Date(2022, 3, 20, 13, 32, 54, 0, time.UTC), Url: "test", DiscordMessageUrl: "test", - EmbedMedia: []templates.TimelineItemMedia{ + Media: []templates.TimelineItemMedia{ { Type: templates.TimelineItemMediaTypeImage, AssetUrl: "https://assets.media.handmade.network/32ff3e7e-1d9c-4740-a062-1f8bec2e44cf/unknown.png", }, }, + Projects: []templates.Project{ + {Name: "Cool Project", Logo: "https://assets.media.handmade.network/8c6a3b71-9e91-4bf6-80ef-bc8f3d21b30d/netsim.png"}, + }, + }, + // Snippet with tall image + { + OwnerName: "Cool User", + OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), + Date: time.Date(2022, 3, 20, 13, 32, 54, 0, time.UTC), + Description: "I got my LaGUI working on Android! ๐Ÿ˜„", + Url: "test", + DiscordMessageUrl: "https://discord.com/channels/239737791225790464/404399251276169217/1245228715407966208", + Media: []templates.TimelineItemMedia{ + { + Type: templates.TimelineItemMediaTypeImage, + AssetUrl: "https://assets.media.handmade.network/ea6f914a-ea00-4cbb-bbd7-586b82fdb484/Screenshot_20240529_120344_com.lagui.simplest.jpg", + }, + }, + }, + // Snippet with video + { + OwnerName: "Cool User", + OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), + Date: time.Date(2024, 1, 30, 3, 32, 54, 0, time.UTC), + Url: "test", + Description: "Using my newfound decoding knowledge I started working on a simple video editor. I also tried decoding 16 files at once, which didn't seem to bother my 3080 at all.", + DiscordMessageUrl: "https://discord.com/channels/239737791225790464/404399251276169217/1249562779619168266", + Media: []templates.TimelineItemMedia{ + { + Type: templates.TimelineItemMediaTypeVideo, + AssetUrl: "https://assets.media.handmade.network/b122c7be-dc6d-41fe-a5ed-033fe991927e/show16.mp4", + ThumbnailUrl: "https://assets.media.handmade.network/b122c7be-dc6d-41fe-a5ed-033fe991927e/b122c7be-dc6d-41fe-a5ed-033fe991927e_thumb.jpg", + }, + }, }, // Snippet with embed { - SmallInfo: true, OwnerName: "Cool User", OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), Date: time.Date(2021, 4, 3, 1, 44, 54, 0, time.UTC), Url: "test", DiscordMessageUrl: "test", - EmbedMedia: []templates.TimelineItemMedia{ + Media: []templates.TimelineItemMedia{ youtubeMediaItem("FN9hZcTB16g"), }, - Projects: []templates.Project{ - {Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")}, - }, }, // Snippet with two images & multiple projects { - SmallInfo: true, OwnerName: "Cool User", OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), Date: time.Now().Add(-2 * 24 * time.Hour), Url: "test", DiscordMessageUrl: "test", - EmbedMedia: []templates.TimelineItemMedia{ + Media: []templates.TimelineItemMedia{ { Type: templates.TimelineItemMediaTypeImage, AssetUrl: "https://assets.media.handmade.network/979d8850-f6b6-44b4-984e-93be82eb492b/PBR_WIP_20240620_01.png", @@ -77,19 +106,18 @@ func StyleTest(c *RequestContext) ResponseData { }, }, Projects: []templates.Project{ - {Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")}, + {Name: "Cool Project", Logo: "https://assets.media.handmade.network/8c6a3b71-9e91-4bf6-80ef-bc8f3d21b30d/netsim.png"}, {Name: "Uncool Project"}, }, }, // Snippet with a video and an image { - SmallInfo: true, OwnerName: "Cool User", OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"), Date: time.Now().Add(-2 * time.Hour), Url: "test", DiscordMessageUrl: "test", - EmbedMedia: []templates.TimelineItemMedia{ + Media: []templates.TimelineItemMedia{ { Type: templates.TimelineItemMediaTypeImage, AssetUrl: "https://assets.media.handmade.network/979d8850-f6b6-44b4-984e-93be82eb492b/PBR_WIP_20240620_01.png", @@ -100,8 +128,7 @@ func StyleTest(c *RequestContext) ResponseData { }, }, Projects: []templates.Project{ - {Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")}, - {Name: "Uncool Project"}, + {Name: "Project without logo"}, }, }, // Snippet with every type of embed at once diff --git a/src/website/jam.go b/src/website/jam.go index e3a35613..0d6f3988 100644 --- a/src/website/jam.go +++ b/src/website/jam.go @@ -271,7 +271,6 @@ func getLJ2024FeedData(c *RequestContext, maxTimelineItems int) (JamFeedDataLJ20 timelineItems = make([]templates.TimelineItem, 0, len(snippets)) for _, s := range snippets { timelineItem := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, false) - timelineItem.SmallInfo = true timelineItems = append(timelineItems, timelineItem) } } @@ -451,7 +450,6 @@ func JamFeed2023(c *RequestContext) ResponseData { timelineItems = make([]templates.TimelineItem, 0, len(snippets)) for _, s := range snippets { timelineItem := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, false) - timelineItem.SmallInfo = true timelineItems = append(timelineItems, timelineItem) } } @@ -619,7 +617,6 @@ func JamFeed2023_Visibility(c *RequestContext) ResponseData { timelineItems = make([]templates.TimelineItem, 0, len(snippets)) for _, s := range snippets { timelineItem := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, false) - timelineItem.SmallInfo = true timelineItems = append(timelineItems, timelineItem) } } @@ -832,7 +829,6 @@ func JamFeed2022(c *RequestContext) ResponseData { timelineItems = make([]templates.TimelineItem, 0, len(snippets)) for _, s := range snippets { timelineItem := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, false) - timelineItem.SmallInfo = true timelineItems = append(timelineItems, timelineItem) } } diff --git a/src/website/landing.go b/src/website/landing.go index 29c567cf..0ef94f55 100644 --- a/src/website/landing.go +++ b/src/website/landing.go @@ -78,7 +78,6 @@ func Index(c *RequestContext) ResponseData { item := PostToTimelineItem(hmndata.UrlContextForProject(&t.Project), lineageBuilder, &t.FirstPost, &t.Thread, t.FirstPostAuthor) item.Breadcrumbs = nil item.TypeTitle = "" - item.AllowTitleWrap = true item.Description = template.HTML(t.FirstPostCurrentVersion.TextParsed) item.TruncateDescription = true newsPostItem = &item diff --git a/src/website/snippet.go b/src/website/snippet.go index 5668781f..3d6d8458 100644 --- a/src/website/snippet.go +++ b/src/website/snippet.go @@ -58,7 +58,6 @@ func Snippet(c *RequestContext) ResponseData { canEdit := (c.CurrentUser != nil && (c.CurrentUser.IsStaff || c.CurrentUser.ID == s.Owner.ID)) snippet := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, canEdit) - snippet.SmallInfo = true opengraph := []templates.OpenGraphItem{ {Property: "og:site_name", Value: "Handmade Network"}, @@ -68,8 +67,8 @@ func Snippet(c *RequestContext) ResponseData { {Property: "og:description", Value: string(snippet.Description)}, } - if len(snippet.EmbedMedia) > 0 { - media := snippet.EmbedMedia[0] + if len(snippet.Media) > 0 { + media := snippet.Media[0] switch media.Type { case templates.TimelineItemMediaTypeImage: diff --git a/src/website/timeline_helper.go b/src/website/timeline_helper.go index e200061a..6686249c 100644 --- a/src/website/timeline_helper.go +++ b/src/website/timeline_helper.go @@ -148,7 +148,6 @@ func FetchTimeline(ctx context.Context, conn db.ConnOrTx, currentUser *models.Us s.Owner, false, ) - item.SmallInfo = true timelineItems = append(timelineItems, item) } @@ -300,6 +299,8 @@ func PostToTimelineItem( OwnerAvatarUrl: ownerTmpl.AvatarUrl, OwnerName: ownerTmpl.Name, OwnerUrl: ownerTmpl.ProfileUrl, + + ForumLayout: true, } if typeTitles, ok := TimelineTypeTitleMap[post.ThreadType]; ok { @@ -349,7 +350,7 @@ func TwitchStreamToTimelineItem( OwnerName: ownerName, OwnerUrl: ownerUrl, - SmallInfo: true, + ForumLayout: true, } return item @@ -382,26 +383,26 @@ func SnippetToTimelineItem( if asset != nil { if strings.HasPrefix(asset.MimeType, "image/") { - item.EmbedMedia = append(item.EmbedMedia, imageMediaItem(asset)) + item.Media = append(item.Media, imageMediaItem(asset)) } else if strings.HasPrefix(asset.MimeType, "video/") { - item.EmbedMedia = append(item.EmbedMedia, videoMediaItem(asset)) + item.Media = append(item.Media, videoMediaItem(asset)) } else if strings.HasPrefix(asset.MimeType, "audio/") { - item.EmbedMedia = append(item.EmbedMedia, audioMediaItem(asset)) + item.Media = append(item.Media, audioMediaItem(asset)) } else { - item.EmbedMedia = append(item.EmbedMedia, unknownMediaItem(asset)) + item.Media = append(item.Media, unknownMediaItem(asset)) } } if snippet.Url != nil { url := *snippet.Url if videoId := getYoutubeVideoID(url); videoId != "" { - item.EmbedMedia = append(item.EmbedMedia, youtubeMediaItem(videoId)) + item.Media = append(item.Media, youtubeMediaItem(videoId)) item.CanShowcase = false } } - if len(item.EmbedMedia) == 0 || - (len(item.EmbedMedia) > 0 && (item.EmbedMedia[0].Width == 0 || item.EmbedMedia[0].Height == 0)) { + if len(item.Media) == 0 || + (len(item.Media) > 0 && (item.Media[0].Width == 0 || item.Media[0].Height == 0)) { item.CanShowcase = false }