diff --git a/src/vpu-signature-pdf-upload.js b/src/vpu-signature-pdf-upload.js index 24886991a17959845684d6b0e09604f4ac1747f6..9df7fae9269f5596c9066160ed252567c8b2421a 100644 --- a/src/vpu-signature-pdf-upload.js +++ b/src/vpu-signature-pdf-upload.js @@ -150,11 +150,14 @@ class SignaturePdfUpload extends VPUSignatureLitElement { } .files-block .file { + display: grid; + grid-template-columns: 40px auto; margin: 10px 0; } - .files-block .file button { - margin-right: 5px; + .files-block .file .button-box { + display: flex; + align-items: center; } .files-block .file .info { @@ -177,9 +180,11 @@ class SignaturePdfUpload extends VPUSignatureLitElement { getSignedFilesHtml() { return this.signedFiles.map(file => html` <div class="file"> - <button class="button is-small is-download" - title="${i18n.t('pdf-upload.download-file-button-title')}" - @click="${() => {this.fileDownloadClickHandler(file);}}"><vpu-icon name="download"></vpu-icon></button> + <div class="button-box"> + <button class="button is-small is-download" + title="${i18n.t('pdf-upload.download-file-button-title')}" + @click="${() => {this.fileDownloadClickHandler(file);}}"><vpu-icon name="download"></vpu-icon></button> + </div> <div class="info"> <strong>${file.name}</strong> (${humanFileSize(file.contentSize)}) </div> @@ -190,9 +195,11 @@ class SignaturePdfUpload extends VPUSignatureLitElement { getErrorFilesHtml() { return this.errorFiles.map((data, id) => html` <div class="file"> - <button class="button is-small is-re-upload" - title="${i18n.t('pdf-upload.re-upload-file-button-title')}" - @click="${() => {this.fileUploadClickHandler(data.file, id);}}"><vpu-icon name="upload"></vpu-icon></button> + <div class="button-box"> + <button class="button is-small is-re-upload" + title="${i18n.t('pdf-upload.re-upload-file-button-title')}" + @click="${() => {this.fileUploadClickHandler(data.file, id);}}"><vpu-icon name="upload"></vpu-icon></button> + </div> <div class="info"> <strong>${data.file.name}</strong> (${humanFileSize(data.file.size)}) ${data.json["hydra:description"]}