andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: switch how tabs work in an effort to make downstream stuff

Browse source 
easier
This commit is contained in:
Andy Burke 2026-02-23 11:49:23 -08:00
parent 7c4649924e
commit 873773bc91
14 changed files with 846 additions and 947 deletions
Download patch file Download diff file Expand all files Collapse all files

32
public/signup_login_wall.html
View file

@ -5,7 +5,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -18,13 +18,11 @@
#auth-container { #auth-container {
width: 95%; width: 95%;
min-height: 25rem;
position: relative; position: relative;
background: hsl(from var(--bg) h s calc(l/1.1) / 0.5); background: hsl(from var(--bg) h s calc(l/1.1) / 0.5);
max-width: 40em; max-width: 40em;
margin: 0 auto; margin: 0 auto;
border-radius: calc( var(--border-radius) * 2); border-radius: calc( var(--border-radius) * 2);
overflow: hidden;
transition: all 0.33s ease; transition: all 0.33s ease;
animation: zoomsettle 0.4s ease; animation: zoomsettle 0.4s ease;
@ -41,15 +39,6 @@
} }
} }
#login-tab .tab-content {
min-height: 17rem;
overflow: hidden;
}
#signup-tab .tab-content {
min-height: 21rem;
}
body[data-user] #signup-login-wall { body[data-user] #signup-login-wall {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@ -58,7 +47,7 @@
#signup-login-wall form { #signup-login-wall form {
width: 100%; width: 100%;
padding: 1.5rem 1.5rem 0 1.5rem; padding: 0.5rem 1.5rem 0;
} }
</style> </style>
@ -66,18 +55,17 @@
<!-- #include "./files/settings/signup_pitch.html" or "./files/settings/signup_pitch.md" or "./signup_pitch.default.md" --> <!-- #include "./files/settings/signup_pitch.html" or "./files/settings/signup_pitch.md" or "./signup_pitch.default.md" -->
<div class="tabs"> <div class="tabs">
<div id="signup-tab" class="tab">
<input <input
type="radio" type="radio"
name="signup-login-tabs" name="signup-login-tabs"
id="signup-tab-input" id="signup-tab-input"
class="tab-switch" class="tabswitch"
checked="checked" checked="checked"
/> />
<label for="signup-tab-input" class="tab-label"> <label for="signup-tab-input" class="tablabel">
<div class="label">Sign Up</div> <div class="label">Sign Up</div>
</label> </label>
<div class="tab-content"> <div id="signup-tab" class="panel">
<form data-smart="true" data-method="POST" id="signup-form" action="/api/users"> <form data-smart="true" data-method="POST" id="signup-form" action="/api/users">
<script> <script>
{ {
@ -121,18 +109,17 @@
<button id="signup-submit" type="submit" class="primary">Sign Up</button> <button id="signup-submit" type="submit" class="primary">Sign Up</button>
</form> </form>
</div> </div>
</div>
<div id="login-tab" class="tab">
<input <input
type="radio" type="radio"
name="signup-login-tabs" name="signup-login-tabs"
id="login-tab-input" id="login-tab-input"
class="tab-switch" class="tabswitch"
/> />
<label for="login-tab-input" class="tab-label"> <label for="login-tab-input" class="tablabel">
<div class="label">Log In</div> <div class="label">Log In</div>
</label> </label>
<div class="tab-content"> <div id="login-tab" class="panel">
<form data-smart="true" data-method="POST" id="login-form" action="/api/auth"> <form data-smart="true" data-method="POST" id="login-form" action="/api/auth">
<script> <script>
{ {
@ -158,7 +145,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<script> <script>
document.addEventListener( 'DOMContentLoaded', () => { document.addEventListener( 'DOMContentLoaded', () => {

14
public/tabs/blurbs/blurbs.html
View file

@ -127,19 +127,18 @@
} }
</style> </style>
<div id="blurbs" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="blurb-tab-input" id="blurb-tab-input"
class="tab-switch" class="tabswitch"
data-view="blurbs" data-view="blurbs"
/> />
<label for="blurb-tab-input" class="tab-label" <label for="blurb-tab-input" class="tablabel"
><div class="icon blurb"></div> ><div class="icon blurb"></div>
<div class="label">Blurbs</div> <div class="label">Blurbs</div>
</label> </label>
<div class="tab-content"> <div class="panel">
<div id="blurbs-container" class="container"> <div id="blurbs-container" class="container">
<!-- #include "./README.md" --> <!-- #include "./README.md" -->
@ -244,5 +243,4 @@
</template> </template>
</div> </div>
</div> </div>
</div>
</div> </div>

14
public/tabs/calendar/calendar.html
View file

@ -1,16 +1,14 @@
<div id="calendar" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="calendar-tab-input" id="calendar-tab-input"
class="tab-switch" class="tabswitch"
data-view="calendar" data-view="calendar"
/> />
<label for="calendar-tab-input" class="tab-label mockup" <label for="calendar-tab-input" class="tablabel mockup"
><div class="icon calendar"></div> ><div class="icon calendar"></div>
<div class="label">Calendar</div></label <div class="label">Calendar</div></label
> >
<div class="tab-content"> <div class="panel">
<!-- #include "./README.md" --> <!-- #include "./README.md" -->
</div>
</div> </div>

139
public/tabs/chat/chat.css
View file

@ -1,10 +1,10 @@
#chat #chat-container { #chat-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#chat #chat-content { #chat-container #chat-content {
overflow-y: scroll; overflow-y: scroll;
scroll-behavior: smooth; scroll-behavior: smooth;
position: absolute; position: absolute;
@ -14,13 +14,14 @@
bottom: 5rem; bottom: 5rem;
padding: 1.5rem 1.5rem 0.75rem 1.5rem; padding: 1.5rem 1.5rem 0.75rem 1.5rem;
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#chat #chat-content { #chat-container #chat-content {
padding: 0.75rem; padding: 0.75rem;
} }
} }
#chat #chat-entry-container { #chat-container #chat-entry-container {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -29,18 +30,18 @@
padding: 1rem; padding: 1rem;
} }
#chat #chat-entry-container form { #chat-container #chat-entry-container form {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#chat #chat-entry-container form input[type="file"] { #chat-container #chat-entry-container form input[type="file"] {
opacity: 0; opacity: 0;
display: none; display: none;
} }
#chat #chat-entry-container form button, #chat-container #chat-entry-container form button,
#chat #chat-entry-container form label { #chat-container #chat-entry-container form label {
position: relative; position: relative;
top: inherit; top: inherit;
font-size: inherit; font-size: inherit;
@ -54,12 +55,12 @@
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid rgba(128, 128, 128, 0.2);
} }
#chat #chat-entry-container form textarea { #chat-container #chat-entry-container form textarea {
flex-grow: 1; flex-grow: 1;
resize: none; resize: none;
} }
#chat .message-container { #chat-container .message-container {
position: relative; position: relative;
transition: all 0.33s; transition: all 0.33s;
background: var(--bg-lighter); background: var(--bg-lighter);
@ -68,7 +69,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
#chat .message-container .html-from-markdown { #chat-container .message-container .html-from-markdown {
padding: 0; padding: 0;
} }
@ -100,45 +101,33 @@
padding-top: 0 !important; padding-top: 0 !important;
} }
.user-tock.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick), .user-tock.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
.user-tock.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock), .user-tock.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock),
.user-tick.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick), .user-tick.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
.user-tick.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock), .user-tick.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
.user-tock.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick), .user-tock.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
.user-tock.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock), .user-tock.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
.user-tick.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick), .user-tick.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
.user-tick.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock) { .user-tick.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock) {
/* border: 1px dotted green; */ /* border: 1px dotted green; */
margin-bottom: -0.75rem !important; margin-bottom: -0.75rem !important;
} }
#chat #chat .message-container.user-tick.time-tick+.message-container.user-tick.time-tick .info-container,
.message-container.user-tick.time-tick #chat .message-container.user-tick.time-tock+.message-container.user-tick.time-tock .info-container,
+ .message-container.user-tick.time-tick #chat .message-container.user-tock.time-tick+.message-container.user-tock.time-tick .info-container,
.info-container, #chat .message-container.user-tock.time-tock+.message-container.user-tock.time-tock .info-container {
#chat
.message-container.user-tick.time-tock
+ .message-container.user-tick.time-tock
.info-container,
#chat
.message-container.user-tock.time-tick
+ .message-container.user-tock.time-tick
.info-container,
#chat
.message-container.user-tock.time-tock
+ .message-container.user-tock.time-tock
.info-container {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
height: 0; height: 0;
margin: 0; margin: 0;
} }
#chat .message-container.sending { #chat-container .message-container.sending {
opacity: 0.75; opacity: 0.75;
} }
#chat .message-container button[commandfor] { #chat-container .message-container button[commandfor] {
position: absolute; position: absolute;
top: 0.1rem; top: 0.1rem;
right: 0.1rem; right: 0.1rem;
@ -147,13 +136,13 @@
z-index: 10; z-index: 10;
} }
#chat .message-container .message-actions-container:has(input[type="checkbox"]:checked) { #chat-container .message-container .message-actions-container:has(input[type="checkbox"]:checked) {
background: rgb(from var(--bg) r g b / 0.9); background: rgb(from var(--bg) r g b / 0.9);
border-color: var(--border-subtle); border-color: var(--border-subtle);
z-index: 11; z-index: 11;
} }
#chat .message-container .message-actions-container .message-action { #chat-container .message-container .message-actions-container .message-action {
border: none; border: none;
opacity: 0; opacity: 0;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
@ -169,79 +158,75 @@
background: none; background: none;
} }
#chat .message-container .message-actions-container label { #chat-container .message-container .message-actions-container label {
cursor: pointer; cursor: pointer;
width: 2rem; width: 2rem;
text-align: right; text-align: right;
padding-top: 0.5rem; padding-top: 0.5rem;
} }
#chat .message-container .message-actions-container input[type="checkbox"] { #chat-container .message-container .message-actions-container input[type="checkbox"] {
opacity: 0; opacity: 0;
display: none; display: none;
} }
#chat #chat .message-container .message-actions-container input[type="checkbox"]:checked~.message-action {
.message-container
.message-actions-container
input[type="checkbox"]:checked
~ .message-action {
opacity: 1; opacity: 1;
width: 3.25rem; width: 3.25rem;
margin-right: 1.25rem; margin-right: 1.25rem;
} }
#chat .message-container .message-actions-container .message-action .action-name { #chat-container .message-container .message-actions-container .message-action .action-name {
font-size: x-small; font-size: x-small;
} }
#chat .message-container .info-container { #chat-container .message-container .info-container {
display: flex; display: flex;
margin-bottom: -1.75rem; margin-bottom: -1.75rem;
height: 3.75rem; height: 3.75rem;
} }
#chat .message-container .info-container .username-container { #chat-container .message-container .info-container .username-container {
margin: 0 4px; margin: 0 4px;
font-weight: bold; font-weight: bold;
padding-top: 0.5rem; padding-top: 0.5rem;
} }
#chat .message-container .info-container .datetime-container { #chat-container .message-container .info-container .datetime-container {
margin: 0 4px; margin: 0 4px;
padding-top: 0.4rem; padding-top: 0.4rem;
} }
#chat .message-container .info-container .datetime-container .long { #chat-container .message-container .info-container .datetime-container .long {
font-size: x-small; font-size: x-small;
text-transform: uppercase; text-transform: uppercase;
} }
#chat .message-container .info-container .datetime-container .short { #chat-container .message-container .info-container .datetime-container .short {
font-size: xx-small; font-size: xx-small;
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#chat .message-container .message-content-container, #chat-container .message-container .message-content-container,
#chat .message-container .message-media-container, #chat-container .message-container .message-media-container,
#chat .message-container .reactions-container { #chat-container .message-container .reactions-container {
padding-left: 8rem; padding-left: 8rem;
overflow-x: auto; overflow-x: auto;
} }
#chat .message-container .reactions-container:has(> .reaction-container) { #chat-container .message-container .reactions-container:has(> .reaction-container) {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
#chat .embed-container { #chat-container .embed-container {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 640px; max-width: 640px;
} }
#chat .embed-container .embed-actions-container { #chat-container .embed-container .embed-actions-container {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
top: 0.25rem; top: 0.25rem;
@ -253,31 +238,31 @@
opacity: 0; opacity: 0;
} }
#chat .embed-container audio { #chat-container .embed-container audio {
width: 100%; width: 100%;
} }
#chat .embed-container.rounded { #chat-container .embed-container.rounded {
border-radius: 6px; border-radius: 6px;
} }
#chat .embed-container.short { #chat-container .embed-container.short {
height: 120px; height: 120px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
} }
#chat .embed-container.tidal { #chat-container .embed-container.tidal {
border-radius: 12px; border-radius: 12px;
} }
#chat .embed-container.vertical { #chat-container .embed-container.vertical {
max-width: 320px; max-width: 320px;
overflow: hidden; overflow: hidden;
aspect-ratio: 9 / 16 !important; aspect-ratio: 9 / 16 !important;
} }
#chat .embed-container.letterbox { #chat-container .embed-container.letterbox {
/* height: 0; */ /* height: 0; */
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
@ -285,14 +270,14 @@
aspect-ratio: 16 / 9 !important; aspect-ratio: 16 / 9 !important;
} }
#chat .embed-container.square { #chat-container .embed-container.square {
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
aspect-ratio: 1 / 1 !important; aspect-ratio: 1 / 1 !important;
} }
#chat .embed-container iframe, #chat-container .embed-container iframe,
#chat .embed-container video { #chat-container .embed-container video {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -305,7 +290,7 @@
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#chat #chat-container { #chat-container #chat-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -313,28 +298,28 @@
bottom: 0; bottom: 0;
} }
#chat #chat-container #chat-entry-container, #chat-container #chat-container #chat-entry-container,
#chat #chat-container #chat-entry-container form { #chat-container #chat-container #chat-entry-container form {
padding: 0.25rem; padding: 0.25rem;
} }
#chat #chat-container #chat-entry-container form button, #chat-container #chat-container #chat-entry-container form button,
#chat #chat-container #chat-entry-container form label { #chat-container #chat-container #chat-entry-container form label {
margin: 0 0.5rem; margin: 0 0.5rem;
} }
#chat .message-container .message-content-container, #chat-container .message-container .message-content-container,
#chat .message-container .message-media-container, #chat-container .message-container .message-media-container,
#chat .message-container .reactions-container { #chat-container .message-container .reactions-container {
padding-left: 4rem; padding-left: 4rem;
} }
#chat .message-container .info-container .datetime-container .long { #chat-container .message-container .info-container .datetime-container .long {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
#chat .message-container .info-container .datetime-container .short { #chat-container .message-container .info-container .datetime-container .short {
display: inline-block; display: inline-block;
visibility: visible; visibility: visible;
} }

