From: Marius Gavrilescu <marius@ieval.ro>
Date: Tue, 4 Aug 2015 20:39:14 +0000 (+0300)
Subject: Drop bootstrap grid
X-Git-Url: http://git.ieval.ro/?a=commitdiff_plain;h=e8147a9466b97f5a2c5d216a0a833abaab19259a;p=plack-app-gruntmaster.git

Drop bootstrap grid
---

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 = '<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 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 @@
-<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 32eb1f7..d2d070f 100644
--- 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>