From 9c76bca7800c00d98d352a4de7e3a1d8a759258d Mon Sep 17 00:00:00 2001 From: Julien Bidoret Date: Fri, 1 Nov 2024 10:12:12 +0100 Subject: [PATCH] UI refresh (#479) refactor html structure and upgrade user interface --- UI.md | 359 +++++++++ app/view/templates/admin.php | 694 +++++++++-------- app/view/templates/backtopbar.php | 87 +-- app/view/templates/connect.php | 43 +- app/view/templates/delete.php | 44 +- app/view/templates/edit.php | 49 +- app/view/templates/edithelp.php | 34 +- app/view/templates/editleftbar.php | 407 +++++----- app/view/templates/editrightbar.php | 91 +-- app/view/templates/edittabs.php | 34 +- app/view/templates/edittopbar.php | 90 +-- app/view/templates/home.php | 565 +++++++------- app/view/templates/homebookmark.php | 79 +- app/view/templates/homemenu.php | 913 ++++++++++++----------- app/view/templates/homeopt.php | 417 +++++------ app/view/templates/info.php | 42 +- app/view/templates/layout.php | 55 +- app/view/templates/media.php | 399 +++++----- app/view/templates/mediamenu.php | 249 ++++--- app/view/templates/pagepassword.php | 38 +- app/view/templates/profile.php | 191 +++-- app/view/templates/user.php | 196 +++-- app/view/templates/userconfirmdelete.php | 41 +- assets/css/admin.css | 21 +- assets/css/back.css | 244 +++--- assets/css/base.css | 574 +++++++++++--- assets/css/connect.css | 28 +- assets/css/edit.css | 358 ++++----- assets/css/home.css | 190 ++--- assets/css/info.css | 223 +++--- assets/css/media.css | 152 ++-- assets/css/profile.css | 22 +- assets/css/theme/audrey-s-book.css | 16 +- assets/css/theme/blue-whale.css | 6 +- assets/css/theme/dark-doriphore.css | 16 +- assets/css/theme/default.css | 10 +- assets/css/theme/funky-freddy.css | 7 +- assets/css/theme/fuzzy-flamingo.css | 2 +- assets/css/theme/industrial-dream.css | 5 +- assets/css/user.css | 54 +- src/fn/fn.js | 4 +- 41 files changed, 3806 insertions(+), 3243 deletions(-) create mode 100644 UI.md diff --git a/UI.md b/UI.md new file mode 100644 index 00000000..00e789f8 --- /dev/null +++ b/UI.md @@ -0,0 +1,359 @@ +# UI Guidelines + +A (work-in-progress) guide to help in building bars, dropdowns, panels, fields and other UI elements within W admin interface. + +## Main principles + +### Stylesheets + +- `base.css` is loaded everywhere. +- `back.css` is loaded everywhere except for the Edit view. +- Each view also loads its own stylesheet where base styles can be overidden, or specific elements be defined. + +Long stylesheets are divided via comments dividers. A summary of its sections can be found at the start of the file. + +Apart from common reset, defined in `base.css`, never rely on a first level tag name to style elements but prefer descriptive classnames. + +Tag names might be used within a child selector (so they can benefit from the cascade) : +```css +/* instead of */ +details { } +/* prefer */ +.dropdown { } +.dropdown h2 { } +``` + +## Elements + + +### Common elements + +`h1` and `h2` are used as `section` or `aside` titles, and are style the same way. +`h3` and `h4` are used as sub-titles in various places, and are style differently according where they are used: +- Bookmarks +- Filters (both Home and Media) +- Dropdowns sections + +### CSS layout variables + +- `--radius` helps define the border-radius on buttons and inputs +- `--size-small` homogenize small sizes +- `--gap` separate sidebars & main panels, set to 0 for collapsed ones +- `--font-family`: main font preference +- `--spacing` set “white” space around and between elements, can be 4px to remind old style W look. +- `--reset-spacing` spacing adjustment (negates the spacing, allowing elements inside padded parent to go full bleed) +- `--half-spacing` narrow spacing +- `--double-spacing` double spacing +- `--padding` used inside fields, inputs and buttons, can be closed to 3px to remind old style w look +- `--reset-padding`, `--half-padding`, `--double-padding` same than `--spacing` adjustments + +### CSS color variables + +- `--main-color` should be light (light theme), used both as background and text color +- `--text-color` should be dark (light theme) +- `--text2-color` should be light (light theme) +- `--text3-color` should be dark (light theme) +- `--primary-background-color` should be light (light theme), visible erverywhere +- `--secondary-background-color` should be light (light theme), accent color used on navbars, dropdowns sections, table headings +- `--tertiary-background-color`, should be light (light theme), used on body, page metadata +- `--code-background-color`, `--code-color` should be contrasted enough +- `--outline-background-color`, `--outline-color` should be contrasted enough, highlights slected items, hovered table rows +- `--button-background-color`, `--button-color` should be contrasted enough +- `--input-background-color`, `--input-color` should be contrasted enough + + +### Flex layout helpers + +Layouts, both macro and micro, _heavily_ rely on Flexbox, varying `flex-direction`, often using `--spacing` for `padding` and `gap`. + +To allow less classnames and duplicates, two layout helpers are set: + +- `.flexrow` helps to layout horizontal items, whichever is their inline/block natural behavior. +- `.flexcol` is the same for vertical layouts. + +### Fields + +Each field (input, submit, checkbox or radio) is wrapped widthin a `

`. +```html +

+ + +

+``` + +Label comes first, then comes the input. CSS manages the order in case of checkboxes or radios. + +When two fields whould be in a row, wrap them in a `.flexrow`: +```html +
+

+ + +

+

+ + +

+
+``` +Submit inputs or buttons are wrapped in a `

`. +```html +

+ +

+``` +### Horizontal bar + +Used for main top-bar and dropwdowns menu-bar. + +Should have the class `.hbar`, and contain one or many `.hbar-section`. + +Each section should contain one or many `.flexrow` to properly layout any kind of children : +- `div`: for grouping elements – which might not be useful +- `form > input(s)`: for update/post actions +- `a`: for links actions +- `span`: for help info + +### Dropdown menus + +Like stated above, these menus should be put in a `.hbar-section` within a `.hbar`. +They are used in Home and Media. + +They are based on `
` element – so that they can be closed and opened without js – that receive à `.dropdown` class. + +The inner content is wrapped within a `.dropdown-content`. + +```html +
+ Menu name +
+ (dropdown sections) +
+
+``` +The content itself is wrapped within one or multiple `.dropdown-section` that can be a `div` or a `form`. + +```html +
+

Section title

+
+ (fields) +
+
+``` + +### Collapsible panels + +Every side panel is collapsible, thanks to a checkbox+label behavior. + +```html + +``` + +On mobile view, the `label` switch to horizontal layout. + +### Grid layouts + +User and Profile view are displayed through a responsive grid layout. + +Each subsection is a `.grid-item`. + +```html +
+
+

Item title

+ … +
+
+``` + +## Main screens + +``` +# Home +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +NAV.hbar#navbar +-------------------------------------------------- +Aside ×| Aside ×| Section + | | > Deep search + | | > Table | Graph | Map + | | + | | + | | + + +# Media +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +NAV.hbar#navbar +-------------------------------------------------- +Aside ×| Aside ×| Section + | | > Table + | | + | | + | | + | | + + +# Edit +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +NAV.hbar#navbar +-------------------------------------------------- +Aside ×| Section | × Aside + | > Tabs | + | | + | | + | | + | | + + +# Users +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +Add new user + > Form +-------------------------------------------------- +Users + > Table +-------------------------------------------------- + + +# Admin +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +NAV.hbar#navbar +-------------------------------------------------- +Item | Item | Item | Item | Item | +Item | Item | + + +# Profile +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +Item | Item | Item + + +# Help +-------------------------------------------------- +HEADER.hbar#topbar +-------------------------------------------------- +Nav | Section + | + | + | + | + | + + +``` + +## Main structure + +``` +HEADER.hbar#topbar + + div.hbar-section + div | form | input | button | a | span + +NAV.hbar#navbar + + div.hbar-section + details.dropdown + summary + {div|form}.dropdown-content + {div|form}.dropdown-section + h2 (> a.help) + p.field + label + input | select … + p.field.submit-field + input[type=submit] | a + +MAIN + + ? aside.toggle-panel-container + label.toggle-panel-label + input[type=checkbox].toggle-panel-toggle + .toggle-panel + h2 + (a.help) + div.toggle-panel-content + {div|form}.panel-section + h3 + (a.help) + {div|form}.panel-section-content + (.tree | fieldset) + (h4 | legend) + (p.info) + p.field + label + input | button | a + + ? .home + aside#bookmarks + aside#filter + section.pages + h2 + text + (.filter) + .button + .display-mode + a + div#searchbar + … + div.scrollable + table + … + + ? &.editor + aside#leftbar + div.tabs + div.tab + label + input[type=checkbox] + div.tab-content + textarea + aside#rightbar + + ? &.media + aside (dirlist) + aside (filters) + section + h2 + div.scroll + table | ul.gallery + + ? &.grid + div.grid-item + h2 + p | h3 | form … + + ? &.user + section.new-user + h2 + form + section.all-users + h2 + table + + ? &.main-info + nav#toc + section#doc +``` + + diff --git a/app/view/templates/admin.php b/app/view/templates/admin.php index 0432274d..be51b99c 100644 --- a/app/view/templates/admin.php +++ b/app/view/templates/admin.php @@ -1,374 +1,366 @@ -layout('layout', ['title' => 'admin', 'stylesheets' => [$css . 'back.css', $css . 'admin.css']]) ?> - - +layout('layout', ['title' => 'admin', 'stylesheets' => [$css . 'back.css', $css . 'admin.css']]) ?> start('page') ?> - insert('backtopbar', ['user' => $user, 'tab' => 'admin', 'pagelist' => $pagelist]) ?> - -
- - - -
- -
- -

configuration

- -
- - -

Home page

- -

- By default, W has no home page for visitors without an account. - But if you wish, you can define a page to which visitors who are not logged in will be redirected. -

- -
- form="admin"> - -
- -
- form="admin"> - -
- - - - -

Page creation

- -

What really happend when you create a new page

- -

Privacy of new pages

- - - - -

Page version

- -

Choose W page version you want to use when a new page is created.

- - - - -

Default BODY

- - - - - - - -

Alert pages

- -

Set the style and text to show when a page does not exist, or when a visitor don't have access to it.

- -

Common options

- - - - - - - - - - - - - - -

Un-existing

- - - This will also be shown as a tooltip over links. - - -
- - form="admin"> - -
- -

Private

- - - - -
- - form="admin"> - -
- -

Not published

- - - - -
- - form="admin"> - -
- -

CSS

- -
- - form="admin"> - -
- -

- You can use body.alert class to specify style. -

- - - -

Render

- -

rendering details

- -
- - form="admin"> - -

- When a page is modified, this may affect the rendering of other pages linked to it. - The pages to which it points have a strong possibility of needing to be updated too. - This option will invalidate their rendering each time the page pointing to them is updated. - They will therefore be re-rendered the next time they are viewed. -

-
- -

base page language

- - - - -

- If the page language is not specified in metadatas, then this default will be used. -

- -

title

- - - -

- This add a suffix to the title of all your pages. -

- -

Links

- -
- - form="admin"> - -
- -
- - form="admin"> - -
- -

Markdown Parser

- -
- - form="admin"> - -
- -

Url linker

- -
- - form="admin"> - -
- -

This can be overide individualy for each element using render options. See 📖 manual section for more infos.

- - -

HTML tags (page V1)

- -
- - form="admin"> - -
- -

This can be overide individualy for each element using render options. See 📖 manual section for more infos.

- -

Lazy load images

- -
- - form="admin"> - -
- -

- (Thoses modifications need re-rendering) -

- - -

Style

- -

Global CSS

- -

- Global CSS will be loaded with every pages. -

- - -

Favicon

- - - - -

Thumbnail

- - - - -

Interface

- -

Theme

- - - - - -

- See 📖 manual section for more infos. -

- -

Javascript

- -
- - form="admin"> - -
- -

- Disables javascript in the user interface. - Syntax highlighting, depend on it and will therefore not be displayed. - This also reduces comfort a little, but full functionality is retained. -

- - - -
- -
- - -
- -
-
-

Databases

-
- -
- - - - - - -
usingdatabasespages
- +
+ +
+ +
+

Home page

+

By default, W has no home page for visitors without an account. + But if you wish, you can define a page to which visitors who are not logged in will be redirected. +

+ +

+ + form="admin"> +

+ +

+ + form="admin"> +

+ +

+ +

+
+ +
+ +

Databases

+ +

Used database

+ +
+ + + +
usingdatabasespages
+ +

+

+
- +

Duplicate database

-

Duplicate Database

- -
+ +

+

+

+

+

-

+

+ + +
+ +
+

Interface

+ +

Theme

+ +

See 📖 manual section for more infos. +

+ +

+ + +

+ +

Javascript

+ +

Disables javascript in the user interface. + Syntax highlighting, depend on it and will therefore not be displayed. + This also reduces comfort a little, but full functionality is retained. +

+ +

+ + + form="admin"> +

+ +
+ +
+ +

Page creation

+ +

What really happend when you create a new page. +

+ +

Privacy of new pages

+ +

+ + +

+ +

Page version

+ +

Choose W page version you want to use when a new page is created. +

+ +

+ + +

+ +

Default BODY

+ + +

+ + +

+ +
+ +
+ +

Alert pages

+ +

Set the style and text to show when a page does not exist, or when a visitor don't have access to it. +

+ +

Common options

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

Un-existing

+ +

+ + +

+ +

+ + + form="admin"> +

+ +

Private

+ +

+ + +

+ +

+ + + form="admin"> +

+ +

Not published

+ +

+ + +

+ +

+ + + form="admin"> +

+ +

CSS

+ +

+ + + form="admin"> +

+ +

You can use body.alert class to specify style. +

+
+ +
+ +

Render

+ +

To be applied, these modifications need the re-rendering of all pages. +

+

Rendering details

+

When a page is modified, this may affect the rendering of other pages linked to it. + The pages to which it points have a strong possibility of needing to be updated too. + This option will invalidate their rendering each time the page pointing to them is updated. + They will therefore be re-rendered the next time they are viewed. +

+ +

+ + + form="admin"> +

+ +

Base page language

+ +

If the page language is not specified in metadatas, then this default will be used. +

+ +

+ + +

+ +

Title

+ +

This add a suffix to the title of all your pages. +

+ +

+ + +

+ +

Links

+ +

+ + + form="admin"> +

+ +

+ + + form="admin"> +

+ +

Markdown Parser

+ +

+ + form="admin"> + +

+ +

Url linker

+ +

This can be overide individualy for each element using render options. See 📖 manual section for more infos. +

+ +

+ + + form="admin"> +

+ +

HTML tags (page V1)

+ +

This can be overide individualy for each element using render options. See 📖 manual section for more infos. +

+ +

+ + + form="admin"> +

+ +

Lazy load images

+ +

+ + + form="admin"> +

+
+ +
+ +

Style

+ +

Global CSS

+ +

+ + +

+ +

Favicon

+ +

+ + +

+ +

Thumbnail

-
-
-
+

+ + +

+
diff --git a/app/view/templates/backtopbar.php b/app/view/templates/backtopbar.php index d940d50f..39bb40f0 100644 --- a/app/view/templates/backtopbar.php +++ b/app/view/templates/backtopbar.php @@ -1,71 +1,46 @@ -
+
- -
+
+ isvisitor() ? 'autofocus' : '' ?>> iseditor() ? '' : '' ?> - iseditor()) : ?> - - - - - + + + + + - - - - - - iseditor()) : ?> - - - > - - home - - > - - media - - - - + iseditor()) : ?> + > + home + + > + media + + +
- - - - isadmin()) : ?> - +
diff --git a/app/view/templates/connect.php b/app/view/templates/connect.php index a6139ff6..1e465270 100644 --- a/app/view/templates/connect.php +++ b/app/view/templates/connect.php @@ -3,40 +3,37 @@ start('page') ?> -
+

