More layout improvements.

nyaa/static/css/bootstrap-xl-mod.css

@@ -0,0 +1,277 @@
+/*
+*	CSS file with Bootstrap grid classes for screens bigger than 1600px. Just add this file after the Bootstrap CSS file and you will be able to juse col-xl, col-xl-push, hidden-xl, etc.
+*
+*	Author: Marc van Nieuwenhuijzen
+*	Company: WebVakman
+*	Site: WebVakman.nl
+*
+*	Edited to be for >=1480px with container width of 1400px for Nyaa.si
+*	Also edited to not fuck up column gutters.
+*/
+
+@media (min-width: 1200px) and (max-width: 1479px) {
+	.hidden-lg {
+		display: none !important;
+	}
+}
+
+
+.visible-xl-block,
+.visible-xl-inline,
+.visible-xl-inline-block,
+.visible-xl{
+	display: none !important;
+}
+
+
+
+@media (min-width: 1480px) {
+	.container {
+		width: 1400px;
+	}
+
+	.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
+		position: relative;
+		min-height: 1px;
+		padding-right: 15px;
+		padding-left: 15px;
+
+		float: left;
+	}
+
+	.col-xl-12 {
+		width: 100%;
+	}
+
+	.col-xl-11 {
+		width: 91.66666667%;
+	}
+
+	.col-xl-10 {
+		width: 83.33333333%;
+	}
+
+	.col-xl-9 {
+		width: 75%;
+	}
+
+	.col-xl-8 {
+		width: 66.66666667%;
+	}
+
+	.col-xl-7 {
+		width: 58.33333333%;
+	}
+
+	.col-xl-6 {
+		width: 50%;
+	}
+
+	.col-xl-5 {
+		width: 41.66666667%;
+	}
+
+	.col-xl-4 {
+		width: 33.33333333%;
+	}
+
+	.col-xl-3 {
+		width: 25%;
+	}
+
+	.col-xl-2 {
+		width: 16.66666667%;
+	}
+
+	.col-xl-1 {
+		width: 8.33333333%;
+	}
+
+	.col-xl-pull-12 {
+		right: 100%;
+	}
+
+	.col-xl-pull-11 {
+		right: 91.66666667%;
+	}
+
+	.col-xl-pull-10 {
+		right: 83.33333333%;
+	}
+
+	.col-xl-pull-9 {
+		right: 75%;
+	}
+
+	.col-xl-pull-8 {
+		right: 66.66666667%;
+	}
+
+	.col-xl-pull-7 {
+		right: 58.33333333%;
+	}
+
+	.col-xl-pull-6 {
+		right: 50%;
+	}
+
+	.col-xl-pull-5 {
+		right: 41.66666667%;
+	}
+
+	.col-xl-pull-4 {
+		right: 33.33333333%;
+	}
+
+	.col-xl-pull-3 {
+		right: 25%;
+	}
+
+	.col-xl-pull-2 {
+		right: 16.66666667%;
+	}
+
+	.col-xl-pull-1 {
+		right: 8.33333333%;
+	}
+
+	.col-xl-pull-0 {
+		right: auto;
+	}
+
+	.col-xl-push-12 {
+		left: 100%;
+	}
+
+	.col-xl-push-11 {
+		left: 91.66666667%;
+	}
+
+	.col-xl-push-10 {
+		left: 83.33333333%;
+	}
+
+	.col-xl-push-9 {
+		left: 75%;
+	}
+
+	.col-xl-push-8 {
+		left: 66.66666667%;
+	}
+
+	.col-xl-push-7 {
+		left: 58.33333333%;
+	}
+
+	.col-xl-push-6 {
+		left: 50%;
+	}
+
+	.col-xl-push-5 {
+		left: 41.66666667%;
+	}
+
+	.col-xl-push-4 {
+		left: 33.33333333%;
+	}
+
+	.col-xl-push-3 {
+		left: 25%;
+	}
+
+	.col-xl-push-2 {
+		left: 16.66666667%;
+	}
+
+	.col-xl-push-1 {
+		left: 8.33333333%;
+	}
+
+	.col-xl-push-0 {
+		left: auto;
+	}
+
+	.col-xl-offset-12 {
+		margin-left: 100%;
+	}
+
+	.col-xl-offset-11 {
+		margin-left: 91.66666667%;
+	}
+
+	.col-xl-offset-10 {
+		margin-left: 83.33333333%;
+	}
+
+	.col-xl-offset-9 {
+		margin-left: 75%;
+	}
+
+	.col-xl-offset-8 {
+		margin-left: 66.66666667%;
+	}
+
+	.col-xl-offset-7 {
+		margin-left: 58.33333333%;
+	}
+
+	.col-xl-offset-6 {
+		margin-left: 50%;
+	}
+
+	.col-xl-offset-5 {
+		margin-left: 41.66666667%;
+	}
+
+	.col-xl-offset-4 {
+		margin-left: 33.33333333%;
+	}
+
+	.col-xl-offset-3 {
+		margin-left: 25%;
+	}
+
+	.col-xl-offset-2 {
+		margin-left: 16.66666667%;
+	}
+
+	.col-xl-offset-1 {
+		margin-left: 8.33333333%;
+	}
+
+	.col-xl-offset-0 {
+		margin-left: 0;
+	}
+
+	.visible-xl {
+		display: block !important;
+	}
+
+	table.visible-xl {
+		display: table;
+	}
+
+	tr.visible-xl {
+		display: table-row !important;
+	}
+
+	th.visible-xl, td.visible-xl {
+		display: table-cell !important;
+	}
+
+	.visible-xl-block {
+		display: block !important;
+	}
+
+	.visible-xl-inline {
+		display: inline !important;
+	}
+
+	.visible-xl-inline-block {
+		display: inline-block !important;
+	}
+
+	.hidden-xl {
+		display: none !important;
+	}
+}

