some more usability improvements

This commit is contained in:
liquidex 2023-08-18 20:58:07 +02:00
parent 3203989cb2
commit 63dd2fa5ab
7 changed files with 46 additions and 13 deletions

View file

@ -62,6 +62,8 @@
- ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png) - ![ralsei with a hat](https://liquidev.net/syf/art/20230723_ralsei_hat.png)
- wow he very beeg
- without a hat is also nice uwu - without a hat is also nice uwu
- also a block quote - also a block quote

View file

@ -1,7 +1,7 @@
use std::ops::Range; use std::ops::Range;
use crate::{ use crate::{
pull::{BranchEvent, BranchKind, Parser}, pull::{Attributes, BranchEvent, BranchKind, Parser},
ParseError, ParseErrorKind, ParseError, ParseErrorKind,
}; };
@ -26,7 +26,7 @@ impl Roots {
#[derive(Debug, Clone)] #[derive(Debug, Clone)]
pub struct Branch { pub struct Branch {
pub indent_level: usize, pub indent_level: usize,
pub attributes: Range<usize>, pub attributes: Option<Attributes>,
pub kind: BranchKind, pub kind: BranchKind,
pub kind_span: Range<usize>, pub kind_span: Range<usize>,
pub content: Range<usize>, pub content: Range<usize>,

View file

@ -25,7 +25,13 @@ pub struct BranchEvent {
pub kind: BranchKind, pub kind: BranchKind,
pub kind_span: Range<usize>, pub kind_span: Range<usize>,
pub content: Range<usize>, pub content: Range<usize>,
pub attributes: Range<usize>, pub attributes: Option<Attributes>,
}
#[derive(Debug, Clone, PartialEq, Eq)]
pub struct Attributes {
pub percent: Range<usize>,
pub data: Range<usize>,
} }
#[derive(Debug, Clone, PartialEq, Eq)] #[derive(Debug, Clone, PartialEq, Eq)]
@ -100,11 +106,15 @@ impl<'a> Parser<'a> {
let attributes = if self.current() == Some('%') { let attributes = if self.current() == Some('%') {
let start = self.position; let start = self.position;
self.advance(); self.advance();
let after_percent = self.position;
self.eat_indented_lines_until(indent_level, |c| c == '-' || c == '+')?; self.eat_indented_lines_until(indent_level, |c| c == '-' || c == '+')?;
let end = self.position; let end = self.position;
start..end Some(Attributes {
percent: start..after_percent,
data: after_percent..end,
})
} else { } else {
self.position..self.position None
}; };
let kind_start = self.position; let kind_start = self.position;

View file

@ -137,6 +137,9 @@ blockquote {
/* And tables. */ /* And tables. */
table {
margin: 8px 0;
}
table, table,
th, th,

View file

@ -6,6 +6,14 @@
/* Make the tree have + and - instead of the default details/summary arrow */ /* Make the tree have + and - instead of the default details/summary arrow */
.tree {
--tree-icon-position: 8px 50%;
--tree-icon-space: 28px;
/* I have no clue why this works, deal with it */
--tree-hover-expansion: 0.01px;
}
.tree details>summary { .tree details>summary {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
@ -18,17 +26,27 @@
.tree details>summary { .tree details>summary {
background-image: url('../svg/expand.svg'); background-image: url('../svg/expand.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0px 50%; background-position: var(--tree-icon-position);
padding-left: 24px; padding-left: var(--tree-icon-space);
margin-left: -24px; margin-left: calc(- var(--tree-icon-space));
padding-top: var(--tree-hover-expansion);
padding-bottom: var(--tree-hover-expansion);
border-radius: 8px;
background-color: rgba(0, 0, 0, 0%);
}
.tree details>summary:hover {
background-color: rgba(0, 0, 0, 5%);
} }
.tree li.leaf { .tree li.leaf {
background-image: url('../svg/leaf.svg'); background-image: url('../svg/leaf.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0px 50%; background-position: var(--tree-icon-position);
padding-left: 24px; padding-left: var(--tree-icon-space);
margin-left: -24px; margin-left: calc(- var(--tree-icon-space));
} }
.tree details[open]>summary { .tree details[open]>summary {

View file

@ -1,4 +1,4 @@
// Bits and pieces to make vanilla HTML just a bit more usable. // Bits and pieces to make the treehouse just a bit more easy to explore.
// We want to let the user have a selection on collapsible blocks without collapsing them when // We want to let the user have a selection on collapsible blocks without collapsing them when
// the user finishes marking their selection. // the user finishes marking their selection.

View file

@ -1,4 +1,4 @@
<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V3H5V5H3V7H5V9H7V7H9V5H7Z" fill="currentColor" <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V2H5V5H2V7H5V10H7V7H10V5H7Z" fill="currentColor"
fill-opacity="0.3" /> fill-opacity="0.3" />
</svg> </svg>

Before

Width:  |  Height:  |  Size: 205 B

After

Width:  |  Height:  |  Size: 207 B