14
public/tabs/chat/chat.html
View file

@ -1,16 +1,15 @@
<div id="chat" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="chat-tab-input" id="chat-tab-input"
class="tab-switch" class="tabswitch"
data-view="chat" data-view="chat"
/> />
<label for="chat-tab-input" class="tab-label" <label for="chat-tab-input" class="tablabel"
><div class="icon chat"></div> ><div class="icon chat"></div>
<div class="label">Chat</div> <div class="label">Chat</div>
</label> </label>
<div class="tab-content"> <div class="panel">
<style> <style>
<!-- #include "./chat.css" --> <!-- #include "./chat.css" -->
</style> </style>
@ -230,6 +229,5 @@
</form> </form>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- #include "./channel_sidebar.html" --> <!-- #include "./channel_sidebar.html" -->

14
public/tabs/essays/essays.html
View file

@ -95,19 +95,18 @@
} }
</style> </style>
<div id="essays" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="essay-tab-input" id="essay-tab-input"
class="tab-switch" class="tabswitch"
data-view="essays" data-view="essays"
/> />
<label for="essay-tab-input" class="tab-label" <label for="essay-tab-input" class="tablabel"
><div class="icon essay"></div> ><div class="icon essay"></div>
<div class="label">Essays</div> <div class="label">Essays</div>
</label> </label>
<div class="tab-content"> <div class="panel">
<div id="essays-container" class="container"> <div id="essays-container" class="container">
<!-- #include "./README.md" --> <!-- #include "./README.md" -->
<!-- #include "./new_essay.html" --> <!-- #include "./new_essay.html" -->
@ -211,5 +210,4 @@
</template> </template>
</div> </div>
</div> </div>
</div>
</div> </div>

