Add svelte as a view engine to swaf #33

Merged
ashpie merged 97 commits from svelte into develop 2021-11-09 19:31:22 +01:00
6 changed files with 67 additions and 5 deletions
Showing only changes of commit 9b3822d7f3 - Show all commits

View File

@ -67,6 +67,13 @@
} }
} }
@mixin subsurface($shadowStrength: 0) {
@include surface($shadowStrength);
background-color: var(--subsurface);
color: var(--on-subsurface);
}
// --- Responsivity --- // --- Responsivity ---
@mixin mobile-le { @mixin mobile-le {

View File

@ -45,6 +45,12 @@ $onSurface: $onLight;
$surfaceDarkMode: darken($backgroundDarkMode, 4.5%); $surfaceDarkMode: darken($backgroundDarkMode, 4.5%);
$onSurfaceDarkMode: $onDark; $onSurfaceDarkMode: $onDark;
// Subsurface
$subsurface: darken($surface, 3%);
$onSubsurface: $onLight;
$subsurfaceDarkMode: darken($surfaceDarkMode, 3%);
$onSubsurfaceDarkMode: $onDark;
// Input // Input
$input: darken($surface, 5%); $input: darken($surface, 5%);

View File

@ -28,6 +28,10 @@
--surface: #{$surface}; --surface: #{$surface};
--on-surface: #{$onSurface}; --on-surface: #{$onSurface};
// Subsurface
--subsurface: #{$subsurface};
--on-subsurface: #{$onSubsurface};
// Input // Input
--input: #{$input}; --input: #{$input};
--on-input: #{$onInput}; --on-input: #{$onInput};
@ -79,6 +83,10 @@
--surface: #{$surfaceDarkMode}; --surface: #{$surfaceDarkMode};
--on-surface: #{$onSurfaceDarkMode}; --on-surface: #{$onSurfaceDarkMode};
// Subsurface
--subsurface: #{$subsurfaceDarkMode};
--on-subsurface: #{$onSubsurfaceDarkMode};
// Input // Input
--input: #{$inputDarkMode}; --input: #{$inputDarkMode};
--on-input: #{$onInputDarkMode}; --on-input: #{$onInputDarkMode};

View File

@ -8,6 +8,9 @@
border-radius: 5px; border-radius: 5px;
@include surface; @include surface;
.panel {
@include subsurface;
}
p { p {
margin: 16px 8px; margin: 16px 8px;

View File

@ -12,17 +12,54 @@
$: paginationObj = pagination ? Pagination.deserialize(pagination) : null; $: paginationObj = pagination ? Pagination.deserialize(pagination) : null;
</script> </script>
<style lang="scss">
@import "../../scss/helpers";
.pagination {
ul {
display: flex;
flex-direction: row;
width: fit-content;
margin: 0 auto;
padding: 0;
list-style: none;
overflow: hidden;
border-radius: 5px;
li {
white-space: nowrap;
a, span {
display: block;
padding: 8px 12px;
&:not(span):hover {
background: #0002;
@media (prefers-color-scheme: dark) {
background: #fff2;
}
}
}
}
}
}
</style>
{#if paginationObj && (paginationObj.hasPrevious() || paginationObj.hasNext())} {#if paginationObj && (paginationObj.hasPrevious() || paginationObj.hasNext())}
<nav class="pagination"> <nav class="pagination">
<ul> <ul class="panel">
{#if paginationObj.hasPrevious()} {#if paginationObj.hasPrevious()}
<li><a href={route(routeName, {page: paginationObj.page - 1})}> <li><a href={route(routeName, {page: paginationObj.page - 1})}>
<Icon name="chevron-left"/> Previous <Icon name="chevron-left"/>
Previous
</a></li> </a></li>
{#each paginationObj.previousPages(contextSize) as i} {#each paginationObj.previousPages(contextSize) as i}
{#if i === -1} {#if i === -1}
<li class="ellipsis">...</li> <li class="ellipsis"><span>...</span></li>
{:else} {:else}
<li><a href={route(routeName, {page: i})}>{i}</a></li> <li><a href={route(routeName, {page: i})}>{i}</a></li>
{/if} {/if}
@ -41,7 +78,8 @@
{/each} {/each}
<li><a href={route(routeName, {page: paginationObj.page + 1})}> <li><a href={route(routeName, {page: paginationObj.page + 1})}>
Next <Icon name="chevron-right"/> Next
<Icon name="chevron-right"/>
</a></li> </a></li>
{/if} {/if}
</ul> </ul>

View File

@ -63,7 +63,7 @@ export default class BackendController extends Controller {
} }
protected async getAccountApproval(req: Request, res: Response): Promise<void> { protected async getAccountApproval(req: Request, res: Response): Promise<void> {
const accounts = await User.paginate(req, 1, User.select() const accounts = await User.paginate(req, 20, User.select()
.where('approved', 0) .where('approved', 0)
.with('mainEmail')); .with('mainEmail'));
res.render('backend/accounts_approval', { res.render('backend/accounts_approval', {