nyaa/static/css/main.css

@@ -1,8 +1,3 @@
-@media (min-width: 1480px) {
-	.container {
-		width: 1400px;
-	}
-}
 .panel-heading-collapse a:after {
 	font-family:'Glyphicons Halflings';
 	content:"\e114";
@@ -101,6 +96,10 @@ table.torrent-list tbody tr td a:visited {
 	padding: 1em 0;
 }
 
+.markdown-source {
+	min-height: 360px;
+}
+
 @media (max-width: 991px){
 	.panel-body .col-md-5 {
 		margin-left: 20px;
@@ -282,3 +281,4 @@ a.text-purple:hover, a.text-purple:active, a.text-purple:focus { color: #a760e0;
 .btn.active span.glyphicon-unchecked {
 	display: none;
 }
+

nyaa/templates/edit.html

@@ -17,18 +17,18 @@
 
 
 	<div class="row">
-		<div class="col-md-6">
+		<div class="col-xl-6">
 		{{ render_field(form.display_name, class_='form-control', placeholder='Display name') }}
 		</div>
-		<div class="col-md-4">
+		<div class="col-xl-4">
 		{{ render_field(form.category, class_='form-control')}}
 		</div>
 	</div>
 	<div class="row">
-		<div class="col-md-6">
+		<div class="col-xl-6">
 		{{ render_field(form.information, class_='form-control', placeholder='Your website or IRC channel') }}
 		</div>
-		<div class="col-md-6">
+		<div class="col-xl-6">
 			<label class="control-label">Torrent flags</label><br>
 			<div class="btn-group" data-toggle="buttons">
 				{# Only allow changing anonymous status when an uploader exists #}
@@ -79,13 +79,13 @@
 	</div>
 
 	<div class="row">
-		<div class="col-md-12">
+		<div class="col-xl-12">
 			{{ render_markdown_editor(form.description, field_name='description') }}
 		</div>
 	</div>
 
 	<div class="row">
-		<div class="form-group col-md-6">
+		<div class="form-group col-xl-6">
 			<input type="submit" value="Edit" class="btn btn-primary">
 		</div>
 	</div>

nyaa/templates/layout.html

@@ -18,6 +18,7 @@
 			make the navbar not look awful on tablets.
 		-->
 		<link href="/static/css/bootstrap.min.css" rel="stylesheet" id="bsThemeLink">
+		<link href="/static/css/bootstrap-xl-mod.css" rel="stylesheet">
 		<!--
 			This theme changer script needs to be inline and right under the above stylesheet link to prevent FOUC (Flash Of Unstyled Content)
 			Development version is commented out in static/js/main.js at the bottom of the file
@@ -27,7 +28,7 @@
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
 
 		<!-- Custom styles for this template -->
-		<link href="/static/css/main.css?v=7" rel="stylesheet">
+		<link href="/static/css/main.css?v=8" rel="stylesheet">
 
 		<!-- Core JavaScript -->
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

nyaa/templates/upload.html

@@ -18,24 +18,24 @@
 
 	{% if config.ENFORCE_MAIN_ANNOUNCE_URL %}<p><strong>Important:</strong> Please include <kbd>{{ config.MAIN_ANNOUNCE_URL }}</kbd> in your trackers</p>{% endif %}
 	<div class="row">
-		<div class="col-md-6">
+		<div class="col-xl-6">
 		{{ render_upload(upload_form.torrent_file, accept=".torrent") }}
 		</div>
 	</div>
 	<div class="row">
-		<div class="col-md-6">
+		<div class="col-xl-6">
 		{{ render_field(upload_form.display_name, class_='form-control', placeholder='Display name') }}
 		</div>
-		<div class="col-md-4">
+		<div class="col-xl-4">
 		{{ render_field(upload_form.category, class_='form-control')}}
 		</div>
 	</div>
 	<div class="row"></div>
 	<div class="row form-group">
-		<div class="col-md-6">
+		<div class="col-xl-6">
 			{{ render_field(upload_form.information, class_='form-control', placeholder='Your website or IRC channel') }}
 		</div>
-		<div class="col-md-6">
+		<div class="col-xl-6">
 			<label class="control-label">Torrent flags</label><br>
 	
 			<div class="btn-group" data-toggle="buttons">
@@ -76,14 +76,14 @@
 		</div>
 	</div>
 	<div class="row">
-		<div class="col-md-12">
+		<div class="col-xl-12">
 			{{ render_markdown_editor(upload_form.description, field_name='description') }}
 		</div>
 	</div>
 
 	{% if config.USE_RECAPTCHA and not g.user %}
 	<div class="row">
-		<div class="col-md-4">
+		<div class="col-xl-4">
 			{% for error in upload_form.recaptcha.errors %}
 			{{ error }}
 			{% endfor %}
@@ -95,7 +95,7 @@
 	<br>
 
 	<div class="row">
-		<div class="form-group col-md-6">
+		<div class="form-group col-xl-6">
 			<input type="submit" value="Upload" class="btn btn-primary">
 		</div>
 	</div>