UI Fixes (#246)

* Fix markdown renderer

Use a simple for loop instead of `for (var target of markdownTargets)`, because it's unsupported in IE.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility

* view.html : HTML Fixes

- Remove unmatched `</a>`
- Add missing `</div>`
- Use single quotes in {{ }}
- Closing tags comments

* layout.html

- Use single quotes in {{ }}
- Closing tags comments

* help.html: Convert all `<p>` to `<div>`

HTML spec doesn't allow lists inside `<p>` elements.

* Missing semicolon in `<script>`

nyaa/static/js/main.js

@@ -180,9 +180,9 @@ document.addEventListener("DOMContentLoaded", function() {
 
 // Render markdown from elements with "markdown-text" attribute
 document.addEventListener("DOMContentLoaded", function() {
-
 	var markdownTargets = document.querySelectorAll('[markdown-text]');
-	for (var target of markdownTargets) {
+	for (var i = 0; i < markdownTargets.length; i++) {
+		var target = markdownTargets[i];
 		var rendered = markdown.render(target.innerHTML);
 		target.innerHTML = rendered;
 	}

nyaa/templates/help.html

@@ -9,14 +9,14 @@
 <h1>Using the Site</h1>
 
 {{ linkable_header("How to Download", "how-to-dl") }}
-<p>
+<div>
 	This site only offers torrent files and magnet links. To download the content of
 	the torrents, you will have to use a BitTorrent client such as qBitTorrent,
 	µTorrent, Transmission or Deluge.
-</p>
+</div>
 
 {{ linkable_header("Torrent Colors", "torrent-colors") }}
-<p>
+<div>
 	<span style="color:green; font-weight: bold;">Green</span> entries (trusted) are:
 	<ul>
 		<li>Torrents uploaded by trusted users.</li>
@@ -36,58 +36,58 @@
 	<ul>
 		<li>Hidden torrents.</li>
 	</ul>
-</p>
+</div>
 
 {{ linkable_header("Using the Search Engine", "using-search") }}
-<p>
+<div>
 	Search results can be filtered by category, remake, trusted, and users.
 	The results can be further sorted by size, date, seeders, leechers, completed count, and comment count.
-</p>
+</div>
-<p>
+<div>
 	You can combine search terms with the <kbd>|</kbd> operator, such as
 	<kbd>horrible|cartel</kbd>.
-</p>
+</div>
-<p>
+<div>
 	To exclude results matching a certain word, prefix them with <kbd>-</kbd>,
 	e.g. <kbd>FFF -memesubs</kbd>, which will return torrents with <em>FFF</em> in the
 	name, but not those which have <em>memesubs</em> in the name as well.
-</p>
+</div>
-<p>
+<div>
 	If you want to search for a several-word expression in its entirety, you can
 	surround searches with <kbd>"</kbd> (double quotes), such as
 	<kbd>"foo bar"</kbd>, which would match torrents named <em>foo bar</em> but not
 	those named <em>bar foo</em>.
-</p>
+</div>
-<p>
+<div>
 	You can also use <kbd>(</kbd> and <kbd>)</kbd> to signify precedence.
-</p>
+</div>
 
 {{ linkable_header("Reporting Torrents", "reporting") }}
-<p>
+<div>
 	If you find a torrent that breaks the rules, click the
 	<button type="button" class="btn btn-xs btn-danger">Report</button> button to the right
 	of the torrent's information page. Then, enter a reason for your report in the
 	dialog that opens, and hit the <button type="button" class="btn btn-xs btn-danger">
 	Report</button> button to confirm.
-</p>
+</div>
 
 {{ linkable_header("Styling Descriptions and Comments", "styling") }}
-<p>
+<div>
 	You can style your comments and your torrent's description using
 	<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown</a>.
 	This includes adding images or linking to external websites.
-</p>
+</div>
-<p>
+<div>
 	To link to an external site, use <kbd>[label](https://example.com)</kbd>
 	where the text in the <kbd>[]</kbd> square brackets is the shown text of your
 	link, and the URL in the <kbd>()</kbd> parentheses is the URL your link will
 	point to.
-</p>
+</div>
-<p>
+<div>
 	Embedding an image is similar. Use <kbd>![alt text](https://example.com/image.jpg)</kbd>
 	to have an image embedded in your comment or description. Note the <kbd>!</kbd>
 	exclamation mark at the beginning, denoting that this link is an image.
-</p>
+</div>
 {# <div class="content">
 	<h1>Help</h1>
 	<p><b>The search engine</b> is located at the top right, and it allows users to search through the torrent titles available on the site. Results matching either word A or B can be included by typing a vertical bar between them (|). Results matching a certain word can be excluded by prefixing that word with a hyphen-minus (-). Phrases can be matched by surrounding them with double-quotes (). Search results can be filtered by category, remake, trusted, and/or A+ status, and then narrowed down further by age and size ranges as well as excluding specific users. Sorting can be done in ascending or descending order by date, amount of seeders/leechers/downloads, size, or name. The search engine adapts to the current view and makes it possible to search for specific torrents in a specific subcategory from a specific user.</p>

nyaa/templates/layout.html

@@ -66,7 +66,7 @@
 					<span class="icon-bar"></span>
 					</button>
 					<a class="navbar-brand" href="{{ url_for('home') }}">{{ config.SITE_NAME }}</a>
-				</div>
+				</div><!--/.navbar-header -->
 				{% set search_username = (user.username + ("'" if user.username[-1] == 's' else "'s")) if user_page else None %}
 				{% set search_placeholder = 'Search {} torrents...'.format(search_username) if user_page else 'Search...' %}
 				<div id="navbar" class="navbar-collapse collapse">
@@ -238,15 +238,15 @@
 								<i class="fa fa-search fa-fw"></i> Search
 							</button>
 						</form>
-					</div>
+					</div><!--/.search-container -->
-	
+
 					{% if user_page %}
 					<form class="navbar-form navbar-right form" action="{{ url_for('view_user', user_name=user.username) }}" method="get">
 					{% else %}
 					<form class="navbar-form navbar-right form" action="{{ url_for('home') }}" method="get">
 					{% endif %}
 						<div class="input-group search-container hidden-xs hidden-sm">
-							<input type="text" class="form-control search-bar" name="q" placeholder="{{ search_placeholder }}" value="{{ search["term"] if search is defined else '' }}">
+							<input type="text" class="form-control search-bar" name="q" placeholder="{{ search_placeholder }}" value="{{ search['term'] if search is defined else '' }}" />
 					
 							<div class="input-group-btn nav-filter" id="navFilter-criteria">
 								<select class="selectpicker show-tick" title="Filter" data-width="120px" name="f">
@@ -289,8 +289,8 @@
 							</div>
 						</div>
 					</form>
-				</div>
+				</div><!--/.nav-collapse -->
-			</div><!--/.nav-collapse -->
+			</div><!--/.container -->
 		</nav>
 
 		<div class="container">

nyaa/templates/view.html

@@ -19,7 +19,7 @@
 		<div class="row">
 			<div class="col-md-1">Category:</div>
 			<div class="col-md-5">
-				<a href="{{ url_for("home", c=torrent.main_category.id_as_string) }}">{{ torrent.main_category.name }}</a> - <a href="{{ url_for("home", c=torrent.sub_category.id_as_string) }}">{{ torrent.sub_category.name }}</a>
+				<a href="{{ url_for('home', c=torrent.main_category.id_as_string) }}">{{ torrent.main_category.name }}</a> - <a href="{{ url_for('home', c=torrent.sub_category.id_as_string) }}">{{ torrent.sub_category.name }}</a>
 			</div>
 
 			<div class="col-md-1">Date:</div>
@@ -70,7 +70,7 @@
 			<div class="col-md-offset-6 col-md-1">Info hash:</div>
 			<div class="col-md-5"><kbd>{{ torrent.info_hash_as_hex }}</kbd></div>
 		</div>
-	</div>
+	</div><!--/.panel-body -->
 
 	<div class="panel-footer clearfix">
 		{% if torrent.has_torrent %}<a href="{{ url_for('download_torrent', torrent_id=torrent.id )}}"><i class="fa fa-download fa-fw"></i>Download Torrent</a> or {% endif %}<a href="{{ torrent.magnet_uri }}" class="card-footer-item"><i class="fa fa-magnet fa-fw"></i>Magnet</a>
@@ -78,7 +78,7 @@
 			Report
 		</button>
 	</div>
-</div>
+</div><!--/.panel -->
 
 <div class="panel panel-default">
 	<div markdown-text class="panel-body" id="torrent-description">
@@ -108,12 +108,12 @@
 				</ul>
 			</li>
 		{% else %}
-			<li><i class="fa fa-file"></i>{{ key }} <span class="file-size">({{ value | filesizeformat(True) }})</span></a></li>
+			<li><i class="fa fa-file"></i>{{ key }} <span class="file-size">({{ value | filesizeformat(True) }})</span></li>
 		{% endif %}
 		{% endfor %}
 		</ul>
 	</div>
-</div>
+</div><!--/.panel -->
 {% elif files %}
 <div class="panel panel-default">
 	<div class="panel-heading panel-heading-collapse">
@@ -177,7 +177,7 @@
 	{% endif %}
 </div>
 
-	<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel">
+<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel">
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
@@ -199,12 +199,13 @@
 			</div>
 		</div>
 	</div>
+</div>
 
 <script type="text/javascript">
 	// Focus the report text field once the modal is opened.
 	$('#reportModal').on('shown.bs.modal', function () {
 		$('#reason').focus();
-	})
+	});
 </script>
 
 {% endblock %}