Mercurial > piecrust2
changeset 620:c2708f20a87b
admin: Make the sidebar togglable for smaller screens.
| author | Ludovic Chabant <ludovic@chabant.com> |
|---|---|
| date | Sat, 06 Feb 2016 21:49:50 -0800 |
| parents | 200c7063affa |
| children | 8f9c0bdb3724 |
| files | foodtruck/assets/js/foodtruck.js foodtruck/assets/sass/foodtruck/_sidebar.scss foodtruck/templates/create_page.html foodtruck/templates/dashboard.html foodtruck/templates/edit_page.html foodtruck/templates/error.html foodtruck/templates/install.html foodtruck/templates/layouts/default.html foodtruck/templates/layouts/master.html foodtruck/templates/list_source.html foodtruck/templates/login.html foodtruck/templates/publish.html foodtruck/templates/settings.html |
| diffstat | 13 files changed, 127 insertions(+), 107 deletions(-) [+] |
line wrap: on
line diff
--- a/foodtruck/assets/js/foodtruck.js Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/assets/js/foodtruck.js Sat Feb 06 21:49:50 2016 -0800 @@ -1,5 +1,10 @@ $(document).ready(function() { + $('.ft-nav-toggle').click(function() { + $('.ft-nav-container').toggleClass('ft-nav-enabled'); + $('.ft-nav').toggleClass('ft-nav-enabled'); + }); + $('.ft-nav-collapsed + ul').hide(); $('#ft-commit-modal').on('shown.bs.modal', function () {
--- a/foodtruck/assets/sass/foodtruck/_sidebar.scss Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/assets/sass/foodtruck/_sidebar.scss Sat Feb 06 21:49:50 2016 -0800 @@ -8,12 +8,23 @@ // Layout .ft-nav-container { padding: 2rem; + margin-top: 3em; transition: padding-left 0.5s ease; + transition: margin 0.5s ease; } .ft-nav-container.ft-nav-enabled { padding-left: $ft-nav-width + $ft-nav-margin; } +.ft-nav-toggle { + display: block; + z-index: 1001; + position: fixed; + top: 0; + left: 0; + transition: all 0.5s ease; +} + .ft-nav { z-index: 1000; position: fixed; @@ -30,8 +41,13 @@ } @media(min-width:768px) { + .ft-nav-toggle { + left: -3rem; + display: none; + } .ft-nav-container { padding-left: $ft-nav-width + $ft-nav-margin; + margin-top: 0; } .ft-nav { left: 0; @@ -39,6 +55,21 @@ } // Style +.ft-nav-toggle { + background: $ft-color-gray-darkest; + + a { + display: block; + padding: 0.2em 0.8em; + font-family: 'Lobster', cursive; + font-size: 2em; + } + a, a:hover, a:active, a:visited { + color: #fff; + text-decoration: none; + } +} + .ft-nav { background: $ft-color-gray-darkest; color: #fff;
--- a/foodtruck/templates/create_page.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/create_page.html Sat Feb 06 21:49:50 2016 -0800 @@ -4,7 +4,6 @@ {% block content %} <form action="{{url_postback}}" method="POST" class="ft-create-form"> -<div class="container"> {% for field in fields %} <div class="row"> <div class="col-md-10 col-md-offset-1"> @@ -29,7 +28,6 @@ <button type="submit" name="do_save" class="btn btn-primary btn-lg pull-right">Create and Edit</button> </div> </div> -</div> </form> {% endblock %}
--- a/foodtruck/templates/dashboard.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/dashboard.html Sat Feb 06 21:49:50 2016 -0800 @@ -1,61 +1,59 @@ {% extends 'layouts/default.html' %} {% block content %} -<div class="container"> - <div class="row"> - <div class="col-md-4 col-md-offset-8"> - {% if needs_switch %} - <form action="{{url_switch}}" method="POST"> - {% for site in sites %} - {% if site.name != site_name %} - <button type="submit" name="site_name" value="{{site.name}}" class="btn"> - <span class="icon ion-shuffle"></span> - Switch to {{site.display_name}}</button> - {% endif %} - {% endfor %} - </form> - {% endif %} - </div> +<div class="row"> + <div class="col-md-4 col-md-offset-8"> + {% if needs_switch %} + <form action="{{url_switch}}" method="POST"> + {% for site in sites %} + {% if site.name != site_name %} + <button type="submit" name="site_name" value="{{site.name}}" class="btn"> + <span class="icon ion-shuffle"></span> + Switch to {{site.display_name}}</button> + {% endif %} + {% endfor %} + </form> + {% endif %} </div> - <div class="row"> - <div class="col-md-12"> - <h1>{{site_title}} <a href="{{url_preview}}"><span class="icon ion-arrow-right-c"></span></a></h1> - </div> +</div> +<div class="row"> + <div class="col-md-12"> + <h1>{{site_title}} <a href="{{url_preview}}"><span class="icon ion-arrow-right-c"></span></a></h1> </div> - <div class="row"> - <div class="col-md-6"> - <h2><span class="icon ion-stats-bars"></span> Site Summary</h2> - {% for s in sources %} - <div class="ft-summary-source"> - <a href="{{s.list_url}}">{{s.page_count}} {{s.name}}</a> - </div> - {% endfor %} +</div> +<div class="row"> + <div class="col-md-6"> + <h2><span class="icon ion-stats-bars"></span> Site Summary</h2> + {% for s in sources %} + <div class="ft-summary-source"> + <a href="{{s.list_url}}">{{s.page_count}} {{s.name}}</a> </div> - <div class="col-md-6"> - <h2><span class="icon ion-erlenmeyer-flask"></span> Work in Progress</h2> - {% if new_pages %} - <p>New pages</p> - <ul> - {% for p in new_pages %} - <li><a href="{{p.url}}">{{p.title}}</a><br/> - {%if p.text%}<pre>{{p.text}}</pre>{%endif%}</li> - {% endfor %} - </ul> - {% endif %} - {% if edited_pages %} - <p>Edited pages</p> - <ul> - {% for p in edited_pages %} - <li><a href="{{p.url}}">{{p.title}}</a><br/> - {%if p.text%}<pre>{{p.text}}</pre>{%endif%}</li> - {% endfor %} - </ul> - {% endif %} - {% if not new_pages and not edited_pages %} - <p>No work in progress.</p> - {% endif %} + {% endfor %} + </div> + <div class="col-md-6"> + <h2><span class="icon ion-erlenmeyer-flask"></span> Work in Progress</h2> + {% if new_pages %} + <p>New pages</p> + <ul> + {% for p in new_pages %} + <li><a href="{{p.url}}">{{p.title}}</a><br/> + {%if p.text%}<pre>{{p.text}}</pre>{%endif%}</li> + {% endfor %} + </ul> + {% endif %} + {% if edited_pages %} + <p>Edited pages</p> + <ul> + {% for p in edited_pages %} + <li><a href="{{p.url}}">{{p.title}}</a><br/> + {%if p.text%}<pre>{{p.text}}</pre>{%endif%}</li> + {% endfor %} + </ul> + {% endif %} + {% if not new_pages and not edited_pages %} + <p>No work in progress.</p> + {% endif %} - </div> </div> </div> {% endblock %}
--- a/foodtruck/templates/edit_page.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/edit_page.html Sat Feb 06 21:49:50 2016 -0800 @@ -4,7 +4,6 @@ {% block content %} <form action="{{url_postback}}" method="POST" class="ft-write-form" id="ft-write-form"> -<div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="form-group"> @@ -57,7 +56,6 @@ </div> </div> </div> -</div> </form> {% endblock %}
--- a/foodtruck/templates/error.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/error.html Sat Feb 06 21:49:50 2016 -0800 @@ -3,9 +3,7 @@ {% extends 'layouts/master.html' %} {% block content %} -<div class="container"> - <p>{{error}}</p> -</div> +<p>{{error}}</p> {% endblock %}
--- a/foodtruck/templates/install.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/install.html Sat Feb 06 21:49:50 2016 -0800 @@ -3,8 +3,6 @@ {% extends 'layouts/master.html' %} {% block content %} -<div class="container"> - No FoodTruck configuration file was found. Did you run <code>chef admin init</code>? -</div> +<p>No FoodTruck configuration file was found. Did you run <code>chef admin init</code>?</p> {% endblock %}
--- a/foodtruck/templates/layouts/default.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/layouts/default.html Sat Feb 06 21:49:50 2016 -0800 @@ -3,6 +3,9 @@ {% extends 'layouts/master.html' %} {% block after_content %} +<div class="ft-nav-toggle"> + <a href="#">F</a> +</div> <nav class="ft-nav"> <div class="ft-nav-title"> <img src="/static/img/foodtruck.png" alt="Food Truck" />
--- a/foodtruck/templates/layouts/master.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/layouts/master.html Sat Feb 06 21:49:50 2016 -0800 @@ -11,7 +11,7 @@ <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/> </head> <body> - <div id="ft-wrapper" class="{{wrapper_classes}}"> + <div id="ft-wrapper" class="container {{wrapper_classes}}"> <header> {% if title %}<h1 class="title">{{title}}</h1>{% endif %} {% block sub_header %}{% endblock %}
--- a/foodtruck/templates/list_source.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/list_source.html Sat Feb 06 21:49:50 2016 -0800 @@ -1,39 +1,37 @@ {% extends 'layouts/default.html' %} {% block content %} -<div class="container"> - <div class="row"> - <div class="col-xs-12"> - {% for p in pages %} - <div> - <h3><a href="{{p.url}}">{{p.title}}</a></h3> - <p>{{p.text}}</p> - </div> - {% endfor %} +<div class="row"> + <div class="col-md-12"> + {% for p in pages %} + <div> + <h3><a href="{{p.url}}">{{p.title}}</a></h3> + <p>{{p.text}}</p> </div> + {% endfor %} + </div> - {% if pagination.prev_page or pagination.next_page %} - <div class="col-sm-6 col-sm-offset-3"> - <div class="ft-pagination"> - {% if pagination.prev_page %} - <a href="{{pagination.prev_page}}"><span class="icon ion-chevron-left"></span> prev</a> - {% else %} - <span class="icon ion-chevron-left"></span> prev - {% endif %} + {% if pagination.prev_page or pagination.next_page %} + <div class="col-sm-6 col-sm-offset-3"> + <div class="ft-pagination"> + {% if pagination.prev_page %} + <a href="{{pagination.prev_page}}"><span class="icon ion-chevron-left"></span> prev</a> + {% else %} + <span class="icon ion-chevron-left"></span> prev + {% endif %} - {% for p in pagination.nums %} - {% if p.url %}<a href="{{p.url}}" class="ft-pagination-a">{{p.num}}</a>{% else %}<span class="ft-pagination-a">{{p.num}}</span>{% endif %} - {% endfor %} + {% for p in pagination.nums %} + {% if p.url %}<a href="{{p.url}}" class="ft-pagination-a">{{p.num}}</a>{% else %}<span class="ft-pagination-a">{{p.num}}</span>{% endif %} + {% endfor %} - {% if pagination.next_page %} - <a href="{{pagination.next_page}}">next <span class="icon ion-chevron-right"></span></a> - {% else %} - next <span class="icon ion-chevron-right"></span> - {% endif %} - </div> + {% if pagination.next_page %} + <a href="{{pagination.next_page}}">next <span class="icon ion-chevron-right"></span></a> + {% else %} + next <span class="icon ion-chevron-right"></span> + {% endif %} </div> - {% endif %} </div> + {% endif %} </div> {% endblock %}
--- a/foodtruck/templates/login.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/login.html Sat Feb 06 21:49:50 2016 -0800 @@ -1,5 +1,3 @@ -{% set wrapper_classes = 'container' %} - {% extends 'layouts/master.html' %} {% block content %}
--- a/foodtruck/templates/publish.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/publish.html Sat Feb 06 21:49:50 2016 -0800 @@ -1,22 +1,19 @@ {% extends 'layouts/default.html' %} {% block content %} -<div class="container"> - <h1>Publish {{site_title}}</h1> +<h1>Publish {{site_title}}</h1> - {% for target in targets %} - <div> - <h2>{{target.name}}</h2> - {% if target.description %}<div>{{target.description}}</div>{% endif %} - {% if target.cmd %}<p>Run <code>{{target.cmd}}</code>.</p>{% endif %} - <form action="{{url_run}}" method="POST"> - <input type="hidden" name="target" value="{{target.name}}" /> - <button type="submit" class="btn btn-default">Execute</button> - </form> - </div> - {% endfor %} +{% for target in targets %} +<div> + <h2>{{target.name}}</h2> + {% if target.description %}<div>{{target.description}}</div>{% endif %} + {% if target.cmd %}<p>Run <code>{{target.cmd}}</code>.</p>{% endif %} + <form action="{{url_run}}" method="POST"> + <input type="hidden" name="target" value="{{target.name}}" /> + <button type="submit" class="btn btn-default">Execute</button> + </form> </div> +{% endfor %} {% endblock %} -
--- a/foodtruck/templates/settings.html Sat Feb 06 21:47:24 2016 -0800 +++ b/foodtruck/templates/settings.html Sat Feb 06 21:49:50 2016 -0800 @@ -3,7 +3,6 @@ {% extends 'layouts/default.html' %} {% block content %} -<div class="container"> {% for sec in sections %} <form action="{{url_settings}}" method="POST"> <h2>{{sec.title}}</h2> @@ -32,7 +31,6 @@ <p>This will reload settings from the configuration file.</p> <button type="submit" name="_do_reload" class="btn btn-info">Reload Settings</button> </form> -</div> {% endblock %}