tweaking distribusi a bit further, added a mobile stylesheet, foldername as h1 title, listing folders at the top

distribusi/distribusi.py

@@ -51,9 +51,9 @@ def div(mime, tag, *values):
 	id_name = values[0].split('.')[0].replace(' ', '_')
 
 	if 'image' in mime:
-		html = '<div class="{}">{}<br><span class="filename">{}</span></div>'
+		html = '<div class="{}">{}<span class="filename">{}</span></div>'
 	elif 'pdf' in mime:
-		html = '<div class="{}">{}<br><class="filename">{}</span></div>'
+		html = '<div class="{}">{}<span class="filename">{}</span></div>'
 	else:
 		html = '<div class="{}">{}</div>'
 
@@ -114,17 +114,21 @@ def distribusify(args, directory):  # noqa
 			position = '../' * root.count('/')
 			stylesheet = '<link type="text/css" rel="stylesheet" href="{}stylesheet.css" />'.format(position)
 		else:
-			stylesheet = '<link type="text/css" rel="stylesheet" href="stylesheet.css" />'.format(directory)
+			stylesheet = '<link type="text/css" rel="stylesheet" href="stylesheet.css" />'
 		
 		for name in dirs:
 			a = "<a href='{}' class='dir'>{}/</a>".replace('{}', name)
-			html.append(div('dir', a, 'folder'))
+			html.insert(0, div('dir', a, 'folder'))
 
 		with open(os.path.join(root, 'index.html'), 'w') as f:
 			if not args.no_template:
 				header = html_head(stylesheet)
 				f.write(header)
 
+			h1 = '<h1 class="foldername">{}</h1>'.format(''.join(root))
+			print('path:', h1)
+			html.insert(0, h1)
+
 			for line in html:
 				f.write(line+'\n')
 

distribusi/page_template.py

@@ -19,13 +19,22 @@ html_footer = """
 styles = """
 body{
 	position: absolute;
-	top:20px;
+	top:0;
+	left:0;
+	margin:3.5em 1em 1em 1em;
 }
-
 .stylesheet{
 	display: none;
 }
 
+h1.foldername{
+	margin: 0 0 1em 1.5em;
+}
+
+a{
+	text-decoration:none;
+}
+
 div{
 	width: 640px;
 	float:left;
@@ -50,14 +59,16 @@ a.text::before{
 a.back::before{
 	content:"⮪";
 	font-size:18px;
-	padding-right: 1em;
+	padding-right: 1.25em;
 	text-decoration:none;
 }
 a.back{
 	position: fixed;
+	width:100%;
+	background-color:white;
 	top:0;
 	left:0;
-	padding:0.5em;
+	padding:1em 1.5em;
 }
 
 .image{
@@ -69,4 +80,21 @@ a.back{
 video {
 	width:640px;
 }
+.filename{
+	display:block;
+	font-size:small;
+	margin-top:0.5em;
+}
+
+@media only screen and (max-width: 600px) {
+	body{
+		width:calc(100% - 2em);
+	}
+	div {
+		width:calc(100% - 2em);
+	}
+	div a img{
+		width:100%;
+	}
+}
 """