Merge pull request #186 from sharkykh/collapsible-file-tree

Basic collapsible file tree

nyaa/static/css/main.css

@@ -286,3 +286,46 @@ a.text-purple:hover, a.text-purple:active, a.text-purple:focus { color: #a760e0;
 	margin: 0 auto;
 	text-align: center;
 }
+
+/* Torrent file list */
+.torrent-file-list {
+	padding: 15px;
+}
+
+.torrent-file-list ul {
+	padding: 5px 20px 0px 20px;
+	list-style: none;
+	display: none;
+}
+
+.torrent-file-list > ul {
+	display: block; /* First level always visible */
+	padding: 0;
+	margin: 0;
+}
+
+.torrent-file-list ul[data-show] {
+	/* Used to show first level's items based on amount */
+	display: block;
+}
+
+.torrent-file-list li:not(:last-of-type) {
+	margin-bottom: 5px;
+}
+
+.torrent-file-list i.fa {
+	padding-right: 5px;
+}
+
+.torrent-file-list i.fa-folder-open {
+	padding-right: 3px;
+}
+
+.torrent-file-list a.folder {
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.torrent-file-list .file-size {
+	font-weight: bold;
+}

nyaa/static/js/main.js

@@ -43,6 +43,7 @@ $(document).ready(function() {
 		}
 	});
 
+	// Drag & Drop zone for upload page
 	$('body').on('dragenter', function(event) {
 		event.preventDefault();
 		dropZone.css({ 'visibility': 'visible', 'opacity': 1 });
@@ -63,6 +64,13 @@ $(document).ready(function() {
 		$('#torrent_file')[0].files = files;
 		$(this).css({ 'visibility': 'hidden', 'opacity': 0 });
 	});
+	
+	// Collapsible file lists
+	$('.torrent-file-list a.folder').click(function(e) {
+		e.preventDefault();
+		$(this).blur().children('i').toggleClass('fa-folder-open fa-folder');
+		$(this).next().stop().slideToggle(250);
+	});
 });
 
 function _format_time_difference(seconds) {

nyaa/templates/layout.html

@@ -28,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=11" rel="stylesheet">
+		<link href="/static/css/main.css?v=12" 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>
@@ -36,7 +36,7 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.27.0/commonmark.min.js" integrity="sha256-10JreQhQG80GtKuzsioj0K46DlaB/CK/EG+NuG0q97E=" crossorigin="anonymous"></script>
 		<!-- Modified to not apply border-radius to selectpickers and stuff so our navbar looks cool -->
 		<script src="/static/js/bootstrap-select.js"></script>
-		<script src="/static/js/main.js?v=1"></script>
+		<script src="/static/js/main.js?v=2"></script>
 
 		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 		<!--[if lt IE 9]>

nyaa/templates/view.html

@@ -92,33 +92,20 @@
 		
 	</div>
 
-	<div class="panel-collapse collapse" id="collapseFileList">
+	<div class="torrent-file-list panel-collapse collapse" id="collapseFileList">
-		<table class="table table-bordered table-hover table-striped">
+		<ul>
-			<thead>
+		{% for key, value in files.items() recursive -%}
-				<tr>
+		{% if value is iterable %}
-					<th style="width:auto;">Path</th>
+			<li>
-					<th style="width:auto;">Size</th>
+				<a href="" class="folder"><i class="fa fa-folder-open"></i>{{ key }}</a>
-				</tr>
+				<ul{% if not loop.depth0 and value.items()|length <= 20 %} data-show="yes"{% endif %}>{{ '\n' + loop(value.items()) }}
-			</thead>
+				</ul>
-			<tbody>
+			</li>
-				{%- for key, value in files.items() recursive %}
+		{% else %}
-				{%- if value is iterable %}
+			<li><i class="fa fa-file"></i>{{ key }} <span class="file-size">({{ value | filesizeformat(True) }})</span></a></li>
-				<tr>
+		{% endif %}
-					<td colspan="2" {% if loop.depth0 is greaterthan 0 %}style="padding-left: {{ loop.depth0 * 20 }}px"{% endif %}>
+		{% endfor %}
-						<i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;<b>{{ key }}</b>
+		</ul>
-					</td>
-				</tr>
-				{{ loop(value.items()) }}
-				{%- else %}
-				<tr>
-					<td{% if loop.depth0 is greaterthan 0 %} style="padding-left: {{ loop.depth0 * 20 }}px"{% endif %}>
-						<i class="glyphicon glyphicon-file"></i>&nbsp;{{ key }}</td>
-					<td class="col-md-2">{{ value | filesizeformat(True) }}</td>
-				</tr>
-				{%- endif %}
-				{%- endfor %}
-			</tbody>
-		</table>
 	</div>
 </div>
 {% elif files %}