Mastodon/MARL-Mastodon-Archive-Reader-Lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP...

Browse Source
This commit is contained in:
Vincent CLAVIEN 2024-12-05 19:35:07 +01:00
parent 72517d4e8c
commit 83fea0f787
12 changed files with 234 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
css/_actor.scss
View File

@ -1,6 +1,6 @@
.actor { .actor {
a { a {
color: var(--fg-inv0); color: var(--actor-fg0);
} }
h1, h1,
h2, h2,
@ -12,13 +12,13 @@
summary { summary {
padding: 1rem; padding: 1rem;
svg { svg {
fill: var(--fg-inv1); fill: var(--actor-fg1);
} }
&:hover, &:hover,
&:focus { &:focus {
color: var(--fg-inv0); color: var(--actor-fg0);
svg { svg {
fill: var(--fg-inv0); fill: var(--actor-fg0);
} }
} }
} }
@ -36,52 +36,6 @@
justify-content: flex-start; justify-content: flex-start;
} }
.actors-tabs {
flex-grow: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem 1rem 0;
background: var(--bg-inv0);
background-color: hsl(var(--actor-hue), 50%, 80%);
background-color: $actor-accent-dark-ok;
overflow: hidden;
box-shadow: 0 -0.75rem 0.75rem -0.75rem rgba(0, 0, 0, 0.75) inset;
user-select: none;
button {
all: unset;
padding: 0.35rem 0.7rem 0.3rem;
font-size: 0.85em;
font-family: inherit;
border-radius: 0.25rem 0.25rem 0 0;
color: var(--fg1);
background: #fff; // ### VAR
cursor: pointer;
opacity: 0.65;
span {
display: inline-block;
padding-bottom: 0.1rem;
border-bottom: 0.2rem solid transparent;
border-color: hsl(var(--actor-hue), 50%, 80%);
border-color: $actor-accent-light-ok;
}
&:hover {
opacity: 0.85;
}
&[aria-selected="true"] {
opacity: 1;
}
&:focus-visible {
outline: 2px solid hsl(var(--actor-hue), 50%, 80%);
outline: 2px solid $actor-accent-light-ok;
outline-offset: 2px;
}
}
}
.actor-panel { .actor-panel {
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
@ -91,8 +45,8 @@
justify-content: flex-start; justify-content: flex-start;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
color: var(--fg-inv1); color: var(--actor-fg1);
background: var(--bg-inv3); background: var(--actor-bg3);
} }
.actor-pretty { .actor-pretty {
@ -175,13 +129,13 @@
.actor-summary { .actor-summary {
margin: 2rem 0; margin: 2rem 0;
padding: 1rem; padding: 1rem;
color: var(--fg-inv0); color: var(--actor-fg0);
line-height: 1.3; line-height: 1.3;
background: var(--bg-inv4); background: var(--actor-bg4);
background: radial-gradient( background: radial-gradient(
circle at 200% 150%, circle at 200% 150%,
var(--bg-inv3), var(--actor-bg3),
var(--bg-inv4) var(--actor-bg4)
); );
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.3rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
@ -203,8 +157,8 @@
} }
dd { dd {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: var(--fg-inv0); color: var(--actor-fg0);
border-left: 1px solid var(--bg-inv4); border-left: 1px solid var(--actor-bg4);
} }
@container (width < 340px) { @container (width < 340px) {
@ -213,7 +167,7 @@
dl { dl {
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid var(--bg-inv4); border-bottom: 1px solid var(--actor-bg4);
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
@ -237,7 +191,7 @@
gap: 1rem; gap: 1rem;
.count { .count {
display: block; display: block;
color: var(--fg-inv0); color: var(--actor-fg0);
font-size: 1.6em; font-size: 1.6em;
font-weight: bold; font-weight: bold;
} }
@ -257,11 +211,11 @@
font-weight: bold; font-weight: bold;
&:hover, &:hover,
&:focus-visible { &:focus-visible {
color: var(--fg-inv0); color: var(--actor-fg0);
} }
} }
&[open] summary { &[open] summary {
color: var(--fg-inv0); color: var(--actor-fg0);
} }
p { p {
margin-top: 0.5rem; margin-top: 0.5rem;
@ -271,7 +225,7 @@
} }
.actor-raw { .actor-raw {
background: var(--bg-inv2); background: var(--actor-bg2);
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset; box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
.details-content { .details-content {
padding: 1rem 1rem 2rem; padding: 1rem 1rem 2rem;
@ -281,7 +235,7 @@
} }
.actor-likes-bookmarks { .actor-likes-bookmarks {
background: var(--bg-inv0); background: var(--actor-bg0);
overflow-wrap: break-word; overflow-wrap: break-word;
h2 { h2 {
@ -316,10 +270,98 @@
} }
.actor-likes { .actor-likes {
background: var(--bg-inv1); background: var(--actor-bg1);
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset; box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
} }
.actor-bookmarks { .actor-bookmarks {
padding-bottom: 1rem; padding-bottom: 1rem;
box-shadow: 0 0.75rem 0.75rem -1rem #000 inset; box-shadow: 0 0.75rem 0.75rem -1rem #000 inset;
} }
.multiple-actors {
.actors-tabs {
flex-grow: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 1rem 1rem 0;
// background: var(--actor-bg0);
// background: var(--actor-bg0-ok);
background-color: hsl(var(--actor-hue), 50%, 80%);
background-color: var(--actor-bg3-ok);
overflow: hidden;
box-shadow: 0 -0.75rem 0.75rem -0.75rem rgba(0, 0, 0, 0.75) inset;
user-select: none;
button {
all: unset;
padding: 0.35rem 0.7rem 0.3rem;
font-size: 0.85em;
font-family: inherit;
border-radius: 0.25rem 0.25rem 0 0;
color: var(--fg1);
background: #fff; // ### VAR
cursor: pointer;
opacity: 0.65;
span {
display: inline-block;
padding-bottom: 0.1rem;
border-bottom: 0.2rem solid transparent;
border-color: hsl(var(--actor-hue), 50%, 80%);
border-color: $actor-accent-light-ok;
// border-color: var(--actor-fg1-ok);
}
&:hover {
opacity: 0.85;
}
&[aria-selected="true"] {
opacity: 1;
}
&:focus-visible {
outline: 2px solid hsl(var(--actor-hue), 50%, 80%);
outline: 2px solid $actor-accent-light-ok;
// outline: 2px solid var(--actor-fg1-ok);
outline-offset: 2px;
}
}
}
// color variations
.actor summary svg {
fill: var(--actor-fg1-ok);
}
.actor-panel {
color: var(--actor-fg1-ok);
background: var(--actor-bg3-ok);
}
.actor-summary {
background: var(--actor-bg4-ok);
background: radial-gradient(
circle at 200% 150%,
var(--actor-bg3-ok),
var(--actor-bg4-ok)
);
}
.actor-infos {
dd {
border-left-color: var(--actor-bg4-ok);
}
@container (width < 340px) {
dl {
border-bottom-color: var(--actor-bg4-ok);
}
}
}
.actor-raw {
background: var(--actor-bg2-ok);
}
.actor-likes-bookmarks {
background: var(--actor-bg0-ok);
}
.actor-likes {
background: var(--actor-bg1-ok);
}
}

141
css/_colors.scss
View File

@ -1,65 +1,74 @@
// tint and saturation factor for the app color scheme // tint and saturation factor for the app color scheme
$hue: 30; // === 59.17 in oklch $hue: 30; // === 59.17 in oklch
$sat: 0.5;
/*********************************/ /*********************************/
/* global background/text colors */ /* global background/text colors */
/*********************************/ /*********************************/
$bg0: hsl(var(--hue), calc(var(--sat) * 0%), 100%); $bg0: #fff; // -> post content
// -> post content $bg1: hsl($hue, 10%, 95%); // -> post
$bg1: hsl(var(--hue), calc(var(--sat) * 20%), 95%); $bg2: hsl($hue, 15%, 90%); // -> post attachment/meta/raw
// -> post $bg3: hsl($hue, 17.5%, 87%); // -> posts header
$bg2: hsl(var(--hue), calc(var(--sat) * 30%), 90%); $bg4: hsl($hue, 20%, 84%); // -> filters/tags panels
// -> post attachment/meta/raw
$bg3: hsl(var(--hue), calc(var(--sat) * 35%), 87%);
// -> posts header
$bg4: hsl(var(--hue), calc(var(--sat) * 40%), 84%);
// -> filters/tags panels
$fg0: hsl(var(--hue), calc(var(--sat) * 0%), 0%); $fg0: hsl($hue, 0%, 0%); // -> post content
// -> post content $fg1: hsl($hue, 10%, 20%); // -> body text; some SVG icons (panel close)
$fg1: hsl(var(--hue), calc(var(--sat) * 20%), 20%); $fg2: hsl($hue, 10%, 30%); // -> headings (h1, h2...)
// -> body text; some SVG icons (panel close)
$fg2: hsl(var(--hue), calc(var(--sat) * 20%), 30%);
// -> headings (h1, h2...)
/********************************************/ $fg-inv: #fff; // -> misc highlighted text
/* inverted light scheme (e.g. actor panel) */
/********************************************/
$bg-inv0: hsl(var(--hue), calc(var(--sat) * 75%), 11%); /***************/
// -> bookmarks /* actor panel */
$bg-inv1: hsl(var(--hue), calc(var(--sat) * 65%), 15%); /***************/
// -> favorites
$bg-inv2: hsl(var(--hue), calc(var(--sat) * 50%), 20%);
// -> actor raw data, mobile menu
$bg-inv3: hsl(var(--hue), calc(var(--sat) * 50%), 25%);
// -> actor panel
$bg-inv4: hsl(var(--hue), calc(var(--sat) * 45%), 40%);
// -> actor summary
$fg-inv0: hsl(var(--hue), calc(var(--sat) * 0%), 100%); $actor-bg0: hsl($hue, 37.5%, 11%); // -> bookmarks
// -> misc highlighted text; mobile menu icons $actor-bg1: hsl($hue, 32.5%, 15%); // -> favorites
$fg-inv1: hsl(var(--hue), calc(var(--sat) * 80%), 80%); $actor-bg2: hsl($hue, 25%, 20%); // -> actor raw data
// -> actor, mobile menu $actor-bg3: hsl($hue, 25%, 25%); // -> actor panel
$actor-bg4: hsl($hue, 22.5%, 40%); // -> actor summary
$actor-fg0: #fff;
$actor-fg1: hsl($hue, 40%, 80%); // -> actor texts
// OKLCH variants
$actor-bg0-ok: oklch(11% 37.5% var(--actor-hue));
$actor-bg1-ok: oklch(15% 32.5% var(--actor-hue));
$actor-bg2-ok: oklch(20% 25% var(--actor-hue));
$actor-bg3-ok: oklch(25% 25% var(--actor-hue));
$actor-bg4-ok: oklch(40% 22.5% var(--actor-hue));
$actor-fg1-ok: oklch(92% 10% var(--actor-hue));
/***************/
/* mobile menu */
/***************/
$menu-bg: hsl($hue, 25%, 20%); // actor-bg2
$menu-fg: hsl($hue, 40%, 80%); // actor-fg1
$menu-fg-active: #fff;
$menu-icon: #fff;
$menu-filter-active: hsl($hue, 75%, 50%); // accent-light2
$menu-backdrop: rgba(0, 0, 0, 0.5);
$panel-close: hsl($hue, 40%, 80%); // fg1
$panel-close-hover: hsl($hue, 75%, 38%); // accent-light
/**********/ /**********/
/* accent */ /* accent */
/**********/ /**********/
$accent: hsl(var(--hue), calc(var(--sat) * 200%), 30%); $accent: hsl($hue, 100%, 30%);
// -> links, active elements, counters, misc background stripes (color 1) // -> links, active elements, counters, misc background stripes (color 1)
$accent-dark: hsl(var(--hue), calc(var(--sat) * 250%), 26%); $accent-dark: hsl($hue, 100%, 26%);
// -> misc background stripes (color 2) // -> misc background stripes (color 2)
$accent-light: hsl(var(--hue), calc(var(--sat) * 150%), 38%); $accent-light: hsl($hue, 75%, 38%);
// -> focusable elements outline; main header counter // -> focusable elements outline; main header counter
$accent-light2: hsl(var(--hue), calc(var(--sat) * 150%), 50%); $accent-light2: hsl($hue, 75%, 50%);
// -> overlay hover/focus icons (SVG); private posts border; active filter indicator (mobile menu) // -> overlay hover/focus icons (SVG); private posts border; active filter indicator (mobile menu)
// === oklch(56.48% 0.124 59.17) // === oklch(56.48% 0.124 59.17)
$accent-light3: hsl(var(--hue), calc(var(--sat) * 150%), 75%); $accent-light3: hsl($hue, 75%, 75%);
// -> hover effect on images // -> hover effect on images
$accent-light-bg: hsl(var(--hue), calc(var(--sat) * 100%), 96%); $accent-light-bg: hsl($hue, 50%, 96%);
// -> private posts background // -> private posts background
/***********/ /***********/
@ -69,7 +78,6 @@ $accent-light-bg: hsl(var(--hue), calc(var(--sat) * 100%), 96%);
$overlay-icon: #fff; $overlay-icon: #fff;
$overlay-icon-hover: #fff; $overlay-icon-hover: #fff;
$overlay-backdrop: rgba(0, 0, 0, 0.75); $overlay-backdrop: rgba(0, 0, 0, 0.75);
$menu-backdrop: rgba(0, 0, 0, 0.5);
/*****************/ /*****************/
/* form elements */ /* form elements */
@ -80,11 +88,11 @@ $bg-input-hover: rgba(255, 255, 255, 0.65);
$bg-input-focus: rgba(255, 255, 255, 1); $bg-input-focus: rgba(255, 255, 255, 1);
$bg-button: rgba(255, 255, 255, 1); $bg-button: rgba(255, 255, 255, 1);
$bg-button-hover: hsl(var(--hue), calc(var(--sat) * 100%), 95%); $bg-button-hover: hsl($hue, 50%, 95%);
$button-svg: $fg1; $button-svg: $fg1;
$button-svg-hover: hsl(var(--hue), calc(var(--sat) * 150%), 50%); $button-svg-hover: hsl($hue, 75%, 50%);
$button-svg-focus: hsl(var(--hue), calc(var(--sat) * 150%), 50%); $button-svg-focus: hsl($hue, 75%, 50%);
$button-svg-active: hsl(var(--hue), calc(var(--sat) * 150%), 50%); $button-svg-active: hsl($hue, 75%, 50%);
$fg-button-focus: $accent; $fg-button-focus: $accent;
$fg-button-active: $accent; $fg-button-active: $accent;
@ -92,9 +100,6 @@ $fg-button-active: $accent;
// Note: some rgba values hardcoded, used mostly for box-shadow or backdrops // Note: some rgba values hardcoded, used mostly for box-shadow or backdrops
html { html {
--hue: #{$hue};
--sat: #{$sat};
--bg0: #{$bg0}; --bg0: #{$bg0};
--bg1: #{$bg1}; --bg1: #{$bg1};
--bg2: #{$bg2}; --bg2: #{$bg2};
@ -104,15 +109,15 @@ html {
--fg0: #{$fg0}; --fg0: #{$fg0};
--fg1: #{$fg1}; --fg1: #{$fg1};
--fg2: #{$fg2}; --fg2: #{$fg2};
--fg-inv: #{$fg-inv};
--bg-inv0: #{$bg-inv0}; --menu-bg: #{$menu-bg};
--bg-inv1: #{$bg-inv1}; --menu-fg: #{$menu-fg};
--bg-inv2: #{$bg-inv2}; --menu-fg-active: $menu#{-fg-active};
--bg-inv3: #{$bg-inv3}; --menu-icon: #{$menu-icon};
--bg-inv4: #{$bg-inv4}; --menu-filter-active: $menu#{-filter-active};
--panel-close: #{$panel-close};
--fg-inv0: #{$fg-inv0}; --panel-close-hover: $panel#{-close-hover};
--fg-inv1: #{$fg-inv1};
--accent: #{$accent}; --accent: #{$accent};
--accent-dark: #{$accent-dark}; --accent-dark: #{$accent-dark};
@ -139,10 +144,24 @@ html {
--fg-button-focus: #{$fg-button-focus}; --fg-button-focus: #{$fg-button-focus};
--fg-button-active: #{$fg-button-active}; --fg-button-active: #{$fg-button-active};
--actor-hue: 0;
// ### TODO hsl() fallback
} }
$actor-accent-light-ok: oklch(80% 0.15 var(--actor-hue)); .actors-wrapper {
$actor-accent-dark-ok: oklch(25% 0.25 var(--actor-hue)); --actor-hue: 0;
--actor-bg0: #{$actor-bg0};
--actor-bg0-ok: #{$actor-bg0-ok};
--actor-bg1: #{$actor-bg1};
--actor-bg1-ok: #{$actor-bg1-ok};
--actor-bg2: #{$actor-bg2};
--actor-bg2-ok: #{$actor-bg2-ok};
--actor-bg3: #{$actor-bg3};
--actor-bg3-ok: #{$actor-bg3-ok};
--actor-bg4: #{$actor-bg4};
--actor-bg4-ok: #{$actor-bg4-ok};
--actor-fg0: #{$actor-fg0};
--actor-fg1: #{$actor-fg1};
--actor-fg1-ok: #{$actor-fg1-ok};
}
$actor-accent-light-ok: oklch(80% 15% var(--actor-hue));

2
css/_filters.scss
View File

@ -96,7 +96,7 @@
} }
&.active label { &.active label {
color: var(--fg-inv0); color: var(--fg-inv);
opacity: 1; opacity: 1;
background-color: var(--accent); background-color: var(--accent);
@media (forced-colors: active) { @media (forced-colors: active) {

14
css/_menu.scss
View File

@ -6,8 +6,8 @@ $panel-width: 400px;
display: none; display: none;
position: relative; position: relative;
z-index: 2; z-index: 2;
color: var(--fg-inv1); color: var(--menu-fg);
background-color: var(--bg-inv2); background-color: var(--menu-bg);
@media (forced-colors: active) { @media (forced-colors: active) {
color: buttonText; color: buttonText;
@ -53,7 +53,7 @@ $panel-width: 400px;
width: $icon-width; width: $icon-width;
height: auto; height: auto;
margin: 5px auto 0; margin: 5px auto 0;
fill: var(--fg-inv0); fill: var(--menu-icon);
@media (forced-colors: active) { @media (forced-colors: active) {
fill: buttonText; fill: buttonText;
@ -79,7 +79,7 @@ $panel-width: 400px;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 10px; border-radius: 10px;
background-color: var(--accent-light2); background-color: var(--menu-filter-active);
@media (forced-colors: active) { @media (forced-colors: active) {
background-color: Highlight; background-color: Highlight;
} }
@ -164,7 +164,7 @@ $panel-width: 400px;
right: 6px; right: 6px;
top: 6px; top: 6px;
z-index: 1; z-index: 1;
color: var(--fg1); color: var(--panel-close);
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
.btn-icon { .btn-icon {
@ -173,7 +173,7 @@ $panel-width: 400px;
&:hover, &:hover,
&:focus, &:focus,
&:focus-visible { &:focus-visible {
color: var(--accent-light); color: var(--panel-close-hover);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -205,7 +205,7 @@ $panel-width: 400px;
&.menu-open-actor .menu-actor, &.menu-open-actor .menu-actor,
&.menu-open-filters .menu-filters, &.menu-open-filters .menu-filters,
&.menu-open-tags .menu-tags { &.menu-open-tags .menu-tags {
color: var(--fg-inv0); color: var(--menu-fg-active);
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
} }
} }

4
css/_tags.scss
View File

@ -82,10 +82,10 @@ $display-wide: 340px;
} }
} }
.active button div { .active button div {
color: var(--fg-inv0); color: var(--fg-inv);
background-color: var(--accent); background-color: var(--accent);
.count { .count {
color: var(--fg-inv0); color: var(--fg-inv);
} }
} }
} }

2
css/_toot.scss
View File

@ -37,7 +37,7 @@ $meta-visible: 100ch;
.toot-summary { .toot-summary {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--fg-inv0); color: var(--fg-inv);
background: repeating-linear-gradient( background: repeating-linear-gradient(
45deg, 45deg,
var(--accent-dark), var(--accent-dark),

9
css/_welcome.scss
View File

@ -66,7 +66,7 @@
align-items: center; align-items: center;
font-size: 2em; font-size: 2em;
background-color: var(--accent); background-color: var(--accent);
color: var(--fg-inv0); color: var(--fg-inv);
background: repeating-linear-gradient( background: repeating-linear-gradient(
45deg, 45deg,
var(--accent-dark), var(--accent-dark),
@ -128,3 +128,10 @@
background: var(--bg2); background: var(--bg2);
} }
} }
.loading-more {
justify-content: center;
.file-loader {
margin: 0;
}
}

2
css/main.css
View File

File diff suppressed because one or more lines are too long

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

29
index.html
View File

@ -7,7 +7,7 @@
<link rel="icon" href="data:," /> <link rel="icon" href="data:," />
<base target="_blank" /> <base target="_blank" />
<link rel="stylesheet" href="css/main.css?20241201" /> <link rel="stylesheet" href="css/main.css?20241204" />
<script> <script>
const isFileProtocol = window.location.protocol === "file:"; const isFileProtocol = window.location.protocol === "file:";
const scripts = [ const scripts = [
@ -54,7 +54,7 @@
:class="$store.ui.appClasses" :class="$store.ui.appClasses"
x-init="$watch('$store.files.appReady', value => checkAppReady(value))" x-init="$watch('$store.files.appReady', value => checkAppReady(value))"
> >
<template x-if="! $store.files.appReady"> <template x-if="!$store.files.appReady && !$store.files.someFilesLoaded">
<main <main
class="welcome" class="welcome"
:class="$store.files.loading ? 'file-loading' : ''" :class="$store.files.loading ? 'file-loading' : ''"
@ -106,6 +106,16 @@
</main> </main>
</template> </template>
<template x-if="!$store.files.appReady && $store.files.someFilesLoaded">
<main class="welcome loading-more">
<div class="intro">
<div class="file-loader loading">
<span>... Loading ...</span>
</div>
</div>
</main>
</template>
<template x-if="$store.files.appReady"> <template x-if="$store.files.appReady">
<main <main
class="main-section" class="main-section"
@ -113,7 +123,11 @@
tabindex="-1" tabindex="-1"
x-on:resize.window="$store.ui.checkMenuState()" x-on:resize.window="$store.ui.checkMenuState()"
> >
<div class="main-section-inner" id="main-section-inner"> <div
class="main-section-inner"
id="main-section-inner"
:class="$store.files.sources.length > 1 ? 'multiple-actors' : ''"
>
<div class="mobile-menu" id="mobile-menu"> <div class="mobile-menu" id="mobile-menu">
<nav> <nav>
<ul> <ul>
@ -188,13 +202,15 @@
<h2 class="visually-hidden" id="actor-title">Account info</h2> <h2 class="visually-hidden" id="actor-title">Account info</h2>
<h3 class="visually-hidden" id="actor-tabs-title">Accounts</h3> <h3 class="visually-hidden" id="actor-tabs-title">Accounts</h3>
<div class="actors-wrapper"> <div
class="actors-wrapper"
:style="'--actor-hue: '+ $store.files.sources[$store.ui.actorPanel].hue"
>
<template x-if="$store.files.sources.length > 1"> <template x-if="$store.files.sources.length > 1">
<div <div
class="actors-tabs" class="actors-tabs"
role="tablist" role="tablist"
aria-labelledby="actor-tabs-title" aria-labelledby="actor-tabs-title"
:style="'--actor-hue: '+ $store.files.sources[$store.ui.actorPanel].hue"
> >
<template x-for="(_, source) in $store.files.sources"> <template x-for="(_, source) in $store.files.sources">
<button <button
@ -1023,7 +1039,6 @@
<div <div
class="toots" class="toots"
:class="$store.files.sources.length > 1 ? 'multiple-actors' : ''"
id="toots" id="toots"
role="region" role="region"
aria-labelledby="toots-title" aria-labelledby="toots-title"
@ -1677,6 +1692,6 @@
</symbol> </symbol>
</svg> </svg>
<script src="js/main.js?20241202"></script> <script src="js/main.js?20241204"></script>
</body> </body>
</html> </html>

1
js/main.js
View File

@ -577,7 +577,6 @@ const filesStore = {
} }
}); });
}, },
toggleTootsOrder() { toggleTootsOrder() {
this.sortAsc = !this.sortAsc; this.sortAsc = !this.sortAsc;
this.sortToots(); this.sortToots();

4
readme.md
View File

@ -66,6 +66,10 @@ Accessibility is a vast and complex topic, and there's probably room for improve
MARL should work on pretty much any screen size, as low as 300 pixels wide (and possibly less). MARL should work on pretty much any screen size, as low as 300 pixels wide (and possibly less).
### Persistent settings
Paging-related settings (namely: number of posts per page, and sorting order) are stored in the browser and automatically restored when the app is initialized, so that you don't have to re-set them the way you like it every time.
## Limitations ## Limitations
Everything is based on the data contained in the Mastodon archive file. As far as I can tell, the archive does __not__ include: Everything is based on the data contained in the Mastodon archive file. As far as I can tell, the archive does __not__ include: