Some layout fixes

res/static/script/Toolbar.js

@@ -249,7 +249,7 @@ var DetailsWindow = {
 	updateGraph: function(fileID) {
 		var that = this;
 		console.log("updating graph "+fileID);
-		$.get(apiEndpoint+"/file/" + fileID + "/timeseries?interval=60", function(response){
+		$.get(apiEndpoint+"/file/" + fileID + "/timeseries?interval=60?days=14", function(response){
 			console.log(response);
 			if (response.success) {
 				that.graph.data.labels = response.labels;
@@ -262,8 +262,13 @@ var DetailsWindow = {
 	renderGraph: function() {
 		console.log("rendering graph");
 		Chart.defaults.global.defaultFontColor = "#b3b3b3";
-		Chart.defaults.global.defaultFontSize = 16;
+		Chart.defaults.global.defaultFontSize = 15;
 		Chart.defaults.global.defaultFontFamily = "Ubuntu";
+		Chart.defaults.global.aspectRatio = 2.5;
+		Chart.defaults.global.elements.point.radius = 0;
+		Chart.defaults.global.tooltips.mode = "index";
+		Chart.defaults.global.tooltips.axis = "x";
+		Chart.defaults.global.tooltips.intersect = false;
 		this.graph = new Chart(
 			document.getElementById('bandwidth_chart'),
 			{
@@ -274,27 +279,20 @@ var DetailsWindow = {
 							label: "Downloads",
 							backgroundColor: "rgba(100, 255, 100, .1)",
 							borderColor: "rgba(100, 255, 100, .8)",
-							borderWidth: 2,
+							borderWidth: 1,
 							fill: true,
 							yAxisID: "y_bandwidth",
 						}, {
 							label: "Views",
 							backgroundColor: "rgba(128, 128, 255, .1)",
 							borderColor: "rgba(128, 128, 255, .8)",
-							borderWidth: 2,
+							borderWidth: 1,
 							fill: true,
 							yAxisID: "y_views",
 						}
 					]
 				},
 				options: {
-					stacked: false,
-					aspectRatio: 2.5,
-					tooltips: {
-						mode: "index",
-						intersect: false,
-						axis: "x"
-					},
 					scales: {
 						yAxes: [
 							{
@@ -325,16 +323,14 @@ var DetailsWindow = {
 						],
 						xAxes: [
 							{
+								ticks: {
+									maxRotation: 20
+								},
 								gridLines: {
 									display: false
 								}
 							}
 						]
-					},
-					elements: {
-						point: {
-							radius: 0
-						}
 					}
 				}
 			}

res/static/style/layout.css

@@ -84,7 +84,7 @@ body{
 	min-width: 300px;
 	width: 100%;
 	height: auto;
-	padding: 0 10px 0 10px;
+	padding: 0;
 	margin: 30px 0 30px 0;
 	box-sizing: border-box;
 	background-color: var(--body_color);
@@ -150,7 +150,7 @@ body{
 	position: relative;
 	width: auto;
 	height: auto;
-	margin: 0 -10px 0 -10px;
+	margin: 0;
 	box-sizing: border-box;
 	overflow: hidden;
 	text-align: center;
@@ -193,7 +193,11 @@ body > .highlight_red {
 
 /* Common elements */
 
-h1, h2, h3, h4, h5, h6 {line-height: 1em;}
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1em;
+	margin-left: 10px;
+	margin-right: 10px;
+}
 h1{font-size: 2em;    font-family: "Lato Thin";}
 h2{font-size: 1.75em; font-family: "Lato Thin";}
 h3{font-size: 1.5em;  font-family: "Lato Thin";}
@@ -202,11 +206,15 @@ h5{font-size: 1em;    font-family: "Lato";}
 h6{font-size: .75em;  font-family: "Lato";}
 h3, h2{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
 
+p, .indent {
+	margin: 10px;
+}
+
 hr{
 	height: 8px;
 	border: none;
 	background: linear-gradient(var(--accent_color_dark), var(--accent_color_light));
-	margin: 16px -8px 16px -8px;
+	margin: 16px 0 16px 0;
 }
 
 ::-webkit-scrollbar{
@@ -339,7 +347,7 @@ select{
 	margin: 2px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
 	padding: 6px 8px 6px 8px;
-	box-shadow: 2px 2px 4px var(--shadow_color);
+	box-shadow: 2px 2px 6px -2px var(--shadow_color);
 	font-weight: bold;
 	font-size: 0.85em;
 	overflow: hidden;
@@ -367,7 +375,7 @@ select:focus{
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);
 	text-decoration: none;
-	box-shadow: var(--highlight_border), 2px 2px 4px var(--shadow_color);
+	box-shadow: var(--highlight_border), 2px 2px 6px -2px var(--shadow_color);
 }
 button:active,
 .button:active,
@@ -403,7 +411,7 @@ input[type="number"]{
 	box-sizing: border-box;
 	border-radius: 4px;
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 2px 2px 4px var(--shadow_color);
+	box-shadow: inset 2px 2px 6px -2px var(--shadow_color);
 	padding: 3px 5px;
 	color: var(--input_text_color);
 	height: 26px;
@@ -423,7 +431,7 @@ input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus{
-	box-shadow: var(--highlight_border), inset 3px 3px 6px var(--shadow_color);
+	box-shadow: var(--highlight_border), inset 3px 3px 6px -2px var(--shadow_color);
 }
 
 input[type=file]{

res/static/style/viewer.css

@@ -205,11 +205,10 @@ body{
 	top: 10%;
 	left: 50%;
 	transform: translate(-50%, -10%);
-	padding: 0 10px;
+	padding: 0;
 	box-sizing: border-box;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
-	overflow: hidden;
 }
 .popup > .highlight_light {
 	font-size: 1.2em;

res/template/account/user_home.html

@@ -14,8 +14,8 @@
 
 			<h2>Actions</h2>
 			<ul>
-				<li><a href="/user/change_password">Change my password</a></li>
+				<li><a href="/user/change_password" class="button">Change my password</a></li>
-				<li><a href="/logout">Log out</a></li>
+				<li><a href="/logout" class="button">Log out</a></li>
 			</ul>
 
 			<h2>Your most recently uploaded files:</h2>

res/template/admin.html

@@ -13,6 +13,14 @@
 			{{if $isAdmin.IsAdmin}}
 
 			<h3>Bandwidth and views</h3>
+			<div class="highlight_dark">
+				<button onclick="days = 7; interval = 60; setData();">Week</button>
+				<button onclick="days = 14; interval = 60; setData();">Two Weeks</button>
+				<button onclick="days = 21; interval = 60; setData();">Three Weeks</button>
+				<button onclick="days = 30; interval = 1440; setData();">Month</button>
+				<button onclick="days = 60; interval = 1440; setData();">Two Months</button>
+				<button onclick="days = 91; interval = 1440; setData();">Quarter</button>
+			</div>
 			<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
 				<canvas id="bandwidth_chart"></canvas>
 			</div>
@@ -20,98 +28,103 @@
 			<script src="/res/script/jquery.js"></script>
 			<script src="/res/misc/chartjs/Chart.min.js"></script>
 			<script>
-			$.get(apiEndpoint+"/admin/files/timeseries/14?interval=60", function(response){
+			Chart.defaults.global.defaultFontColor = "#b3b3b3";
-				console.log(response);
+			Chart.defaults.global.defaultFontSize = 15;
-				if (response.success) {
+			Chart.defaults.global.defaultFontFamily = "Ubuntu";
-					var ctx = document.getElementById('bandwidth_chart');
+			Chart.defaults.global.aspectRatio = 2.5;
-					Chart.defaults.global.defaultFontColor = "#b3b3b3";
+			Chart.defaults.global.elements.point.radius = 0;
-					Chart.defaults.global.defaultFontSize = 16;
+			Chart.defaults.global.tooltips.mode = "index";
-					Chart.defaults.global.defaultFontFamily = "Ubuntu";
+			Chart.defaults.global.tooltips.axis = "x";
-					new Chart(
+			Chart.defaults.global.tooltips.intersect = false;
-						document.getElementById('bandwidth_chart'),
+
-						{
+			var days = 7;
-							type: 'line',
+			var interval = 60;
-							data: {
+			var graph = new Chart(
-								labels: response.labels,
+				document.getElementById('bandwidth_chart'),
-								datasets: [
+				{
-									{
+					type: 'line',
-										label: "Bandwidth",
+					data: {
-										backgroundColor: "rgba(100, 255, 100, .1)",
+						datasets: [
-										borderColor: "rgba(100, 255, 100, .8)",
+							{
-										borderWidth: 2,
+								label: "Bandwidth",
-										fill: true,
+								backgroundColor: "rgba(100, 255, 100, .1)",
-										yAxisID: "y_bandwidth",
+								borderColor: "rgba(100, 255, 100, .8)",
-										data: response.downloads
+								borderWidth: 1,
-									}, {
+								fill: true,
-										label: "Views",
+								yAxisID: "y_bandwidth"
-										backgroundColor: "rgba(128, 128, 255, .2)",
+							}, {
-										borderColor: "rgba(128, 128, 255, .8)",
+								label: "Views",
-										borderWidth: 2,
+								backgroundColor: "rgba(128, 128, 255, .2)",
-										fill: true,
+								borderColor: "rgba(128, 128, 255, .8)",
-										yAxisID: "y_views",
+								borderWidth: 1,
-										data: response.views
+								fill: true,
+								yAxisID: "y_views"
+							}
+						]
+					},
+					options: {
+						scales: {
+							yAxes: [
+								{
+									type: "linear",
+									display: true,
+									position: "left",
+									id: "y_bandwidth",
+									scaleLabel: {
+										display: true,
+										labelString: "Bandwidth"
+									},
+									ticks: {
+										callback: function(value, index, values) {
+											return Math.round((value*8/1e6)/(interval*60)) + " Mbps";
+										}
+									},
+									gridLines: {
+										color: "rgba(100, 255, 100, .1)"
 									}
-								]
+								}, {
-							},
+									type: "linear",
-							options: {
+									display: true,
-								stacked: false,
+									position: "right",
-								aspectRatio: 3,
+									id: "y_views",
-								tooltips: {
+									scaleLabel: {
-									mode: "index",
+										display: true,
-									intersect: false,
+										labelString: "Views"
-									axis: "x"
+									},
-								},
+									gridLines: {
-								scales: {
+										color: "rgba(128, 128, 255, .2)"
-									yAxes: [
-										{
-											type: "linear",
-											display: true,
-											position: "left",
-											id: "y_bandwidth",
-											scaleLabel: {
-												display: true,
-												labelString: "Bandwidth"
-											},
-											ticks: {
-												callback: function(value, index, values) {
-													return (value/1e9) + " GB";
-												}
-											},
-											gridLines: {
-												color: "rgba(100, 255, 100, .1)"
-											}
-										}, {
-											type: "linear",
-											display: true,
-											position: "right",
-											id: "y_views",
-											scaleLabel: {
-												display: true,
-												labelString: "Views"
-											},
-											gridLines: {
-												color: "rgba(128, 128, 255, .2)"
-											}
-										}
-									],
-									xAxes: [
-										{
-											gridLines: {
-												display: false
-											}
-										}
-									]
-								},
-								elements: {
-									point: {
-										radius: 0
 									}
 								}
-							}
+							],
+							xAxes: [
+								{
+									ticks: {
+										maxRotation: 20
+									},
+									gridLines: {
+										display: false
+									}
+								}
+							]
 						}
-					);
+					}
 				}
-			});
+			);
+
+			function setData(){
+				this.class = "button_highlight";
+				$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){
+					console.log(response);
+					if (response.success) {
+						window.graph.data.labels = response.labels;
+						window.graph.data.datasets[0].data = response.downloads;
+						window.graph.data.datasets[1].data = response.views;
+						window.graph.update();
+					}
+				});
+			}
+
+			setData();
 			</script>
 
 			{{else}}

res/template/apidoc.html

@@ -7,7 +7,7 @@
 			.api_doc_details{
 				border-top: 1px solid;
 				border-bottom: 1px solid;
-				margin: 15px -8px 15px -8px;
+				margin: 15px 0 15px 0;
 			}
 			.api_doc_details > summary {
 				padding: 2px;

res/template/file_viewer.html

@@ -73,37 +73,29 @@
 
 		<div id="sharebar" class="sidebar">
 			Share on:<br/>
+			<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
+				<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
+				<br/>E-Mail
+			</button>
 			<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
 				<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
 				<br/>Reddit
 			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
-				<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
-				<br/>Voat
-			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
-				<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
-				<br/>Facebook
-			</button>
 			<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
 				<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
 				<br/>Twitter
 			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('https://plus.google.com/share?url=' + window.location.href);">
+			<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
-				<img src="/res/img/social_googleplus.png" alt="Share on Google Plus" style="width:40px; height: 40px;"/>
+				<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
-				<br/>Google+
+				<br/>Facebook
 			</button>
 			<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
 				<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
 				<br/>Tumblr
 			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('http://www.stumbleupon.com/submit?url=' + window.location.href);">
+			<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
-				<img src="/res/img/social_stumbleupon.png" alt="Share on StumbleUpon" style="width:40px; height: 40px;"/>
+				<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
-				<br/>StumbleUpon
+				<br/>Voat
-			</button>
-			<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
-				<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
-				<br/>E-Mail
 			</button>
 		</div>
 
@@ -157,7 +149,7 @@
 		</div>
 		<div id="captcha_popup" class="popup captcha_popup border_bottom">
 			<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div>
-			<div id="captcha_popup_content"></div>
+			<div id="captcha_popup_content" class="content_area"></div>
 			<br/>
 			<div id="captcha_popup_captcha" style="text-align: center;"></div>
 		</div>

res/template/home.html

@@ -48,12 +48,16 @@
 			</p>
 
 			<h2>Style selector</h2>
-			<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
+			<div class="indent">
-			<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
+				<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
-			<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
+				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
-			<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
+				<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
-			<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
+				<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
-			(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
+				<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
+				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
+				<!--<input type="radio" id="style_arc"            name="style"><label for="style_arc">Arc Style</label>
+				(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>-->
+			</div>
 
 			<h2>Questions and Answers</h2>
 

webcontroller/user_style.go

@@ -23,6 +23,8 @@ func userStyle(r *http.Request) (style template.CSS) {
 			selectedStyle = hackerStyle
 		case "canta":
 			selectedStyle = cantaPixeldrainStyle
+		case "arc":
+			selectedStyle = arcPixeldrainStyle
 		case "default":
 			fallthrough // use default case
 		default:
@@ -197,10 +199,10 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
 
 var solarizedDarkStyle = pixeldrainStyleSheet{
 	TextColor:                hsl{0, 0, .75},
-	InputColor:               hsl{192, .95, .30},
+	InputColor:               hsl{192, .95, .25},
 	InputTextColor:           hsl{0, 0, 1},
 	HighlightColor:           hsl{145, .63, .42},
-	HighlightTextColor:       hsl{0, 0, 1},
+	HighlightTextColor:       hsl{0, 0, 0},
 	DangerColor:              hsl{343, .63, .42},
 	FileBackgroundColor:      hsl{192, .87, .05},
 	ScrollbarForegroundColor: hsl{192, .95, .30},
@@ -219,7 +221,7 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
 
 var maroonStyle = pixeldrainStyleSheet{
 	TextColor:                hsl{0, 0, .7},
-	InputColor:               hsl{0, .75, .2},
+	InputColor:               hsl{0, .75, .25},
 	InputTextColor:           hsl{0, 0, 1},
 	HighlightColor:           hsl{0, 1, .4},
 	HighlightTextColor:       hsl{0, 0, 1},
@@ -282,3 +284,25 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
 	ShadowSpread:    10,
 	ShadowIntensity: 0,
 }
+
+var arcPixeldrainStyle = pixeldrainStyleSheet{
+	TextColor:                hsl{0, 0, .9},
+	InputColor:               hsl{219, .1, .27},
+	InputTextColor:           hsl{0, 0, 1},
+	HighlightColor:           hsl{212, .54, .58},
+	HighlightTextColor:       hsl{0, 0, 1},
+	DangerColor:              hsl{357, .41, .55},
+	FileBackgroundColor:      hsl{219, .1, .2},
+	ScrollbarForegroundColor: hsl{150, .02, .78},
+	ScrollbarBackgroundColor: hsl{170, .05, .26},
+
+	BackgroundColor:   hsl{0, 0, 0},
+	BodyColor:         hsl{223, .08, .33},
+	AccentColorDark:   hsl{219, .1, .27},
+	AccentColorMedium: hsl{223, .09, .3},
+	AccentColorLight:  hsl{223, .08, .33},
+
+	ShadowColor:     hsl{0, 0, 0},
+	ShadowSpread:    10,
+	ShadowIntensity: 0,
+}