From 538b84086b085a052e4a9eb226f7f88c2ece87e8 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Wed, 27 Jan 2021 13:22:00 -0500 Subject: [PATCH] Timeline-style design for a topic's posts (#512) * feat: basic timeline-style styling for posts in a topic * fix: mobile-style for timeline-style styling * feat: slight white opaque ring around timeline items removed glowing OP ring * fix: playing nice with core's necro-post styling * fix: increase padding between posts by 20px * fix: restrict timeline styling to top-level only * fix: added back padding between posts on mobile * refactor: genericise necro-post into timeline-event class, fixed vertical alignment issues with timeline-badge icons * fix: use hourglass-half icon instead of clock-o * fix: adjust centering of text, dashed border on necro-post * feat: add topic event template * feat: add a little marker at the last post to signify end of timeline * fix: updated dashed border on necro-post * refactor: updated mobile styling of timeline effect * feat: styling changes for user obj in timeline events * feat: proper handling for no uid * fix: override generics introduced by core --- less/mixins.less | 102 ++++++++++++++++++++++++ less/modules/necro-post.less | 9 ++- less/topic.less | 18 +---- less/variables.less | 2 +- templates/partials/topic/event.tpl | 15 ++++ templates/partials/topic/necro-post.tpl | 4 +- 6 files changed, 131 insertions(+), 19 deletions(-) create mode 100644 templates/partials/topic/event.tpl diff --git a/less/mixins.less b/less/mixins.less index cdcb6f1..cbe0c90 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -47,3 +47,105 @@ text-overflow: ellipsis; white-space: nowrap; } + +.timeline { + .posts > [component="post"], .timeline-event { + position: relative; // for absolutely positioned pseudo-element, below + border-left: 2px solid lighten(@brand-primary, 30%); + margin-left: 2.5rem; + + &:not(:last-child) { + padding-bottom: @post-padding; + } + &:not(:first-child) { + padding-top: @post-padding; + } + + > div { + margin-left: -2.5rem; + } + + .avatar, .timeline-badge { + // Opaque ring + position: relative; + z-index: 1; + box-shadow: 0 0 0 .5rem @body-bg; + } + } + + @media (max-width: @screen-sm-max) { + .posts > [component="post"] { + border: 0; + padding: @post-padding 0; + + margin-left: initial; + > div { + margin-left: 1.5rem; + } + } + + .posts [component="post"]:last-child:after { + display: none; + } + + .timeline-event { + &:before, &+:not(.timeline-event):before { + content: ''; + width: 1rem; + position: absolute; + top: 0; + left: calc(-0.5rem - 1px); + border-bottom: 2px solid lighten(@brand-primary, 30%); + } + + &+:not(.timeline-event):before { + left: calc(2rem + 1px); + } + + &+.timeline-event:before { + display: none; + } + } + } + + .necro-post { + border-left-style: dashed; + } + + .posts [component="post"]:last-child:after { + content: ''; + width: 1rem; + position: absolute; + bottom: 0; + left: calc(-0.5rem - 1px); + border-bottom: 2px solid lighten(@brand-primary, 30%); + } + + .posts .timeline-event { + text-align: left; + justify-content: left; + font-size: 1em; + + .timeline-badge { + float: left; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + margin-left: -17px; + margin-right: 17px; + color: lighten(@brand-primary, 30%); + background-color: @body-bg; + border: 2px solid lighten(@brand-primary, 30%); + border-radius: 50%; + } + + .timeline-text { + line-height: 32px; + text-transform: initial; + color: rgba(127,127,127,.5); + } + } +} \ No newline at end of file diff --git a/less/modules/necro-post.less b/less/modules/necro-post.less index c064a1f..5739692 100644 --- a/less/modules/necro-post.less +++ b/less/modules/necro-post.less @@ -1,4 +1,9 @@ .topic .necro-post { - border-bottom: 1px solid @post-border-color; - padding-bottom: @post-padding; + text-align: center; + margin-bottom: 0; + font-size: 1.5em; + + .timeline-text { + margin-left: 32px; + } } \ No newline at end of file diff --git a/less/topic.less b/less/topic.less index c78c703..93d248d 100644 --- a/less/topic.less +++ b/less/topic.less @@ -116,6 +116,7 @@ right: 12px; font-size: 12px; top: 0px; + z-index: 1; @media (min-width: @screen-md-min) { top: 2px; @@ -411,6 +412,8 @@ .topic { + .timeline; + &.deleted { .opacity(0.3); @@ -422,16 +425,9 @@ .posts { list-style-type: none; padding: 0; - [component="post"][data-index="0"] { - border-bottom: 5px solid @post-border-color; - } + [component="post"] { position: relative; - border-bottom: 1px solid @post-border-color; - - padding-bottom: @post-padding; - margin-bottom: @post-padding; - .transition(0.75s ease-in-out border-color); .edit-icon { @@ -657,12 +653,6 @@ } [component="post"] { - &.topic-owner-post>.post-header .avatar { - -webkit-box-shadow: 0px 0px 4px 3px @brand-primary; - -moz-box-shadow: 0px 0px 4px 3px @brand-primary; - box-shadow: 0px 0px 4px 3px @brand-primary; - } - .avatar.avatar-sm2x { font-size: 2.875rem; } diff --git a/less/variables.less b/less/variables.less index 2e7a699..dc64652 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,6 +1,6 @@ //== Topic List // -//## Post objects found on the category, recent, popular, etc. pages +//## Post objects found on the category, recent, popular, etc. pages @post-padding: 20px; @post-border-color: @gray-lighter; diff --git a/templates/partials/topic/event.tpl b/templates/partials/topic/event.tpl new file mode 100644 index 0000000..44ac4dd --- /dev/null +++ b/templates/partials/topic/event.tpl @@ -0,0 +1,15 @@ +
  • +
    + +
    + {text}  + + {{{ if user }}} + {{{ if !./user.system }}}{buildAvatar(user, "xs", true)} {./user.username} {{{ end }}} + {{{ if ./user.system }}}[[global:system-user]] {{{ end }}} + {{{ else }}} + [[global:unknown-user]]  + {{{ end }}} + + +
    • \ No newline at end of file diff --git a/templates/partials/topic/necro-post.tpl b/templates/partials/topic/necro-post.tpl index d0e6a73..9eaba02 100644 --- a/templates/partials/topic/necro-post.tpl +++ b/templates/partials/topic/necro-post.tpl @@ -1,3 +1,3 @@ -
  • - {text} +
  • + {text}
    • \ No newline at end of file