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

main
Zed A. Shaw 2 years ago
parent 9d3d169b22
commit efd5a2eeb0
  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

@ -81,10 +81,7 @@
height: 100vh;
max-height: 100vh;
overflow-y: auto;
width: calc(100vw - 300px);
min-width: calc(100vw - 300px);
max-width: calc(100vw - 300px);
width: 100%;
}
right > div {
@ -176,11 +173,35 @@
.no-doc {
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>
<Layout footer={ false} header={ false } centered={ true } fullscreen={ true }>
<sidebar>
<Layout footer={ false} header={ false } centered={ true } fullwidth={ true }>
<content>
<sidebar class:mobile-hide={ url !== "/docs/" }>
<top><h4><a href="/" use:link><Icon name="arrow-left-circle" /> API Docs</a> </h4></top>
<items>
<a class:active={ url === "/docs/" } href="/docs/" use:link>Introduction</a>
@ -191,12 +212,16 @@
</sidebar>
<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/"}
<div id="top-scroll">
<div>
<HTML url="/docs/api/index.html" />
</div>
{:else if docs_data}
<toc id="top-scroll">
<toc>
{#each docs_data.exports as exp}
<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}
@ -283,4 +308,5 @@
{/each}
{/if}
</right>
</content>
</Layout>

@ -9,10 +9,29 @@
export let fixed = false;
</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>
<nav>
{#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>
<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>
@ -24,7 +43,7 @@
</ul>
{:else}
<!-- 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>
{#if register_enabled}
<li><a id="register-button" href="/register/top/">
@ -39,7 +58,7 @@
</li>
{/if}
<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>
</ul>
{/if}

@ -63,21 +63,21 @@
</script>
<style>
right {
content > right {
flex-direction: column;
padding: 0.5rem;
min-height: calc(100vh - var(--fixed-header-height));
max-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;
width: unset;
}
left {
content > left {
display: flex;
max-width: min-content;
min-width: min-content;
width: min-content;
min-height: calc(100vh - var(--fixed-header-height));
max-height: calc(100vh - var(--fixed-header-height));
height: calc(100vh - var(--fixed-header-height));
@ -92,6 +92,24 @@
color: var(--color);
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>
<Layout fullwidth={ true } fixed={ true } footer={false} auth_optional={ true } testid="home-page">
@ -99,7 +117,7 @@
<left>
<Sidebar on:select={ sidebar_select } menu={ panels }>
<div slot="top">
<h3>The Bandolier</h3>
<h3>Documentation</h3>
</div>
</Sidebar>
</left>

@ -31,9 +31,7 @@ img.logo {
</li>
{/if}
<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/#/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><a href="/client/#/"><Icon name="book" tooltip="Docs." /></a></li>
<li><Hydrate component={ Darkmode } /></li>
</ul>
</nav>

@ -28,6 +28,34 @@
--h: 600px;
--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>
<Layout bare={ true } fullwidth={true}>
@ -35,7 +63,7 @@
<block class="center" style="--value: 7; --w: 100vw; --h: 600px; margin-bottom: var(--bottom-margin);">
<h1 class="center-text">The Bandolier</h1>
<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>
</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>
</left>
<shape id="photo">
<shape id="photo" class="mobile-hide">
<h4>Photo</h4>
</shape>
</block>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
<shape id="photo">
<shape id="photo" class="mobile-hide">
<h4>Photo</h4>
</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>
</block>
<grid class="center-self" style="--cols: 3;">
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Video</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">WebTorrent</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">HLS Streams</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Payments</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Auth</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">JSON APIs</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Databases</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">UI Components</a></shape>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Admin Panels</a></shape>
<grid class="center-self feature-grid" style="--cols: 3;">
<shape><a href="#">Video</a></shape>
<shape><a href="#">WebTorrent</a></shape>
<shape><a href="#">HLS Streams</a></shape>
<shape><a href="#">Payments</a></shape>
<shape><a href="#">Auth</a></shape>
<shape><a href="#">JSON APIs</a></shape>
<shape><a href="#">Databases</a></shape>
<shape><a href="#">UI Components</a></shape>
<shape><a href="#">Admin Panels</a></shape>
</grid>
<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>
</left>
<shape id="photo">
<shape id="photo" class="mobile-hide">
<h4>Photo</h4>
</shape>
</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>
</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>
</Layout>

@ -1409,9 +1409,9 @@ content {
sidebar {
display: flex;
flex-direction: column;
width: 300px;
min-width: 300px;
max-width: 300px;
width: calc(min-content + 1rem);
min-width: calc(min-content + 1rem);
max-width: calc(min-content + 1rem);
box-shadow: 5px 0 5px -5px var(--color-shadow);
position: unset;
height: 100%;
@ -1540,3 +1540,15 @@ grid {
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;
}
}

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

Loading…
Cancel
Save