cory/tildefriends
4
5
Fork 1
Code Issues 31 Pull Requests 1 Actions Releases 24 Wiki Activity

chore(wiki): the button class is now optional for input elements

Browse Source
This commit is contained in:
Tasia Iso 2024-02-22 22:34:11 +01:00
parent 1d5cdf9607
commit e361c3f975
4 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/wiki/tf-collection.js
View File

@ -68,7 +68,7 @@ class TfCollectionElement extends LitElement {
return html` return html`
<link rel="stylesheet" href="tildefriends.css"/> <link rel="stylesheet" href="tildefriends.css"/>
<span class="inline-flex-row"> <span class="inline-flex-row">
<select class="button" @change=${this.on_selected} id="select" value=${this.selected_id}> <select @change=${this.on_selected} id="select" value=${this.selected_id}>
<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select ${this.category})</option> <option value="" ?selected=${this.selected_id === ''} disabled hidden>(select ${this.category})</option>
${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html`<option value=${x.id} ?selected=${this.selected_id === x.id}>${x.name}</option>`)} ${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html`<option value=${x.id} ?selected=${this.selected_id === x.id}>${x.name}</option>`)}
</select> </select>

2
apps/wiki/tf-id-picker.js
View File

@ -27,7 +27,7 @@ class TfIdentityPickerElement extends LitElement {
render() { render() {
return html` return html`
<link rel="stylesheet" href="tildefriends.css"/> <link rel="stylesheet" href="tildefriends.css"/>
<select @change=${this.changed} class="button" style="max-width: 100%"> <select @change=${this.changed} style="max-width: 100%">
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)} ${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
</select> </select>
`; `;

3
apps/wiki/tf-wiki-doc.js
View File

@ -262,12 +262,13 @@ class TfWikiDocElement extends LitElement {
<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div> <div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
<div class="flex-column" ${this.value?.private ? 'border-top: 4px solid #800' : ''}"> <div class="flex-column" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
<textarea <textarea
rows="25"
?hidden=${!this.is_editing} ?hidden=${!this.is_editing}
id="editor-text-area" id="editor-text-area"
@input=${this.on_edit} @input=${this.on_edit}
@paste=${this.paste} @paste=${this.paste}
.value=${this.blob ?? ''}></textarea> .value=${this.blob ?? ''}></textarea>
<div style="flex: 1 1"> <div style="flex: 1 1; margin-top: 16px">
<div ?hidden=${!this.is_editing} class="box"> <div ?hidden=${!this.is_editing} class="box">
Summary Summary
<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view"> <img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">

44
apps/wiki/tildefriends.css
View File

@ -17,7 +17,11 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
button, .button { button,
.button,
input[type=button],
input[type=submit],
select {
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 8px 12px;
@ -25,30 +29,30 @@ button, .button {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
margin: 4px; margin: 4px;
}
button:hover, .button:hover { &.red {
filter: brightness(0.75); background-color: #bd1e24;
} color: white;
}
button.red, .button.red { &.green {
background-color: #bd1e24; background-color: #18922d;
color: white; color: white;
} }
button.green, .button.green { &.blue {
background-color: #18922d; background-color: #0067a7;
color: white; color: white;
} }
button.blue, .button.blue { &.yellow {
background-color: #0067a7; background-color: #ee9600;
color: white; color: black;
} }
button.yellow, .button.yellow { &:hover {
background-color: #ee9600; filter: brightness(0.75);
color: black; }
} }
a:link { a:link {