implement directory navigator in svelte
This commit is contained in:
@@ -1,45 +0,0 @@
|
||||
Vue.component("vform", {
|
||||
template: `
|
||||
<h2>TEST FORM</h2>
|
||||
<form class="highlight_dark" method="POST">
|
||||
<table class="form">
|
||||
<tbody>
|
||||
<tr class="form">
|
||||
<td>Old Password</td>
|
||||
<td>
|
||||
<input id="input_old_password" name="old_password" value="" type="password" autocomplete="current-password" class="form_input">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form"></tr>
|
||||
<td>New Password</td>
|
||||
<td>
|
||||
<input id="input_new_password1" name="new_password1" value="" type="password" autocomplete="new-password" class="form_input">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form">
|
||||
<td>New Password again</td>
|
||||
<td>
|
||||
<input id="input_new_password2" name="new_password2" value="" type="password" autocomplete="new-password" class="form_input">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form">
|
||||
<td colspan="2">
|
||||
we need you to repeat your password so you won't be locked out of your account if you make a typing error
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="form">
|
||||
<td colspan="2" style="text-align: right;">
|
||||
<input type="submit" value="Submit" class="button_highlight" style="float: right;">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
`
|
||||
})
|
||||
|
||||
Vue.component("form_field", {
|
||||
template: `
|
||||
|
||||
`
|
||||
})
|
||||
@@ -1,3 +0,0 @@
|
||||
const appTestForm = new Vue({
|
||||
el: "#test_form"
|
||||
})
|
||||
@@ -401,7 +401,7 @@ select {
|
||||
border: none;
|
||||
margin: 3px;
|
||||
background: linear-gradient(var(--input_color), var(--input_color_dark));
|
||||
padding: .3em .4em .3em .4em;
|
||||
padding: 4px 5px 4px 5px;
|
||||
box-shadow: 2px 2px 6px -3px var(--shadow_color);
|
||||
line-height: 1em;
|
||||
overflow: hidden;
|
||||
@@ -412,7 +412,7 @@ select {
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: padding 0.25s, box-shadow 0.25s;
|
||||
transition: padding 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
button:hover,
|
||||
.button:hover,
|
||||
@@ -439,7 +439,8 @@ input[type="color"]:active,
|
||||
select:active{
|
||||
background: linear-gradient(var(--input_color_dark), var(--input_color));
|
||||
box-shadow: inset 4px 4px 8px var(--shadow_color);
|
||||
padding: .5em .2em .1em .6em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
|
||||
/* Exactly 4px offset compared to the inactive padding to give a depth effect */
|
||||
padding: 8px 1px 0px 9px;
|
||||
}
|
||||
.button_full_width {width: calc(100% - 6px);}
|
||||
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 4px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.modal_title {
|
||||
|
||||
7
res/static/svelte/filesystem.css
Normal file
7
res/static/svelte/filesystem.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.file_viewer.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;margin-left:6px;margin-right:6px;display:inline}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.file_viewer_headerbar_title.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;overflow:hidden;line-height:1.2em;white-space:nowrap;text-overflow:ellipsis;justify-content:center}.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pd"}}.file_viewer.svelte-1vxdz33>.list_navigator.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33>.center.svelte-1vxdz33{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;transform:translateY(-50%)}.toolbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{left:0}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33{left:8em}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left}.toolbar_label.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:center}
|
||||
.sharebar.svelte-gnq1s2{position:absolute;width:7em;left:-8em;bottom:0;top:0;overflow-y:scroll;overflow-x:hidden;float:left;background-color:var(--layer_1_color);box-shadow:inset 1px 1px var(--layer_1_shadow) var(--shadow_color);text-align:center;z-index:48;overflow:hidden;transition:left 0.5s}.visible.svelte-gnq1s2{left:8em}
|
||||
.container.svelte-1afjvoj.svelte-1afjvoj{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.toolbar.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 0 0;box-sizing:border-box}.directory.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 40px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-1afjvoj.svelte-1afjvoj{position:relative;height:40px;overflow:hidden;margin:4px;padding:4px;box-sizing:border-box;cursor:pointer}.node.svelte-1afjvoj.svelte-1afjvoj:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.svelte-1afjvoj>div.svelte-1afjvoj{height:100%;overflow:hidden;padding:0;line-height:32px;box-sizing:border-box;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.node.svelte-1afjvoj>img.svelte-1afjvoj{max-height:100%;margin-right:6px;width:auto;min-width:auto;float:left;display:block}
|
||||
.background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px}
|
||||
svg.svelte-1pco739{color:var(--highlight_color);fill:currentColor}
|
||||
|
||||
/*# sourceMappingURL=filesystem.css.map */
|
||||
2989
res/static/svelte/filesystem.js
Normal file
2989
res/static/svelte/filesystem.js
Normal file
File diff suppressed because it is too large
Load Diff
3
res/static/svelte/modal.css
Normal file
3
res/static/svelte/modal.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px}
|
||||
|
||||
/*# sourceMappingURL=modal.css.map */
|
||||
1567
res/static/svelte/modal.js
Normal file
1567
res/static/svelte/modal.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -19,6 +19,9 @@
|
||||
{{ range $node := .Other.Path }}
|
||||
/ <a href="{{ $node.HREF }}">{{ $node.Name }}</a>
|
||||
{{ end }}
|
||||
{{ if ne .Other.Base.Name "" }}
|
||||
/ {{ .Other.Base.Name }}
|
||||
{{ end }}
|
||||
</h2>
|
||||
|
||||
{{ range $node := .Other.Children }}
|
||||
|
||||
33
res/template/filesystem_svelte.html
Normal file
33
res/template/filesystem_svelte.html
Normal file
@@ -0,0 +1,33 @@
|
||||
{{define "filesystem_svelte"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{.Title}}</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
{{template "user_style" .}}
|
||||
|
||||
<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
|
||||
<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />
|
||||
<link rel="icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
|
||||
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
|
||||
<link rel="icon" sizes="192x192" href="/res/img/pixeldrain_192.png" />
|
||||
<link rel="icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
|
||||
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_256.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
|
||||
<link rel="shortcut icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
|
||||
<meta name="theme-color" content="#75AD38"/>
|
||||
|
||||
{{.OGData}}
|
||||
<script>
|
||||
const initialNode = {{.Other}};
|
||||
const apiEndpoint = '{{.APIEndpoint}}';
|
||||
</script>
|
||||
|
||||
<link rel='stylesheet' href='/res/svelte/filesystem.css'>
|
||||
<script defer src='/res/svelte/filesystem.js'></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user