14
public/tabs/exchange/exchange.html
View file

@ -1,16 +1,14 @@
<div id="exchange" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="exchange-tab-input" id="exchange-tab-input"
class="tab-switch" class="tabswitch"
data-view="exchange" data-view="exchange"
/> />
<label for="exchange-tab-input" class="tab-label" <label for="exchange-tab-input" class="tablabel"
><div class="icon exchange"></div> ><div class="icon exchange"></div>
<div class="label">Exchange</div></label <div class="label">Exchange</div></label
> >
<div class="tab-content"> <div class="panel">
<!-- #include "./README.md" --> <!-- #include "./README.md" -->
</div>
</div> </div>

14
public/tabs/forum/forum.html
View file

@ -127,19 +127,18 @@
} }
</style> </style>
<div id="forum" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="forum-tab-input" id="forum-tab-input"
class="tab-switch" class="tabswitch"
data-view="forum" data-view="forum"
/> />
<label for="forum-tab-input" class="tab-label" <label for="forum-tab-input" class="tablabel"
><div class="icon forum"></div> ><div class="icon forum"></div>
<div class="label">Forum</div></label <div class="label">Forum</div></label
> >
<div class="tab-content forum-container"> <div class="panel forum-container">
<!-- #include "./README.md" --> <!-- #include "./README.md" -->
<div <div
@ -252,5 +251,4 @@
</div> </div>
<!-- #include "./new_post.html" --> <!-- #include "./new_post.html" -->
</div>
</div> </div>

