mirror of
https://github.com/flarum/framework.git
synced 2025-02-11 09:06:13 +08: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
29 lines
1.1 KiB
Handlebars
29 lines
1.1 KiB
Handlebars
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="index">{{visibleIndex}}</span> of <span class="count">{{count}}</span> posts
|
|
{{fa-icon "sort" class="icon-glyph"}}
|
|
</a>
|
|
<div class="dropdown-menu">
|
|
<div class="scrubber">
|
|
<a href="#" class="scrubber-first" {{action "first"}}>{{fa-icon "angle-double-up"}} Original Post</a>
|
|
<div class="scrubber-scrollbar">
|
|
<div class="scrubber-before"></div>
|
|
<div class="scrubber-slider">
|
|
<div class="scrubber-handle"></div>
|
|
{{#if loaded}}
|
|
<div class="scrubber-info">
|
|
<strong><span class="index">{{visibleIndex}}</span> of <span class="count">{{count}}</span> posts</strong>
|
|
<span class="description">{{description}}</span>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<div class="scrubber-after"></div>
|
|
<ul class="scrubber-highlights">
|
|
{{#each index in relevantPostIndexes}}
|
|
<li {{bind-attr style=index}}></li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
<a href="#" class="scrubber-last" {{action "last"}}>{{fa-icon "angle-double-down"}} Now</a>
|
|
</div>
|
|
</div>
|