pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put modal in flexbox to stop text blurring from css transformations

Browse Source
This commit is contained in:
Fornax
2022-10-19 18:54:14 +02:00
parent 45c264138f
commit cdc14da9dd
7 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -597,7 +597,7 @@ const keyboard_event = evt => {
<CustomBanner src={custom_footer} link={custom_footer_link}></CustomBanner>
{/if}
<Modal bind:this={details_window} on:is_visible={e => {details_visible = e.detail}} title="File details" width="1200px">
<Modal bind:this={details_window} on:is_visible={e => {details_visible = e.detail}} title="File details" width="1000px">
<DetailsWindow file={file}></DetailsWindow>
</Modal>
@@ -609,7 +609,7 @@ const keyboard_event = evt => {
<EditWindow file={file} list={list} on:reload={reload}></EditWindow>
</Modal>
<Modal bind:this={embed_window} on:is_visible={e => {embed_visible = e.detail}} title="Embed file" width="850px">
<Modal bind:this={embed_window} on:is_visible={e => {embed_visible = e.detail}} title="Embed file" width="820px">
<EmbedWindow file={file} list={list}></EmbedWindow>
</Modal>

5
svelte/src/file_viewer/Sharebar.svelte
View File

@@ -71,14 +71,15 @@ const share_tumblr = () => {
overflow-y: scroll;
overflow-x: hidden;
background: var(--shaded_background);
border-radius: 16px;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
text-align: center;
overflow: hidden;
opacity: 0;
transition: left 0.4s, opacity 0.4s;
}
.visible {
left: 8em;
left: calc(8em + 2px);
opacity: 1;
}
.button_full_width {

16
svelte/src/home_page/FeatureTable.svelte
View File

@@ -15,7 +15,7 @@ onMount(() => {
<div>
<div></div>
<div class="feat_normal round_tl">Free</div>
<div class="feat_pro feat_highlight round_tr">Pro</div>
<div class="feat_pro round_tr">Pro</div>
</div>
<div>
<div class="feat_label">Size limit per file</div>
@@ -122,7 +122,7 @@ onMount(() => {
<div>
<div></div>
<div class="feat_normal round_bl">Free</div>
<div class="feat_pro feat_highlight round_br">
<div class="feat_pro round_br">
{#if window.user.subscription.id === "patreon_1"}
You have this plan<br/>
Thank you for supporting pixeldrain!
@@ -254,7 +254,7 @@ onMount(() => {
}
.feat_table > div > div {
flex: 1 1 0;
margin: 0.25em;
margin: 0.2em;
padding: 0.5em;
text-align: center;
word-wrap: break-word;
@@ -263,21 +263,17 @@ onMount(() => {
.feat_table > div > .feat_label {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
border: 2px solid var(--separator);
border: 1px solid var(--separator);
}
.feat_table > div > .feat_normal {
background-color: var(--card_color);
border: 1px solid var(--separator);
}
.feat_table > div > .feat_pro {
background-color: var(--card_color);
box-shadow: 1px 1px 2px -1px var(--shadow_color);
}
.feat_table > div > .feat_highlight {
border: 1px solid var(--link_color)
border: 1px solid var(--highlight_color);
}
.text_highlight {
color: var(--link_color);
font-size: 1.1em;
font-weight: bold;
}

8
svelte/src/home_page/OtherPlans.svelte
View File

@@ -126,7 +126,7 @@
}
.feat_table > div > div {
flex: 1 1 0;
margin: 0.25em;
margin: 0.2em;
padding: 0.5em;
text-align: center;
word-wrap: break-word;
@@ -134,11 +134,9 @@
}
.feat_table > div > .feat_pro {
background-color: var(--card_color);
box-shadow: 1px 1px 2px -1px var(--shadow_color);
border: 1px solid var(--highlight_color);
}
.text_highlight {
color: var(--link_color);
font-size: 1.1em;
font-weight: bold;
}
.feat_table > div > .cell_background {
@@ -151,7 +149,7 @@
text-align: left;
font-size: 1.2em;
color: #ffffff;
text-shadow: 1px 1px 3px #000000;
text-shadow: 1px 1px 2px #000000;
}
.feat_table > div > div.round_tr { border-top-right-radius: 0.5em; }

2
svelte/src/user_home/PageBranding.svelte
View File

@@ -133,7 +133,7 @@ onMount(() => {
<p>
Will be shown above the file. Maximum height is 90px. Will be shrunk if
larger. You can also add a link to open when the visitor clicks the
image. The link need to start with 'https://'.
image. The link needs to start with 'https://'.
</p>
<button on:click={() => {select_file("header")}}>
<i class="icon">add_photo_alternate</i>

19
svelte/src/util/Modal.svelte
View File

@@ -48,6 +48,7 @@ const keydown = e => {
{#if visible}
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
<div class="top_padding"></div>
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
<div class="header">
<slot name="title">
@@ -61,31 +62,37 @@ const keydown = e => {
<slot></slot>
</div>
</div>
<div class="bottom_padding"></div>
</div>
{/if}
<style>
.background {
position: fixed;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
}
/* The modal looks weird when it's in the dead center of the page, so we use
these padding divs to move it 25% up */
.top_padding { flex: 1 1 25%; }
.bottom_padding { flex: 1 1 75%; }
.window {
position: absolute;
position: relative;
z-index: inherit;
flex: 0 0 auto;
display: flex;
flex-direction: column;
background: var(--body_color);
max-height: 100%;
max-width: 100%;
margin: 0 auto;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
padding: 0;
border-radius: 20px 20px 12px 12px;
overflow: hidden;