Panels, Modal, and NavBar done.

master
Zed A. Shaw 3 years ago
parent 70d6bc2e54
commit 70c0d85015
  1. 2
      public/build/bundle.css
  2. 2230
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 2
      public/code/Cards.html
  5. 2
      public/code/Google.html
  6. 2
      public/code/Instagram.html
  7. 35
      public/code/Modal.css
  8. 11
      public/code/Modal.html
  9. 34
      public/code/NavBar.css
  10. 30
      public/code/NavBar.html
  11. 53
      public/code/Panels.css
  12. 20
      public/code/Panels.html
  13. 2
      public/code/Pinterest.html
  14. 2
      public/code/Tiles.html
  15. 2
      public/code/Twitter.html
  16. 2
      public/code/XorAcademy.html
  17. 2
      public/code/XorAcademyWatch.html
  18. 2
      public/code/Youtube.html
  19. 32
      src/demos/Modal.svelte
  20. 76
      src/demos/NavBar.svelte
  21. 83
      src/demos/Panels.svelte
  22. 12
      src/demos/index.svelte
  23. 6
      src/routes.js
  24. 73
      src/thumbs/NavBar.svelte
  25. 81
      src/thumbs/Panels.svelte

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -1,4 +1,3 @@
<content>
<card>
<top>
<img src={ holder(16 * 30, 9 * 30) }/>
@ -23,4 +22,3 @@
</button>
</bottom>
</card>
</content>

@ -1,4 +1,3 @@
<content>
<header>
<nav>
<nav-left>
@ -27,4 +26,3 @@
<button>I'm Feeling Lucky</button>
</buttons>
</search>
</content>

@ -1,4 +1,3 @@
<content>
<header>
<nav>
<b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
@ -57,5 +56,4 @@
</figure>
{/each}
</posts>
</content>

@ -0,0 +1,35 @@
content {
display: flex;
justify-content: center;
}
button {
padding: 5em;
}
modal {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: rgba(244,244,244,0.75);
padding: 0px;
}
modal-content {
flex-direction: column;
background: white;
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 300px;
min-height: 300px;
max-width: 300px;
width: 100%;
z-index: 20;
padding: 0.5em;
}