14
public/tabs/home/home.html
View file

@ -1,17 +1,15 @@
<div id="home" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="home-tab-input" id="home-tab-input"
checked="checked" checked="checked"
class="tab-switch" class="tabswitch"
data-view="home" data-view="home"
/> />
<label for="home-tab-input" class="tab-label"> <label for="home-tab-input" class="tablabel">
<div class="icon home"></div> <div class="icon home"></div>
<div class="label">Home</div> <div class="label">Home</div>
</label> </label>
<div class="tab-content"> <div class="panel">
<!-- #include "./README.md" --> <!-- #include "./README.md" -->
</div>
</div> </div>

14
public/tabs/live/live.html
View file

@ -1,18 +1,17 @@
<script></script> <script></script>
<style></style> <style></style>
<div id="live-tab" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="live-tab-input" id="live-tab-input"
class="tab-switch" class="tabswitch"
data-view="profile" data-view="profile"
/> />
<label for="live-tab-input" class="tab-label mockup" <label for="live-tab-input" class="tablabel mockup"
><div class="icon live"></div> ><div class="icon live"></div>
<div class="label">Live</div></label <div class="label">Live</div></label
> >
<div class="tab-content"> <div class="panel">
<div <div
class="live-container" class="live-container"
style=" style="
@ -69,5 +68,4 @@
</label> </label>
</div> </div>
</div> </div>
</div>
</div> </div>

