From e8147a9466b97f5a2c5d216a0a833abaab19259a Mon Sep 17 00:00:00 2001 From: Marius Gavrilescu Date: Tue, 4 Aug 2015 23:39:14 +0300 Subject: [PATCH] Drop bootstrap grid --- css/custom.css | 21 +++++++++ css/themes/cyborg.css | 77 ------------------------------- css/themes/readable.css | 77 ------------------------------- css/themes/slate.css | 77 ------------------------------- js/80-sidebar.js | 4 +- lib/Plack/App/Gruntmaster/HTML.pm | 10 +++- tmpl/pb_entry.en | 8 +--- tmpl/skel.en | 1 - 8 files changed, 33 insertions(+), 242 deletions(-) diff --git a/css/custom.css b/css/custom.css index 34461c3..f844fa9 100644 --- a/css/custom.css +++ b/css/custom.css @@ -1,3 +1,8 @@ +body { + padding-left: 15px; + padding-right: 15px; +} + h1#title{ font-weight: bold; text-align: center; @@ -63,3 +68,19 @@ td.user, td.owner { .transition-color, .transition-color * { transition: color 0.5s ease-in, background-color 0.5s ease-in; } + +@media (min-width:768px) { + #content { + float: left; + width: 75%; + } + + #sidebar { + float: right; + width: 23% + } + + footer { + clear: both; + } +} \ No newline at end of file diff --git a/css/themes/cyborg.css b/css/themes/cyborg.css index 923b2e4..7d28ae3 100644 --- a/css/themes/cyborg.css +++ b/css/themes/cyborg.css @@ -567,74 +567,6 @@ pre code { max-height: 340px; overflow-y: scroll; } -.container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 992px) { - .container { - width: 970px; - } -} -.container-fluid { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -.row { - margin-left: -15px; - margin-right: -15px; -} -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } -} table { background-color: #181818; } @@ -995,12 +927,6 @@ textarea.form-control { .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, -.row:before, -.row:after, .nav:before, .nav:after, .pager:before, @@ -1010,9 +936,6 @@ textarea.form-control { } .clearfix:after, .dl-horizontal dd:after, -.container:after, -.container-fluid:after, -.row:after, .nav:after, .pager:after { clear: both; diff --git a/css/themes/readable.css b/css/themes/readable.css index ea3c52b..1f1383f 100644 --- a/css/themes/readable.css +++ b/css/themes/readable.css @@ -567,74 +567,6 @@ pre code { max-height: 340px; overflow-y: scroll; } -.container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 992px) { - .container { - width: 970px; - } -} -.container-fluid { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -.row { - margin-left: -15px; - margin-right: -15px; -} -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } -} table { background-color: transparent; } @@ -995,12 +927,6 @@ textarea.form-control { .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, -.row:before, -.row:after, .nav:before, .nav:after, .pager:before, @@ -1010,9 +936,6 @@ textarea.form-control { } .clearfix:after, .dl-horizontal dd:after, -.container:after, -.container-fluid:after, -.row:after, .nav:after, .pager:after { clear: both; diff --git a/css/themes/slate.css b/css/themes/slate.css index a3e3cb9..19c8aea 100644 --- a/css/themes/slate.css +++ b/css/themes/slate.css @@ -567,74 +567,6 @@ pre code { max-height: 340px; overflow-y: scroll; } -.container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 992px) { - .container { - width: 970px; - } -} -.container-fluid { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -.row { - margin-left: -15px; - margin-right: -15px; -} -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } -} table { background-color: #2e3338; } @@ -995,12 +927,6 @@ textarea.form-control { .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, -.row:before, -.row:after, .nav:before, .nav:after, .pager:before, @@ -1010,9 +936,6 @@ textarea.form-control { } .clearfix:after, .dl-horizontal dd:after, -.container:after, -.container-fluid:after, -.row:after, .nav:after, .pager:after { clear: both; diff --git a/js/80-sidebar.js b/js/80-sidebar.js index 5120df5..dcb3bc9 100644 --- a/js/80-sidebar.js +++ b/js/80-sidebar.js @@ -1,7 +1,5 @@ $(function() { if(!document.getElementById('sidebar')) { - const content = q('main'); - content.innerHTML = '
' + content.innerHTML + '
'; - content.classList.add('row'); + q('main').insertAdjacentHTML('afterend', ''); } }); diff --git a/lib/Plack/App/Gruntmaster/HTML.pm b/lib/Plack/App/Gruntmaster/HTML.pm index 7df9ef3..59e0293 100644 --- a/lib/Plack/App/Gruntmaster/HTML.pm +++ b/lib/Plack/App/Gruntmaster/HTML.pm @@ -64,7 +64,15 @@ sub render { my ($tmpl, $lang, %args) = @_; $lang //= 'en'; my $meat = _render($tmpl, $lang, %args); - _render('skel', $lang, %args, meat => $meat) + my $html = _render('skel', $lang, %args, meat => $meat); + if ($tmpl eq 'pb_entry') { # Move sidebar to correct position + my $builder = HTML::TreeBuilder->new; + $builder->ignore_unknown(0); + my $tree = $builder->parse_content($html); + $tree->fid('content')->postinsert($tree->fid('sidebar')); + $html = $tree->as_HTML(undef, undef, $optional_end_tags) + } + $html } sub render_article { diff --git a/tmpl/pb_entry.en b/tmpl/pb_entry.en index 7b37669..ec801c6 100644 --- a/tmpl/pb_entry.en +++ b/tmpl/pb_entry.en @@ -1,9 +1,6 @@ -
-
-
- -
- + diff --git a/tmpl/skel.en b/tmpl/skel.en index 32eb1f7..d2d070f 100644 --- a/tmpl/skel.en +++ b/tmpl/skel.en @@ -7,7 +7,6 @@ -