From 53f9547cc5cf63a33c71e2389a541983c41b4098 Mon Sep 17 00:00:00 2001 From: Tasia Date: Thu, 22 Feb 2024 13:03:21 +0100 Subject: [PATCH] style(wiki): use core.js --- apps/wiki/core.css | 125 +++++++++++++++++++++++++++++++++++++ apps/wiki/index.html | 3 +- apps/wiki/tf-collection.js | 13 ++-- apps/wiki/tf-id-picker.js | 3 +- apps/wiki/tf-wiki-app.js | 15 +++-- apps/wiki/tf-wiki-doc.js | 5 +- 6 files changed, 149 insertions(+), 15 deletions(-) create mode 100644 apps/wiki/core.css diff --git a/apps/wiki/core.css b/apps/wiki/core.css new file mode 100644 index 00000000..389dcb6c --- /dev/null +++ b/apps/wiki/core.css @@ -0,0 +1,125 @@ +/* + * Tilde Friends core stylesheet + * This is a prototype; things may change based on feedback. + * + * This Software is an external library that is part of + * Tilde Friends and is shared under the MIT license. + * A copy of the license is available at the end of this file. + * + * Inject this file in your app at core.css + * and use this tag to import it: + * + * + * Revision 0 / 2024 M02 19 + */ + +body { + color: white; + font-family: sans-serif; +} + +button, .button { + border: none; + border-radius: 8px; + padding: 8px 12px; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 4px; +} + +button:hover, .button:hover { + filter: brightness(0.75); +} + +button.red, .button.red { + background-color: #bd1e24; + color: white; +} + +button.green, .button.green { + background-color: #18922d; + color: white; +} + +button.blue, .button.blue { + background-color: #0067a7; + color: white; +} + +button.yellow, .button.yellow { + background-color: #ee9600; + color: black; +} + +a:link { + color: #268bd2; +} + +a:visited { + color: #6c71c4; +} + +a:hover { + color: #859900; +} + +a:active { + color: #2aa198; +} + +table { + border-collapse: collapse; + width: 100%; +} + +td, th { + border: 1px solid #ffffff40; + text-align: left; + padding: 8px; +} + +tr:nth-child(even) { + background-color: #ffffff20; +} + +.flex { + display: flex; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.inline-flex-row { + display: inline-flex; + flex-direction: row; +} + +/* +Copyright 2024- Cory McWilliams & Tasia Iso + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ \ No newline at end of file diff --git a/apps/wiki/index.html b/apps/wiki/index.html index bfcdec3b..6671b647 100644 --- a/apps/wiki/index.html +++ b/apps/wiki/index.html @@ -2,8 +2,9 @@ + - + diff --git a/apps/wiki/tf-collection.js b/apps/wiki/tf-collection.js index 1337602e..655dfe01 100644 --- a/apps/wiki/tf-collection.js +++ b/apps/wiki/tf-collection.js @@ -65,28 +65,29 @@ class TfCollectionElement extends LitElement { render() { let self = this; return html` - - ${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html``)} - + - - + + - + `; } diff --git a/apps/wiki/tf-id-picker.js b/apps/wiki/tf-id-picker.js index ef9748c2..dc668ea2 100644 --- a/apps/wiki/tf-id-picker.js +++ b/apps/wiki/tf-id-picker.js @@ -26,7 +26,8 @@ class TfIdentityPickerElement extends LitElement { render() { return html` - ${(this.ids ?? []).map(id => html``)} `; diff --git a/apps/wiki/tf-wiki-app.js b/apps/wiki/tf-wiki-app.js index 17ca2e30..cd473144 100644 --- a/apps/wiki/tf-wiki-app.js +++ b/apps/wiki/tf-wiki-app.js @@ -240,7 +240,12 @@ class TfCollectionsAppElement extends LitElement { render() { let self = this; return html` + -
+
@@ -248,7 +249,7 @@ class TfWikiDocElement extends LitElement {
πŸ”’ document is private
-
+