From efd5a2eeb0e643c96e82ed41b8af83ce15e47b97 Mon Sep 17 00:00:00 2001 From: "Zed A. Shaw" Date: Tue, 10 Jan 2023 15:30:02 +0700 Subject: [PATCH] Initial support for mobile screen sizes but throw in a funny warning. --- admin/pages/DocsBrowser.svelte | 42 ++++++++++++++++++----- client/Header.svelte | 25 ++++++++++++-- client/pages/Home.svelte | 30 ++++++++++++---- rendered/Header.svelte | 4 +-- rendered/pages/index.svelte | 63 ++++++++++++++++++++++++++-------- static/global.css | 18 ++++++++-- static/prod_icons.json | 12 ++++++- 7 files changed, 156 insertions(+), 38 deletions(-) diff --git a/admin/pages/DocsBrowser.svelte b/admin/pages/DocsBrowser.svelte index a76ac15..74ddd5c 100644 --- 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; + } + } - - + + +

API Docs

Introduction @@ -191,12 +212,16 @@ + + {#if url === "/docs/"} -
+
{:else if docs_data} - + {#each docs_data.exports as exp} jump(exp.slug) }>{ exp.name } {#each exp.caps as cap_word}{/each} @@ -283,4 +308,5 @@ {/each} {/if} + diff --git a/client/Header.svelte b/client/Header.svelte index 34c846a..ebabffb 100644 --- a/client/Header.svelte +++ b/client/Header.svelte @@ -9,10 +9,29 @@ export let fixed = false; + +
diff --git a/rendered/pages/index.svelte b/rendered/pages/index.svelte index 81a4e8e..30c45d8 100644 --- 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; + } + } + @@ -35,7 +63,7 @@

The Bandolier

An educational fullstack web development framework.

-

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.

+

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.

A project of Learn JavaScript the Hard Way

 @@ -46,13 +74,13 @@

The Bandolier is based on code used to power learnjsthehardway.com supporting thousands of users all watching video. Yet, it's still easy to study and use. All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a Go backend? Go for it.

- +

Photo

 - +

Photo

 @@ -67,16 +95,16 @@

The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement. Authentication, standard bcrypt password storage, HLS Video Streaming, and icons are just a few of the convenient features. If you don't like how The Bandolier does it, then replace it.

 - - Video - WebTorrent - HLS Streams - Payments - Auth - JSON APIs - Databases - UI Components - Admin Panels + + Video + WebTorrent + HLS Streams + Payments + Auth + JSON APIs + Databases + UI Components + Admin Panels
@@ -92,7 +120,7 @@

If you're just starting out it's hard to know what to do next. The Bandolier supports a personal development process 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.

- +

Photo

 @@ -117,5 +145,12 @@ npm run DANGER_ADMIN

Read the Full Quick Start Guide

+ + +

Get Off Ya Phone

+ +

This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to the docs and when you're serious go find a real computer and stop making people support your phone for advanced documentation.

+ + diff --git a/static/global.css b/static/global.css index 5f96ffe..1688748 100644 --- 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; + } +} diff --git a/static/prod_icons.json b/static/prod_icons.json index a792351..8b6a7b7 100644 --- 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",