mirror of
https://github.com/flarum/core.git
synced 2025-03-15 04:29:41 +01:00
1d6616a419
Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
41 lines
1.3 KiB
Handlebars
41 lines
1.3 KiB
Handlebars
{{#if controls}}
|
|
{{ui/dropdown-button
|
|
items=renderControls
|
|
class="contextual-controls"
|
|
buttonClass="btn btn-default btn-icon btn-sm btn-naked"
|
|
buttonClick="renderControls"
|
|
menuClass="pull-right"}}
|
|
{{/if}}
|
|
|
|
{{#link-to "user" discussion.startUser class="author"}}{{user-avatar discussion.startUser}}{{/link-to}}
|
|
|
|
<div class="badges">
|
|
{{#each badge in badges}}
|
|
{{fl-badge badge}}
|
|
{{/each}}
|
|
</div>
|
|
|
|
{{#link-to "discussion" discussion.content (query-params start=start) current-when="discussion" class="main"}}
|
|
<h3 class="title">{{highlight-words discussion.title searchQuery}}</h3>
|
|
{{ui/item-list items=info class="info"}}
|
|
{{/link-to}}
|
|
|
|
<span class="count" {{action "markAsRead"}} {{bind-attr title=countTitle}}>
|
|
{{#if displayUnread}}
|
|
{{abbreviate-number discussion.unreadCount}} <span class="label">unread</span>
|
|
{{else}}
|
|
{{abbreviate-number discussion.repliesCount}} <span class="label">replies</span>
|
|
{{/if}}
|
|
</span>
|
|
|
|
{{#if relevantPosts}}
|
|
<div class="relevant-posts">
|
|
{{#each post in relevantPosts}}
|
|
{{#link-to "discussion" discussion.content (query-params start=post.number) class="post item"}}
|
|
{{user-avatar post.user class="avatar-thumb"}}
|
|
<span class="post-body">{{highlight-words post.relevantContent searchQuery}}</span>
|
|
{{/link-to}}
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|