slaesvuo/hledger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive sidebar

Browse Source
This commit is contained in:
Dominik Süß 2016-10-21 09:00:42 +02:00 committed by Simon Michael
parent ab2ebbbcad
commit e9feee098b
4 changed files with 52 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hledger-web/Handler/Common.hs
View File

@ -44,8 +44,10 @@ hledgerLayout vd title content = do
-- | Global toolbar/heading area. -- | Global toolbar/heading area.
topbar :: ViewData -> HtmlUrl AppRoute topbar :: ViewData -> HtmlUrl AppRoute
topbar VD{..} = [hamlet| topbar VD{..} = [hamlet|
<div#spacer .col-md-4 .hidden-xs .hidden-sm> <div#spacer .col-md-4 .col-sm-2 .col-xs-2>
<div#topbar .col-md-8 .col-sm-12 .col-xs-12> <p .visible-xs .visible-sm>
<button .btn .btn-default type="button" data-toggle="offcanvas"><span class="glyphicon glyphicon-align-left">
<div#topbar .col-md-8 .col-sm-10 .col-xs-10>
<h1>#{title} <h1>#{title}
|] |]
where where
@ -55,7 +57,7 @@ topbar VD{..} = [hamlet|
sidebar :: ViewData -> HtmlUrl AppRoute sidebar :: ViewData -> HtmlUrl AppRoute
sidebar vd@VD{..} = sidebar vd@VD{..} =
[hamlet| [hamlet|
<div #sidebar-menu .col-md-4 .hidden-xs .hidden-sm> <div #sidebar-menu .col-md-4 .sidebar-offcanvas>
<ul .main-menu .nav .nav-stacked .affix-top> <ul .main-menu .nav .nav-stacked .affix-top>
<li .top> <li .top>
<a href=@{JournalR} title="Show general journal entries, most recent first">Journal <a href=@{JournalR} title="Show general journal entries, most recent first">Journal

41
hledger-web/static/hledger.css
View File

@ -177,3 +177,44 @@ ul {
width:0 !important; width:0 !important;
float: left; float: left;
} }
@media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -90%; /* 4 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -90%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 90%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 90%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 90%; /* 6 columns */
}
}

3
hledger-web/static/hledger.js
View File

@ -41,6 +41,9 @@ $(document).ready(function() {
$('.highlighted').removeClass('highlighted'); $('.highlighted').removeClass('highlighted');
$(window.location.hash).addClass('highlighted'); $(window.location.hash).addClass('highlighted');
}); });
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
}); });
//---------------------------------------------------------------------- //----------------------------------------------------------------------

3
hledger-web/templates/default-layout-wrapper.hamlet
View File

@ -25,7 +25,8 @@ $newline never
document.hledgerWebBaseurl = '#{base_url_ opts}'; // save for binding keys later document.hledgerWebBaseurl = '#{base_url_ opts}'; // save for binding keys later
<body> <body>
<div class="container"> <div .container>
<div .row .row-offcanvas .row-offcanvas-left>
^{pageBody pc} ^{pageBody pc}
<footer> <footer>
#{extraCopyright $ appExtra $ settings master} #{extraCopyright $ appExtra $ settings master}