<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forum Discussion</title>
<style>
/* --- Existing Styles --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #121212;
color: #ffffff;
line-height: 1.6;
max-width: 412px;
margin: 0 auto;
min-height: 915px; /* Important for scrolling demonstration */
}
/* Header bar */
.header {
position: fixed;
top: 0;
width: 100%;
max-width: 412px;
background-color: #3d3d3d;
padding: 10px 20px;
display: flex;
align-items: center;
z-index: 100;
}
.back-button {
color: #ffffff;
margin-right: 15px;
font-size: 18px;
}
.thread-info {
flex: 1;
color: #ff8c42;
font-size: 14px;
text-align: center; /* Center the text */
}
.menu-button {
color: #ffffff;
font-size: 18px;
}
/* Discussion header */
.discussion-header {
background-color: #b4318c;
padding: 15px 20px;
position: fixed;
top: 40px; /* Corrected top position */
width: 100%;
max-width: 412px;
z-index: 99;
margin: 0 auto;
transition: transform 0.3s ease-in-out; /* Smooth transition */
transform: translateY(0); /* Initially visible */
}
.discussion-header.hidden {
transform: translateY(-100%); /* Hide above the viewport */
}
.tags {
display: flex;
margin-bottom: 8px;
}
.tag {
background-color: #ffffff;
color: #b4318c;
padding: 3px 8px;
border-radius: 4px;
margin-right: 10px;
font-size: 12px;
font-weight: bold;
}
.discussion-title {
color: #ffffff;
font-size: 16px;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Actions bar */
.actions-bar {
background-color: #1e1e1e;
padding: 8px 20px;
display: flex;
/* Removed top and z-index (not needed) */
width: 100%;
max-width: 412px;
margin: 128px 0 0 0; /*Kept margin*/
}
.voters {
display: flex;
align-items: center;
}
.voter {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: -8px;
border: 2px solid #1e1e1e;
overflow: hidden;
background-color: #ff8c42;
}
.voter img {
width: 100%;
height: 100%;
object-fit: cover;
}
.voters-text {
color: #8b9bb4;
font-size: 14px;
margin-left: 15px;
}
.follow-button {
margin-left: auto;
display: flex;
align-items: center;
color: #8b9bb4;
font-size: 14px;
}
/* Content container */
.content-container {
padding: 0 0 20px; /* Increased top padding for initial scroll */
}
/* Post */
.post {
padding: 15px 20px;
border-bottom: 1px solid #2a2a2a;
}
.post-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.post-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.post-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.status-indicator {
width: 8px;
height: 8px;
background-color: #4CAF50;
border-radius: 50%;
position: absolute;
bottom: 0;
right: 0;
}
.post-author {
font-weight: bold;
margin-right: 10px;
}
.post-time {
color: #8b9bb4;
font-size: 14px;
}
.post-votes {
margin-left: auto;
background-color: #ff8c42;
color: #ffffff;
padding: 2px 8px;
border-radius: 4px;
font-size: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.post-content {
margin-bottom: 15px;
color: #e0e0e0;
}
.post-footer {
display: flex;
color: #8b9bb4;
font-size: 14px;
}
.post-action {
margin-right: 15px;
display: flex;
align-items: center;
}
.post-action-icon {
margin-right: 5px;
}
/* Reference */
.reference {
display: flex;
background-color: #2a2a2a;
padding: 8px 10px;
border-radius: 4px;
margin-top: 10px;
font-size: 14px;
align-items: center;
}
.reference-icon {
margin-right: 5px;
}
/* Position for avatars */
.avatar-container {
position: relative;
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<!-- Fixed Header -->
<div class="header">
<div class="back-button">←</div>
<div class="thread-info">1 of 7 posts ⬇</div>
<div class="menu-button">⋮</div>
</div>
<!-- Discussion Header - Fixed -->
<div class="discussion-header">
<div class="tags">
<div class="tag">📋 Proposals</div>
<div class="tag">Design</div>
</div>
<div class="discussion-title">Discussion name always visible</div>
</div>
<!-- Actions Bar - Fixed -->
<div class="actions-bar">
<div class="voters">
<div class="voter"></div>
<div class="voter"></div>
<span class="voters-text">VOTERS</span>
</div>
<div class="follow-button">
★ Follow ▼
</div>
</div>
<!-- Content Container -->
<div class="content-container">
<!-- Post 1 -->
<div class="post">
<div class="post-header">
<div class="avatar-container">
<div class="post-avatar"></div>
<div class="status-indicator"></div>
</div>
<span class="post-author">Silvestrus</span>
<span class="post-time">20 hours ago</span>
<div class="post-votes">
<span>↑</span>
<span>2</span>
</div>
</div>
<div class="post-content">
<p>Hi, I didn't find anything regarding this topic so I might open it here.</p>
<br>
<p>Would it be possible somehow that discussion name is always visible, let's say on the right side above "original post" link, on desktop, and to enable that on mobile view somehow as well?</p>
<br>
<p>Scenario is that my users get notification and they jump to the latest post, but many times they really don't pay attention which discussion is it and then they have to scroll to the top to see where they are currently.</p>
<br>
<p>I tried to make DiscussionHero class sticky on top but it is not good solution. It takes too much space. It would be much better to present that information on the right side in desktop view. I'm still not sure how to achieve the best visualisation on mobile view yet.</p>
</div>
<div class="post-footer">
<div class="post-action">
<span class="post-action-icon">↩</span> Reply
</div>
<div class="post-action">
Unlike
</div>
<div class="post-action">
...
</div>
</div>
<div class="post-action" style="margin-top: 10px; color: #8b9bb4;">
<span class="post-action-icon">↩</span> You replied to this.
</div>
<div class="post-action" style="margin-top: 5px; color: #8b9bb4;">
<span class="post-action-icon">👍</span> You like this.
</div>
</div>
<!-- Post 2 -->
<div class="post">
<div class="post-header">
<div class="avatar-container">
<div class="post-avatar" style="background-color: #7a2c7a;"></div>
</div>
<span class="post-author">luccos</span>
<span class="post-time">19 hours ago</span>
</div>
<div class="post-content">
<p>Reference:</p>
<div class="reference">
<span class="reference-icon">🔍</span> flarum/issue-archive #433
</div>
</div>
<div class="post-footer">
<div class="post-action">
<span class="post-action-icon">↩</span> Reply
</div>
<div class="post-action">
Like
</div>
<div class="post-action">
...
</div>
</div>
<div class="post-action" style="margin-top: 10px; color: #8b9bb4;">
<span class="post-action-icon">↩</span> Silvestrus replied to this.
</div>
<div class="post-action" style="margin-top: 5px; color: #8b9bb4;">
<span class="post-action-icon">👍</span> Silvestrus likes this.
</div>
</div>
<!-- Post 3 -->
<div class="post">
<div class="post-header">
<div class="avatar-container">
<div class="post-avatar"></div>
<div class="status-indicator"></div>
</div>
<span class="post-author">Silvestrus</span>
<span class="post-time">19 hours ago</span>
</div>
<div class="post-content">
<p><span style="color: #8b9bb4;">@luccos</span> thanks for the info. I did the exactly same thing like in the last comment - to make discussion header sticky but I didn't like it because it occupied too much space.</p>
<br>
<p>Initial idea is the same as I have - place it between buttons and history scroll on the right sidebar and call it a day. I think that it might be doable by providing extension for it.</p>
</div>
<div class="post-footer">
<div class="post-action">
<span class="post-action-icon">↩</span> Reply
</div>
<div class="post-action">
Like
</div>
<div class="post-action">
...
</div>
</div>
</div>
<!-- Post 4 -->
<div class="post">
<div class="post-header">
<div class="avatar-container">
<div class="post-avatar" style="background-color: #ff5722;"></div>
</div>
<span class="post-author">huseyinfiliz</span>
<span class="post-time">11 hours ago</span>
</div>
<div class="post-content">
<p><span style="color: #8b9bb4;">@Silvestrus</span> I've been mulling over this idea ever since I first encountered Flarum. For many looking to launch a forum, the choice often narrows down to Discourse and Flarum - that was exactly my experience. What bothered me most about Flarum was a particular shortcoming, and I really admire how Discourse tackled that issue.</p>
<br>
<p>Copying their solution outright didn't seem innovative, and after a while of searching for the perfect way to do it, I eventually gave up. That said, I was excited to see this topic come up in discussion.</p>
<br>
<p>If you're interested, we could brainstorm some ideas and sketch out draft visuals. I believe that once we land on a design we both think is truly outstanding, we can move forward and implement it!</p>
</div>
<div class="post-footer">
<div class="post-action">
<span class="post-action-icon">↩</span> Reply
</div>
<div class="post-action">
...
</div>
</div>
<div class="post-action" style="margin-top: 10px; color: #8b9bb4;">
<span class="post-action-icon">↩</span> Silvestrus replied to this.
</div>
<div class="post-action" style="margin-top: 5px; color: #8b9bb4;">
<span class="post-action-icon">👍</span> Silvestrus likes this.
</div>
</div>
<!-- Post 5 -->
<div class="post">
<div class="post-header">
<div class="avatar-container">
<div class="post-avatar"></div>
<div class="status-indicator"></div>
</div>
<span class="post-author">Silvestrus</span>
<span class="post-time">7 hours ago</span>
</div>
<div class="post-content">
<p><span style="color: #8b9bb4;">@huseyinfiliz</span> absolutely! I'm all for it. Let's try to create visuals and to provide concrete suggestion and see how it will go from there.</p>
</div>
<div class="post-footer">
<div class="post-action">
<span class="post-action-icon">↩</span> Reply
</div>
<div class="post-action">
Unlike
</div>
<div class="post-action">
...
</div>
</div>
<div class="post-action" style="margin-top: 10px; color: #8b9bb4;">
<span class="post-action-icon">👍</span> You like this.
</div>
</div>
</div>
<script>
let lastScrollTop = 0;
const discussionHeader = document.querySelector('.discussion-header');
window.addEventListener('scroll', () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
// Scrolling down
discussionHeader.classList.add('hidden');
} else {
// Scrolling up
discussionHeader.classList.remove('hidden');
}
lastScrollTop = scrollTop;
});
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.