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

implement directory navigator in svelte

Browse Source
This commit is contained in:
Wim Brand
2020-11-11 00:00:54 +01:00
parent eb94d4190c
commit 253315a9b7
26 changed files with 6406 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
res/include/script/form.vue
View File

@@ -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: `
`
})

3
res/include/script/user_settings.vue
View File

@@ -1,3 +0,0 @@
const appTestForm = new Vue({
el: "#test_form"
})

7
res/include/style/layout.css
View File

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

2
res/include/style/modal.css
View File

@@ -31,7 +31,7 @@
flex-shrink: 0;
display: flex;
flex-direction: row;
padding: 4px;
padding: 1px;
}
.modal_title {