web: reusable meowbalt component & page placeholders
This commit is contained in:
parent
597320cb17
commit
382c6e1cd8
12 changed files with 76 additions and 32 deletions
14
web/src/components/meowbalt/MeowbaltLoaf.svelte
Normal file
14
web/src/components/meowbalt/MeowbaltLoaf.svelte
Normal file
|
@ -0,0 +1,14 @@
|
|||
<img
|
||||
id="meowbalt-loaf"
|
||||
src="/meowbalt/loaf.png"
|
||||
height="152"
|
||||
width="141"
|
||||
alt="black and white cat smiling and loafing"
|
||||
/>
|
||||
<style>
|
||||
#meowbalt-loaf {
|
||||
display: block;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
16
web/src/components/misc/Placeholder.svelte
Normal file
16
web/src/components/misc/Placeholder.svelte
Normal file
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import MeowbaltLoaf from "../meowbalt/MeowbaltLoaf.svelte";
|
||||
export let pageName;
|
||||
</script>
|
||||
|
||||
<div id="placeholder-container" class="center-column-container">
|
||||
<MeowbaltLoaf />
|
||||
<div>{pageName} page is not ready yet!</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#placeholder-container {
|
||||
gap: var(--padding);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
|
@ -80,6 +80,14 @@
|
|||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
:global(.center-column-container) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#cobalt {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
|
|
|
@ -1,15 +1,11 @@
|
|||
<script>
|
||||
import Omnibox from "../components/save/Omnibox.svelte";
|
||||
import MeowbaltLoaf from "../components/meowbalt/MeowbaltLoaf.svelte";
|
||||
</script>
|
||||
|
||||
<div id="cobalt-save-container">
|
||||
<div id="cobalt-save-container" class="center-column-container">
|
||||
<main id="cobalt-save">
|
||||
<img
|
||||
id="meowbalt-smile"
|
||||
src="/meowbalt/smile.png"
|
||||
height="152"
|
||||
alt="black and white cat smiling and loafing"
|
||||
/>
|
||||
<MeowbaltLoaf />
|
||||
<Omnibox />
|
||||
</main>
|
||||
<div id="terms-note">
|
||||
|
@ -18,12 +14,6 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
#cobalt-save-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#cobalt-save {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -34,11 +24,6 @@
|
|||
gap: 24px;
|
||||
}
|
||||
|
||||
#meowbalt-smile {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#terms-note {
|
||||
bottom: 0;
|
||||
color: var(--gray);
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- about page -->
|
||||
<div>about</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="about" />
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- convert page -->
|
||||
<div>convert</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="convert" />
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- crop page -->
|
||||
<div>crop</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="crop" />
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- donate page -->
|
||||
<div>donate</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="donate" />
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- settings page -->
|
||||
<div>settings</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="settings" />
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- trim page -->
|
||||
<div>trim</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="trim" />
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
<!-- updates (changelog) page -->
|
||||
<div>updates</div>
|
||||
<script>
|
||||
import Placeholder from "../../components/misc/Placeholder.svelte";
|
||||
</script>
|
||||
|
||||
<Placeholder pageName="updates" />
|
||||
|
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Loading…
Reference in a new issue