Browse Source

Refining how I use icons and patterns consistently with the IconImage.

pull/23/head
Zed A. Shaw 1 month ago
parent
commit
86bfc89a0e
17 changed files with 102 additions and 42 deletions
  1. +3
    -1
      db/blog/posts/01-first-blog-post.md
  2. +3
    -0
      db/modules/drawing_basics/index.json
  3. +3
    -0
      db/modules/html_basics/index.json
  4. +0
    -0
      protected/images/diagband-pricing.svg
  5. +0
    -0
      protected/images/diagband-what-you-get.svg
  6. +0
    -0
      protected/images/hero-holder.svg
  7. +4
    -3
      sass/_navs.scss
  8. +54
    -6
      src/components/IconImage.svelte
  9. +15
    -8
      src/routes/blog/index.svelte
  10. +2
    -5
      src/routes/live/index.svelte
  11. +6
    -3
      src/routes/modules/[slug]/index.svelte
  12. +8
    -3
      src/routes/modules/index.svelte
  13. +1
    -0
      static/css/pattern.min.css
  14. +1
    -1
      static/css/spectre.min.css
  15. +1
    -1
      static/feed.atom
  16. +1
    -1
      static/feed.rss
  17. +0
    -10
      static/images/simple-gradient.svg

+ 3
- 1
db/blog/posts/01-first-blog-post.md View File

@@ -1,7 +1,9 @@
{
"author": "Zed A. Shaw",
"date": "Apr 10, 2020",
"has_image": true,
"icon": "award",
"color": "gray",
"pattern": "triangles-sm",
"summary": "A new kind of blog post for a new kind of blog."
}


+ 3
- 0
db/modules/drawing_basics/index.json View File

@@ -5,6 +5,9 @@
"slug": "drawing_basics",
"title": "Drawing Basics",
"status": "draft",
"icon": "pen-tool",
"color": "yellow-dark",
"pattern": "diagonal-stripes-sm",
"tag": "what",
"subtitle": "Learn just enough drawing to be deadly.",
"summary": "An introduction to drawing with pencil and digitally to get an understanding of it for the web.",

+ 3
- 0
db/modules/html_basics/index.json View File

@@ -5,6 +5,9 @@
"slug": "html_basics",
"title": "HTML Basics",
"status": "draft",
"icon": "globe",
"color": "black",
"pattern": "dots-sm",
"tag": "what",
"subtitle": "Start here if you know nothing.",
"summary": "An introduction to basic HTML for the web.",

static/images/diagband-pricing.svg → protected/images/diagband-pricing.svg View File


static/images/diagband-what-you-get.svg → protected/images/diagband-what-you-get.svg View File


static/images/hero-holder.svg → protected/images/hero-holder.svg View File


+ 4
- 3
sass/_navs.scss View File

@@ -7,17 +7,18 @@

