Drop bootstrap grid

diff --git a/css/custom.css b/css/custom.css
index 34461c3ecca60e67db82ddfc66a2707309e6caee..f844fa92d796900ed89d16d15a0f2da264605fa6 100644 (file)
--- 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 923b2e49c275273ffaa9fab809b306f2bc5fc517..7d28ae37a62349af60915148445f5f3d247f0865 100644 (file)
--- 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 ea3c52b30468a88424b4bbd982b372ea9f780597..1f1383f4ec5f682a296219fc47bd4e94114b9222 100644 (file)
--- 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 a3e3cb9a3e97f9b5dd2f764085fff279a5aeb25a..19c8aea0802c8e225a8d5da5a0cff16581262e8d 100644 (file)
--- 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 5120df52eee0be2b289203e1949500b4e4446b1a..dcb3bc97e7916ff146a74d5174a9f5d26fedb535 100644 (file)
--- 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 = '<div class="col-md-9">' + content.innerHTML + '</div><aside id="sidebar" class="col-md-3"></aside>';
-               content.classList.add('row');
+        q('main').insertAdjacentHTML('afterend', '<aside id="sidebar"></aside>');
     }
 });

diff --git a/lib/Plack/App/Gruntmaster/HTML.pm b/lib/Plack/App/Gruntmaster/HTML.pm
index 7df9ef3c5f422fc47b388120bcfdd37b86841f1d..59e0293df4399ab68f8c9877ef46c66c57c0ec1f 100644 (file)
--- 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 7b376699f52aac4fd29e38ecb8d63e98dbc0bb8f..ec801c6254ff041ab5bae4001af231579ae4b4ef 100644 (file)
--- a/tmpl/pb_entry.en
+++ b/tmpl/pb_entry.en
@@ -1,9 +1,6 @@
-<div class="row">
-<div class="col-md-9">
 <div id="statement"></div>
-</div>
 
-<div class="col-md-3" id="sidebar">
+<aside id="sidebar">
 <dl>
 <dt>Author</dt> <dd id="author">author</dd>
 <dt>Owner</dt> <dd id="owner">owner</dd>
@@ -48,8 +45,7 @@ To submit solutions to this problem, please visit the problem <a href="/pb/id">o
 <input type="submit" value="Submit job" class="btn btn-primary">
 </form>
 </div>
-</div>
-</div>
+</aside>
 
 <div class="hidden backdrop"></div>
 <div id="solution_modal" class="hidden modal"></div>

diff --git a/tmpl/skel.en b/tmpl/skel.en
index 32eb1f7ba264981e319f9ba9a28b856c94196e00..d2d070fdf0fb01ca65ede8908e8f3d9d560b814c 100644 (file)
--- a/tmpl/skel.en
+++ b/tmpl/skel.en
@@ -7,7 +7,6 @@
 <script src="/static/js/all.js" type="text/javascript" async defer integrity="x"></script>
 
 <body>
-<div class="container-fluid">
 <nav role="navigation">
 <ul class="nav nav-pills nav-justified">
 <li id="nav-home"><a href="/">Gruntmaster 6000</a>