Modal is now a component.

master
Zed A. Shaw 3 years ago
parent 557fdeaf38
commit ca0a708076
  1. 2
      public/build/bundle.css
  2. 1939
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 1
      public/global.css
  5. 11
      src/components/CodeBubble.svelte
  6. 44
      src/components/Modal.svelte
  7. 18
      src/demos/Twitter.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

@ -13,6 +13,7 @@
--color-secondary-accent: #888;
--color-shadow: #ddd;
--color-shadow-secondary: #fff;
--color-shadow-dark: #888;
--color-bg-inverted: #555;
--color-text: #000;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

@ -4,6 +4,9 @@
export let visible = false;
export let url = "";
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const hide_code_button = () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
visible = false;
@ -32,11 +35,9 @@
{#if visible}
<code-bubble>
<a transition:fade href={ url }>
<button>
<Icon name="code" size="32" />
</button>
</a>
<button transition:fade on:click={ () => dispatch('click') }>
<Icon name="code" size="32" />
</button>
</code-bubble>
{/if}

@ -0,0 +1,44 @@
<script>
import Icon from '../components/Icon.svelte';
import { fade } from 'svelte/transition';
export let visible = false;
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
</script>
<style>
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);
}
modal-content {
flex-direction: column;
background: white;
box-shadow: 4px 4px 4px var(--color-shadow-dark);
border: 1px solid var(--color-accent);
border-radius: 5px;
max-height: 50vh;
min-height: 50vh;
max-width: 50vh;
width: 100%;
z-index: 20;
padding: 0.5rem;
}
</style>
{#if visible}
<modal on:click={ () => dispatch('click') }>
<modal-content>
<slot></slot>
</modal-content>
</modal>
{/if}

@ -2,8 +2,12 @@
import { link } from 'svelte-spa-router';
import Icon from '../components/Icon.svelte';
import CodeBubble from '../components/CodeBubble.svelte';
import Modal from '../components/Modal.svelte';
let tweets = [1,2,3,4,5];
export let thumbnail = false;
let modal_visible = true;
const toggle_modal = () => modal_visible = !modal_visible;
</script>
<style>
@ -198,13 +202,11 @@
<content>
{#if !thumbnail}
<left>
<Icon name="twitter" color="var(--color)" />
<h4># Explore</h4>
<h4><Icon name="settings" color="var(--color-text)" /> Settings</h4>
</left>
{/if}
<middle>
<header>
@ -235,7 +237,6 @@
<p><Icon name="map" size="24" color="var(--color-bg-secondary)" /> Some Place, KY <Icon name="link" size="24" color="var(--color-bg-secondary)" /> <a>learnjsthehardway.org</a> <Icon name="calendar" size="24" color="var(--color-bg-secondary)" /> Joined Jan, 1999. </p>
<p><b>167</b> Following <b>10.4k</b> Followers</p>
</profile>
{#if !thumbnail}
<hr>
@ -261,10 +262,8 @@
</tweet>
{/each}
</tweets>
{/if}
</middle>
{#if !thumbnail}
<right>
<input placeholder="Search Twitter" />
@ -321,7 +320,10 @@
</section>
</right>
{/if}
</content>
<CodeBubble url="https://git.learnjsthehardway.com/" />
<CodeBubble url="https://git.learnjsthehardway.com/" on:click={ toggle_modal } />
<Modal visible={modal_visible} on:click={ toggle_modal }>
<h1>Hi! This is Cool!</h1>
</Modal>

Loading…
Cancel
Save