Tiles and Cards examples done.

master
Zed A. Shaw 3 years ago
parent 63303db18a
commit 760f7297c0
  1. 8
      lib/imgholder.js
  2. 5
      package-lock.json
  3. 1
      package.json
  4. 2
      public/build/bundle.css
  5. 2740
      public/build/bundle.js
  6. 2
      public/build/bundle.js.map
  7. 38
      public/code/Cards.css
  8. 20
      public/code/Cards.html
  9. 36
      public/code/Tiles.css
  10. 20
      public/code/Tiles.html
  11. 4
      src/App.svelte
  12. 4
      src/Home.svelte
  13. 69
      src/demos/Cards.svelte
  14. 3
      src/demos/Google.svelte
  15. 7
      src/demos/Instagram.svelte
  16. 1
      src/demos/Login.svelte
  17. 5
      src/demos/Pinterest.svelte
  18. 66
      src/demos/Tiles.svelte
  19. 13
      src/demos/Twitter.svelte
  20. 7
      src/demos/XorAcademy.svelte
  21. 7
      src/demos/XorAcademyWatch.svelte
  22. 13
      src/demos/Youtube.svelte
  23. 24
      src/demos/index.svelte
  24. 4
      src/routes.js
  25. 68
      src/thumbs/Cards.svelte
  26. 2
      src/thumbs/Google.svelte
  27. 4
      src/thumbs/Instagram.svelte
  28. 2
      src/thumbs/Pinterest.svelte
  29. 63
      src/thumbs/Tiles.svelte
  30. 2
      src/thumbs/Youtube.svelte

@ -0,0 +1,8 @@
import simpleSvgPlaceholder from '@cloudfour/simple-svg-placeholder';
const defaults = {
bgColor: '#ccc',
textColor: '#888',
}
export const holder = (x, y) => simpleSvgPlaceholder({...defaults, width: x, height: y});

5
package-lock.json generated

@ -32,6 +32,11 @@
"js-tokens": "^4.0.0"
}
},
"@cloudfour/simple-svg-placeholder": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@cloudfour/simple-svg-placeholder/-/simple-svg-placeholder-1.0.2.tgz",
"integrity": "sha512-vZZ4Yp+TwdDhbxigDJyMFqGJM1zujqAES11R+Rmv8thnAgjOPaRIsJzd5LiTabE2O0sZDaHq4kmbjrmy1gP6Xg=="
},
"@eslint/eslintrc": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",