16
public/tabs/map/map.html
View file

@ -16,7 +16,7 @@
</script> </script>
<style> <style>
#map-tab .tab-content { #map-tab .panel {
overflow: hidden; overflow: hidden;
} }
@ -37,19 +37,17 @@
} }
} }
</style> </style>
<div id="map-tab" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="map-tab-tab-input" id="map-tab-tab-input"
class="tab-switch" class="tabswitch"
data-view="map" data-view="map"
/> />
<label for="map-tab-tab-input" class="tab-label" <label for="map-tab-tab-input" class="tablabel"
><div class="icon map-pin"></div> ><div class="icon map-pin"></div>
<div class="label">Map</div> <div class="label">Map</div>
</label> </label>
<div class="tab-content"> <div class="panel">
<div id="map"></div> <div id="map"></div>
</div>
</div> </div>

14
public/tabs/resources/resources.html
View file

@ -1,14 +1,12 @@
<div id="resources" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="resources-tab-input" id="resources-tab-input"
class="tab-switch" class="tabswitch"
data-view="resources" data-view="resources"
/> />
<label for="resources-tab-input" class="tab-label mockup" <label for="resources-tab-input" class="tablabel mockup"
><div class="icon resources"></div> ><div class="icon resources"></div>
<div class="label">Resources</div></label <div class="label">Resources</div></label
> >
<div class="tab-content"><!-- #include "./README.md" --></div> <div class="panel"><!-- #include "./README.md" --></div>
</div>

