From 67824d617dc12c3df65ebcdea1b76dd8c8f5ce4b Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Tue, 16 Jul 2019 22:07:10 +0200 Subject: [PATCH] Some layout fixes --- res/static/script/Toolbar.js | 28 ++--- res/static/style/layout.css | 24 ++-- res/static/style/viewer.css | 3 +- res/template/account/user_home.html | 4 +- res/template/admin.html | 187 +++++++++++++++------------- res/template/apidoc.html | 2 +- res/template/file_viewer.html | 30 ++--- res/template/home.html | 16 ++- webcontroller/user_style.go | 30 ++++- 9 files changed, 180 insertions(+), 144 deletions(-) diff --git a/res/static/script/Toolbar.js b/res/static/script/Toolbar.js index e84c945..32140af 100644 --- a/res/static/script/Toolbar.js +++ b/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 - } } } } diff --git a/res/static/style/layout.css b/res/static/style/layout.css index c8b1591..c50b859 100644 --- a/res/static/style/layout.css +++ b/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]{ diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css index d8256ac..3f6f444 100644 --- a/res/static/style/viewer.css +++ b/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; diff --git a/res/template/account/user_home.html b/res/template/account/user_home.html index 9771c01..292e301 100644 --- a/res/template/account/user_home.html +++ b/res/template/account/user_home.html @@ -14,8 +14,8 @@

Actions

Your most recently uploaded files:

diff --git a/res/template/admin.html b/res/template/admin.html index f9a30cb..d68d562 100644 --- a/res/template/admin.html +++ b/res/template/admin.html @@ -13,6 +13,14 @@ {{if $isAdmin.IsAdmin}}

Bandwidth and views

+
+ + + + + + +
@@ -20,98 +28,103 @@ {{else}} diff --git a/res/template/apidoc.html b/res/template/apidoc.html index a4ec1f3..f32473f 100644 --- a/res/template/apidoc.html +++ b/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; diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html index e244321..55802db 100644 --- a/res/template/file_viewer.html +++ b/res/template/file_viewer.html @@ -73,37 +73,29 @@ @@ -157,7 +149,7 @@ diff --git a/res/template/home.html b/res/template/home.html index db72fbc..8ef094f 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -48,12 +48,16 @@

Style selector

-
-
-
-
- - (Inspired by Canta GTK)
+
+
+
+
+
+ + (Inspired by Canta GTK)
+ +

Questions and Answers

diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go index 8961628..fd00e67 100644 --- a/webcontroller/user_style.go +++ b/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, +}