cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Trying to make the navigation bar fit again with a new dropdown. Good grief, CSS.

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-13 16:52:30 -04:00
parent 8a9f53102b
commit 64bbd383de
2 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
core/client.js
View File

@ -100,10 +100,10 @@ class TfNavigationElement extends LitElement {
get_spark_line(key, options) {
if (!this.spark_lines[key]) {
let spark_line = document.createElement('tf-sparkline');
spark_line.style.display = 'flex';
spark_line.style.flexDirection = 'row';
spark_line.style.flex = '0 50 5em';
spark_line.title = key;
spark_line.classList.add('w3-bar-item');
spark_line.classList.add('w3-hide-small');
spark_line.style.paddingRight = '0';
if (options) {
if (options.max) {
spark_line.max = options.max;
@ -121,11 +121,11 @@ class TfNavigationElement extends LitElement {
*/
render_login() {
if (this?.credentials?.session?.name) {
return html`<a id="login" href="/login/logout?return=${url() + hash()}"
return html`<a class="w3-bar-item w3-right" id="login" href="/login/logout?return=${url() + hash()}"
>logout ${this.credentials.session.name}</a
>`;
} else {
return html`<a id="login" href="/login?return=${url() + hash()}"
return html`<a class="w3-bar-item w3-right" id="login" href="/login?return=${url() + hash()}"
>login</a
>`;
}
@ -145,8 +145,8 @@ class TfNavigationElement extends LitElement {
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
<select
@change=${this.set_active_identity}
class="w3-input w3-cyan"
style="flex: 0 1 auto; width: auto; display: inline-blocktext-overflow: ellipsis; overflow: hidden; white-space: nowrap">
class="w3-button w3-cyan w3-bar-item w3-right"
style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">
${this.identities.map(x => html`<option ?selected=${x === this.identity}>${x}</option>`)}
</select>
`;
@ -155,7 +155,7 @@ class TfNavigationElement extends LitElement {
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
<button
@click=${this.create_identity}
class="w3-button w3-blue">
class="w3-button w3-blue w3-right">
Create an Identity
</button>
`;
@ -210,6 +210,7 @@ class TfNavigationElement extends LitElement {
render() {
let self = this;
return html`
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
<style>
${k_global_style} .tooltip {
position: absolute;
@ -226,16 +227,17 @@ class TfNavigationElement extends LitElement {
}
</style>
<div
style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center"
class="w3-black w3-bar"
>
<span
class="w3-bar-item"
style="cursor: pointer"
@click=${() => (this.show_version = !this.show_version)}
>😎</span
>
<span
?hidden=${!this.show_version}
style="flex: 0 0; white-space: nowrap"
class="w3-bar-item"
style=${'white-space: nowrap' + (this.show_version ? '' : '; display: none')}
title=${this.version?.name +
' ' +
Object.entries(this.version || {})
@ -244,6 +246,7 @@ class TfNavigationElement extends LitElement {
>${this.version?.number}</span
>
<a
class="w3-bar-item"
accesskey="h"
@mouseover=${set_access_key_title}
data-tip="Open home app."
@ -252,6 +255,7 @@ class TfNavigationElement extends LitElement {
>TF</a
>
<a
class="w3-bar-item"
accesskey="a"
@mouseover=${set_access_key_title}
data-tip="Open apps list."
@ -259,6 +263,7 @@ class TfNavigationElement extends LitElement {
>apps</a
>
<a
class="w3-bar-item"
accesskey="e"
@mouseover=${set_access_key_title}
data-tip="Toggle the app editor."
@ -267,6 +272,7 @@ class TfNavigationElement extends LitElement {
>edit</a
>
<a
class="w3-bar-item"
accesskey="p"
@mouseover=${set_access_key_title}
data-tip="View and change permissions."
@ -274,27 +280,20 @@ class TfNavigationElement extends LitElement {
@click=${() => (self.show_permissions = !self.show_permissions)}
>🎛️</a
>
${status.message ? html`
<span
style="display: inline-block; vertical-align: top; white-space: pre; color: ${this
class="w3-bar-item"
style="vertical-align: top; white-space: pre; color: ${this
.status.color ?? kErrorColor}"
>${this.status.message}</span
>
<span id="requests"></span>
` : undefined}
${this.render_permissions()}
<span
style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0"
>${Object.keys(this.spark_lines)
${Object.keys(this.spark_lines)
.sort()
.map((x) => this.spark_lines[x])
.map((x) => [
html`<span style="font-size: xx-small">${x.dataset.emoji}</span>`,
x,
])}</span
>
.map((x) => this.spark_lines[x])}
${this.render_login()}
${this.render_identity()}
<span style="flex: 0 0; white-space: nowrap"
>${this.render_login()}</span
>
</div>
`;
}
@ -619,13 +618,13 @@ class TfSparkLineElement extends LitElement {
) / 10.0;
return html`
<svg
style="max-width: 7.5em; max-height: 1.5em; margin: 0; padding: 0; background: #000"
style="max-width: 7.5em; margin: 0; padding: 0; background: #000; height: 1em"
viewBox="0 0 50 10"
xmlns="http://www.w3.org/2000/svg"
>
${this.lines.map((x) => this.render_line(x))}
<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">
${max}
${this.dataset.emoji}${max}
</text>
</svg>
`;

4
src/httpd.js.c
View File

@ -328,8 +328,8 @@ static JSValue _httpd_websocket_upgrade(JSContext* context, JSValueConst this_va
const char* session = tf_http_get_cookie(tf_http_request_get_header(request, "cookie"), "session");
JSValue jwt = _authenticate_jwt(context, session);
tf_free((void*)session);
JSValue name = JS_GetPropertyStr(context, jwt, "name");
const char* name_string = JS_ToCString(context, name);
JSValue name = !JS_IsUndefined(jwt) ? JS_GetPropertyStr(context, jwt, "name") : JS_UNDEFINED;
const char* name_string = !JS_IsUndefined(name) ? JS_ToCString(context, name) : NULL;
const char* session_token = _make_session_jwt(ssb, name_string);
const char* cookie = _make_set_session_cookie_header(request, session_token);
tf_free((void*)session_token);