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

1 year ago · efd5a2eeb0
parent 9d3d169b22
commit efd5a2eeb0
7 changed files with 156 additions and 38 deletions
--- a/admin/pages/DocsBrowser.svelte
+++ b/admin/pages/DocsBrowser.svelte
@ -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>
--- a/client/Header.svelte
+++ b/client/Header.svelte
@ -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}
--- a/client/pages/Home.svelte
+++ b/client/pages/Home.svelte
@ -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>
--- a/rendered/Header.svelte
+++ b/rendered/Header.svelte
@ -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>
--- a/rendered/pages/index.svelte
+++ b/rendered/pages/index.svelte
@ -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>
--- a/static/global.css
+++ b/static/global.css
@ -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;
+  }
+}
--- a/static/prod_icons.json
+++ b/static/prod_icons.json
@ -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",