Merge pull request #805 from Budibase/fix-attachment-height

fixing attachment height
This commit is contained in:
Martin McKeaveney 2020-10-29 09:20:44 +00:00 committed by GitHub
commit 71b12abc19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions

View File

@ -12,8 +12,8 @@
{#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())} {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
<img {width} {height} src={file.url} /> <img {width} {height} src={file.url} />
{:else} {:else}
<i class="ri-file-line" />
<span class="extension">.{file.extension}</span> <span class="extension">.{file.extension}</span>
<i class="ri-file-line" />
<span>{file.name}</span> <span>{file.name}</span>
{/if} {/if}
</div> </div>
@ -33,12 +33,12 @@
} }
i { i {
font-size: 36px; font-size: 24px;
margin-bottom: var(--spacing-m); position: relative;
top: 5px;
} }
.file { .file {
position: relative;
height: 75px; height: 75px;
width: 75px; width: 75px;
border: 2px dashed var(--grey-7); border: 2px dashed var(--grey-7);
@ -46,18 +46,23 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative;
justify-content: center; justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
} }
.extension { .extension {
position: absolute; position: absolute;
top: var(--spacing-s); top: -5px;
left: var(--spacing-s); font-size: var(--font-size-xs);
font-weight: 500; font-weight: 500;
} }
span { span {
font-size: var(--font-size-xs);
width: 75px; width: 75px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

View File

@ -31,6 +31,9 @@ export function deleteRowRenderer(params) {
export function editRowRenderer(params) { export function editRowRenderer(params) {
const container = document.createElement("div") const container = document.createElement("div")
container.style.height = "100%"
container.style.display = "flex"
container.style.alignItems = "center"
new EditRow({ new EditRow({
target: container, target: container,
@ -46,6 +49,9 @@ export function editRowRenderer(params) {
function attachmentRenderer(options, constraints, editable) { function attachmentRenderer(options, constraints, editable) {
return params => { return params => {
const container = document.createElement("div") const container = document.createElement("div")
container.style.height = "100%"
container.style.display = "flex"
container.style.alignItems = "center"
const attachmentInstance = new AttachmentList({ const attachmentInstance = new AttachmentList({
target: container, target: container,
@ -64,6 +70,7 @@ function linkedRowRenderer() {
let container = document.createElement("div") let container = document.createElement("div")
container.style.display = "grid" container.style.display = "grid"
container.style.height = "100%" container.style.height = "100%"
container.style.alignItems = "center"
new RelationshipDisplay({ new RelationshipDisplay({
target: container, target: container,