Fix text wrapping in modal title

This commit is contained in:
2023-11-16 14:48:15 +01:00
parent d62fc8059e
commit adbf92d0f3
5 changed files with 14 additions and 11 deletions

View File

@@ -653,6 +653,7 @@ const keyboard_event = evt => {
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
padding: 4px; padding: 4px;
align-items: center;
} }
@media(max-height: 600px) { @media(max-height: 600px) {
.headerbar { .headerbar {

View File

@@ -11,7 +11,8 @@ export let nobg = false
class:nobg class:nobg
target={embedded_viewer ? "_blank" : ""} target={embedded_viewer ? "_blank" : ""}
title="Go to the pixeldrain home page"> title="Go to the pixeldrain home page">
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 4px 0 0;"></PixeldrainLogo> <PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
<span class="label"></span>
</a> </a>
{:else} {:else}
<a <a
@@ -28,7 +29,10 @@ export let nobg = false
{/if} {/if}
<style> <style>
.button_home::after { .button {
flex: 0 0 content;
}
.label::after {
content: "pixeldrain"; content: "pixeldrain";
} }
@@ -38,7 +42,7 @@ export let nobg = false
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.button_home::after { .label::after {
content: "pd"; content: "pd";
} }

View File

@@ -180,7 +180,7 @@ const leave_confirmation = e => {
max-height: 50%; max-height: 50%;
right: 20px; right: 20px;
bottom: 20px; bottom: 20px;
border-radius: 20px 20px 8px 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 8px var(--shadow_color); box-shadow: 1px 1px 8px var(--shadow_color);
} }

View File

@@ -74,10 +74,10 @@ const keydown = e => {
<slot name="title"> <slot name="title">
{#if form !== ""} {#if form !== ""}
<Button click={hide} icon="close" label="Cancel"/> <Button click={hide} icon="close" label="Cancel"/>
<div class="title">{title}</div> <span class="title">{title}</span>
<Button highlight type="submit" form={form} click={hide} icon="save" label="Save"/> <Button highlight type="submit" form={form} click={hide} icon="save" label="Save"/>
{:else} {:else}
<div class="title">{title}</div> <span class="title">{title}</span>
<Button round click={hide} icon="close" /> <Button round click={hide} icon="close" />
{/if} {/if}
</slot> </slot>
@@ -133,18 +133,16 @@ these padding divs to move it 25% up */
padding: 1px; padding: 1px;
background: var(--background_color); background: var(--background_color);
color: var(--background_text_color); color: var(--background_text_color);
align-items: center;
} }
.title { .title {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 1.2em; font-size: 1.2em;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-align: center;
} }
.body { .body {
flex-grow: 1; flex-grow: 1;

View File

@@ -260,7 +260,7 @@ func (s styleSheet) String() string {
s.BodyBackground.CSS(), s.BodyBackground.CSS(),
s.BodyText.CSS(), s.BodyText.CSS(),
s.Separator.CSS(), s.Separator.CSS(),
s.BodyColor.WithAlpha(0.6).CSS(), // shaded_background s.BodyColor.WithAlpha(0.75).CSS(), // shaded_background
s.CardColor.CSS(), s.CardColor.CSS(),
s.Chart1.CSS(), s.Chart1.CSS(),
s.Chart2.CSS(), s.Chart2.CSS(),