Login

isvisitor()) : ?> -
- - - - - - - - - - - - - -
- +
+ + + + + + + + + + + + + +
-
- -
- - +
+ +
-

back to page read view

+

back to page read view

diff --git a/app/view/templates/delete.php b/app/view/templates/delete.php index 691136b6..3faaa830 100644 --- a/app/view/templates/delete.php +++ b/app/view/templates/delete.php @@ -1,42 +1,30 @@ layout('layout', ['title' => 'delete', 'description' => 'delete', 'stylesheets' => [$css . 'home.css', $css . 'back.css']]) ?> - start('page') ?> +

Delete page “id() ?>” 

+
-
- -

Delete

- -
    -
  • Id : id() ?>
    • -
  • Title : title() ?>
    • -
  • Number of edits : editcount() ?>
    • -
  • Number of displays : displaycount() ?>
    • -
  • - Page linking to this one : - 0) : ?> - - - - -
    • -
- +

URL : upage('pageread', $page->id()) ?>

+

Id : id() ?>

+

Title : title() ?>

+

Number of edits : editcount() ?>

+

Number of displays : displaycount() ?>

+

+ Page linking to this one : + 0) : ?> + + + + +

- - - -
- +
-
-back to page - stop() ?> diff --git a/app/view/templates/edit.php b/app/view/templates/edit.php index f92fc141..a5119c07 100644 --- a/app/view/templates/edit.php +++ b/app/view/templates/edit.php @@ -1,45 +1,36 @@ layout('layout', ['title' => '✏ '.$page->title(), 'stylesheets' => [ - Wcms\Model::jspath() . 'edit.bundle.css', - $css . 'edit.css', - $css . 'tagcolors.css' -], 'favicon' => $page->favicon()]) ?> - - - + $this->layout('layout', ['title' => '✏ '.$page->title(), 'stylesheets' => [ + Wcms\Model::jspath() . 'edit.bundle.css', + $css . 'edit.css', + $css . 'tagcolors.css' + ], 'favicon' => $page->favicon()]) +?> start('page') ?> -
+insert('backtopbar', ['user' => $user, 'tab' => 'edit', 'pagelist' => $pagelist, 'pageid' => $page->id()]) ?> +insert('edittopbar', ['page' => $page, 'user' => $user, 'workspace' => $workspace, 'target' => $target]) ?> - insert('backtopbar', ['user' => $user, 'tab' => 'edit', 'pagelist' => $pagelist, 'pageid' => $page->id()]) ?> +
- - insert('edittopbar', ['page' => $page, 'user' => $user, 'workspace' => $workspace, 'target' => $target]) ?> - -
- - insert('editleftbar', ['page' => $page, 'pagelist' => $pagelist, 'faviconlist' => $faviconlist, 'thumbnaillist' => $thumbnaillist, 'workspace' => $workspace]) ?> + insert('editleftbar', ['page' => $page, 'pagelist' => $pagelist, 'faviconlist' => $faviconlist, 'thumbnaillist' => $thumbnaillist, 'pagelist' => $pagelist, 'editorlist' => $editorlist, 'user' => $user, 'workspace' => $workspace]) ?> insert('edittabs', ['tablist' => $page->tabs(), 'opentab' => $page->interface()]) ?> - insert('editrightbar', ['page' => $page, 'pagelist' => $pagelist, 'editorlist' => $editorlist, 'user' => $user, 'workspace' => $workspace]) ?> - -
+ insert('editrightbar', ['page' => $page, 'workspace' => $workspace]) ?> -
+ - - + + diff --git a/app/view/templates/edithelp.php b/app/view/templates/edithelp.php index 2be530c4..bf63490a 100644 --- a/app/view/templates/edithelp.php +++ b/app/view/templates/edithelp.php @@ -1,28 +1,38 @@

update shortcut

- CTRL + S -

- ALT + S +
    +
  • CTRL + S
    • +
  • ALT + S
    • +
+

display shortcut

- CTRL + D +
    +
  • CTRL + D
    • +
+

Search

- ALT + F -

ENTER to find next.

+
    +
  • ALT + F
    • +
  • ENTER to find next.
    • +
+

Replace

- CTRL + SHIFT + F +
    +
  • CTRL + SHIFT + F
    • +

Markdown synthax

  • [hello](PAGE_ID/URL)link
  • ![alt](imagepath)img
    • -
  • <e@mail.net>
    • +
  • <e@mail.net>
  • # h1 title
  • ## h2 title
  • *emphasis*
  • **strong**
  • - list item
    • -
  • >blockquote
    • +
  • > blockquote
  • code
  • ------horizontal line
@@ -42,10 +52,12 @@

BODY synthax

    -
  • %ELEMENT?option=value% include specified element
    • +
  • %ELEMENT?option=value% include specified element
- BODY don't support Markdown encoding. +

+ BODY don't support Markdown encoding. +

More infos

diff --git a/app/view/templates/editleftbar.php b/app/view/templates/editleftbar.php index ed51263d..31f2789e 100644 --- a/app/view/templates/editleftbar.php +++ b/app/view/templates/editleftbar.php @@ -1,193 +1,224 @@ -
- showeditorleftpanel() === true ? 'checked' : '' ?> - > - -
- - - -
- Infos -
- - - - - - - - - - - - - - - - - - - - - thumbnail())) : ?> -
- -
- - - - - - - -
-
- - - -
isgeo() ? 'open' : '' ?> id="geomap-details"> - geolocalisation -
-
- - - - -
-
- - - - -
templatebody()) || !empty($page->templatecss()) || !empty($page->templatejavascript()) ? 'open' : '' ?>> - Template -
- - templatebody())) : ?> - - - - - - - - - templatecss())) : ?> - - - - - - - - - - templatejavascript())) : ?> - - - - - - - - -
-
- - - - -
externalcss()) || !empty($page->customhead()) || !empty($page->sleep()) || !empty($page->redirection()) ? 'open' : '' ?>> - Advanced +
-
- Help -
- insert('edithelp') ?> -
- -
- + + +
+
-
+ diff --git a/app/view/templates/editrightbar.php b/app/view/templates/editrightbar.php index 6696d516..b5474f9e 100644 --- a/app/view/templates/editrightbar.php +++ b/app/view/templates/editrightbar.php @@ -1,60 +1,37 @@ -
- showeditorrightpanel() === true ? 'checked' : '' ?> - > - -
- - - iseditor()) : ?> -

Authors

- - -
- id(), $page->authors()) ? 'checked' : '' ?> - - - issupereditor() && $editor->id() === $user->id() ? 'disabled=""' : '' ?> - > - -
- - - - - - -

Stats

- - - - - - - - - - - - - - - - -
edition:editcount() ?>
display:displaycount() ?>
visit:visitcount() ?>
+
+ diff --git a/app/view/templates/edittabs.php b/app/view/templates/edittabs.php index ee7b88c9..e8a596b7 100644 --- a/app/view/templates/edittabs.php +++ b/app/view/templates/edittabs.php @@ -1,26 +1,26 @@
- $value) : ?> -
+ $value) : ?> +
- > + > - + -
+
- + +
-
- +
diff --git a/app/view/templates/edittopbar.php b/app/view/templates/edittopbar.php index 54640292..83705f86 100644 --- a/app/view/templates/edittopbar.php +++ b/app/view/templates/edittopbar.php @@ -1,61 +1,45 @@ - + diff --git a/app/view/templates/home.php b/app/view/templates/home.php index 2236b87e..7376e4c0 100644 --- a/app/view/templates/home.php +++ b/app/view/templates/home.php @@ -39,346 +39,341 @@
-
-
- -

