Trying to make the navigation bar fit again with a new dropdown. Good grief, CSS.
This commit is contained in:
parent
8a9f53102b
commit
64bbd383de
@ -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
|
||||
>
|
||||
<span
|
||||
style="display: inline-block; vertical-align: top; white-space: pre; color: ${this
|
||||
.status.color ?? kErrorColor}"
|
||||
>${this.status.message}</span
|
||||
>
|
||||
<span id="requests"></span>
|
||||
${status.message ? html`
|
||||
<span
|
||||
class="w3-bar-item"
|
||||
style="vertical-align: top; white-space: pre; color: ${this
|
||||
.status.color ?? kErrorColor}"
|
||||
>${this.status.message}</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)
|
||||
.sort()
|
||||
.map((x) => this.spark_lines[x])
|
||||
.map((x) => [
|
||||
html`<span style="font-size: xx-small">${x.dataset.emoji}</span>`,
|
||||
x,
|
||||
])}</span
|
||||
>
|
||||
${Object.keys(this.spark_lines)
|
||||
.sort()
|
||||
.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>
|
||||
`;
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user