Rewrite user home page in svelte

This commit is contained in:
2021-09-21 21:39:28 +02:00
parent 8ec548351e
commit 11132854b2
18 changed files with 817 additions and 52 deletions

View File

@@ -145,7 +145,7 @@ body, .checkers {
display: inline-block;
width: 100%;
height: auto;
padding: 20px 0 20px 0;
padding: 0 0 20px 0;
background-color: #212121;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 20px 0 #000000;
@@ -498,6 +498,23 @@ select:disabled , select.disabled {
.round {
border-radius: 32px;
}
.tab {
margin: 0 0 10px 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.tab:last-child {
margin-right: 8px;
}
.tab_bar {
display: block;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
box-sizing: border-box;
text-align: center;
}
/* Dropdown list of the select tag */
option{

View File

@@ -0,0 +1,27 @@
{{define "user_home_svelte"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" .User.Username}}
{{template "user_style" .}}
<script>
window.api_endpoint = '{{.APIEndpoint}}';
window.highlight_color = '#{{.Style.HighlightColor.RGB}}';
window.user = {{.User}};
</script>
<link rel='stylesheet' href='/res/svelte/user_home.css'>
<script defer src='/res/svelte/user_home.js'></script>
</head>
<body>
{{template "page_top" .}}
<h1>Welcome home, {{.User.Username}}!</h1>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
{{template "analytics"}}
</body>
</html>
{{end}}

View File

@@ -15,6 +15,7 @@
</head>
<body>
{{template "page_top" .}}
<h1>Admin Panel</h1>
<div id="page_content" class="page_content"></div>
{{template "page_bottom" .}}
</body>

View File

@@ -55,8 +55,8 @@
font-weight: bold;
}
.feat_table > div > .cell_background {
flex: 0 0 30%;
min-width: 30%;
flex: 0 0 33%;
min-width: 33%;
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background-position: center;
@@ -101,7 +101,7 @@
<br/>
<!-- Svelte element -->
<div id="uploader" class="page_content" style="padding-top: 0; margin-bottom: 50px;"></div>
<div id="uploader" class="page_content" style="margin-bottom: 50px;"></div>
<h1>What is pixeldrain?</h1>
<div class="page_content"><div class="limit_width">
@@ -212,6 +212,19 @@
<span class="text_highlight">1 terabyte</span>
</div>
</div>
<div>
<div class="feat_label">
Bandwidth priority
</div>
<div class="feat_normal">
Download speed will be throttled during busy periods
</div>
<div class="feat_pro">
<span class="text_highlight">High priority</span>
bandwidth for files you download and files on your
account
</div>
</div>
<div>
<div class="feat_label">
Online file previews