fixed filename word-break
This commit is contained in:
parent
43748295b0
commit
1ef80febcb
|
@ -31,6 +31,10 @@ progress::-webkit-progress-value {
|
||||||
@apply rounded-sm;
|
@apply rounded-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.word-break-all {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: 64rem;
|
max-width: 64rem;
|
||||||
|
|
|
@ -96,7 +96,7 @@ function fileInfo(file, action) {
|
||||||
<article class="flex flex-row items-center p-3">
|
<article class="flex flex-row items-center p-3">
|
||||||
<img class="" src="${assets.get('blue_file.svg')}"/>
|
<img class="" src="${assets.get('blue_file.svg')}"/>
|
||||||
<p class="ml-4 w-full">
|
<p class="ml-4 w-full">
|
||||||
<h1 class="text-sm font-medium">${file.name}</h1>
|
<h1 class="text-sm font-medium word-break-all">${file.name}</h1>
|
||||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||||
file.size
|
file.size
|
||||||
)}</div>
|
)}</div>
|
||||||
|
@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) {
|
||||||
alt="Delete"
|
alt="Delete"
|
||||||
src="${assets.get('close-16.svg')}"
|
src="${assets.get('close-16.svg')}"
|
||||||
onclick=${del}/>
|
onclick=${del}/>
|
||||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||||
archive.size
|
archive.size
|
||||||
)}</div>
|
)}</div>
|
||||||
|
@ -251,7 +251,7 @@ module.exports.uploading = function(state, emit) {
|
||||||
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
|
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
|
||||||
<p class="w-full">
|
<p class="w-full">
|
||||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||||
archive.size
|
archive.size
|
||||||
)}</div>
|
)}</div>
|
||||||
|
@ -320,7 +320,7 @@ module.exports.preview = function(state, emit) {
|
||||||
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
|
<article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
|
||||||
<p class="w-full mb-4">
|
<p class="w-full mb-4">
|
||||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||||
archive.size
|
archive.size
|
||||||
)}</div>
|
)}</div>
|
||||||
|
@ -350,7 +350,7 @@ module.exports.downloading = function(state, emit) {
|
||||||
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
|
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
|
||||||
<p class="w-full mb-4">
|
<p class="w-full mb-4">
|
||||||
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
|
||||||
<h1 class="text-sm font-medium">${archive.name}</h1>
|
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
|
||||||
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
|
||||||
archive.size
|
archive.size
|
||||||
)}</div>
|
)}</div>
|
||||||
|
|
|
@ -6,7 +6,7 @@ module.exports = function(name, url) {
|
||||||
return html`
|
return html`
|
||||||
<div class="flex flex-col items-center text-center p-4 max-w-sm">
|
<div class="flex flex-col items-center text-center p-4 max-w-sm">
|
||||||
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
|
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
|
||||||
<p class="font-normal leading-normal text-grey-darker">${state.translate(
|
<p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
|
||||||
'copyUrlFormLabelWithName',
|
'copyUrlFormLabelWithName',
|
||||||
{ filename: name }
|
{ filename: name }
|
||||||
)}</p>
|
)}</p>
|
||||||
|
|
|
@ -2,7 +2,7 @@ const html = require('choo/html');
|
||||||
|
|
||||||
module.exports = function(state, emit) {
|
module.exports = function(state, emit) {
|
||||||
return html`
|
return html`
|
||||||
<div class="absolute pin flex items-center justify-center overflow-hidden my-8 z-40 bg-cloud" onclick=${close}>
|
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${close}>
|
||||||
<div class="h-full max-h-screen absolute pin-t flex items-center">
|
<div class="h-full max-h-screen absolute pin-t flex items-center">
|
||||||
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
|
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
|
||||||
${state.modal(state, emit, close)}
|
${state.modal(state, emit, close)}
|
||||||
|
|
Loading…
Reference in New Issue