mirror of
https://github.com/flarum/framework.git
synced 2025-01-25 01:37:15 +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
54 lines
1.5 KiB
Handlebars
54 lines
1.5 KiB
Handlebars
<div id="page" {{bind-attr class=":global-page backButtonTarget.paneIsPinned:with-pane"}}>
|
|
|
|
{{application/back-button target=backButtonTarget className="back-control" toggleDrawer="toggleDrawer"}}
|
|
|
|
<div id="drawer" class="global-drawer">
|
|
<header id="header" class="global-header">
|
|
<div class="container">
|
|
|
|
<div class="header-primary">
|
|
<h1 class="header-title">
|
|
{{#link-to "index" (query-params searchQuery="" sort="recent" show="discussions")}}
|
|
{{#if view.image}}
|
|
<img {{bind-attr src=view.image alt=view.title}}>
|
|
{{else}}
|
|
{{view.title}}
|
|
{{/if}}
|
|
{{/link-to}}
|
|
</h1>
|
|
{{ui/item-list items=view.headerPrimary class="header-controls"}}
|
|
</div>
|
|
|
|
<div class="header-secondary">
|
|
{{ui/item-list items=view.headerSecondary class="header-controls"}}
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<footer id="footer" class="global-footer">
|
|
<div class="container">
|
|
{{ui/item-list items=view.footerPrimary class="footer-primary"}}
|
|
{{ui/item-list items=view.footerSecondary class="footer-secondary"}}
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<main id="content" class="global-content">
|
|
{{outlet}}
|
|
|
|
<div class="composer-container">
|
|
<div class="container">
|
|
{{render "composer"}}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<div id="modal" class="modal fade">
|
|
{{outlet "modal"}}
|
|
</div>
|
|
|
|
{{render "alerts"}}
|