.nav-item {
a {
color: $gray-color-dark;
color: $primary-color;
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
color: $primary-color;
color: $black;
text-decoration: underline;
}
}
&.active {
& > a {
color: darken($gray-color-dark, 10%);
color: darken($primary-color, 10%);
font-weight: bold;
&:focus,
&:hover {

+ 54
- 6
src/components/IconImage.svelte View File

@@ -1,11 +1,16 @@

<script>
import Icon from './Icon.svelte';
export let width="2";
export let pattern="pattern-dots-sm";
export let size="200";
export let color="#1f314d";
export let pattern_color='gray';
export let fill_color="none";
export let linecap="round";
export let linejoin="round";
export let name="alert";
export let pattern="pattern-dots-sm";
export let responsive=false;
export let size="200";
export let width="2";
</script>

<style lang="scss">
@@ -13,11 +18,54 @@

.iconimage-container {
text-align: center !important;
}

.iconimage-color-gray {
background-color: lighten($gray-color-light, 10%);
color: lighten($gray-color, 15%);
}

.iconimage-color-yellow {
background-color: $snow;
color: lighten($yellow, 20%);
}

.iconimage-color-yellow-dark {
background-color: $snow;
color: $yellow;
}

.iconimage-color-red {
background-color: $gray-color-light;
color: lighten($red, 50%);
}

.iconimage-color-red-dark {
background-color: $gray-color-light;
color: $gray-color;
color: $red;
}

.iconimage-color-black {
background-color: $gray-color-light;
color: $black;
}

.iconimage-color-green {
background-color: $snow;
color: lighten($green, 20%);
}
</style>

<div class="{ pattern } iconimage-container">
<Icon name="{name}" size="{size}" width="{width}" responsive="{responsive}" />
<div class="{ pattern } iconimage-container iconimage-color-{pattern_color}">
<svg class="icon-{name}" class:img-responsive="{responsive}"
width="{size}"
height="{size}"
fill="{fill_color}"
stroke="{color}"
stroke-width="{width}"
stroke-linecap="{linecap}"
stroke-linejoin="{linejoin}"
>
<use xlink:href="/icons/feather-sprite.svg#{name}"/>
</svg>
</div>

+ 15
- 8
src/routes/blog/index.svelte View File

@@ -11,6 +11,7 @@
</script>

<script>
import IconImage from '../../components/IconImage.svelte';
export let posts;
</script>

@@ -28,18 +29,24 @@
<h1>Learn JavaScript The Blog Way</h1>
<div class="grid">
{#each posts as post, index}
<div class="card" class:wide="{!post.has_image}" class:grid-tall="{post.has_image}" id="post">
{#if post.has_image}
<div class="card-image"> <img class="img-responsive" src="/images/hero-holder.svg" alt="holder"/></div>
<div class="card grid-tall" id="post">
{#if post.image}
<div class="card-image">
<img class="img-responsive" src="{post.image}" alt="holder"/>
</div>
{:else}
<div class="card-image">
<IconImage name="{post.icon || 'mic'}" size="300" pattern="pattern-{post.pattern || 'diagonal-lines-sm'}" pattern_color="{post.color || 'yellow'}" width="1" />
</div>
{/if}
<div class="card-header">
<div class="card-title h5"> <a data-testid="blog-post-{index}" rel="prefetch" href="blog/{post.slug}">{post.title}</a></div>
{#if post.subtitle }<div class="card-subtitle text-gray">{ post.subtitle }</div>{/if}
</div>
<div class="card-body" data-testid="blog-summary">
{@html post.summary}
</div>
<div class="card-footer text-right"> <a class="btn btn-primary btn-action" data-testid="blog-post" rel="prefetch" href="blog/{post.slug}"> <i class="icon icon-forward">&gt;</i></a></div>
</div>
<div class="card-body" data-testid="blog-summary">
{@html post.summary}
</div>
<div class="card-footer text-right"> <a class="btn btn-primary btn-action" data-testid="blog-post" rel="prefetch" href="blog/{post.slug}"> <i class="icon icon-forward">&gt;</i></a></div>
</div>
{/each}
</div>

+ 2
- 5
src/routes/live/index.svelte View File

@@ -40,11 +40,6 @@
background-color: $gray-color-light;
color: $primary-color;
}

#missing {
background-color: $black !important;
color: $red !important;
}
</style>

<script>
@@ -129,11 +124,13 @@
{#each streams as stream, i}
<div class="card">
<div class="card-image ">
<a href="/live/{stream.metadata.slug}">
{#if stream.metadata.video }
<img alt="{stream.metadata.title} image" src="{stream.metadata.video.poster}" class="img-responsive">
{:else}
<IconImage name="video" size="200" pattern="{patterns[stream.metadata.state] || 'pattern-vertical-stripes-md'}" />
{/if}
</a>
</div>
<div class="card-header">
<div class="card-title h6">

+ 6
- 3
src/routes/modules/[slug]/index.svelte View File

@@ -69,15 +69,18 @@
{#each module.exercises as exercise}
<div class="filter-item card tall" data-tag="tag-{exercise.metadata.completed ? 1 : 2}" id="exercise-card">
<div class="card-image">
<a href="/modules/{module.slug}/{exercise.metadata.slug}">
{#if exercise.metadata.image }
<img alt="{exercise.metadata.title} image" src="{exercise.metadata.image}" class="img-responsive cover-img">
<img alt="{exercise.metadata.title} image" src="{exercise.metadata.image}" class="img-responsive cover-img">
{:else}
<IconImage name="book-open" size="250" pattern="pattern-zigzag-sm" />
<IconImage name="{module.icon || 'book-open'}" size="250" pattern_color="{module.color || 'gray'}"
pattern="pattern-{module.pattern || 'dots-md'}" />
{/if}
</a>
</div>

<div class="card-header">
<div class="card-title h5">{ exercise.metadata.title }</div>
<div class="card-title h5"><a href="/modules/{module.slug}/{exercise.metadata.slug}">{ exercise.metadata.title }</a></div>
</div>

<div class="card-body">

+ 8
- 3
src/routes/modules/index.svelte View File

@@ -48,7 +48,9 @@
{#each modules as module, i}
<div class="divider text-center"></div>
<li class="nav-item">
<a href="/modules/{module.slug}/">{module.title}</a>
<a href="/modules/{module.slug}/">
<Icon name="{module.icon}" size="20" /> {module.title}
</a>
</li>
{/each}
</ul>
@@ -80,11 +82,14 @@
{#each modules as module, i}
<div class="filter-item card grid-tall" data-tag="tag-{module.tag}">
<div class="card-image">
<IconImage name="book-open" size="200" pattern="pattern-dots-md" />
<a href="/modules/{module.slug}/">
<IconImage name="{module.icon || 'book-open'}" size="300" pattern_color="{module.color || 'gray'}"
pattern="pattern-{module.pattern || 'dots-md'}" />
</a>
</div>

<div class="card-header">
<div class="card-title h5">{ module.title }</div>
<div class="card-title h5"><a href="/modules/{module.slug}/">{ module.title }</a></div>
<div class="card-subtitle text-gray">{module.subtitle}</div>
</div>


+ 1
- 0
static/css/pattern.min.css
File diff suppressed because it is too large
View File


+ 1
- 1
static/css/spectre.min.css
File diff suppressed because it is too large
View File


+ 1
- 1
static/feed.atom View File

@@ -2,7 +2,7 @@
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://learnjsthehardway.com/</id>
<title>Learn JavaScript the Hard Way</title>
<updated>2020-04-21T19:46:02.529Z</updated>
<updated>2020-04-22T00:32:08.138Z</updated>
<generator>LJSTHW Custom Generator</generator>
<author>
<name>Zed A. Shaw</name>

+ 1
- 1
static/feed.rss View File

@@ -4,7 +4,7 @@
<title>Learn JavaScript the Hard Way</title>
<link>https://learnjsthehardway.com/</link>
<description>The blog for the Learn JavaScript the Hard Way course.</description>
<lastBuildDate>Tue, 21 Apr 2020 19:46:02 GMT</lastBuildDate>
<lastBuildDate>Wed, 22 Apr 2020 00:32:08 GMT</lastBuildDate>
<docs>https://validator.w3.org/feed/docs/rss2.html</docs>
<generator>LJSTHW Custom Generator</generator>
<language>en</language>

+ 0
- 10
static/images/simple-gradient.svg View File

@@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.41602,0,0,1.41602,0,0)">
<rect x="0" y="0" width="1024" height="768" style="fill:url(#_Linear1);"/>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1024,0,0,768,0,384)"><stop offset="0" style="stop-color:rgb(62,120,126);stop-opacity:1"/><stop offset="1" style="stop-color:white;stop-opacity:1"/></linearGradient>
</defs>
</svg>

Loading…
Cancel
Save