feat(upload): warn on large uploads over slow/metered connections
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m54s
All checks were successful
Build and Publish Docker Image / deploy (push) Successful in 1m54s
Detects if the user is on a slow (2G/3G) or metered (saveData) connection and prompts them with a confirmation dialog if they attempt to upload files totaling 200MB or more. This prevents accidental high data usage and warns users about potential long upload times. Also includes the dialogs JS and CSS in the base layout to support the confirmation modal.
This commit is contained in:
263
backend/static/css/04-dialogs.css
Normal file
263
backend/static/css/04-dialogs.css
Normal file
@@ -0,0 +1,263 @@
|
||||
.warpbox-dialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 130;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
background: color-mix(in srgb, var(--background) 60%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
|
||||
.warpbox-dialog-overlay.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.warpbox-dialog {
|
||||
position: relative;
|
||||
width: min(28rem, 100%);
|
||||
max-height: min(34rem, 90vh);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--card);
|
||||
color: var(--card-foreground);
|
||||
box-shadow: var(--shadow);
|
||||
opacity: 0;
|
||||
transform: translateY(0.6rem) scale(0.98);
|
||||
transition: opacity 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.warpbox-dialog:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.warpbox-dialog-overlay.is-visible .warpbox-dialog {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.warpbox-dialog-head {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.85rem;
|
||||
align-items: center;
|
||||
padding: 1.1rem 3.25rem 0 1.1rem;
|
||||
}
|
||||
|
||||
.warpbox-dialog-icon {
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--primary) 20%, transparent);
|
||||
color: var(--primary);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.warpbox-dialog-warning .warpbox-dialog-icon {
|
||||
background: color-mix(in srgb, var(--primary) 26%, transparent);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.warpbox-dialog-error .warpbox-dialog-icon {
|
||||
background: color-mix(in srgb, var(--danger) 18%, transparent);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.warpbox-dialog-title {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.warpbox-dialog-close {
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
right: 1.1rem;
|
||||
z-index: 2;
|
||||
min-height: 1.9rem;
|
||||
height: 1.9rem;
|
||||
width: 1.9rem;
|
||||
padding: 0;
|
||||
border-color: var(--border);
|
||||
color: var(--muted-foreground);
|
||||
background: var(--surface-1);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.warpbox-dialog-close:hover {
|
||||
color: var(--foreground);
|
||||
background: var(--surface-1-hover);
|
||||
}
|
||||
|
||||
.warpbox-dialog-body {
|
||||
padding: 0.85rem 1.1rem 1.1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.warpbox-dialog-message {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.warpbox-dialog-message:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warpbox-dialog-field {
|
||||
width: 100%;
|
||||
border: 1px solid var(--input);
|
||||
border-radius: calc(var(--radius) - 0.35rem);
|
||||
background: var(--surface-1);
|
||||
color: var(--foreground);
|
||||
padding: 0.55rem 0.7rem;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.warpbox-dialog-field:focus {
|
||||
outline: 2px solid var(--ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.warpbox-dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.55rem;
|
||||
padding: 0 1.1rem 1.1rem;
|
||||
}
|
||||
|
||||
html.warpbox-dialog-open,
|
||||
html.warpbox-dialog-open body {
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.dialog-file-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
max-height: 14rem;
|
||||
overflow: auto;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.dialog-file-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 0.35rem);
|
||||
background: var(--surface-1);
|
||||
}
|
||||
|
||||
.dialog-file-icon {
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.dialog-file-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.dialog-file-size {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog {
|
||||
border: 1px solid #000000;
|
||||
border-radius: 0;
|
||||
background: #c0c0c0;
|
||||
color: #000000;
|
||||
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf, 4px 4px 0 rgba(0, 0, 0, 0.45);
|
||||
font-family: "PixeloidSans", "PixelOperator", "Microsoft Sans Serif", Tahoma, sans-serif;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-head {
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog::before {
|
||||
content: "Warpbox";
|
||||
display: block;
|
||||
margin: 0.18rem 0.18rem 0;
|
||||
padding: 0.22rem 0.35rem;
|
||||
background: linear-gradient(to right, #000078, 80%, #0f80cd);
|
||||
color: #ffffff;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-error::before {
|
||||
content: "Warpbox - Error";
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-warning::before {
|
||||
content: "Warpbox - Warning";
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-info::before {
|
||||
content: "Warpbox - Info";
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-icon {
|
||||
border: 1px solid #000000;
|
||||
background: #ffffff;
|
||||
color: #000078;
|
||||
box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-warning .warpbox-dialog-icon {
|
||||
color: #9a5b00;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-error .warpbox-dialog-icon {
|
||||
color: #c00000;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-message {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:root[data-theme="retro"] .warpbox-dialog-close {
|
||||
top: 0.36rem;
|
||||
right: 0.3rem;
|
||||
width: 1.1rem;
|
||||
height: 0.95rem;
|
||||
min-height: 0.95rem;
|
||||
background: #c0c0c0;
|
||||
color: #000000;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.warpbox-dialog-overlay {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.warpbox-dialog {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user