fixed filename word-break

This commit is contained in:
Danny Coates 2018-11-05 15:46:49 -08:00
parent 43748295b0
commit 1ef80febcb
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
4 changed files with 11 additions and 7 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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)}