- Pages () - isfiltered()) : ?> - - - - - - - - - - - - - > - > - > +

+ Pages () + isfiltered()) : ?> + + + + + -

+ + + + + + > + > + > + +

- - -
-
- - > - - > - - - - -
-
- -
- - - - - - - - - - -
+ - pages have geo datas set. +
+
+ + > + + > + + + + +
+
-
+
- + - + -
- - - - + + + + -
-
- - -
> - - > - - > - - > - - > - - > - - > - -
-
-
+
+

pages have geo datas set.

- +
+ -
- - + + + + + + + + +
+
+ + +
> + + > + + > + + > + + > + + > + + > + +
+ +
+ + + + + +
+
+ + + issupereditor()) : ?> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - issupereditor()) : ?> + issupereditor()) : ?> + + - + - - - - + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - - - issupereditor()) : ?> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
x + ico + insert('macro_tablesort', ['opt' => $opt, 'th' => 'favicon']) ?> + + id + insert('macro_tablesort', ['opt' => $opt, 'th' => 'id']) ?> + + tag + insert('macro_tablesort', ['opt' => $opt, 'th' => 'tag']) ?> + + title + insert('macro_tablesort', ['opt' => $opt, 'th' => 'title']) ?> + description + linkto + insert('macro_tablesort', ['opt' => $opt, 'th' => 'linkto']) ?> + geo + last modification + insert('macro_tablesort', ['opt' => $opt, 'th' => 'datemodif']) ?> + + date of creation + insert('macro_tablesort', ['opt' => $opt, 'th' => 'datecreation']) ?> + + date + insert('macro_tablesort', ['opt' => $opt, 'th' => 'date']) ?> + + privacy + insert('macro_tablesort', ['opt' => $opt, 'th' => 'secure']) ?> + + authors + insert('macro_tablesort', ['opt' => $opt, 'th' => 'authors']) ?> + + visit + insert('macro_tablesort', ['opt' => $opt, 'th' => 'visitcount']) ?> + + edit + insert('macro_tablesort', ['opt' => $opt, 'th' => 'editcount']) ?> + + display + insert('macro_tablesort', ['opt' => $opt, 'th' => 'displaycount']) ?> + + version + insert('macro_tablesort', ['opt' => $opt, 'th' => 'version']) ?> +
x - ico - insert('macro_tablesort', ['opt' => $opt, 'th' => 'favicon']) ?> - + favicon())) : ?> + + + + + + - id - insert('macro_tablesort', ['opt' => $opt, 'th' => 'id']) ?> - + + redirection())) : ?> + + + + refresh() !== 0 ? $item->refresh() . 's' : '' ?> + + + + + caneditpage($item)) : ?> + + + + + + + + + + candeletepage($item)) : ?> + + + + + + caneditpage($item)) : ?> + + + + + - tag - insert('macro_tablesort', ['opt' => $opt, 'th' => 'tag']) ?> - taglinks($item->tag('array')) ?> - title - insert('macro_tablesort', ['opt' => $opt, 'th' => 'title']) ?> - descriptiondescription('short') ?> - linkto - insert('macro_tablesort', ['opt' => $opt, 'th' => 'linkto']) ?> - linktolink($item->linkto('array')) ?> geo + + isgeo() ? '' : '' ?> + + - last modification - insert('macro_tablesort', ['opt' => $opt, 'th' => 'datemodif']) ?> - + + - date of creation - insert('macro_tablesort', ['opt' => $opt, 'th' => 'datecreation']) ?> - + + - date - insert('macro_tablesort', ['opt' => $opt, 'th' => 'date']) ?> - + + - privacy - insert('macro_tablesort', ['opt' => $opt, 'th' => 'secure']) ?> - + securelink($item->secure('int') , $item->secure('string')) ?> + password()) ? '' : '' ?> + - authors - insert('macro_tablesort', ['opt' => $opt, 'th' => 'authors']) ?> - authorlinks($item->authors('array')) ?> - visit - insert('macro_tablesort', ['opt' => $opt, 'th' => 'visitcount']) ?> - visitcount() ?> - edit - insert('macro_tablesort', ['opt' => $opt, 'th' => 'editcount']) ?> - editcount() ?> - display - insert('macro_tablesort', ['opt' => $opt, 'th' => 'displaycount']) ?> - displaycount() ?> - version - insert('macro_tablesort', ['opt' => $opt, 'th' => 'version']) ?> - version() ?>
- favicon())) : ?> - - - - - - - - redirection())) : ?> - - - - refresh() !== 0 ? $item->refresh() . 's' : '' ?> - - - - - caneditpage($item)) : ?> - - - - - - - - - - candeletepage($item)) : ?> - - - - - - caneditpage($item)) : ?> - - - - - taglinks($item->tag('array')) ?>description('short') ?>linktolink($item->linkto('array')) ?> - - isgeo() ? '' : '' ?> - - - - - - - - - securelink($item->secure('int') , $item->secure('string')) ?> - password()) ? '' : '' ?> - authorlinks($item->authors('array')) ?>visitcount() ?>editcount() ?>displaycount() ?>version() ?>
-
+ + + +
- + -
diff --git a/app/view/templates/homebookmark.php b/app/view/templates/homebookmark.php index a528ac06..9f16b1b6 100644 --- a/app/view/templates/homebookmark.php +++ b/app/view/templates/homebookmark.php @@ -1,61 +1,46 @@ +
+ diff --git a/app/view/templates/homemenu.php b/app/view/templates/homemenu.php index bd8a9da1..3cdf3abe 100644 --- a/app/view/templates/homemenu.php +++ b/app/view/templates/homemenu.php @@ -1,408 +1,482 @@ - +
+
+ + +
+
+ + diff --git a/app/view/templates/homeopt.php b/app/view/templates/homeopt.php index fba24138..a79b03c7 100644 --- a/app/view/templates/homeopt.php +++ b/app/view/templates/homeopt.php @@ -1,232 +1,213 @@ -
- + diff --git a/app/view/templates/info.php b/app/view/templates/info.php index 242ce91c..a07195f1 100644 --- a/app/view/templates/info.php +++ b/app/view/templates/info.php @@ -1,57 +1,39 @@ layout('layout', ['title' => 'Documentation', 'stylesheets' => [$css . 'back.css', $css . 'info.css']]) ?> - start('page') ?> +insert('backtopbar', ['user' => $user, 'tab' => 'info', 'pagelist' => $pagelist]) ?> - insert('backtopbar', ['user' => $user, 'tab' => 'info', 'pagelist' => $pagelist]) ?> - +
-
+
- + -
+
-

Documentation

+
- -
- -
-
- -
+
diff --git a/app/view/templates/layout.php b/app/view/templates/layout.php index 0284ee59..9714b05c 100644 --- a/app/view/templates/layout.php +++ b/app/view/templates/layout.php @@ -1,16 +1,17 @@ - + + <?= $title ?> + - <?= $title ?> @@ -23,37 +24,31 @@ - - + + - - - - - -
-
    - -
  • - -
    • - -
-
- - - - section('page') ?> - - + + +
+
    + +
  • + +
    • + +
+
+ + + section('page') ?> + diff --git a/app/view/templates/media.php b/app/view/templates/media.php index e9feeac6..3ed4ce3e 100644 --- a/app/view/templates/media.php +++ b/app/view/templates/media.php @@ -1,241 +1,238 @@ -layout('layout', ['title' => 'media', 'stylesheets' => [$css . 'back.css', $css . 'media.css', $cssfont]]) ?> - +layout('layout', ['title' => 'media', 'stylesheets' => [$css . 'back.css', $css . 'media.css', $cssfont]]) ?> start('page') ?> - insert('backtopbar', ['user' => $user, 'tab' => 'media', 'pagelist' => $pagelist]) ?> insert('mediamenu', ['user' => $user, 'pathlist' => $pathlist, 'mediaopt' => $mediaopt, 'maxuploadsize' => $maxuploadsize, 'filtercode' => $filtercode, 'optimizeimage' => $optimizeimage]) ?>
+ - +
+

Filters

+
+
+
+ Type + type(); + foreach ($optionlist as $option) : + ?> +

+ + > +

+ +
+
+ Sort +

+ + +

+

+ + order() == 1 ? 'checked' : '' ?>> +

+

+ + order() == -1 ? 'checked' : '' ?>> +

+
+

+ + +

+
+
+
+ + +
+ +

+ /dir() ?> + + mediadisplay() === Wcms\Workspace::LIST ? 'class="selected"' : '' ?> > + + + mediadisplay() === Wcms\Workspace::GALLERY ? 'class="selected"' : '' ?> > + + + +

-
-
-

filter

-
-
- Type - type()) ?> -
-
- Sort - -
    -
  • - order() == 1 ? 'checked' : '' ?>> -
    • -
  • - order() == -1 ? 'checked' : '' ?>> -
    • -
-
- - -
-
-
-
+ mediadisplay() === Wcms\Workspace::GALLERY) : ?> -
-
-

- /dir() ?> - - mediadisplay() === Wcms\Workspace::LIST ? 'class="selected"' : '' ?> > - - - mediadisplay() === Wcms\Workspace::GALLERY ? 'class="selected"' : '' ?> > - - - -

+ -
+ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
x - filename - insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'filename']) ?> - - ext - insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'extension']) ?> - - type - insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'type']) ?> - - size - insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'size']) ?> - - date - insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'date']) ?> - userpermsscode
+ - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - -
- issupereditor()) : ?> -
- - - -
- - - - - -
-
- - - filename() ?> - - 		extension() ?> - - type() === 'image') : ?> - - - - - type() === 'font' && $mediaopt->isfontdir()) : ?> - - -

Zut ! Je crois que le chien Sambuca préfère le whisky revigorant au doux porto.

- + 		x + filename + insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'filename']) ?> + + ext + insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'extension']) ?> + + type + insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'type']) ?> + + size + insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'size']) ?> + + date + insert('macro_tablesort', ['opt' => $mediaopt, 'th' => 'date']) ?> + userpermsscode
+ issupereditor()) : ?> +
+ + + +
+ + + + + +
+
+ - + filename() ?> - - 		size('hr') ?>date('hrdi') ?>uid('name') ?>permissions() ?> - - - - - e($media->getcode()) ?> -
+ + extension() ?> + + + type() === 'image') : ?> + + + + + type() === 'font' && $mediaopt->isfontdir()) : ?> + + +

Zut ! Je crois que le chien Sambuca préfère le whisky revigorant au doux porto.

+ + + + + + + size('hr') ?> + date('hrdi') ?> + uid('name') ?> + permissions() ?> + + + + + + + e($media->getcode()) ?> + + + + + - + -
-
+
+ - - - + - - stop('page') ?> diff --git a/app/view/templates/mediamenu.php b/app/view/templates/mediamenu.php index 1672cb27..db290c87 100644 --- a/app/view/templates/mediamenu.php +++ b/app/view/templates/mediamenu.php @@ -1,131 +1,148 @@ -
-
- - -
- Edit -
- - issupereditor()) : ?> - -

Move

-
- - - -
- - -

Delete

- Delete selected medias -
- -
- - - +
+ + +
+ Edit + issupereditor()) : ?> +
+
+

