Browse Source

Tiles and Cards examples done.

master
Zed A. Shaw 2 years ago
parent
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

8
lib/imgholder.js

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

@ -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",

1
package.json

@ -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",

2
public/build/bundle.css

File diff suppressed because one or more lines are too long

2740
public/build/bundle.js

File diff suppressed because it is too large

2
public/build/bundle.js.map

File diff suppressed because one or more lines are too long

38
public/code/Cards.css

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

20
public/code/Cards.html

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

36
public/code/Tiles.css

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

20
public/code/Tiles.html

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

4
src/App.svelte

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

4
src/Home.svelte

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

69
src/demos/Cards.svelte

@ -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" />

3
src/demos/Google.svelte

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

7
src/demos/Instagram.svelte

@ -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
src/demos/Login.svelte

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

5
src/demos/Pinterest.svelte

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

66
src/demos/Tiles.svelte

@ -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" />

13
src/demos/Twitter.svelte

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

7
src/demos/XorAcademy.svelte

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

7
src/demos/XorAcademyWatch.svelte

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

13
src/demos/Youtube.svelte

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

24
src/demos/index.svelte

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

4
src/routes.js

@ -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,

68
src/thumbs/Cards.svelte

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

2
src/thumbs/Google.svelte

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

4
src/thumbs/Instagram.svelte

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

2
src/thumbs/Pinterest.svelte

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

63
src/thumbs/Tiles.svelte

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

2
src/thumbs/Youtube.svelte

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