diff --git a/frontend/docs/docs/develop/docs.md b/frontend/docs/docs/develop/docs.md index 9559e143..ded72a22 100644 --- a/frontend/docs/docs/develop/docs.md +++ b/frontend/docs/docs/develop/docs.md @@ -41,7 +41,7 @@ First, change your working directory to `frontend/docs`. Then, to run the docs l Install and start the docs development server: ```sh - uvx --with mkdocs-material mkdocs serve + uvx --with mkdocs-material --with mkdocs-redirects mkdocs serve ``` You can now view a local version of the docs at [localhost:8000](http://localhost:8000). diff --git a/frontend/docs/docs/develop/design-action-menus.md b/frontend/docs/docs/develop/ui/design-action-menus.md similarity index 94% rename from frontend/docs/docs/develop/design-action-menus.md rename to frontend/docs/docs/develop/ui/design-action-menus.md index 73e9738c..84b2630b 100644 --- a/frontend/docs/docs/develop/design-action-menus.md +++ b/frontend/docs/docs/develop/ui/design-action-menus.md @@ -8,7 +8,7 @@ We try to avoid surfacing navigation options in action menus as they are not tag Action menus should generally contain a consistent set of actions for a given object. Whereas new table rows symbolize horizontal separators, these actions should be ordered as follows: -| Dropdown Actions | +| Dropdown Action Order | | ----------------------------------------------------------------------------------------------------------------------------------------- | | • Actions related only to the current page (eg: remove archived item from collection) | | • Actions related to editing the object (eg: edit workflow config, edit item metadata)
• Other actions related to the current object (eg: run crawl) | diff --git a/frontend/docs/docs/develop/ui/design-status-icons.md b/frontend/docs/docs/develop/ui/design-status-icons.md new file mode 100644 index 00000000..cbf8cb48 --- /dev/null +++ b/frontend/docs/docs/develop/ui/design-status-icons.md @@ -0,0 +1,20 @@ +# Status Icons + +Browsertrix uses a standard set of status icons to communicate success, neutral, and failure states throughout the app. Colors are used only to reinforce their distinct shapes which have been chosen so they remain accessible to those who may not be able to distinguish differences based on color alone. + +Status icons always use filled icon variants (when available), as opposed to buttons or actions which use strokes. + +When used without labels, status icons should include tooltips to provider further clarity as to what they indicate. + +## Implementation + +| Status | Description | +| ---- | ---- | +| :bootstrap-slash-circle-fill: Empty | Used for empty states where no data is present | +| :bootstrap-hourglass-split: Waiting | Used when a process is queued but has not started | +| :btrix-status-dot: Running | Used when a process is actively running, should always be animated | +| :bootstrap-check-circle-fill: Success | Used for positive / successful states | +| :bootstrap-dash-square-fill: Neutral | Used for ambiguous states, generally good but could be better | +| :bootstrap-exclamation-square-fill: Less Neutral | Same as neutral but with more caveats | +| :bootstrap-x-octagon-fill: Warning | Used for cautionary states and actions with caveats | +| :bootstrap-exclamation-triangle-fill: Severe | Used for serious errors and actions that should be taken with extreme care | diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/slash-circle-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/slash-circle-fill.svg new file mode 100644 index 00000000..5f71707b --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/slash-circle-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/docs/docs/stylesheets/extra.css b/frontend/docs/docs/stylesheets/extra.css index 4978c791..aa8543f3 100644 --- a/frontend/docs/docs/stylesheets/extra.css +++ b/frontend/docs/docs/stylesheets/extra.css @@ -158,6 +158,15 @@ h3 { /* Status Styling */ +.status-empty { + font-family: var(--md-code-font); + font-weight: 500; + white-space: nowrap; + & svg { + color: rgb(119, 134, 145); + } +} + .status-success { font-family: var(--md-code-font); font-weight: 500; diff --git a/frontend/docs/docs/user-guide/index.md b/frontend/docs/docs/user-guide/index.md index 76346ca7..389ef571 100644 --- a/frontend/docs/docs/user-guide/index.md +++ b/frontend/docs/docs/user-guide/index.md @@ -1,6 +1,6 @@ # Welcome -Browsertrix is an intuitive, automated web archiving system. Archive, replay, and share websites exactly as they were at a certain point in time. +Browsertrix is an intuitive, automated web archiving platform designed to allow you to archive, replay, and share websites exactly as they were at a certain point in time. Browsertrix is built and hosted by [Webrecorder](https://webrecorder.net/), a leading expert in web archiving. Our goal is to make web archiving easier and more accessible to everyone through open source tools, easy-to-use interfaces, and community building. @@ -12,4 +12,4 @@ For help with a specific topic, try our [community help forum](https://forum.web For bug reports or feature requests, please open a [GitHub issue](https://github.com/webrecorder/browsertrix/issues/new/choose). -Thanks for choosing Browsertrix! Ready for [your first crawl](./getting-started.md)? \ No newline at end of file +Thanks for choosing Browsertrix! Ready for [your first crawl](./getting-started.md)? diff --git a/frontend/docs/mkdocs.yml b/frontend/docs/mkdocs.yml index 3d36a256..41bccb73 100644 --- a/frontend/docs/mkdocs.yml +++ b/frontend/docs/mkdocs.yml @@ -96,7 +96,8 @@ nav: - develop/ui/components.md - develop/localization.md - Design: - - develop/design-action-menus.md + - develop/ui/design-action-menus.md + - develop/ui/design-status-icons.md - API Reference: !ENV [ API_DOCS_URL, "/api/" ]