@ -28,6 +28,7 @@
"svelte": "^3.0.0"
},
"dependencies": {
"@cloudfour/simple-svg-placeholder": "^1.0.2",
"Validator": "^1.1.2",
"bcrypt": "^5.0.0",
"body-parser": "^1.19.0",

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

@ -0,0 +1,38 @@
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
card {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
card top img {
padding: 0;
margin: 0;
}
card middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
card middle h4 {
margin: 0;
}
card bottom {
flex-shrink: 0;
}
card bottom button {
padding: 0.2rem;
}

@ -0,0 +1,20 @@
<content>
<card>
<top>
<img src={ holder(16 * 30, 9 * 30) }/>
</top>
<middle>
<h4>
Card Example
</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle>
<bottom>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
<button><Icon name="x-circle" color="var(--color-bg)" size="24"/></button>
</bottom>
</card>
</content>

@ -0,0 +1,36 @@
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
tile {
padding: 0.5rem;
display: flex;
flex-direction: row;
border: 1px solid #eee;
max-width: 50vh; /* only for this display, I'd remove this. */
}
tile middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-shrink: 3;
}
tile middle h4 {
margin-top: 0;
margin-bottom: 0;
}
tile right {
flex-shrink: 0;
}
tile right button {
padding: 0.2rem;
}

@ -0,0 +1,20 @@
<content>
<tile>
<left>
<img src={ holder(48, 48) }/>
</left>
<middle>
<h4>
Tile Example
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle>
<right>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
<button><Icon name="x-circle" color="var(--color-bg)" size="24"/></button>
</right>
</tile>
</content>

@ -6,10 +6,6 @@
import Darkmode from './components/Darkmode.svelte';
</script>
<svelte:head>
<title>LJSTHW Starter Template</title>
</svelte:head>
<style>
header {
}

@ -43,9 +43,9 @@
</aside>
<aside>
<h3>Add Flexbox</h3>
<h3>Add Flexbox + Grids</h3>
<Icon name="box" size="64" />
<p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> you can layout anything you want without tons of divs.</p>
<p>Using <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox</a> and <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grids</a> you can layout anything you want without tons of divs.</p>
</aside>
<aside>

@ -0,0 +1,69 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
card {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
card top img {
padding: 0;
margin: 0;
}
card middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
card middle h4 {
margin: 0;
}
card bottom {
flex-shrink: 0;
}
card bottom button {
padding: 0.2rem;
}
</style>
<content>
<card>
<top>
<img src={ holder(16 * 30, 9 * 30) }/>
</top>
<middle>
<h4>
Card Example
</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle>
<bottom>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
<button><Icon name="x-circle" color="var(--color-bg)" size="24"/></button>
</bottom>
</card>
</content>
<CodeView source="/code/Cards" />

@ -2,6 +2,7 @@
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
@ -88,7 +89,7 @@
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/500x200?text=Google+Doodle">
<img src="{ holder(500,200) }">
</a>
</figure>

@ -5,6 +5,7 @@
let posts = [1,2,3,4,5,6,7,8,9,10];
let pins = [1,2,3,4];
import { holder } from '../../lib/imgholder.js';
</script>
<style>
@ -96,7 +97,7 @@
<profile>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face">
<img alt="Zed's Face" src="{ holder(256,256) }">
</figure>
<info>
@ -118,7 +119,7 @@
<pins>
{#each pins as pin}
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
{/each}
</pins>
@ -137,7 +138,7 @@
<posts>
{#each posts as post}
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/300x300?text=Post Image">
<img alt="Stock photo" src="{ holder(300,300) }">
</figure>
{/each}
</posts>

@ -1,6 +1,7 @@
<script>
import CodeView from '../components/CodeView.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
content {

@ -3,6 +3,7 @@
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeView from '../components/CodeView.svelte';
import { holder } from '../../lib/imgholder.js';
let samples = [1,2,3];
let lanes = [1,2,3,4,5];
@ -162,7 +163,7 @@ pins lane {
</info>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
<img alt="Zed's Face" src="{ holder(128,128) }">
</figure>
</profile>
@ -171,7 +172,7 @@ pins lane {
<lane>
{#each random_sample(pin_sizes, 10) as height}
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/240x{height}?text=Art240x{height}">
<img alt="Van Gogh Art" src={ holder(240, height) }>
<figcaption>Something about Van Gogh {height} high.</figcaption>
</figure>
{/each}

@ -0,0 +1,66 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
tile {
padding: 0.5rem;
display: flex;
flex-direction: row;
border: 1px solid #eee;
max-width: 50vh; /* only for this display, I'd remove this. */
}
tile middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-shrink: 3;
}
tile middle h4 {
margin-top: 0;
margin-bottom: 0;
}
tile right {
flex-shrink: 0;
}
tile right button {
padding: 0.2rem;
}
</style>
<content>
<tile>
<left>
<img src={ holder(48, 48) }/>
</left>
<middle>
<h4>
Tile Example
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle>
<right>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
<button><Icon name="x-circle" color="var(--color-bg)" size="24"/></button>
</right>
</tile>
</content>
<CodeView source="/code/Tiles" />

@ -4,6 +4,7 @@
import { onMount } from 'svelte';
let tweets = [1,2,3,4,5];
import CodeView from '../components/CodeView.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
@ -273,22 +274,22 @@
<aside>
<recent-media>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
<img alt="Stock photo" src="{ holder(82, 82) }">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Media">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
</recent-media>
</aside>

@ -6,6 +6,7 @@
let posts = [1,2,3,4,5,6,7,8,9];
let related = [1,2,3,4];
import { holder } from '../../lib/imgholder.js';
</script>
<style>
@ -117,7 +118,7 @@
<profile>
<figure>
<img alt="Module Thumb" src="https://via.placeholder.com/256x256?text=Module+Thumb">
<img alt="Module Thumb" src="{ holder(256,256) }">
</figure>
<info>
@ -139,7 +140,7 @@
<related>
{#each related as pin}
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Related">
<img alt="Stock photo" src="{ holder(82,82) }">
</figure>
{/each}
</related>
@ -148,7 +149,7 @@
{#each posts as post}
<figure>
<a href="/demos/xoracademy/watch" use:link>
<img alt="Placeholder" src="https://via.placeholder.com/300x300?text=Video Thumb">
<img alt="Placeholder" src="{ holder(300,300) }">
</a>
</figure>
{/each}

@ -5,6 +5,7 @@
import CodeView from '../components/CodeView.svelte';
let cards = [1,2,3,4];
import { holder } from '../../lib/imgholder.js';
</script>
<style>
@ -184,7 +185,7 @@
</header>
<main>
<figure>
<img src="https://via.placeholder.com/1280x720?text=Video">
<img src="{ holder(1280,720) }">
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>
@ -204,7 +205,7 @@
<promotion>
<nav>
<card>
<img src="https://via.placeholder.com/64x64?text=ME">
<img src="{ holder(64,64) }">
<info>
<h4>Zed A. Shaw</h4>
<subs>1 subscriber</subs>
@ -225,7 +226,7 @@
{#each cards as card}
<card>
<img src="https://via.placeholder.com/64x64?text=Person">
<img src="{ holder(64,64) }">
<info>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>

@ -7,6 +7,7 @@
// this is used for display in the main grid
export let thumbnail = false;
import { holder } from '../../lib/imgholder.js';
</script>
<style>
@ -188,7 +189,7 @@
<left>
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/800x450?text=Video">
<img src="{ holder(800,450) }">
</a>
<figcaption>
<a>#tag</a> <a>#anothertag</a>
@ -209,7 +210,7 @@
<promotion>
<nav>
<card>
<img src="https://via.placeholder.com/64x64?text=ME">
<img src="{ holder(64,64) }">
<info>
<h4>Zed A. Shaw</h4>
<subs>1 subscriber</subs>
@ -230,7 +231,7 @@
{#each cards as card}
<card>
<img src="https://via.placeholder.com/64x64?text=Person">
<img src="{ holder(64,64) }">
<info>
<h4>Guys</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
@ -248,7 +249,7 @@
<right>
{#each cards as card}
<card class="small">
<img src="https://via.placeholder.com/120x80?text=Thumb">
<img src="{ holder(120,80) }">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>
@ -260,13 +261,13 @@
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/300x150?text=Advert">
<img src="{ holder(300,150) }">
</a>
</figure>
{#each cards as card}
<card>
<img src="https://via.placeholder.com/120x80?text=Thumb">
<img src="{ holder(120,80) }">
<info>
<h4>Video Thumb Title</h4>
<author>Zed</author>

@ -5,8 +5,10 @@
import Instagram from '../thumbs/Instagram.svelte';
import Pinterest from '../thumbs/Pinterest.svelte';
import Login from '../thumbs/Login.svelte';
import Tiles from '../thumbs/Tiles.svelte';
import {push} from 'svelte-spa-router';
import { holder } from '../../lib/imgholder.js';
</script>
@ -45,7 +47,7 @@
left: 0;
}
</style>
<h1>A Compendium of Layout Demos</h1>
<h1>Full Websites</h1>
<images>
@ -59,11 +61,6 @@
<figcaption>Twitter</figcaption>
</figure>
<figure id="main" on:click={ () => push('/demos/login') }>
<Login />
<figcaption>Basic Login</figcaption>
</figure>
<figure on:click={ () => push('/demos/youtube') }>
<Youtube />
<figcaption>Youtube</figcaption>
@ -80,3 +77,18 @@
</figure>
</images>
<hr>
<h1>Common UI Patterns</h1>
<images>
<figure on:click={ () => push('/demos/login') }>
<Login />
<figcaption>Basic Login</figcaption>
</figure>
<figure on:click={ () => push('/demos/tiles') }>
<Tiles />
<figcaption>Tiles</figcaption>
</figure>
</images>

@ -10,12 +10,16 @@ import Pinterest from "./demos/Pinterest.svelte";
import XorAcademy from "./demos/XorAcademy.svelte";
import XorAcademyWatch from "./demos/XorAcademyWatch.svelte";
import Login from "./demos/Login.svelte";
import Tiles from "./demos/Tiles.svelte";
import Cards from "./demos/Cards.svelte";
export default {
"/": Home,
"/about": About,
"/demos": Demos,
"/demos/login": Login,
"/demos/tiles": Tiles,
"/demos/cards": Cards,
"/demos/google": Google,
"/demos/twitter": Twitter,
"/demos/youtube": Youtube,

@ -0,0 +1,68 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
card {
display: flex;
flex-direction: column;
border: 1px solid #eee;
width: min-content;
}
card top img {
padding: 0;
margin: 0;
}
card middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
card middle h4 {
margin: 0;
}
card bottom {
flex-shrink: 0;
}
card bottom button {
padding: 0.2rem;
}
</style>
<content>
<card>
<top>
<img src={ holder(16 * 30, 9 * 30) }/>
</top>
<middle>
<h4>
Card Example
</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle>
<bottom>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
<button><Icon name="x-circle" color="var(--color-bg)" size="24"/></button>
</bottom>
</card>
</content>

@ -86,7 +86,7 @@
<figure>
<a href="/demos/google" use:link>
<img src="https://via.placeholder.com/500x200?text=Google+Doodle">
<img src="http://via.placeholder.com/500x200?text=Google+Doodle">
</a>
</figure>

@ -85,7 +85,7 @@
<profile>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/256x256?text=Zed's Face">
<img alt="Zed's Face" src="http://via.placeholder.com/256x256?text=Zed's Face">
</figure>
<info>
@ -107,7 +107,7 @@
<pins>
{#each pins as pin}
<figure>
<img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Story">
<img alt="Stock photo" src="http://via.placeholder.com/82x82?text=Story">
</figure>
{/each}
</pins>

@ -120,7 +120,7 @@
</info>
<figure>
<img alt="Zed's Face" src="https://via.placeholder.com/128x128?text=Zed's Face">
<img alt="Zed's Face" src="http://via.placeholder.com/128x128?text=Zed's Face">
</figure>
</profile>
</content>

@ -0,0 +1,63 @@
<script>
import Icon from '../components/Icon.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
<style>
content {
display: flex;
flex: flex-shrink;
flex-grow: 1;
justify-content: center;
}
tile {
padding: 0.5rem;
display: flex;
flex-direction: row;
border: 1px solid #eee;
max-width: 50vh; /* only for this display, I'd remove this. */
}
tile middle {
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-shrink: 3;
}
tile middle h4 {
margin-top: 0;
margin-bottom: 0;
}
tile right {
flex-shrink: 0;
}
tile right button {
padding: 0.2rem;
}
</style>
<content>
<tile>
<left>
<img src={ holder(48, 48) }/>
</left>
<middle>
<h4>
Tile Example
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</middle>
<right>
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
<button><Icon name="x-circle" color="var(--color-bg)" size="24"/></button>
</right>
</tile>
</content>

@ -90,7 +90,7 @@
<main>
<left>
<figure>
<img src="https://via.placeholder.com/800x450?text=Video">
<img src="http://via.placeholder.com/800x450?text=Video">
<figcaption>
<a>#tag</a> <a>#anothertag</a>
<p>Title And Stuff</p>

Loading…
Cancel
Save