restore advertisement

res/include/img/spinner.svg

@@ -7,7 +7,7 @@
 	viewBox="0 0 80 80"
 	xml:space="preserve">
 	<path
-		fill="#D43B11"
+		fill="#{{.Style.HighlightColor.RGB}}"
 		d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
 		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
 		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1

res/include/script/Viewer.js

@@ -14,7 +14,7 @@ var Viewer = {
 		}
 
 		// On small screens the toolbar takes too much space, so it collapses automatically
-		if($("#filepreview").width() > 500 && !Toolbar.visible){
+		if($("#filepreview").width() > 600 && !Toolbar.visible){
 			Toolbar.toggle();
 		}
 
@@ -36,6 +36,8 @@ var Viewer = {
 			ListNavigator.init(data.data);
 		}
 
+		renderSponsors();
+
 		this.initialized = true;
 	},
 	setFile: function(file){
@@ -104,3 +106,42 @@ document.addEventListener("keydown", function(event){
 		break;
 	}
 });
+
+
+window.addEventListener("resize", renderSponsors);
+function renderSponsors() {
+	var scale = 1;
+	var scaleWidth = 1;
+	var scaleHeight = 1;
+	var minWidth = 728;
+	var minHeight = 800;
+
+	if (window.innerWidth < minWidth) {
+		scaleWidth = window.innerWidth/minWidth;
+	}
+	if (window.innerHeight < minHeight) {
+		scaleHeight = window.innerHeight/minHeight;
+	}
+	scale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight;
+
+	console.log(scale, scaleWidth, scaleHeight);
+
+	// Because of the scale transformation the automatic margins don't work
+	// anymore. So we have to maunally calculate the margin. Where we take the
+	// width of the viewport - the width of the ad to calculate the amount of
+	// pixels around the ad. We multiply the ad size by the scale we calcualted
+	// to account for the smaller size.
+	var offset = (window.innerWidth - (minWidth*scale)) / 2
+	if (offset < 0) {
+		offset = 0
+	}
+	document.querySelector(".sponsors > iframe").style.marginLeft = offset+"px";
+
+	if (scale == 1) {
+		document.querySelector(".sponsors > iframe").style.transform = "none";
+		document.querySelector(".sponsors").style.height = "90px";
+	} else {
+		document.querySelector(".sponsors > iframe").style.transform = "scale("+scale+")";
+		document.querySelector(".sponsors").style.height = (scale*90)+"px";
+	}
+}

res/include/style/viewer.css

@@ -24,6 +24,7 @@
 	text-align: left;
 	padding: 8px;
 	z-index: 10;
+	box-shadow: none;
 }
 
 /* Headerbar components */
@@ -68,7 +69,7 @@
 	display: none; /* Becomes visible if the page is a list */
 	width: 100%;
 	background-color: var(--layer_1_color);
-	box-shadow: 0 0 8px var(--shadow_color);
+	/* box-shadow: 0 0 8px var(--shadow_color); */
 	text-align: center;
 	line-height: 1em;
 	overflow-x: scroll;
@@ -105,6 +106,19 @@
 	vertical-align: middle;
 	transition: left 0.5s;
 	overflow: hidden;
+	box-shadow: inset 2px 2px 8px var(--shadow_color);
+}
+
+/* Sponsors (row 4) */
+.file_viewer > .sponsors {
+	background-color: var(--layer_1_color);
+	font-size: 0;
+	line-height: 0;
+}
+.file_viewer > .sponsors > iframe {
+	display: block;
+	margin: auto;
+	transform-origin: 0 0;
 }
 
 /* Toolbars */
@@ -120,7 +134,6 @@
 	top: 0;
 	padding: 0;
 	text-align: left;
-	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
 	transition: left 0.5s;
 }
 .file_viewer > .file_viewer_window > .file_viewer_sharebar{
@@ -133,7 +146,7 @@
 	overflow-x: hidden;
 	float: left;
 	background-color: var(--layer_1_color);
-	box-shadow: 2px 2px 8px var(--shadow_color);
+	/* box-shadow: 2px 2px 8px var(--shadow_color); */
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
@@ -318,7 +331,7 @@ table > tbody > tr {border: none !important;}
 .bytecounter{
 	color: var(--text_color);
 	font-size: 16px;
-	font-family: 'Ubuntu', sans-serif;
+	font-family: monospace, monospace;
 	line-height: 20px;
 	text-align: right;
 	display: inline-block;