Move

+

+ + + + +

+

+ +

+
+
+

Delete

+

+ +

+
+
- -
- - -
> - Filter -
-

Print folder content

-
- - - filename() ? "checked" : "" ?> > - -
- -
- - -

Use this code to print the content of the current folder in a page

- getcode() ?> -
-
- + + + +
class="dropdown"> + Filter +
+
+

Print folder content

+ + +

+ + filename() ? "checked" : "" ?> > +

+

+ +

+

+ + getcode() ?> +

+
+
+
+ - + diff --git a/app/view/templates/pagepassword.php b/app/view/templates/pagepassword.php index ce9aa9d4..01b0ca1b 100644 --- a/app/view/templates/pagepassword.php +++ b/app/view/templates/pagepassword.php @@ -2,39 +2,33 @@ $this->layout('readerlayout') ?> -start('head'); -?> +start('head'); ?> + + + + 🔑 - ' : '' ?> - - - -stop(); -?> - +stop(); ?> start('page') ?> - - -
- + -

This page is password protected

+
-
- - -
+

This page is password protected

-
+
+ + + +
+
- + stop() ?> diff --git a/app/view/templates/profile.php b/app/view/templates/profile.php index 2b9907ad..86515006 100644 --- a/app/view/templates/profile.php +++ b/app/view/templates/profile.php @@ -1,121 +1,96 @@ layout('layout', ['title' => 'profile', 'stylesheets' => [$css . 'back.css', $css . 'profile.css']]) +?> -use Wcms\Model; +start('page') ?> +insert('backtopbar', ['user' => $user, 'tab' => 'profile', 'pagelist' => $pagelist]) ?> -$this->layout('layout', ['title' => 'profile', 'stylesheets' => [$css . 'back.css', $css . 'profile.css']]) ?> +
+
+ +

User profile

+ + + + + + + + + + + + + + + +
idid() ?>
connection counterconnectcount() ?>
account expirationexpiredate('hrdi') ?>
+ +
+ +
+ +

Preferences

+ +
+ +

Change some infos about you.

+ +

+ + +

+ +

+ + +

+ +

When you tick the remember-me checkbox during login, you can choose how much time W will remember you.

-start('page') ?> +

+ + +

+ +

+ +

+ +
+
-insert('backtopbar', ['user' => $user, 'tab' => 'profile', 'pagelist' => $pagelist]) ?> +
+

Password

+
-
+

Password have to be between and characters long.

-
-
+

+ + +

- -

User profile

- -
- - - - - - - - - - - - - - - - - - - - - - -
statvalue
idid() ?>
connection counterconnectcount() ?>
account expirationsexpiredate('hrdi') ?>
- -

Preferences

- - - - -

Change some infos about you.

- - - -
- - - - -
- -

When you tick the remember-me checkbox during login, you can choose how much time W will remember you.

- - - - - - -

Password

- - -
- -

Password have to be between and characters long.

- - - - - - - - - - - - -
- -
- - -
- -
- - +

+ + +

+ +

+ + +

+ +

+ +

+ + + +
diff --git a/app/view/templates/user.php b/app/view/templates/user.php index ba32b75b..20b8dcb4 100644 --- a/app/view/templates/user.php +++ b/app/view/templates/user.php @@ -9,124 +9,108 @@
- -
-
+
+ +

Add new user

+ +
+ +

+ + +

+

+ + +

+

+ + + +

+

+ + +

+

+ + +

+

+ +

+
- -

Users

-
+
- - - - +
- +

Users

- +
idpasswordhashlevelset expiration dateactionexpireconnect
+ + + + - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - -
idpasswordhashlevelset expiration dateactionexpireconnect
- id() ?> - - - - passwordhashed() ? '🔑' : '' ?> - - - - expiredate() !== false ? 'value="' . $user->expiredate('string') . '"' : '' ?> min="format('Y-m-d'); ?>"> - reset - - - - - - - - + id() ?> + + + + passwordhashed() ? '' : '' ?> + + + + + expiredate() !== false ? 'value="' . $user->expiredate('string') . '"' : '' ?> min="format('Y-m-d'); ?>"> + + + + + + expiredate('hrdi') ?> + + connectcount() ?> + - expiredate('hrdi') ?> - - connectcount() ?> -
- - -
- - + + + -
+ -
- -
- -

Add new user

- -
- - -
- - - - - -
- - - -
- - - - - -
- -
-
diff --git a/app/view/templates/userconfirmdelete.php b/app/view/templates/userconfirmdelete.php index 38f7e9e5..a8de10e4 100644 --- a/app/view/templates/userconfirmdelete.php +++ b/app/view/templates/userconfirmdelete.php @@ -1,36 +1,33 @@ +layout('layout', ['title' => 'delete', 'description' => 'delete', 'stylesheets' => [$css . 'home.css', $css . 'back.css']]) ?> - - - -

Delete User

- -

Id : id() ?>

-

Level : level() ?>

- - - -
- - - - +start('page') ?> + -
+

Delete user “id() ?>” 

+
+

Id : id() ?>

+

Level : level() ?>

+
+ + +
+

You can't delete this user

-

You can't delete yourself

- -

To delete this user, create at least another admin user, log in as this other admin user, the try to delete this user.

- - Go back to users - +
+

You can't delete yourself!

+

To delete this user, create at least another admin user, log in as this other admin user, then try to delete this user.

+

Go back to users

