github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-11 15:59:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
1d6616a419
framework/ember/app/templates/components/discussion/stream-scrubber.hbs

29 lines
1.1 KiB
Handlebars
Raw Normal View History

Responsive design baby! 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
2015-03-03 18:00:52 +08:00
<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}}
Upgrade to Ember 1.11-beta.1 HTMLBars goodness! Since there was some breakage and a lot of fiddling around to get some things working, I took this opportunity to do a big cleanup of the whole Ember app. I accidentally worked on some new features too :3 Note that the app is still broken right now, pending on https://github.com/emberjs/ember.js/issues/10401 Cleanup: - Restructuring of components - Consolidation of some stuff into mixins, cleanup of some APIs that will be public - Change all instances of .property() / .observes() / .on() to Ember.computed() / Ember.observer() / Ember.on() respectively (I think it is more readable) - More comments - Start conforming to a code style (2 spaces for indentation) New features: - Post hiding/restoring - Mark individual discussions as read by clicking - Clicking on a read discussion jumps to the end - Mark all discussions as read - Progressively mark the discussion as read as the page is scrolled - Unordered list post formatting - Post permalink popup Demo once that Ember regression is fixed!
2015-02-10 15:35:40 +08:00
</div>
Responsive design baby! 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
2015-03-03 18:00:52 +08:00
<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>
Upgrade to Ember 1.11-beta.1 HTMLBars goodness! Since there was some breakage and a lot of fiddling around to get some things working, I took this opportunity to do a big cleanup of the whole Ember app. I accidentally worked on some new features too :3 Note that the app is still broken right now, pending on https://github.com/emberjs/ember.js/issues/10401 Cleanup: - Restructuring of components - Consolidation of some stuff into mixins, cleanup of some APIs that will be public - Change all instances of .property() / .observes() / .on() to Ember.computed() / Ember.observer() / Ember.on() respectively (I think it is more readable) - More comments - Start conforming to a code style (2 spaces for indentation) New features: - Post hiding/restoring - Mark individual discussions as read by clicking - Clicking on a read discussion jumps to the end - Mark all discussions as read - Progressively mark the discussion as read as the page is scrolled - Unordered list post formatting - Post permalink popup Demo once that Ember regression is fixed!
2015-02-10 15:35:40 +08:00
</div>
</div>
Reference in New Issue Copy Permalink