Fixes the sidebar so that it doesn't use iframes.

3 years ago · 2cda8b0b7e
3 changed files with 71 additions and 43 deletions
--- a/templates/themes/categories/frames.html
+++ b/templates/themes/categories/frames.html
@ -6,14 +6,66 @@

 	<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}">
 	<style type="text/css">
-		iframe{border:none;margin:0;padding:0;height:99%;position:absolute}
-		iframe#sidebar{left:0;top:0;width:15%}
-		iframe#main{border-left:1px solid black;left:15%;top:0;width:85%}
+        .sidebar {
+            width: 200px;
+            border-right-color: gray;
+            border-right-style: solid;
+            border-width: 2px;
+            margin-right: 15px;
+        }
+
+        .content {
+            width: 100%;
+        }
+
+        body {
+            display: flex;
+            height: 100vh;
+        }
+
+        fieldset {
+            margin: 10px;
+        }
+
+        legend {
+            width: 100%;
+            margin-left: -15px;
+            background: #98E;
+            border: 1px solid white;
+            color: white;
+            font-weight: bold;
+            padding: 5px 5px
+        }
+
+        ul {
+            margin: 0;
+            padding: 0
+        }
+
+        li {
+            list-style: none;
+            padding: 0 4px;
+            margin: 0 4px
+        }
+
+        li a.system {
+            font-weight: bold;
+        }
+        
+		@media (max-width:768px) {
+			.sidebar { 
+				display: none;
+			}
+		
+			footer {
+				display: none;
+			}
+		}
 	</style>
 	<title>{{ settings.title }}</title>
 </head>
 <body>
-	<iframe src="{{ settings.file_sidebar }}" id="sidebar" name="sidebar"></iframe>
-	<iframe src="{{ settings.file_news }}" id="main" name="main"></iframe>
+	{{ include(settings.file_sidebar) }}
+	{{ include(settings.file_news) }}
 </body>
 </html>
--- a/templates/themes/categories/news.html
+++ b/templates/themes/categories/news.html
@ -1,18 +1,11 @@
 {% filter remove_whitespace %}
-<!doctype html>
-<html>
-<head>
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-	<title>{{ settings.title }}</title>
-	<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}"/>
-</head>
-<body>
-	{{ boardlist.top }}
+{{ boardlist.top }}
+<div class="content">
 	<header>
 		<h1>{{ settings.title }}</h1>
 		<div class="subtitle">{{ settings.subtitle }}</div>
 	</header>
-	
+
 	<div class="ban">
 		{% if not news %}
 			<p style="text-align:center" class="unimportant">{% trans %}(No news to show.){% endtrans %}</p>
@ -30,13 +23,12 @@
 			{% endfor %}
 		{% endif %}
 	</div>
-	
-        <footer>
-                <p class="unimportant" style="margin-top:20px;text-align:center;">- Tinyboard + 
-                        <a href="https://engine.vichan.net/">vichan</a> {{ config.version }} -
-                <br>Tinyboard Copyright &copy; 2010-2014 Tinyboard Development Group    
-                <br><a href="https://engine.vichan.net/">vichan</a> Copyright &copy; 2012-2016 vichan-devel</p>
-        </footer>
-</body>
-</html>
+		
+	<footer>
+	        <p class="unimportant" style="margin-top:20px;text-align:center;">- Tinyboard + 
+	                <a href="https://engine.vichan.net/">vichan</a> {{ config.version }} -
+	        <br>Tinyboard Copyright &copy; 2010-2014 Tinyboard Development Group    
+	        <br><a href="https://engine.vichan.net/">vichan</a> Copyright &copy; 2012-2016 vichan-devel</p>
+	</footer>
+</div>
 {% endfilter %}
--- a/templates/themes/categories/sidebar.html
+++ b/templates/themes/categories/sidebar.html
@ -1,21 +1,5 @@
 {% filter remove_whitespace %}
-<!doctype html>
-<html>
-<head>
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<title>{{ settings.title }}</title>
-	<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}"/>
-	<style type="text/css">
-		fieldset{margin:10px 0}
-		legend{width:100%;margin-left:-15px;background:#98E;border:1px solid white;color:white;font-weight:bold;padding:5px 5px}
-		ul{margin:0;padding:0}
-		li{list-style:none;padding:0 4px;margin: 0 4px}
-		li a.system{font-weight:bold}
-	</style>
-	<base target="main"/>
-</head>
-<body>
+<div class="sidebar">
 	<fieldset>
 		<legend>{{ settings.title }}</legend>
 		<ul>
@ -50,6 +34,6 @@
 			{% endfor %}
 		</fieldset>
 	{% endfor %}
-</body>
-</html>
+</div>
+
 {% endfilter %}