+
+ +stop() ?> diff --git a/assets/css/admin.css b/assets/css/admin.css index b6ecd87f..fbcadc14 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -1,21 +1,2 @@ -section.admin .scroll { - padding-bottom: 300px; -} +/* ADMIN */ -nav li a { - display: block; -} - -nav li a:hover { - background-color: var(--outline-background-color); - color: var(--outline-color); -} - -section.admin h2 { - margin-top: 100px; - margin-bottom: 25px; -} - -section.admin h4 { - margin-bottom: 15px; -} diff --git a/assets/css/back.css b/assets/css/back.css index be0af50d..f7970b64 100644 --- a/assets/css/back.css +++ b/assets/css/back.css @@ -1,18 +1,18 @@ +/* BACK */ +/* Used everywhere except in Edit view */ -main { - display: flex; - height: 100%; - overflow-y: auto; -} +/* --------------------------------------------------------- content +content +main layout +filters +footer +grid layout +.info icon before paragraphs +icon +media queries -.block { - background-color: var(--primary-background-color); - display: flex; - flex-direction: column; - max-height: 100%; - width: 100%; -} +/* --------------------------------------------------------- variables */ .scroll { overflow: auto; @@ -20,16 +20,6 @@ main { max-width: 100%; } -aside summary:hover { - background-color: var(--outline-background-color); - color: var(--outline-color); -} - - -aside { - display: flex; -} - .code, code { display: block; white-space: nowrap; @@ -43,71 +33,65 @@ aside { overflow: hidden; } -aside details, aside span { - max-width: 280px; -} - -aside details .submenu, aside summary { - background-color: var(--secondary-background-color); - min-width: 100px; - max-width: 300px; -} - - -aside .submenu { - position: absolute; - max-height: 85%; - overflow-y: auto; - z-index: 10000; - box-shadow: 0px 14px 14px #24242430; -} -aside code { - overflow-x: auto; -} +/* Display mode links */ -aside #save-workspace { - position: absolute; - right: 0; +h2 a { + color: var(--outline-background-color); } -.submenu h3 { - margin: 0; - font-size: inherit; - margin-top: 5px; +h2 a.selected, h2 a:hover { + color: var(--text2-color); } +/* --------------------------------------------------------- main layout */ main section { display: flex; flex-direction: column; + flex: 1; + background: var(--primary-background-color); + gap: var(--gap, 0); + flex-wrap: nowrap; + width: 100%; + overflow: hidden; } -main #filter fieldset { + +/* --------------------------------------------------------- filters */ +/* #filter is common to Home and Media */ + +#filter fieldset { padding: 0; border: none; - margin: 15px 0; + margin: 0; } +#filter fieldset[data-default="0"] legend::before { + content: "~ "; + display: inline; + position: absolute; + width: 1em; + left: var(--spacing); + text-indent: 0; +} -main #filter fieldset[data-default="0"] div { - background: var(--outline-background-color); - color: var(--outline-color); +#filter fieldset[data-default="0"] legend { + text-indent: 1em; + position: relative; } -main #filter legend { - font-weight: bold; - width: 100%; - background-color: var(--secondary-background-color); +#filter legend .help { + text-indent: 0; } -#filter select, #filter input[type="datetime-local"], #filter input[type="submit"] { +#filter input[type="submit"] { width: 100%; - margin-top: 5px; - display: block; } +/* --------------------------------------------------------- footer */ + footer { background-color: black; color: white; @@ -115,84 +99,67 @@ footer { } -.nowrap { - white-space: nowrap; -} - -fieldset li { - text-wrap: nowrap; -} - +/* --------------------------------------------------------- grid layout */ -div#options, article#main { - min-width: 180px; - overflow-y: auto; +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + overflow: auto; } - - - - - - - - - - - - - - - -h2 .right { - float: right; +.grid-item { + background: var(--primary-background-color); + padding: var(--double-spacing); + display: flex; + flex-direction: column; + gap: var(--spacing); } - - -p { - padding: 0 1%; +.grid-item form { + display: flex; + flex-direction: column; + gap: var(--spacing); } - - - - -tbody tr:hover { - background-color: var(--outline-background-color); - color: var(--outline-color); +.grid-item a { + text-decoration: underline; } - -ul { - list-style: none; - padding-inline-start: 0; - margin: 0; +.grid-item textarea { + width: 100%; } - -th { - background-color: var(--secondary-background-color); +.grid-item h2 { + margin: calc(-1 * var(--double-spacing)) calc(-1 * var(--double-spacing)) 0 calc(-1 * var(--double-spacing)); } - -main.admin input, main.admin select, main.admin textarea { - display: block; - width: 100%; +.grid-item h3 { + margin: 1.2em 0 0; + font-size: 1em; + padding: var(--spacing) 0 var(--half-spacing); + border-bottom: 1px solid var(--outline-background-color); + } - -main section.admin { - max-width: 400px; +/* --------------------------------------------------------- .info icon before paragraphs */ +p.info { + line-height: 1.4; + margin: 1.5em 0 var(--spacing); } - - - -div.checkbox [type="checkbox"] { - display: inline-block; - width: auto; +p.info::before { + content: "i"; + font-family: 'Courier New', Courier, monospace; + background: var(--outline-color); + color: var(--outline-background-color) !important; + border-radius: 100%; + position: relative; + top: -.25em; + display: inline-flex; + width: 1.2em; + height: 1.2em; + font-size: var(--size-small); + justify-content: center; + align-items: center; + margin-right: 1ch; } -div.radio input[type="radio"] { - display: inline-block; - width: inherit; -} +/* --------------------------------------------------------- icon */ img.icon { height: 12px; @@ -203,26 +170,12 @@ a:hover img.icon { } - - - - - - -li.event:hover span.details { - display: inline; -} - -span.details { - display: none; -} - - - +/* --------------------------------------------------------- media queries */ @media (max-width: 550px) { main { flex-direction: column; + overflow-y: auto; } main > * { @@ -238,10 +191,3 @@ span.details { padding-top: 5px; } } - - -h2 a { - color: var(--outline-background-color); -} - -h2 .right a.selected, h2 a:hover {color: var(--text2-color);} diff --git a/assets/css/base.css b/assets/css/base.css index 21340971..8e1fe4f0 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -1,3 +1,55 @@ +/* BASE */ + +/* --------------------------------------------------------- content + +variables +common elements +icons +main layout +layout helpers +inputs and buttons +fields +horizontal bars +data tables +all tables +dropdowns +help button +topbar +navbar +toggle panels (collapsibles) +delete +workspace button (no-js) +media queries +flash messages + +/* --------------------------------------------------------- variables */ + +:root { + + --radius: .25rem; /* border-radius on buttons and inputs */ + --size-small: .85rem; /* small sizes */ + --gap: 1px; /* 1px for separated columns & panels, 0 for collapsed ones */ + --font-family: sans-serif; + + /* used to set “white” space around and between elements */ + --spacing: .5rem; /* can be 4px to remind old style w look */ + /* spacing adjustments : */ + --reset-spacing: calc(var(--spacing) * -1); + --half-spacing: calc(var(--spacing) / 2); + --double-spacing: calc(var(--spacing) * 2); + + /* used inside fields, inputs and buttons */ + --padding: .5rem; /* can be closed to 3px to remind old style w look */ + /* padding adjustments : */ + --reset-padding: calc(var(--padding) * -1); + --half-padding: calc(var(--padding) / 2); + --double-padding: calc(var(--padding) * 2); + + /* header has --spacing top and bottom + input font-size + input padding on top and bottom */ + /* unused ! */ + --header-height: calc( var(--spacing) * 2 + var(--size-small) + var(--half-spacing) * 2); +} + * { box-sizing: border-box; scrollbar-color: var(--main-color) transparent; @@ -14,201 +66,526 @@ body { margin: 0; + position: fixed; + width: 100%; height: 100%; background-color: var(--tertiary-background-color); - font-family: sans-serif; + font-family: var(--font-family); font-size: 15px; - position: fixed; + color: var(--text-color); + line-height: 1; + user-select: none; display: flex; flex-direction: column; - width: 100%; - color: var(--text-color); + gap: var(--gap, 0); } -input, textarea, button, select, .field { - border: none; - accent-color: var(--main-color); +/* --------------------------------------------------------- common elements */ + +h1, h2 { + margin: 0; + color: var(--text2-color); + background-color: var(--main-color); + font-size: 1em; + padding: var(--spacing); + display: flex; + align-items: center; + justify-content: space-between; +} +h3, h4 { + margin: 0; + font-size: 1em; } -input, textarea, .field { - color: var(--input-color)!important; - border-color: var(--input-color); - background-color: var(--input-background-color); +p, code { + user-select: text; + margin: 0; } -input[type="submit"], button, select { - color: var(--button-color)!important; - border-color: var(--button-color); - background-color: var(--button-background-color); +ul { + list-style: none; + padding: 0; + margin: 0; } -h1, h2 { - color: var(--text2-color); - background-color: var(--main-color); +code.select-all { + user-select: all; } -a, button, input, select, textarea, .field { +a { text-decoration: none; - color: var(--text2-color); + color: currentColor; } +/* --------------------------------------------------------- icons */ +.fa { + line-height: 0 !important; +} +/* --------------------------------------------------------- main layout */ -h1, h2 { +main { + height: 100%; + display: flex; + overflow: hidden; + gap: var(--gap, 0); +} + +/* --------------------------------------------------------- layout helpers */ + +.flexrow { + display: flex; + flex-direction: row; + gap: var(--double-spacing); +} + +.flexrow > * { + flex: 1 auto; + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing); +} + +.flexcol { + display: flex; + flex-direction: column; + gap: var(--spacing); +} + + +/* --------------------------------------------------------- inputs and buttons */ + +input, textarea, button, select, .button { + font: inherit; margin: 0; - font-size: larger; + line-height: 1rem; + border: none; + border-color: var(--button-color); + accent-color: var(--main-color); + font-size: var(--size-small); + padding: var(--half-padding) var(--padding); + border-radius: var(--radius); + color: var(--input-color); + background-color: var(--input-background-color); } -#topbar { - background-color: var(--main-color); +input[type="submit"], input[type="file"], button, select, .button { + cursor: pointer; + white-space: nowrap; + background: var(--button-background-color); + color: var(--button-color) !important; +} + +input[type=submit]:hover, button:hover, .button:hover, +input[type=submit]:focus, button:focus, .button:focus { + color: var(--button-background-color) !important; + background: var(--button-color); + outline: none; +} + +/* --------------------------------------------------------- fields */ + +.field { + margin: 0; + display: flex; + flex-direction: column; + align-items: start; + gap: 0; width: 100%; - padding: 4px 3px; +} + +.field label { + display: block; + font-size: var(--size-small); + padding-bottom: var(--half-spacing); +} + +.field input[type="text"], +.field input[type="password"], +.field input[type="number"], +.field input[type="color"], +.field input[type="date"], +.field select { width: 100%; } + +.field:has([type="checkbox"]), +.field:has([type="radio"]), +.field:has([type="color"]) { + flex-direction: row-reverse; + align-items: start; + gap: var(--spacing); +} + +.field:has([type="checkbox"]) label, +.field:has([type="radio"]) label, +.field:has([type="color"]) label { + flex: 1; +} + +.field:has([type="color"]) input { + flex: 1; + padding: 0; +} + +.submit-field { + flex-direction: row; + justify-content: end; + align-items: end; + gap: var(--spacing); +} + +/* --------------------------------------------------------- horizontal bars */ + +.hbar { + background-color: var(--main-color); display: flex; + justify-content: space-between; + padding: var(--spacing); + gap: var(--double-spacing); + -webkit-overflow-scrolling: touch; + /* @check */ + /* should be neeeded for mobile views, but might cause unwanted height */ + /* overflow-x: scroll; */ + /* &::-webkit-scrollbar { + display: none; + } */ } -#topbar form { - display: inline; +.hbar { + overflow-x: scroll; + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.hbar::-webkit-scrollbar { + display: none; /* Safari and Chrome */ } +.hbar a { + /* @move in topbar? */ + color: var(--text2-color); +} -#topbar span#menu { - display: inline-block; - margin: 0 1%; +.hbar-section { + display: flex; + gap: var(--double-spacing); + align-items: center; } -#topbar input[type="text"], #topbar input[type="password"] {width: 100px;} +/* --------------------------------------------------------- data tables */ +main section table { + width: 100%; + border-collapse: collapse; +} -#topbar a.currentpage { - text-decoration: underline; +main section table th, +main section table td { + text-align: left; + padding: var(--spacing); + /* white-space: nowrap; */ } -span#user { - margin-left: auto; /* align to the right */ +main section table td.nowrap { + white-space: nowrap; +} + +main section table tr td { + border-bottom: 1px solid var(--tertiary-background-color); } -aside { +main section table tbody tr:hover { + background-color: var(--outline-background-color); + color: var(--outline-color); +} + +main section table th { background-color: var(--secondary-background-color); + white-space: nowrap; } -aside summary { - list-style: none; + +/* --------------------------------------------------------- all tables */ + +table a { + color: var(--text3-color); } +/* --------------------------------------------------------- dropdowns */ -summary { +.dropdown summary { + list-style: none; + padding: var(--half-spacing) var(--spacing); + border-radius: var(--radius); white-space: nowrap; } -summary:hover, input[type="submit"], input[type="file"], button { - cursor: pointer; +.dropdown-content { + background-color: var(--outline-background-color); + width: min-content; + border: var(--spacing) solid var(--outline-background-color); + display: flex; + flex-direction: column; + gap: var(--spacing); + overflow-x: hidden; + position: absolute; + max-width: 350px; + max-height: 85%; + overflow-y: auto; + z-index: 10000; + box-shadow: 0px 14px 14px #24242430; + border-radius: 0 var(--radius) var(--radius) var(--radius); } +.dropdown summary:hover, +.dropdown[open] summary { + background-color: var(--outline-background-color); + color: var(--outline-color); +} + +.dropdown[open] summary { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.dropdown code { + overflow-x: auto; +} -.bar { - background-color: var(--primary-background-color); +.dropdown-section { + background: var(--secondary-background-color); + padding: var(--spacing); + display: flex; + flex-direction: column; + gap: var(--spacing); } -.panel { +.dropdown h3 { + font-size: 1em; + background-color: var(--outline-background-color); + padding: 0 0 var(--spacing); + margin: var(--reset-spacing) var(--reset-spacing) 0; + display: flex; + justify-content: space-between; + color: var(--text2-color); +} + +.dropdown h4 { + font-size: 1em; + padding: var(--spacing) var(--spacing) var(--half-spacing); + border-bottom: 1px solid var(--outline-background-color); + margin: 0 var(--reset-spacing) 0; +} + + +/* --------------------------------------------------------- help button */ + +.help { + background: var(--outline-color); + color: var(--outline-background-color) !important; + border-radius: 100%; + display: flex; + width: 1.2em; + height: 1.2em; + font-size: var(--size-small); + justify-content: center; + align-items: center; +} + +/* --------------------------------------------------------- topbar */ + +#search input[type="text"] { + width: 100px; +} +#topbar a { + /* allow absolute positionning of outline pseudo-element */ + position: relative; +} +#topbar a:focus-visible { + /* disable default outline */ + outline: none; +} +#topbar a.currentpage::before, +#topbar a:focus-visible::before { + /* pseudo element to outline item */ + content: ""; + position: absolute; + inset: calc(var(--half-padding) * -1); + outline: 1px solid rgba(255,255,255, .5); + border-radius: var(--radius); +} + +/* --------------------------------------------------------- navbar */ + +#navbar { + background-color: var(--secondary-background-color); +} + +/* --------------------------------------------------------- toggle panels (collapsibles) */ + +.toggle-panel-container { + --toggle-label-width: 1.5em; + display: flex; + flex-direction: row-reverse; + background: var(--primary-background-color); + /* needed for absolutely positionned labels on mobile */ + position: relative; +} + +.toggle-panel { display: none; + background: var(--primary-background-color); +} +.toggle-panel-content { + padding: var(--spacing); + overflow-y: auto; } -label.toogle { +.toggle-panel-label { height: 100%; - line-height: 100%; + font-size: 1em; + width: var(--toggle-label-width); text-align: center; + cursor: ew-resize; } -label.toogle:hover { - color: var(--outline-color); - cursor: pointer; - background-color: var(--outline-background-color); +.toggle-panel-label span { + background-color: var(--main-color); + color: var(--text2-color); + padding: var(--spacing) var(--half-spacing); + display: block; } -/* Used for interface modification using hidden checkboxes */ -input.toggle { - display: none; +.toggle-panel-label:hover { + background-color: var(--main-color); } -label.toogle { - width: 15px; +:checked ~ .toggle-panel { + display: flex; + flex-direction: column; + max-width: min-content; } +input.toggle-panel-toggle { + display: none; +} -body { - user-select: none; +/* section-subtitle: bookmarks h3, #filters legend, .edit #rightbar h3… */ +.toggle-panel-content h3, +.toggle-panel-content legend { + font-weight: bold; + width: calc(100% + var(--double-spacing)); + font-size: 1em; + padding: var(--half-spacing) var(--spacing); + border-bottom: 1px solid var(--tertiary-background-color); + margin: 0 var(--reset-spacing) var(--spacing); + display: flex; + justify-content: space-between; } -p, code { - user-select: text; +/* --------------------------------------------------------- delete */ +/* to be moved in dedicated CSS? */ +.confirm-delete { + display: flex; + flex-direction: column; + gap: var(--spacing); + padding: var(--spacing); } -code.select-all { - user-select: all; +/* --------------------------------------------------------- workspace button (no-js) */ +#save-workspace { + position: absolute; + right: var(--spacing); +} +.js #save-workspace { + display: none; } +/* --------------------------------------------------------- media queries */ -@media (max-width: 750px) { - header a span, footer, aside a span { +@media (max-width: 900px) { + /* anchortext within topbar */ + #topbar a span, + /* version footer on home */ + footer { display: none; } } +@media (max-width: 700px) { + .text {display: none;} +} + @media (max-width: 550px) { - header a span, footer, header span#search, aside a span, .text { + /* quick access form in topbar */ + header #search { display: none; } - aside summary { - min-width: 45px !important; - padding-right: 15px; - } - - aside .submenu { - left: 0; - max-width: inherit !important; + /* collapsible panels behavior */ + .toggle-panel-container { + display: block; } - - .bar { - flex-direction: column; + .toggle-panel-label { + height: min-content; + width: 100%; + background: none; + position: absolute; + text-align: right; + padding-right: var(--spacing); + cursor: ns-resize; } + .toggle-panel-label span, + .toggle-panel-label:hover { background: none; } + .toggle-panel-label span { padding: var(--spacing); } + .toggle-panel { grid-row: 1; display: block; } + :checked ~ .toggle-panel { max-width: none; } + .toggle-panel-content { display: none; } + :checked ~ .toggle-panel .toggle-panel-content { display: block } label.toogle { width: 100%; height: 30px; } + .dropdown-content { + /* dropdown at left:0 when navbar is scrollable */ + left: 0; + } } @media (pointer: coarse) { - header a span, footer, header span#search, aside a span, .text { + header a span, footer, header span#search, .text { display: none; } - body, input, select, button { - font-size: 20px; + body { + /* bigger font-size */ + font-size: 100%; + /* even bigger on small sizes */ + --size-small: 1rem; } - input[type="checkbox"], input[type="radio"] { - height: 22px; - width: 22px !important; + .hbar a { + /* even bigger on icon-only buttons */ + font-size: 120%; } - header a { - font-size: 35px; + input[type="checkbox"], input[type="radio"] { + height: 1.2em; + width: 1.2em !important; } } -/* __________________________ Flash Messages ___________________________ */ +/* --------------------------------------------------------- flash messages */ #flashmessage { color: white; - border: solid white 1px; + border-bottom: solid white 1px; position: fixed; animation-delay: 5s; animation-name: flash; @@ -216,6 +593,9 @@ code.select-all { animation-fill-mode: forwards; max-height: 200px; width: 100%; + position: absolute; + top: 0; + z-index: 200; } div#flashmessage:target { @@ -229,7 +609,9 @@ div#flashmessage:target { z-index: 5; } - +#flashmessage li { + padding: var(--double-spacing); +} #flashmessage li.alert-info { background-color: grey; } @@ -246,23 +628,7 @@ div#flashmessage:target { background-color: red; } - @keyframes flash { - from { - top: 0; - } - - to { - top: -200px; - } - } - - -table a, li a { - color: var(--text3-color); -} - - -.panel input, .panel select, .panel textarea { - margin-bottom: 3px; + from { top: 0; } + to { top: -200px; } } diff --git a/assets/css/connect.css b/assets/css/connect.css index 777ab52c..feccd2aa 100644 --- a/assets/css/connect.css +++ b/assets/css/connect.css @@ -1,13 +1,29 @@ -.connect { - max-width: 250px; - margin: auto; +/* CONNECT */ + +.connect form { + display: flex; + flex-direction: column; + gap: var(--spacing); } -.connect input { - margin: 5px; +.connect h2 { + padding: var(--spacing); + border-radius: var(--radius) var(--radius) 0 0; } -.connect form { +.connect { + max-width: 250px; display: flex; flex-direction: column; + gap: var(--spacing); + margin: auto; + border-radius: var(--radius); + padding: var(--spacing); + background: var(--secondary-background-color); +} + +.button { + display: block; + width: 100%; + text-align: center; } \ No newline at end of file diff --git a/assets/css/edit.css b/assets/css/edit.css index f5b8f586..edffc5df 100644 --- a/assets/css/edit.css +++ b/assets/css/edit.css @@ -1,46 +1,86 @@ -#workspace { - display: flex; - height: calc(100% - 50px); -} +/* EDIT */ -#showeditorleftpanel:checked ~ #leftbarpanel { - display: block; -} -#showeditorrightpanel:checked ~ #rightbarpanel { - display: block; +/* --------------------------------------------------------- top bar */ + +#edittopbar { + background-color: var(--secondary-background-color); } -.panel { - width: 250px; - height: 100%; - overflow-y: auto; - height: 100%; +#edittopbar a { + color: var(--text-color); +} +.fontsize, .highlighttheme { + display: flex; + gap: var(--spacing); + align-items: center; } -#leftbar label.toogle { - float: right; +/* --------------------------------------------------------- side bar collapsible panels */ + +/* overwrites global behavior */ +#leftbar :checked ~ .toggle-panel { + width: 280px; + max-width: none; +} +/* overwrites global behavior */ +#leftbar .toggle-panel-content { + padding: 0; + background-color: var(--tertiary-background-color); } +/* overwrites global behavior */ +#leftbar .toggle-panel-content summary { + list-style: none; + background-color: var(--secondary-background-color); + font-size: 1em; + padding: var(--spacing); + color: var(--text-color); +} + +/* open / closed metadata informations */ +aside details summary::before { content: "+ " } +aside details[open] summary::before { content: "- " } + + -#rightbar label.toogle { - float: left; +/* --------------------------------------------------------- left bar fieldsets */ + +fieldset { + display: flex; + flex-direction: column; + gap: var(--spacing); + padding: var(--spacing); + border: none; + margin: 0; +} +input[type="text"],input[type="number"],input[type="time"], textarea { + width: 100%; +} +textarea { + resize: vertical; } +/* --------------------------------------------------------- left bar geomap */ -/* clip the tabs names */ +div#geomap { + width: 100%; + height: 250px; +} + +/* --------------------------------------------------------- tabs */ .tabs { flex: 2; position: relative; height: 100%; - background-color: var(--primary-background-color); + background: var(--main-color); display: flex; overflow: hidden; + gap: var(--half-spacing); } -.tabs .tab .content -{ +.tabs .tab .content { position: absolute; left: 0px; width: 100%; @@ -48,42 +88,50 @@ visibility: hidden; } -.checkboxtab -{ +.checkboxtab { display: none; } -.tab label -{ - margin-right: 8px; +/* align first tab with CodeMirror line numbering column */ +.js .tab:first-child { + margin-left: 1.75em; +} + +.tab label { display: inline-block; + position: relative; + padding: var(--half-spacing) var(--spacing) calc(var(--spacing) + var(--half-spacing)); + top: 4px; + left: 4px; + vertical-align: top; + color: var(--text2-color); + white-space: nowrap; } +/* if the tab contains anything */ .tab label.edited { - text-decoration: underline dotted red; + text-decoration: underline; + text-decoration-style: dashed; + text-decoration-color: color-mix(in srgb, var(--text2-color) 70%, var(--main-color) 30%); + text-underline-offset: .15em; } +/* @todo: report an issue: $templates[$key] never returns anything */ .tab label.template { color: var(--text2-color); } -.checkboxtab:checked ~label -{ - background: var(--outline-background-color); - color: var(--outline-color); +.checkboxtab:checked ~ label { + background: var(--input-background-color); + color: var(--input-color); + border-radius: var(--radius) var(--radius) 0 0; } - -.checkboxtab:checked ~.content -{ - visibility: visible; +.checkboxtab:checked ~ label.edited { + text-decoration-color: color-mix(in srgb, var(--input-color) 70%, var(--input-background-color) 30%); } - - -div.editor { - position: fixed; - width: 100%; - height: 100%; +.checkboxtab:checked ~.content { + visibility: visible; } .tabs textarea { @@ -91,122 +139,11 @@ div.editor { width: 100%; border: none; resize: none; - padding: 1%; -} - -.editor .tabs label { - padding: 1px; - height: 22px; -} - -input#editfontsize { - width: 3em; -} - - -.editor aside { - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: nowrap; - padding: 2px 3px; + padding: var(--spacing); + border-radius: 0; } -aside#edittopbar .menu { - display: flex; - } - aside #pagemenu > span { - margin-right: 14px; - } - aside #workspacemenu > span { - margin-left: 10px; - } - -.editor ul { - list-style: none; - padding: 0; - margin: 0; -} - -.editor .bar select { - width: 100%; -} - - - -.editor .panel textarea {resize: vertical;} - -.editor .panel input, .editor .panel textarea {width: 100%;} - - - - -details { - background-color: var(--secondary-background-color); -} - -input#fontsize { - width: 50px; -} - -span#headid { - color: var(--outline-color); - background-color: var(--outline-background-color); - text-wrap: nowrap; -} - -a { - /* color: black; */ - text-decoration: none; -} - -a:hover { - color: white; -} - - - - -img.icon { - height: 15px; -} - -a:hover img.icon { - filter: invert(1); -} - - - -#fonts select { - height: 150px; -} - -a.icon { - font-size: 25px; -} - - -.editor .panel input[type="checkbox"] { - width: auto; - vertical-align: middle; -} - - -.panel .subtemplate { - margin-left: 20px; -} - -.editor fieldset { - border: none; -} - -.panel summary { - background-color: var(--main-color); -} - -.panel summary:hover { - cursor: pointer; -} +/* --------------------------------------------------------- tabs */ #external label { width: 150px; @@ -216,16 +153,20 @@ a.icon { text-overflow: ellipsis; } +/* --------------------------------------------------------- help */ + #help kbd { border: 1px solid #000000c7; padding: 1px 4px; background-color: var(--main-color); + color: var(--text2-color); box-shadow: 3px 2px #000000c7; border-radius: 4px; } -#help div { - padding: 2%; +#help { + line-height: 1.4; + min-width: 250px; } #help code { @@ -237,18 +178,21 @@ a.icon { } #help code i { - color: var(--main-color); + color: var(--text2-color); + opacity: .7; } - +#help h4:not(:first-of-type){ + margin-top: 1.5em; +} +#help p, #help li { + margin: .5em 0; margin-bottom: 8px; } - - - +/* --------------------------------------------------------- thumbnail */ div#showthumbnail img { width: 100%; @@ -258,7 +202,9 @@ div#showthumbnail img { padding: 2%; } -/* Custom CodeMirror CSS */ + +/* --------------------------------------------------------- Custom CodeMirror CSS */ + .CodeMirror { height: 100% !important; cursor: text; @@ -294,12 +240,7 @@ span.cm-wkeyword { } -div#geomap { - width: 100%; - height: 250px; -} - -/* __________ Tags _____________ */ +/* --------------------------------------------------------- Tagify field */ .tagify { --tag-pad: 0 0; @@ -308,7 +249,16 @@ div#geomap { --tag-inset-shadow-size: 0; --loader-size: 0; --tags-focus-border-color: transparent; - display: block; + background: var(--input-background-color); + border:none; + border-radius: var(--radius); + width: 100%; + font-size: var(--size-small); + display: flex; + flex-direction: row; + padding: var(--half-padding); + gap: var(--half-padding); + flex-wrap: wrap; } :root { @@ -318,21 +268,22 @@ div#geomap { } .tagify__tag { - border-radius: 10px; - padding-left: 4px; - padding-right: 0; - padding-bottom: 1px; + border-radius: var(--radius); animation: none; + margin: 0; + padding: var(--half-spacing) var(--spacing); + gap: var(--half-spacing); + background: #eee; } .tagify__tag__removeBtn { color: inherit; - margin-left: 1px; + margin: 0; } .tagify__dropdown span.tag { - border-radius: 10px; - padding: 1px 4px; + /* border-radius: 10px; + padding: 1px 4px; */ } .tagify--focus { @@ -340,38 +291,35 @@ div#geomap { } - +/* --------------------------------------------------------- Media queries */ @media (max-width: 550px) { - .bar{ - display: none; + main { + flex-direction: column; + overflow-y: scroll; } - span#fontsize { - display: none; + #leftbar :checked ~ .toggle-panel, + :checked ~ .toggle-panel { + /* full width panels */ + width: 100%; + max-width: none; } - span#headid .pageid { - display: none; - } -} - - -@media (pointer: coarse) { - .editor .tabs label { - height: 35px; - margin-right: 4px; - } - aside#edittopbar { - padding: 5px; - font-size: 25px; - padding-top: 7px; - padding-bottom: 7px; - } -} + /* reorder panels */ + #leftvar { order: 1 } + #rightbar { order: 2; } + .tabs { order: 3 } + + /* no js / codemirror ? reset first tab spacing */ + .js .tab:first-child { + margin-left: var(--half-spacing); + } -@media (max-width: 750px) and (pointer: coarse) { - span#headid .pageid { - display: none; - } + /* hide page name within save button */ + .pageid, + /* hide editor font-size input + label */ + .fontsize { + display: none; + } } diff --git a/assets/css/home.css b/assets/css/home.css index a1ccd3da..9a1986a6 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -1,69 +1,75 @@ -aside #edit input[type="submit"] { - width: 100%; -} +/* HOME */ + +/* --------------------------------------------------------- bookmarks */ -main #filter { +.bookmark { display: flex; - flex-direction: row-reverse; + gap: var(--spacing); + align-items: center; } -.panel { - overflow-y: auto; - height: 100%; - width: 200px; +a.bookmark { + display: block; + white-space: nowrap; + max-width: 10em; + overflow: hidden; + text-overflow: ellipsis; } -#showeoptionspanel:checked ~ #optionspanel { - display: block; +/* currently selected bookmark */ +a.bookmark[data-current="1"] { + background-color: var(--outline-background-color); + color: var(--outline-color); + padding: var(--half-spacing) var(--spacing); + border-radius: var(--radius); } -main article#main { - width: 100%; -} +/* --------------------------------------------------------- filters */ -main div#main { +/* for tags and authors, manage space between label and counter */ +.field .label-with-counter { display: flex; - align-items: flex-start; - flex-direction: column; } - -main div#graph { - height: 1000px; - width: 800px; +.field .label-with-counter .label { + flex:1; + text-overflow: ellipsis; + overflow: hidden; } -main table td.id label { - font-family: monospace; - font-size: 0.9em; +.field .label-with-counter .counter { + border-radius: 100%; + width: 1.2em; + height: 1.2em; + display: flex; + justify-content: center; + align-items: center; + font-size: var(--size-small); } - - -#home2table a.linkto { - font-family: monospace; - font-size: medium; - background-color: var(--main-color); - text-wrap: nowrap; +fieldset.tag input[type="radio"], fieldset.authors input[type="radio"] { + /* make input/label closer on authors and tags radios */ + margin-right: -2px; } -main a.bookmark[data-current="1"] { - background-color: var(--outline-background-color); - color: var(--outline-color); +td label, td time, +td.tag, td.description { + white-space: nowrap; } -main a.bookmark { - display: block; - white-space: nowrap; +details#display input[type="color"] { + /* limit color input height widthin Display dropdown */ + height: 1.5em; } +/* --------------------------------------------------------- deep search */ + div#deepsearchbar { background-color: var(--secondary-background-color); - line-height: 24px; - padding-left: 5px; + padding: var(--spacing); } #deepsearchbar input[type=text] { @@ -74,25 +80,23 @@ div#deepsearchbar { display: inline; } +/* --------------------------------------------------------- list view */ -#filter span.list-label { - width: 122px; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: text-bottom; +main table td.id label { + font-family: monospace; + font-size: var(--size-small); } -#filter span.counter { - border-radius: 100%; - width: 17px; - height: 17px; - display: inline-block; - text-align: center; - font-size: smaller; +#home2table a.linkto { + font-family: monospace; + font-size: var(--size-small); + background-color: var(--main-color); + color: var(--text2-color); + text-wrap: nowrap; + padding: 0 var(--padding); + border-radius: var(--radius); } - table td a.tag, table a.author { border-radius: 10px; padding: 1px 4px; @@ -120,61 +124,42 @@ table td a.secure.public { background-color: #80b97b; } - table .favicon img { height: 16px; max-width: 32px; } - td.title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } -td label, td time {white-space: nowrap;} - -a.redirection { - background-color: var(--secondary-background-color); - border-radius: 5px; -} +/* --------------------------------------------------------- graph view */ -div#geomap { - width: 800px; - height: 570px; +main div#graph { + height: 100%; + width: 100%; } +/* --------------------------------------------------------- map view */ -@media (max-width: 900px) and (min-width: 550px) { - #bookmarks td.rss, #bookmarks a span.name, #bookmarks h3, #bookmarks h2 { - display: none; - } +#map, +#geomap { + width: 100%; + height: 100%; +} +#map p { + padding: var(--spacing); +} +.leaflet-control-container { + position: absolute; } -@media (max-width: 550px) { - section.pages { - max-width: 100%; - } - - main nav { - flex-direction: column; - } - - main #filter { - flex-direction: column-reverse; - } - #bookmarks table { - width: 100%; - } - - main .panel { - width: auto; - } -} +/* --------------------------------------------------------- media queries */ @media (pointer: coarse) { @@ -182,7 +167,7 @@ div#geomap { display: none; } a.bookmark .icon { - font-size: 30px; + font-size: 120%; } td.edit a, td.read a, td.delete a, td.download a { margin: 0 5px; @@ -191,29 +176,4 @@ div#geomap { font-size: 22px; padding: 0 10px; } -} - - -fieldset.tag input[type="radio"], fieldset.authors input[type="radio"] { - margin-right: -2px; -} - -nav { - display: flex; -} - - -.pages h2, .pages #deepsearchbar { - z-index: 1; -} - - -td.tag, td.authors, td.description { - white-space: nowrap; -} - - -details#display input[type="color"] { - height: 1.5em; - width: 1.5em; -} +} \ No newline at end of file diff --git a/assets/css/info.css b/assets/css/info.css index 83d76fd8..f750779a 100644 --- a/assets/css/info.css +++ b/assets/css/info.css @@ -1,79 +1,82 @@ -section { - max-width: 650px; -} +/* INFO — DOCUMENTATION */ -main ul i { - color: grey; -} +/* --------------------------------------------------------- manual */ -main a { - text-decoration: underline var(--text2-color); - color: inherit; +#manual { + hyphens: auto; + font-size: 1.1em; + max-width: 60em; + user-select: text; + margin: auto; + padding: var(--double-spacing); +} +#manual a { + text-decoration: underline; + text-underline-offset: .15em; + color: currentColor; } -nav { - min-width: 180px; +#manual p { + line-height: 1.4em; + margin: 1em 0; +} +#manual li { + margin: 5px 0; + line-height: 23px; } -nav ul { - padding-inline-start: 30px; +#manual a[href^="https://"]::after { + content: " ◥"; + color: var(--main-color); } -#manual code { - width: fit-content; - font-family: monospace; - white-space: pre-wrap; - display: inline; - padding: 1px 4px; - border-radius: 3px; - font-size: 0.99em; +#manual a[href^="#"]::after { + content: " ✻"; + color: var(--main-color); + white-space: nowrap; } -main blockquote i { +#manual i { font-style: normal; color: #7b97b9; } -main article#manual h1 { - text-align: center; - font-size: 50px; - background-color: transparent; - font-weight: lighter; - margin: 6%; - border-top: solid; - border-bottom: solid; +#manual h1 { + display: none; } - -main article#manual h2 { - text-align: center; +#manual h2 { font-size: 40px; - margin-top: 200px; - margin-bottom: 90px; + margin-block: 2em .5em; + font-size: clamp(3em, 3vw, 6em); + background: none; + color: var(--text3-color); + padding: 0; + scroll-margin-top: 1em; } -main article#manual h3 { - border-bottom: solid 2px var(--secondary-background-color); - margin-top: 130px; - margin-bottom: 70px; - padding-top: 15px; +#manual h3 { + background-color: var(--main-color); + margin: 2em 0 1em; + padding: var(--spacing); font-size: 35px; + width: auto; + border-width: 2px; + border-radius: var(--radius); + background: var(--secondary-background-color); + display: inline-block; + scroll-margin-top: 1em; } -#manual table { - margin-top: 12px; - } - -main article h4 { - background-color: var(--main-color); +#manual h4 { + border-bottom: solid 2px var(--main-color); font-size: x-large; - margin-top: 80px; - margin-bottom: 25px; - padding: 0 20px; + margin: 1em 0; + scroll-margin-top: 1em; } -main article#manual h5 { +#manual h5 { text-transform: uppercase; margin-top: 50px; margin-bottom: 0; @@ -86,14 +89,54 @@ main article#manual h5 { border-color: var(--main-color); } +#manual table { + margin-top: 12px; +} +#manual th { + background-color: unset; + border-bottom: 1px solid; +} + +#manual th, +#manual td { + padding: var(--spacing) 0; +} -section ul { +#manual ul { list-style: inside disc; padding-inline-start: 10px; } +#manual pre { + padding: var(--half-spacing) var(--spacing); + background-color: var(--code-color); + white-space: pre-wrap; + border-radius: var(--radius); + line-height: 1.4; +} + +#manual kbd { + background-color: var(--main-color); + color: var(--text2-color); + padding: 1px 4px; + border-radius: 7px; + box-shadow: 2px 2px; + margin: 0 2px; +} +#manual code { + width: fit-content; + font-family: monospace; + white-space: pre-wrap; + display: inline; + padding: var(--half-spacing); + border-radius: var(--radius); + background-color: var(--code-color); + color: var(--code-background-color) !important; +} -main pre {padding: 1%;background-color: var(--code-background-color);white-space: pre-wrap;border-radius: 3px;} +#manual pre code { + padding: 0; +} #manual blockquote { margin: 30px 0; @@ -102,53 +145,40 @@ main pre {padding: 1%;background-color: var(--code-background-color);white-space border-left: solid 3px var(--main-color); } -main article code i { - font-style: normal; - color: #7b97b9; -} +/* --------------------------------------------------------- media queries */ - -nav ul.summary { - margin: 3%; - padding: 0; - margin-bottom: 200px; +@media (max-width: 750px) { + #manual { + font-size: 1em; + } } -#manual { - hyphens: auto; - font-size: 1.1em; - margin: 6%; - user-select: text; +@media (max-width: 550px) { + main { + display: block; + overflow: scroll; + } } -#manual p { - line-height: 1.4em; -} -#manual li { - margin: 5px 0; - line-height: 23px; -} +/* --------------------------------------------------------- toc */ -#manual a[href^="https://"]::after { - content: "◥"; - color: var(--text2-color); +#toc { + overflow: hidden; /* allow scroll */ + min-width: 180px; + background: var(--primary-background-color); + padding-bottom: 2em; } -#manual a[href^="#"]::after { - content: " ✻"; - color: var(--text2-color); - white-space: nowrap; +#toc .scroll > :not(h2){ + padding: var(--double-spacing); } -#manual kbd { - background-color: var(--main-color); - padding: 1px 4px; - border-radius: 7px; - box-shadow: 2px 2px; - margin: 0 2px; +.summary { + padding: var(--spacing); + line-height: 1.4; } .summary li a { @@ -156,11 +186,7 @@ nav ul.summary { } .summary li a:hover { - text-decoration: underline var(--text2-color); -} - -.summary li { - margin: 2px 1px; + text-decoration: underline; } .summary > li { @@ -169,29 +195,18 @@ nav ul.summary { .summary > li > a { font-weight: bold; - margin-bottom: 5px; - display: block; font-size: 1.15em; } .summary > li > ul > li > ul { - /* display: none; */ - font-size: 0.8em; + font-size: var(--size-small); border-left: solid 2px var(--main-color); padding-left: 5px; margin-left: 5px; - margin-bottom: 6px; + margin-block: 6px; opacity: 0.9; } .summary > li > ul { padding-left: 15px; - margin-bottom: 15px; -} - -@media (max-width: 750px) { - #manual { - margin: 2%; - font-size: 1em; - } } diff --git a/assets/css/media.css b/assets/css/media.css index 931dcfd6..8da44b0c 100644 --- a/assets/css/media.css +++ b/assets/css/media.css @@ -1,7 +1,13 @@ +/* MEDIA */ + + main code { - font-size: 12px; + font-size: var(--size-small); } + +/* --------------------------------------------------------- lightbox */ + table#medialist .thumbnail .lightbox { display: none; white-space: pre-wrap; @@ -12,77 +18,113 @@ table#medialist .thumbnail .lightbox { padding: 5px; left: 30px; top: 60px; + box-shadow: 0px 14px 14px #24242430; } table#medialist .thumbnail:hover .lightbox { display: block; } -table#medialist td.filename label { - font-family: monospace; - white-space: pre; - font-size: 14px; - width: 100%; -} +/* --------------------------------------------------------- dir list */ -table code.select-all { - max-width: 254px; +#dirlist a { + white-space: nowrap; } +#dirlist tr.selected a, #dirlist tr.selected td { + background-color: var(--outline-background-color); + color: var(--outline-color); +} + + +/* --------------------------------------------------------- gallery */ + #gallery { overflow: hidden; - display: inline-block; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: var(--spacing); + padding: var(--spacing); } -#gallery li div.thumbnail{ - font-size: 8em; - text-align: center; +#gallery li { width: 100%; - max-height: 116px; + overflow: hidden; + margin: 0; + padding: 0; + background: white; } +#gallery .thumbnail { + width: 100%; + height: 116px; + display: flex; + justify-content: center; + align-items: center; + padding: var(--spacing); + font-size: 8em; +} + +#gallery .thumbnail label { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} #gallery .thumbnail video, #gallery .thumbnail audio { width: 100%; height: 100%; + object-fit: contain; + object-position: center; max-height: 117px; + box-shadow: 0px 4px 4px #24242430; } -#gallery li .thumbnail img {max-width: 100%;height: 100px;} - - -#gallery li { - display: inline-block; - width: 200px; - overflow: hidden; - margin: 0; - padding: 0; +#gallery .thumbnail img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + display: block; + box-shadow: 0px 4px 4px #24242430; + /* checkerboard pattern */ + background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } -#gallery .meta label { - max-width: 76%; +.meta { + display: grid; + grid-template-columns: min-content 1fr min-content; + padding: var(--spacing); + gap: var(--half-spacing); +} +.meta label { display: inline-block; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; + font-size: var(--size-small); +} +.meta code { + grid-column: 1 / span 3; + margin: 0 var(--reset-spacing) var(--reset-spacing); + width: calc(100% + var(--spacing) * 2); } +/* --------------------------------------------------------- main table */ -#gallery li .thumbnail img { +table#medialist td.filename label { + font-family: monospace; + white-space: pre; + font-size: 14px; width: 100%; - max-height: 100%; - object-fit: contain; -} - -nav a { - white-space: nowrap; } -nav tr.selected a, nav tr.selected td { - background-color: var(--outline-background-color); - color: var(--outline-color); +table code.select-all { + max-width: 254px; } /* Renamming feature */ @@ -91,48 +133,54 @@ table#medialist td.filename { position: relative; } -table#medialist td.filename label { - margin-right: 15px; +table#medialist td.filename { + padding-right: calc(1em + var(--spacing)); } table#medialist td.filename details summary { visibility: hidden; - display: inline; + list-style: none; position: absolute; right: 0; + /* verticlaly centered */ + top: 50%; + transform: translateY(-50%); } table#medialist td.filename:hover details summary { visibility: visible; } -table#medialist td.filename details[open] { - display: flex; - position: relative; -} - table#medialist td.filename details[open] ~ label { display: none; } -table#medialist td.filename details[open] form{ +table#medialist td.filename details[open] form { display: flex; - margin-right: 15px; + gap: var(--spacing); + /* avoid height bump on open */ + margin: var(--reset-spacing) 0; +} +table#medialist td.filename details[open] input[type="text"] { + flex: 1; +} + +table#medialist td.filename details[open] .fa-pencil::before { + /* close icon */ + content: "\f00d"; } table#medialist td.filename details[open] summary { visibility: visible; - order: 3; } -@media (max-width: 550px) { - #gallery li { - width: 90px; - } +/* --------------------------------------------------------- media queries */ - #gallery .meta label { - display: none; +@media (max-width: 550px) { + + #gallery { + grid-template-columns: repeat(3, 1fr); } #gallery li div.thumbnail { diff --git a/assets/css/profile.css b/assets/css/profile.css index c376a180..bb39d0ea 100644 --- a/assets/css/profile.css +++ b/assets/css/profile.css @@ -1,21 +1 @@ -section label, section input { - display: block; -} - -section#profile { - max-width: 400px; -} - -section label { - margin-top: 10px; - font-weight: bold; -} - -section input { - width: 100%; - margin: 3px 0; -} - -section h2 { - margin-top: 50px; -} \ No newline at end of file +/* PROFILE */ diff --git a/assets/css/theme/audrey-s-book.css b/assets/css/theme/audrey-s-book.css index 93c6f3bd..91b50d49 100644 --- a/assets/css/theme/audrey-s-book.css +++ b/assets/css/theme/audrey-s-book.css @@ -15,21 +15,17 @@ --input-background-color: #ffffff; --input-color: #303030; color-scheme: light; -} -input, button, select, textarea, .field { - border-radius: 4px; + --radius: 4px; } -.block { - border: solid 1px var(--secondary-background-color); - border-radius: 5px; +.cm-wcms, .cm-wkeyword, .editor textarea, .CodeMirror { + color: var(--text-color); + background-color: var(--main-color); + border-radius: 0; } -.editor textarea { - background: var(--main-color); -} -.editor #editmain, .editor #editheader, .editor #editnav, .editor #editaside, .editor #editfooter { +.CodeMirror, .editor #editmain, .editor #editheader, .editor #editnav, .editor #editaside, .editor #editfooter { font-family: serif; } diff --git a/assets/css/theme/blue-whale.css b/assets/css/theme/blue-whale.css index 99adeca4..e8dee4e2 100644 --- a/assets/css/theme/blue-whale.css +++ b/assets/css/theme/blue-whale.css @@ -15,13 +15,11 @@ --input-background-color: #002152; --input-color: #ffffff; color-scheme: dark; -} -input, button, select, textarea, legend, .field { - border-radius: 10px; + --radius: 1em; } -button, input[type="submit"] { +button, input[type="submit"], input[type="text"] { border: solid 1px var(--text-color); } diff --git a/assets/css/theme/dark-doriphore.css b/assets/css/theme/dark-doriphore.css index 1b06c0a3..829525dd 100644 --- a/assets/css/theme/dark-doriphore.css +++ b/assets/css/theme/dark-doriphore.css @@ -15,23 +15,25 @@ --input-background-color: #000000; --input-color: #ff662c; color-scheme: dark; + --font-family: monospace; + --radius: 0; } -input, button, select, textarea, .field, .submenu, .block, .bar { +input, button, select, textarea, .dropdown, .dropdown-content { border-radius: 0px; border: solid 1px; } +.dropdown-content { + border: solid 1px; + margin-left: -1px; + padding-top: 3px; +} -body, input { +body { font-family: monospace; font-size: 13px; } - -main > * { - padding: 1%; -} - aside { border-bottom: solid 1px; } diff --git a/assets/css/theme/default.css b/assets/css/theme/default.css index 51d5f7e6..605e983b 100644 --- a/assets/css/theme/default.css +++ b/assets/css/theme/default.css @@ -17,8 +17,8 @@ color-scheme: light; } -input, button, select, textarea, .field { - border-radius: 3px; -} - - +:root { + --radius: 3px; + --spacing: 6px; + --padding: 3px; +} \ No newline at end of file diff --git a/assets/css/theme/funky-freddy.css b/assets/css/theme/funky-freddy.css index d913d14b..901f1354 100644 --- a/assets/css/theme/funky-freddy.css +++ b/assets/css/theme/funky-freddy.css @@ -14,11 +14,10 @@ --button-color: #000000; --input-background-color: #ffffff; --input-color: #303030; - color-scheme: light; + color-scheme: light; + + --radius: 5px } -input, button, select, textarea, .field { - border-radius: 5px; -} diff --git a/assets/css/theme/fuzzy-flamingo.css b/assets/css/theme/fuzzy-flamingo.css index 7a309385..a11c30cf 100644 --- a/assets/css/theme/fuzzy-flamingo.css +++ b/assets/css/theme/fuzzy-flamingo.css @@ -17,7 +17,7 @@ color-scheme: light; } -input, button, select, textarea, .field { +input, button, select, textarea { border-radius: 5px; border: solid 1px var(--secondary-background-color); } diff --git a/assets/css/theme/industrial-dream.css b/assets/css/theme/industrial-dream.css index 8503dcd2..09c330c8 100644 --- a/assets/css/theme/industrial-dream.css +++ b/assets/css/theme/industrial-dream.css @@ -15,10 +15,13 @@ --input-background-color: #ffffff; --input-color: #303030; color-scheme: light; + + --radius: 0; } -input, textarea, .field { +input, textarea { border: inset 2px; + border-color: #333 #666 #666 #333; } input[type="submit"], button, select { diff --git a/assets/css/user.css b/assets/css/user.css index 3bc4585b..a9b7d419 100644 --- a/assets/css/user.css +++ b/assets/css/user.css @@ -1,18 +1,54 @@ +/* USER */ -main.user section#user { - max-width: 500px; + +main.user { + display: block; + overflow: scroll; +} +.flexrow { + padding: var(--spacing); + align-items: end; } +table { + background-color: var(--primary-background-color); +} -main.user table form { - display: inline-block; +.new-user { + /* minimum height for new user section */ + flex: 0; } -main.user td { - white-space: nowrap; +.submit-field { + /* minimum width for new user submit button */ + flex: 0; } +/* --------------------------------------------------------- media queries */ -.new-user form > * { - display: block; -} \ No newline at end of file +@media (max-width: 750px) { + #manual { + font-size: 1em; + } +} + +@media (max-width:700px) { + /* inverse direction for new user form */ + .flexrow { + flex-direction: column; + align-items: start; + justify-content: stretch; + } +} + +@media (max-width: 550px) { + /* quick n dirty barely ussable table */ + th { + display: none; + } + tr { + display: flex; + flex-direction: column; + border-bottom: 3px solid; + } +} diff --git a/src/fn/fn.js b/src/fn/fn.js index f95582b9..0bde7f6a 100644 --- a/src/fn/fn.js +++ b/src/fn/fn.js @@ -38,8 +38,8 @@ export function activateCheckall(checkboxesName, checkallId) { * @param {MouseEvent} e */ function closeSubmenus(e) { - let details = document.querySelectorAll('aside details'); - let currentDetail = e.target.closest('details'); + let details = document.querySelectorAll('.dropdown'); + let currentDetail = e.target.closest('.dropdown'); for (const detail of details) { if (!detail.isSameNode(currentDetail)) { detail.removeAttribute('open');