learn-javascript-the-hard-way
/
bandolier-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial support for mobile screen sizes but throw in a funny warning.

Browse Source
main
Zed A. Shaw 2 years ago
parent 9d3d169b22
commit efd5a2eeb0
7 changed files with 156 additions and 38 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 42
      admin/pages/DocsBrowser.svelte
  2. 25
      client/Header.svelte
  3. 30
      client/pages/Home.svelte
  4. 4
      rendered/Header.svelte
  5. 63
      rendered/pages/index.svelte
  6. 18
      static/global.css
  7. 12
      static/prod_icons.json

42
admin/pages/DocsBrowser.svelte
Unescape View File

@ -81,10 +81,7 @@
height: 100vh; height: 100vh;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
width: 100%;
width: calc(100vw - 300px);
min-width: calc(100vw - 300px);
max-width: calc(100vw - 300px);
} }
right > div { right > div {
@ -176,11 +173,35 @@
.no-doc { .no-doc {
background-color: var(--color-error); background-color: var(--color-error);
} }
@media only screen and (max-width: 600px) {
content {
flex-direction: column;
}
content > right,
content > left {
max-width: 100%;
min-width: 100%;
width: 100%;
overflow-y: initial;
padding-left: 0px;
padding-right: 0px;
}
toc {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0px;
font-size: 0.8em;
}
}
</style> </style>
<Layout footer={ false} header={ false } centered={ true } fullscreen={ true }> <Layout footer={ false} header={ false } centered={ true } fullwidth={ true }>
<sidebar> <content>
<sidebar class:mobile-hide={ url !== "/docs/" }>
<top><h4><a href="/" use:link><Icon name="arrow-left-circle" /> API Docs</a> </h4></top> <top><h4><a href="/" use:link><Icon name="arrow-left-circle" /> API Docs</a> </h4></top>
<items> <items>
<a class:active={ url === "/docs/" } href="/docs/" use:link>Introduction</a> <a class:active={ url === "/docs/" } href="/docs/" use:link>Introduction</a>
@ -191,12 +212,16 @@
</sidebar> </sidebar>
<right> <right>
<span id="top-scroll"></span>
<div class:mobile-hide={ url === "/docs/" } class:mobile={ url !== "/docs/" } >
<a href="/docs/" use:link><Icon name="arrow-left-circle" /> { url }</a>
</div>
{#if url === "/docs/"} {#if url === "/docs/"}
<div id="top-scroll"> <div>
<HTML url="/docs/api/index.html" /> <HTML url="/docs/api/index.html" />
</div> </div>
{:else if docs_data} {:else if docs_data}
<toc id="top-scroll"> <toc>
{#each docs_data.exports as exp} {#each docs_data.exports as exp}
<span class:no-doc={ !exp.comment } on:click={ () => jump(exp.slug) }>{ exp.name } <span class:no-doc={ !exp.comment } on:click={ () => jump(exp.slug) }>{ exp.name }
{#each exp.caps as cap_word}<Icon name={ caps_to_icon[cap_word] } size="24" light={ true }/>{/each} {#each exp.caps as cap_word}<Icon name={ caps_to_icon[cap_word] } size="24" light={ true }/>{/each}
@ -283,4 +308,5 @@
{/each} {/each}
{/if} {/if}
</right> </right>
</content>
</Layout> </Layout>

25
client/Header.svelte
Unescape View File

@ -9,10 +9,29 @@
export let fixed = false; export let fixed = false;
</script> </script>
<style>
#logo {
font-family: fancy;
font-size: 2em;
}
@media only screen and (max-width: 600px) {
#logo {
font-size: 1.5em;
}
}
@media only screen and (max-width: 390px) {
#logo {
font-size: 1.4em;
}
}
</style>
<header class:fixed> <header class:fixed>
<nav> <nav>
{#if $user.authenticated} {#if $user.authenticated}
<a href="/intro/" use:link style="font-family: fancy; font-size: 2em;">The Bandolier</a> <a href="/intro/" use:link id="logo">The Bandolier</a>
<ul> <ul>
<li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li> <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
<li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li> <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li>
@ -24,7 +43,7 @@
</ul> </ul>
{:else} {:else}
<!-- don't use:link because we want them to go to the landing page if they aren't logged in. --> <!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
<a href="/intro/" use:link style="font-family: fancy; font-size: 2em;">The Bandolier</a> <a href="/intro/" use:link id="logo">The Bandolier</a>
<ul> <ul>
{#if register_enabled} {#if register_enabled}
<li><a id="register-button" href="/register/top/"> <li><a id="register-button" href="/register/top/">
@ -39,7 +58,7 @@
</li> </li>
{/if} {/if}
<li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li> <li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li>
<li><a href="https://learnjsthehardway.com/blog/"><Icon name="book" tooltip="Blog posts." /></a></li> <li><a href="/client/#/"><Icon name="book" tooltip="Docs" /></a></li>
<li><Darkmode /></li> <li><Darkmode /></li>
</ul> </ul>
{/if} {/if}

30
client/pages/Home.svelte
Unescape View File

@ -63,21 +63,21 @@
</script> </script>
<style> <style>
right { content > right {
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.5rem;
min-height: calc(100vh - var(--fixed-header-height)); min-height: calc(100vh - var(--fixed-header-height));
max-height: calc(100vh - var(--fixed-header-height)); max-height: calc(100vh - var(--fixed-header-height));
height: calc(100vh - var(--fixed-header-height)); height: calc(100vh - var(--fixed-header-height));
min-width: calc(100% - 300px);
max-width: calc(100% - 300px);
width: calc(100% - 300px);
overflow-y: auto; overflow-y: auto;
width: unset;
} }
left { content > left {
display: flex; display: flex;
max-width: min-content; max-width: min-content;
min-width: min-content;
width: min-content;
min-height: calc(100vh - var(--fixed-header-height)); min-height: calc(100vh - var(--fixed-header-height));
max-height: calc(100vh - var(--fixed-header-height)); max-height: calc(100vh - var(--fixed-header-height));
height: calc(100vh - var(--fixed-header-height)); height: calc(100vh - var(--fixed-header-height));
@ -92,6 +92,24 @@
color: var(--color); color: var(--color);
margin-bottom: 25px; margin-bottom: 25px;
} }
@media only screen and (max-width: 600px) {
content {
flex-direction: column;
}
content > right,
content > left {
max-width: 100%;
min-width: 100%;
width: 100%;
max-height: min-content;
min-height: min-content;
height: min-content;
overflow-y: initial;
}
}
</style> </style>
<Layout fullwidth={ true } fixed={ true } footer={false} auth_optional={ true } testid="home-page"> <Layout fullwidth={ true } fixed={ true } footer={false} auth_optional={ true } testid="home-page">
@ -99,7 +117,7 @@
<left> <left>
<Sidebar on:select={ sidebar_select } menu={ panels }> <Sidebar on:select={ sidebar_select } menu={ panels }>
<div slot="top"> <div slot="top">
<h3>The Bandolier</h3> <h3>Documentation</h3>
</div> </div>
</Sidebar> </Sidebar>
</left> </left>

4
rendered/Header.svelte
Unescape View File

@ -31,9 +31,7 @@ img.logo {
</li> </li>
{/if} {/if}
<li><a href="/client/#/login/"><Icon name="log-in" tooltip="Log in."/></a></li> <li><a href="/client/#/login/"><Icon name="log-in" tooltip="Log in."/></a></li>
<li><a href="/blog/"><Icon name="book" tooltip="Blog posts." /></a></li> <li><a href="/client/#/"><Icon name="book" tooltip="Docs." /></a></li>
<li><a href="/client/#/live/"><Icon name="video" tooltip="Livestreams." tip_position="bottom-left" /></a></li>
<li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
<li><Hydrate component={ Darkmode } /></li> <li><Hydrate component={ Darkmode } /></li>
</ul> </ul>
</nav> </nav>

63
rendered/pages/index.svelte
Unescape View File

@ -28,6 +28,34 @@
--h: 600px; --h: 600px;
--value: 4; --value: 4;
} }
modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
padding: 2rem;
display: none;
}
.feature-grid > * {
--w: min(200px, 30vw);
--h: min(200px, 30vw);
--value: 3;
--text: 9;
}
@media only screen and (max-width: 550px) {
modal {
display: flex;
justify-content: center;
align-items: start;
}
}
</style> </style>
<Layout bare={ true } fullwidth={true}> <Layout bare={ true } fullwidth={true}>
@ -35,7 +63,7 @@
<block class="center" style="--value: 7; --w: 100vw; --h: 600px; margin-bottom: var(--bottom-margin);"> <block class="center" style="--value: 7; --w: 100vw; --h: 600px; margin-bottom: var(--bottom-margin);">
<h1 class="center-text">The Bandolier</h1> <h1 class="center-text">The Bandolier</h1>
<h2 class="center-text">An educational fullstack web development framework.</h2> <h2 class="center-text">An educational fullstack web development framework.</h2>
<p class="center" style="--w: 800px">A belt full of web development ammunition. A full featured web framework designed to be studied. The Bandolier contains simple implementations of almost every feature found in other frameworks, but in small easily studied forms.</p> <p class="center" style="--w: min(100%, 800px)">A belt full of web development ammunition. A full featured web framework designed to be studied. The Bandolier contains simple implementations of almost every feature found in other frameworks, but in small easily studied forms.</p>
<h2 class="center-text" style="font-size: 1.2em;">A project of <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a></h2> <h2 class="center-text" style="font-size: 1.2em;">A project of <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a></h2>
</block> </block>
@ -46,13 +74,13 @@
<p>The Bandolier is based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching video. <b>Yet, it's still easy to study and use.</b> All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a <a href="https://go.dev/">Go</a> backend? Go for it.</p> <p>The Bandolier is based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching video. <b>Yet, it's still easy to study and use.</b> All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a <a href="https://go.dev/">Go</a> backend? Go for it.</p>
</left> </left>
<shape id="photo"> <shape id="photo" class="mobile-hide">
<h4>Photo</h4> <h4>Photo</h4>
</shape> </shape>
</block> </block>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;"> <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
<shape id="photo"> <shape id="photo" class="mobile-hide">
<h4>Photo</h4> <h4>Photo</h4>
</shape> </shape>
@ -67,16 +95,16 @@
<p class="no-flex center-self" style="--w: 50%">The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement. Authentication, standard <a href="https://www.npmjs.com/package/bcryptjs">bcrypt</a> password storage, <a href="/client/#/bando/components/HLSVideo/">HLS Video Streaming</a>, and <a href="/client/#/icons/">icons</a> are just a few of the convenient features. If you don't like how The Bandolier does it, then <b>replace it</b>.</p> <p class="no-flex center-self" style="--w: 50%">The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement. Authentication, standard <a href="https://www.npmjs.com/package/bcryptjs">bcrypt</a> password storage, <a href="/client/#/bando/components/HLSVideo/">HLS Video Streaming</a>, and <a href="/client/#/icons/">icons</a> are just a few of the convenient features. If you don't like how The Bandolier does it, then <b>replace it</b>.</p>
</block> </block>
<grid class="center-self" style="--cols: 3;"> <grid class="center-self feature-grid" style="--cols: 3;">
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Video</a></shape> <shape><a href="#">Video</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">WebTorrent</a></shape> <shape><a href="#">WebTorrent</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">HLS Streams</a></shape> <shape><a href="#">HLS Streams</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Payments</a></shape> <shape><a href="#">Payments</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Auth</a></shape> <shape><a href="#">Auth</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">JSON APIs</a></shape> <shape><a href="#">JSON APIs</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Databases</a></shape> <shape><a href="#">Databases</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">UI Components</a></shape> <shape><a href="#">UI Components</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Admin Panels</a></shape> <shape><a href="#">Admin Panels</a></shape>
</grid> </grid>
<hr> <hr>
@ -92,7 +120,7 @@
<p>If you're just starting out it's hard to know what to do next. The Bandolier supports a <b>personal development process</b> that takes you from an initial UI to a working application in logical steps. The process is the result of watching thousands of beginners struggle with getting started, and has worked to help them start and finish their projects.</p> <p>If you're just starting out it's hard to know what to do next. The Bandolier supports a <b>personal development process</b> that takes you from an initial UI to a working application in logical steps. The process is the result of watching thousands of beginners struggle with getting started, and has worked to help them start and finish their projects.</p>
</left> </left>
<shape id="photo"> <shape id="photo" class="mobile-hide">
<h4>Photo</h4> <h4>Photo</h4>
</shape> </shape>
</block> </block>
@ -117,5 +145,12 @@ npm run DANGER_ADMIN
<h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2> <h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2>
</block> </block>
<modal>
<callout class="warning"><span>
<h1>Get Off Ya Phone</h1>
<p>This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for advanced documentation.</p>
</span></callout>
</modal>
</Blockstart> </Blockstart>
</Layout> </Layout>

18
static/global.css
Unescape View File

@ -1409,9 +1409,9 @@ content {
sidebar { sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 300px; width: calc(min-content + 1rem);
min-width: 300px; min-width: calc(min-content + 1rem);
max-width: 300px; max-width: calc(min-content + 1rem);
box-shadow: 5px 0 5px -5px var(--color-shadow); box-shadow: 5px 0 5px -5px var(--color-shadow);
position: unset; position: unset;
height: 100%; height: 100%;
@ -1540,3 +1540,15 @@ grid {
top: unset; top: unset;
} }
} }
@media only screen and (max-width: 600px) {
sidebar {
max-width: 100%;
min-width: 100%;
width: 100%;
max-height: min-content;
min-height: min-content;
height: min-content;
overflow-y: initial;
}
}

12
static/prod_icons.json
Unescape View File

@ -17,8 +17,11 @@
"static/icons/award.svg", "static/icons/award.svg",
"static/icons/book-open.svg", "static/icons/book-open.svg",
"static/icons/book.svg", "static/icons/book.svg",
"static/icons/box-select.svg",
"static/icons/brush.svg",
"static/icons/calendar.svg", "static/icons/calendar.svg",
"static/icons/cast.svg", "static/icons/cast.svg",
"static/icons/check-check.svg",
"static/icons/check-circle.svg", "static/icons/check-circle.svg",
"static/icons/check-square.svg", "static/icons/check-square.svg",
"static/icons/chevrons-left.svg", "static/icons/chevrons-left.svg",
@ -30,6 +33,8 @@
"static/icons/component.svg", "static/icons/component.svg",
"static/icons/copy.svg", "static/icons/copy.svg",
"static/icons/credit-card.svg", "static/icons/credit-card.svg",
"static/icons/curly-braces.svg",
"static/icons/database.svg",
"static/icons/database.svg", "static/icons/database.svg",
"static/icons/dollar-sign.svg", "static/icons/dollar-sign.svg",
"static/icons/edit.svg", "static/icons/edit.svg",
@ -51,11 +56,15 @@
"static/icons/mail-check.svg", "static/icons/mail-check.svg",
"static/icons/mail.svg", "static/icons/mail.svg",
"static/icons/mails.svg", "static/icons/mails.svg",
"static/icons/plus.svg", "static/icons/network.svg",
"static/icons/option.svg",
"static/icons/plug.svg",
"static/icons/radio.svg", "static/icons/radio.svg",
"static/icons/rss.svg", "static/icons/rss.svg",
"static/icons/save.svg", "static/icons/save.svg",
"static/icons/search.svg", "static/icons/search.svg",
"static/icons/send.svg",
"static/icons/server-cog.svg",
"static/icons/settings.svg", "static/icons/settings.svg",
"static/icons/share-2.svg", "static/icons/share-2.svg",
"static/icons/share.svg", "static/icons/share.svg",
@ -65,6 +74,7 @@
"static/icons/stop-circle.svg", "static/icons/stop-circle.svg",
"static/icons/sunrise.svg", "static/icons/sunrise.svg",
"static/icons/sunset.svg", "static/icons/sunset.svg",
"static/icons/terminal-square.svg",
"static/icons/trash.svg", "static/icons/trash.svg",
"static/icons/user.svg", "static/icons/user.svg",
"static/icons/video-off.svg", "static/icons/video-off.svg",

Write Preview
Loading…
Cancel
Save