Add UI for viewing storage space limit

This commit is contained in:
2021-09-07 17:09:52 +02:00
parent ebc7bc34e4
commit f4a9d0595a
6 changed files with 112 additions and 23 deletions

View File

@@ -3,7 +3,24 @@
<head>
{{template "meta_tags" .User.Username}}
{{template "user_style" .}}
<script>var apiEndpoint = '{{.APIEndpoint}}';</script>
<script>
var apiEndpoint = '{{.APIEndpoint}}';
window.user = {{.User}};
</script>
<style>
.progress_bar_outer {
background-color: var(--layer_1_color);
width: 100%;
height: 3px;
}
.progress_bar_inner {
background-color: var(--highlight_color);
height: 100%;
width: 0;
transition: width 1s;
}
</style>
</head>
<body>
@@ -23,29 +40,45 @@
(<a href="https://www.patreon.com/join/pixeldrain/checkout?edit=1">Manage subscription</a>)
{{end}}
<ul>
<li>Ads when viewing files: {{if .User.Subscription.DisableAdDisplay}}No{{else}}Yes{{end}}</li>
<li>Ads on your uploaded files: {{if .User.Subscription.DisableAdsOnFiles}}No{{else}}Yes{{end}}</li>
<li>Advertisements when viewing files: {{if .User.Subscription.DisableAdDisplay}}No{{else}}Yes{{end}}</li>
<li>Advertisements on your uploaded files: {{if .User.Subscription.DisableAdsOnFiles}}No{{else}}Yes{{end}}</li>
{{if gt .User.Subscription.FileExpiryDays 0}}
<li>Files expire after {{.User.Subscription.FileExpiryDays}} days</li>
{{else}}
<li>Files never expire</li>
{{end}}
<li>File size limit: {{formatData .User.Subscription.FileSizeLimit}}</li>
<li>
Direct linking bandwidth:
{{formatData .User.Subscription.DirectLinkingBandwidth}}
(<span id="direct_bandwidth_month">0 B</span> used in the last 30 days)
<br/>
<a href="/#direct_linking">More information about direct linking</a>
</li>
</ul>
</li>
</ul>
<a href="/user/settings" class="button button_highlight">Change account settings</a>
<br/><br/>
<a href="/user/export/files" class="button">Export uploaded files to CSV</a>
<a href="/user/export/lists" class="button">Export created lists to CSV</a>
<h3>Limits</h3>
Storage: <span id="storage_text"></span><br/>
<div class="progress_bar_outer">
<div id="storage_progress" class="progress_bar_inner" style="width: 0%;"></div>
</div>
<br/>
Direct link bandwidth: <span id="direct_bandwidth_text"></span>
(<a href="/#direct_linking">More information about direct linking</a>)
<div class="progress_bar_outer">
<div id="direct_bandwidth_progress" class="progress_bar_inner" style="width: 0%;"></div>
</div>
<br/>
<h3>Settings</h3>
<div style="text-align: center;">
<a href="/user/settings" class="button button_highlight">
<i class="icon">edit</i>
Change account settings
</a>
<a href="/user/export/files" class="button">
<i class="icon">list</i>
Export uploaded files to CSV
</a>
<a href="/user/export/lists" class="button">
<i class="icon">list</i>
Export created lists to CSV
</a>
</div>
<h2>Statistics</h2>
<p>

View File

@@ -74,8 +74,8 @@
window.api_endpoint = '{{.APIEndpoint}}';
window.user_subscription = {{.User.Subscription}};
</script>
<link rel='stylesheet' href='/res/svelte/home_page.css?v9'>
<script defer src='/res/svelte/home_page.js?v9'></script>
<link rel='stylesheet' href='/res/svelte/home_page.css?v1'>
<script defer src='/res/svelte/home_page.js?v1'></script>
</head>
<body>
{{template "page_top" .}}
@@ -187,6 +187,17 @@
</button>
</div>
</div>
<div>
<div class="feat_label">
Storage space
</div>
<div class="feat_normal">
500 gigabytes
</div>
<div class="feat_pro">
<span class="text_highlight">1 terabyte</span>
</div>
</div>
<div>
<div class="feat_label">
Online file previews
@@ -230,6 +241,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">2 TB</span> direct link bandwidth<br/>
<span class="text_highlight">2 TB</span> storage space<br/>
<span class="text_highlight">120 days</span> file expiry
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_5_small.png');">
@@ -246,6 +258,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">4 TB</span> direct link bandwidth<br/>
<span class="text_highlight">4 TB</span> storage space<br/>
<span class="text_highlight">240 days</span> file expiry
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_2_small.png');">
@@ -262,6 +275,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">8 TB</span> direct link bandwidth<br/>
<span class="text_highlight">8 TB</span> storage space<br/>
<span class="text_highlight">480 days</span> file expiry
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_3_small.png');">
@@ -278,6 +292,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">16 TB</span> direct link bandwidth<br/>
<span class="text_highlight">16 TB</span> storage space<br/>
<span class="text_highlight">Files never expre</span>
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_4_small.png');">
@@ -294,6 +309,7 @@
<div class="feat_normal">
<span class="text_highlight">20 GB</span> file size<br/>
<span class="text_highlight">32 TB</span> direct link bandwidth<br/>
<span class="text_highlight">32 TB</span> storage space<br/>
<span class="text_highlight">Files never expre</span>
</div>
<div class="feat_pro round_tr round_br cell_background" style="background-image: url('/res/img/benefit_6_small.png');">