@ -0,0 +1,11 @@
<button on:click={ () => visible = true }>Click Me!</button>
{#if visible}
<modal on:click={ () => visible = false }>
<modal-content>
<h1>This Is A Modal</h1>
<p>Designers love modals. Click anywhere to close this.</p>
</modal-content>
</modal>
{/if}

@ -0,0 +1,34 @@
content {
display: flex;
flex-direction: column;
}
/* mvp.css aleady has a nav so using this
name to demonstrate how to make your own. */
nav-bar {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
/* this is just for displaying here */
padding: 1em;
border: 1px solid var(--color-accent);
margin-bottom: 1em;
}
nav-bar middle {
display: flex;
flex: 2;
justify-content: center;
padding-left: 1em;
padding-right: 1em;
}
nav-bar middle input {
width: 100%;
}
.alternate {
background-color: #ddd;
}

@ -0,0 +1,30 @@
<nav-bar>
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<input placeholder="Search">
</middle>
<right>
<button>Log In</button>
<a>Sign Up</a>
</right>
</nav-bar>
<nav-bar class="alternate">
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<!-- you just leave this empty and flexbox
will expand it for you. -->
</middle>
<right>
<button>Log In</button>
<button id="signup">Sign Up</button>
</right>
</nav-bar>

@ -0,0 +1,53 @@
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
panel {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
panel top {
width: 480px; /* sets a header for display */
padding: 0.5rem;
}
panel middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
panel middle h4 {
}
panel bottom {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
panel bottom button {
display: flex;
margin: 0;
border-radius: unset;
width: 100%;
justify-content: space-evenly;
}
button:hover {
filter: invert(20%);
}
button#cancel {
background: unset;
color: var(--color-text);
}

@ -0,0 +1,20 @@
<panel>
<top>
<h1>Panel is a Card</h1>
</top>
<middle>
<h4>
Panel Example
</h4>
<p>Not sure what the big deal is with the difference between panels and cards
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
are different to demonstrate how to make a button strip. </p>
</middle>
<bottom>
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
</bottom>
</panel>

@ -1,4 +1,3 @@
<content>
<header>
<nav>
<left>
@ -43,4 +42,3 @@
{/each}
</pins>
{/if}
</content>

@ -1,4 +1,3 @@
<content>
<tile>
<left>
<img src={ holder(48, 48) }/>
@ -21,5 +20,4 @@
</button>
</right>
</tile>
</content>

@ -1,4 +1,3 @@
<content>
<left>
<Icon name="twitter" color="var(--color)" />
<h4># Explore</h4>
@ -130,4 +129,3 @@
</aside>
</section>
</right>
</content>

@ -1,4 +1,3 @@
<content>
<header>
<nav>
<b><a id="logo-link" href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
@ -48,4 +47,3 @@
</figure>
{/each}
</posts>
</content>

@ -1,4 +1,3 @@
<content>
<header>
<nav>
<b><a href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
@ -77,4 +76,3 @@
</comments>
</lower>
</main>
</content>

@ -1,4 +1,3 @@
<content>
<header>
<nav>
<nav-left>
@ -118,4 +117,3 @@
{/each}
</right>
</main>
</content>

@ -1,12 +1,20 @@
<script>
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
import { fade } from 'svelte/transition';
export let visible = false;
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<style>
content {
display: flex;
justify-content: center;
}
button {
padding: 5em;
}
modal {
display: flex;
position: fixed;
@ -26,19 +34,27 @@
background: white;
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 75vh;
min-height: 75vh;
max-width: 75vh;
max-height: 300px;
min-height: 300px;
max-width: 300px;
width: 100%;
z-index: 20;
padding: 0px;
padding: 0.5em;
}
</style>
<content>
<button on:click={ () => visible = true }>Click Me!</button>
</content>
{#if visible}
<modal on:click={ () => dispatch('click') }>
<modal on:click={ () => visible = false }>
<modal-content>
<slot></slot>
<h1>This Is A Modal</h1>
<p>Designers love modals. Click anywhere to close this.</p>
</modal-content>
</modal>
{/if}
<CodeView source="/code/Modal" />

@ -0,0 +1,76 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex-direction: column;
}
/* mvp.css aleady has a nav so using this
name to demonstrate how to make your own. */
nav-bar {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
/* this is just for displaying here */
padding: 1em;
border: 1px solid var(--color-accent);
margin-bottom: 1em;
}
nav-bar middle {
display: flex;
flex: 2;
justify-content: center;
padding-left: 1em;
padding-right: 1em;
}
nav-bar middle input {
width: 100%;
}
.alternate {
background-color: #ddd;
}
</style>
<content>
<nav-bar>
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<input placeholder="Search">
</middle>
<right>
<button>Log In</button>
<a>Sign Up</a>
</right>
</nav-bar>
<nav-bar class="alternate">
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<!-- you just leave this empty and flexbox
will expand it for you. -->
</middle>
<right>
<button>Log In</button>
<button id="signup">Sign Up</button>
</right>
</nav-bar>
</content>
<CodeView source="/code/NavBar" />

@ -0,0 +1,83 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
panel {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
panel top {
width: 480px; /* sets a header for display */
padding: 0.5rem;
}
panel middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
panel middle h4 {
}
panel bottom {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
panel bottom button {
display: flex;
margin: 0;
border-radius: unset;
width: 100%;
justify-content: space-evenly;
}
button:hover {
filter: invert(20%);
}
button#cancel {
background: unset;
color: var(--color-text);
}
</style>
<content>
<panel>
<top>
<h1>Panel is a Card</h1>
</top>
<middle>
<h4>
Panel Example
</h4>
<p>Not sure what the big deal is with the difference between panels and cards
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
are different to demonstrate how to make a button strip. </p>
</middle>
<bottom>
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
</bottom>
</panel>
</content>
<CodeView source="/code/Panels" />

@ -7,6 +7,8 @@
import Login from '../thumbs/Login.svelte';
import Tiles from '../thumbs/Tiles.svelte';
import Cards from '../thumbs/Cards.svelte';
import Panels from '../thumbs/Panels.svelte';
import NavBar from '../thumbs/NavBar.svelte';
import {push} from 'svelte-spa-router';
import { holder } from '../../lib/imgholder.js';
@ -99,6 +101,16 @@
<figcaption>Cards</figcaption>
</figure>
<figure on:click={ () => push('/demos/panels') }>
<Panels />
<figcaption>Panels</figcaption>
</figure>
<figure on:click={ () => push('/demos/navbar') }>
<NavBar />
<figcaption>Nav Bar</figcaption>
</figure>
</images>

@ -12,6 +12,9 @@ import XorAcademyWatch from "./demos/XorAcademyWatch.svelte";
import Login from "./demos/Login.svelte";
import Tiles from "./demos/Tiles.svelte";
import Cards from "./demos/Cards.svelte";
import Panels from "./demos/Panels.svelte";
import Modal from "./demos/Modal.svelte";
import NavBar from "./demos/NavBar.svelte";
export default {
"/": Home,
@ -19,12 +22,15 @@ export default {
"/demos": Demos,
"/demos/login": Login,
"/demos/tiles": Tiles,
"/demos/modal": Modal,
"/demos/cards": Cards,
"/demos/panels": Panels,
"/demos/google": Google,
"/demos/twitter": Twitter,
"/demos/youtube": Youtube,
"/demos/instagram": Instagram,
"/demos/pinterest": Pinterest,
"/demos/navbar": NavBar,
"/demos/xoracademy": XorAcademy,
"/demos/xoracademy/watch": XorAcademyWatch,
"*": NotFound,

@ -0,0 +1,73 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex-direction: column;
}
/* mvp.css aleady has a nav so using this
name to demonstrate how to make your own. */
nav-bar {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
padding: 1em; /* this is only for here */
border: 1px solid var(--color-accent);
margin-bottom: 1em;
}
nav-bar middle {
display: flex;
flex: 2;
justify-content: center;
padding-left: 1em;
padding-right: 1em;
}
nav-bar middle input {
width: 100%;
}
.alternate {
background-color: #ddd;
}
</style>
<content>
<nav-bar>
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<input placeholder="Search">
</middle>
<right>
<button>Log In</button>
<a>Sign Up</a>
</right>
</nav-bar>
<nav-bar class="alternate">
<left>
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b>
</left>
<middle>
<!-- you just leave this empty and flexbox
will expand it for you. -->
</middle>
<right>
<button>Log In</button>
<button id="signup">Sign Up</button>
</right>
</nav-bar>
</content>

@ -0,0 +1,81 @@
<script>
import Icon from '../components/Icon.svelte';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
panel {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
panel top {
width: 480px; /* sets a header for display */
padding: 0.5rem;
}
panel middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
panel middle h4 {
}
panel bottom {
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
panel bottom button {
display: flex;
margin: 0;
border-radius: unset;
width: 100%;
justify-content: space-evenly;
}
button:hover {
filter: invert(20%);
}
button#cancel {
background: unset;
color: var(--color-text);
}
</style>
<content>
<panel>
<top>
<h1>Panel is a Card</h1>
</top>
<middle>
<h4>
Panel Example
</h4>
<p>Not sure what the big deal is with the difference between panels and cards
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
are different to demonstrate how to make a button strip. </p>
</middle>
<bottom>
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
</bottom>
</panel>
</content>
Loading…
Cancel
Save