Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-02-06 16:41:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #5097 from VidVidex/master

Browse source 
Correctly display preview for very tall images
This commit is contained in:
Lauri Ojansivu 2023-08-21 19:54:31 +03:00 • committed by GitHub
commit a15c54833f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

45
client/components/cards/attachments.css
View file

@ -24,7 +24,6 @@
min-width: 150px; min-width: 150px;
max-height: 150px; max-height: 150px;
padding-right: 16px; padding-right: 16px;
} }
.attachment-thumbnail { .attachment-thumbnail {
max-width: 150px; max-width: 150px;
@ -78,10 +77,10 @@
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
top: 48px; /* height of the navbar */ top: 0;
left: 0; left: 0;
z-index: 9999 !important; z-index: 9999 !important;
background: rgba(13,13,13,0.95); background: rgba(13, 13, 13, 0.95);
} }
#viewer-container { #viewer-container {
display: flex; display: flex;
@ -99,10 +98,12 @@
#attachment-name { #attachment-name {
color: white; color: white;
font-size: 1.5em; font-size: 1.5em;
max-width: calc(100% - 50px); /* Make sure the name does not overlap the close button */ max-width: calc(
100% - 50px
); /* Make sure the name does not overlap the close button */
} }
#viewer-close { #viewer-close {
color:white; color: white;
cursor: pointer; cursor: pointer;
font-size: 4em; font-size: 4em;
top: 0; top: 0;
@ -111,26 +112,32 @@
} }
.attachment-arrow { .attachment-arrow {
font-size: 4em; font-size: 4em;
color:white; color: white;
cursor: pointer; cursor: pointer;
align-self: center; align-self: center;
margin: 0 20px; margin: 0 20px;
} }
#viewer-content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100% - 50px);
}
#image-viewer { #image-viewer {
background: background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% /
repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 20px 20px; /* Checkerboard background for transparent images */
50% / 20px 20px; /* Checkerboard background for transparent images */
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
#pdf-viewer { #pdf-viewer {
width: 40vw; width: 40vw;
height: 100vh; height: 100%;
} }
#txt-viewer{ #txt-viewer {
background-color: white; background-color: white;
width: 40vw; width: 40vw;
height: 100vh; height: 100%;
} }
.pdf-preview-error { .pdf-preview-error {
margin-top: 20vh; margin-top: 20vh;
@ -149,25 +156,29 @@
#viewer-container { #viewer-container {
display: block; display: block;
} }
.attachment-arrow{ .attachment-arrow {
position: absolute; position: absolute;
bottom: 2.2em; bottom: 2.2em;
font-size: 1.6em; font-size: 1.6em;
padding: 16px; padding: 16px;
} }
#prev-attachment{ #prev-attachment {
left: 0; left: 0;
} }
#next-attachment{ #next-attachment {
right: 0; right: 0;
} }
#pdf-viewer { #pdf-viewer {
width: 100%; width: 100%;
height: calc(100vh - 155px); /* Full height - height of top and bottom bars */ height: calc(
100vh - 155px
); /* Full height - height of top and bottom bars */
} }
#txt-viewer { #txt-viewer {
width: 100%; width: 100%;
height: calc(100vh - 155px); /* Full height - height of top and bottom bars */ height: calc(
100vh - 155px
); /* Full height - height of top and bottom bars */
} }
#audio-viewer { #audio-viewer {
margin-top: 20%; margin-top: 20%;