116
public/tabs/tabs.html
View file

@ -1,6 +1,6 @@
<script> <script>
APP.on( "view_changed", ({ view }) => { APP.on( "view_changed", ({ view }) => {
const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`); const target_tab = document.querySelector(`.tabswitch[data-view="${view}"]`);
if (target_tab) { if (target_tab) {
target_tab.click(); target_tab.click();
@ -8,7 +8,7 @@
}); });
APP.on( 'load', () => { APP.on( 'load', () => {
const tab_switchers = document.querySelectorAll(".tab-switch"); const tab_switchers = document.querySelectorAll(".tabswitch");
for (const tab_switch of tab_switchers) { for (const tab_switch of tab_switchers) {
tab_switch.addEventListener("input", (event) => { tab_switch.addEventListener("input", (event) => {
const tab_selector = event.target; const tab_selector = event.target;
@ -22,98 +22,46 @@
}); });
</script> </script>
<style> <style>
.tabs-container { :root {
position: relative; --tab-label-height: 4em;
height: 100%; }
}
.tabs { .tabs {
position: relative;
height: 100%;
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-wrap: wrap;
justify-content: space-between; justify-content: space-evenly;
align-items: flex-start; }
min-height: inherit;
background: inherit;
}
.tabs::before, .tabs .tabswitch {
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
background: inherit;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
width: 6rem;
height: 5rem;
cursor: pointer;
transition: all 0.25s;
display: flex;
align-items: center;
justify-content: end;
flex-direction: column;
}
.tab-label .label {
margin: 0.75rem 0;
}
.tab-content {
position: absolute; position: absolute;
z-index: 1;
top: 5rem;
left: 0;
right: 0;
bottom: 0;
opacity: 0; opacity: 0;
transition: all 0.35s; }
border-top: 1px solid var(--border-subtle);
margin-top: 1px;
overflow-y: scroll;
visibility: hidden;
display: none;
background: inherit;
}
.tab-switch, .tabs .tablabel {
.tab-switch + .tab-label { cursor: pointer;
transition: none; border: none;
} text-align: center;
padding: 1em;
height: var(--tab-label-height);
line-height: 2em;
}
.tab-switch:checked + .tab-label { .tabs .tabswitch:checked + .tablabel {
margin-top: 1px;
border-bottom: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
z-index: 1; }
}
.tab-switch:checked + label + .tab-content { .tabs .panel {
z-index: 2; display: none;
opacity: 1; position: relative;
visibility: visible; padding: 1em;
width: 100%;
height: calc( 100vh - var(--tab-label-height) );
order: 99;
}
.tabs .tabswitch:checked + .tablabel + .panel {
display: block; display: block;
} }
@media screen and (max-width: 800px) {
.tab-label {
width: 4rem;
}
}
</style> </style>
<div class="tabs"> <div class="tabs">

14
public/tabs/work/work.html
View file

@ -1,14 +1,14 @@
<div id="work" class="tab"> <input
<input
type="radio" type="radio"
name="top-level-tabs" name="top-level-tabs"
id="work-tab-input" id="work-tab-input"
class="tab-switch" class="tabswitch"
data-view="work" data-view="work"
/> />
<label for="work-tab-input" class="tab-label" <label for="work-tab-input" class="tablabel"
><div class="icon work"></div> ><div class="icon work"></div>
<div class="label">Work</div> <div class="label">Work</div>
</label> </label>
<div class="tab-content"><!-- #include "./README.md" --></div> <div class="panel">
<!-- #include "./README.md" -->
</div> </div>