diff --git a/src/webpage/message.ts b/src/webpage/message.ts index d352def..867d276 100644 --- a/src/webpage/message.ts +++ b/src/webpage/message.ts @@ -307,9 +307,15 @@ class Message extends SnowFlake { this.channel.idToPrev.delete(next); } if (prev) { - const prevmessage = this.channel.messages.get(prev); - if (prevmessage) { - prevmessage.generateMessage(); + const prevMessage = this.channel.messages.get(prev); + if (prevMessage) { + prevMessage.generateMessage(); + } + } + if (next) { + const nextMessage = this.channel.messages.get(next); + if (nextMessage) { + nextMessage.generateMessage(); } } if (this.channel.lastmessage === this || this.channel.lastmessageid === this.id) { @@ -368,6 +374,28 @@ class Message extends SnowFlake { const build = document.createElement("div"); build.classList.add("flexltr", "message"); + if (premessage && !dupe) { + const thisTime = new Date(this.getUnixTime()); + const prevTime = new Date(premessage.getUnixTime()); + const datelineNeeded = + thisTime.getDay() !== prevTime.getDay() || + thisTime.getMonth() !== prevTime.getMonth() || + thisTime.getFullYear() !== prevTime.getFullYear(); + if (datelineNeeded) { + const dateline = document.createElement("div"); + dateline.classList.add("flexltr", "dateline"); + dateline.append(document.createElement("hr")); + const span = document.createElement("span"); + span.innerText = Intl.DateTimeFormat(I18n.lang, { + year: "numeric", + month: "long", + day: "2-digit", + }).format(thisTime); + dateline.append(span); + dateline.append(document.createElement("hr")); + div.append(dateline); + } + } div.classList.remove("zeroheight"); if (this.author.relationshipType === 2) { if (ignoredblock) { diff --git a/src/webpage/style.css b/src/webpage/style.css index 2a3de36..05a1b03 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -118,6 +118,17 @@ video { max-height: 50svh; max-width: 100%; } +.dateline { + hr { + width: 100%; + height: 1px; + margin: 0.05in; + } + span { + flex-shrink: 0; + } + align-items: center; +} iframe { /* max-height: 50svh; */ max-width: 100%; @@ -1388,8 +1399,8 @@ img.embedimg { } img.authorEmbedImg { max-width: 20px; - padding-right:4px; - border-radius:1in; + padding-right: 4px; + border-radius: 1in; } img.bigembedimg { height: auto !important; @@ -1590,15 +1601,15 @@ img.bigembedimg { width: 100%; object-fit: cover; } -.badge{ - display:inline-flex; - padding:2px; - border:solid 2px var(--black); - border-radius:8px; - img{ +.badge { + display: inline-flex; + padding: 2px; + border: solid 2px var(--black); + border-radius: 8px; + img { object-fit: contain; - width:18px; - height:18px; + width: 18px; + height: 18px; } } .infosection { @@ -1626,7 +1637,7 @@ img.bigembedimg { } .tag { margin: 4px 0; - font-size: 0.9em !important;!i;!; + font-size: 0.9em !important; color: var(--secondary-text); } .pronouns {