pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some layout fixes

Browse Source
This commit is contained in:
Wim Brand
2019-07-16 22:07:10 +02:00
parent 0379027160
commit 67824d617d
9 changed files with 180 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
res/static/script/Toolbar.js
View File

@@ -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
}
}
}
}

24
res/static/style/layout.css
View File

@@ -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]{

3
res/static/style/viewer.css
View File

@@ -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;

4
res/template/account/user_home.html
View File

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

65
res/template/admin.html
View File

@@ -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,47 +28,41 @@
<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){
console.log(response);
if (response.success) {
var ctx = document.getElementById('bandwidth_chart');
Chart.defaults.global.defaultFontColor = "#b3b3b3";
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontSize = 15;
Chart.defaults.global.defaultFontFamily = "Ubuntu";
new Chart(
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;
var days = 7;
var interval = 60;
var graph = new Chart(
document.getElementById('bandwidth_chart'),
{
type: 'line',
data: {
labels: response.labels,
datasets: [
{
label: "Bandwidth",
backgroundColor: "rgba(100, 255, 100, .1)",
borderColor: "rgba(100, 255, 100, .8)",
borderWidth: 2,
borderWidth: 1,
fill: true,
yAxisID: "y_bandwidth",
data: response.downloads
yAxisID: "y_bandwidth"
}, {
label: "Views",
backgroundColor: "rgba(128, 128, 255, .2)",
borderColor: "rgba(128, 128, 255, .8)",
borderWidth: 2,
borderWidth: 1,
fill: true,
yAxisID: "y_views",
data: response.views
yAxisID: "y_views"
}
]
},
options: {
stacked: false,
aspectRatio: 3,
tooltips: {
mode: "index",
intersect: false,
axis: "x"
},
scales: {
yAxes: [
{
@@ -74,7 +76,7 @@
},
ticks: {
callback: function(value, index, values) {
return (value/1e9) + " GB";
return Math.round((value*8/1e6)/(interval*60)) + " Mbps";
}
},
gridLines: {
@@ -96,22 +98,33 @@
],
xAxes: [
{
ticks: {
maxRotation: 20
},
gridLines: {
display: false
}
}
]
},
elements: {
point: {
radius: 0
}
}
}
}
);
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}}

2
res/template/apidoc.html
View File

@@ -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;

30
res/template/file_viewer.html
View File

@@ -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);">
<img src="/res/img/social_googleplus.png" alt="Share on Google Plus" style="width:40px; height: 40px;"/>
<br/>Google+
<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('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);">
<img src="/res/img/social_stumbleupon.png" alt="Share on StumbleUpon" style="width:40px; height: 40px;"/>
<br/>StumbleUpon
</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 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>
</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>

4
res/template/home.html
View File

@@ -48,12 +48,16 @@
</p>
<h2>Style selector</h2>
<div class="indent">
<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain 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_maroon" name="style"><label for="style_maroon">Maroon Style</label><br/>
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label><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>

30
webcontroller/user_style.go
View File

@@ -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,
}