Updated file card Koenig styles

This commit is contained in:
Peter Zimon 2021-12-15 17:45:04 +01:00
parent 4506dae3b3
commit 4f005f0ef5
2 changed files with 26 additions and 12 deletions

View File

@ -2279,8 +2279,8 @@ button.emoji-picker__category-button.active {
.kg-upload-title, .kg-upload-title,
.kg-upload-caption { .kg-upload-caption {
width: 100%; width: 100%;
margin: 8px 4px 0; margin: 4px 4px 0;
padding: 8px 12px; padding: 4px 12px;
border: none; border: none;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 700; font-weight: 700;
@ -2297,7 +2297,7 @@ button.emoji-picker__category-button.active {
} }
.kg-upload-caption { .kg-upload-caption {
font-size: 1.4rem; font-size: 1.6rem;
font-weight: 500; font-weight: 500;
color: var(--midgrey); color: var(--midgrey);
margin-top: 4px; margin-top: 4px;
@ -2305,7 +2305,7 @@ button.emoji-picker__category-button.active {
.kg-upload-metadata { .kg-upload-metadata {
line-height: 1em; line-height: 1em;
margin: 0 16px 14px; margin: 0 16px 4px;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 500; font-weight: 500;
} }
@ -2438,29 +2438,35 @@ button.emoji-picker__category-button.active {
.kg-file-data-container { .kg-file-data-container {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
align-items: stretch;
margin: 6px 0;
} }
.kg-file-data-container .kg-upload-title { .kg-file-data-container .kg-upload-title {
padding-top: 4px;
padding-bottom: 0px;
height: 30px; height: 30px;
margin-bottom: 2px; padding-top: 0;
padding-bottom: 0px;
margin-bottom: 0;
margin-top: 0;
} }
.kg-file-data-container .kg-upload-caption { .kg-file-data-container .kg-upload-caption {
padding-top: 0;
height: 26px;
margin-top: 0px;
font-weight: 400; font-weight: 400;
height: 26px;
padding-top: 0;
} }
.kg-file-data-container .kg-file-card-caption { .kg-file-data-container .kg-file-card-caption {
margin-top: 0; margin-top: 0;
} }
.kg-file-data-container .kg-upload-title + .kg-upload-caption {
margin-top: -2px;
}
.kg-file-card .kg-media-container { .kg-file-card .kg-media-container {
order: 2; order: 2;
} }
@ -2479,6 +2485,10 @@ button.emoji-picker__category-button.active {
margin-bottom: 0; margin-bottom: 0;
} }
.kg-file-card .kg-upload-container.medium .kg-file-data-container {
padding: 8px 0;
}
.kg-file-card .kg-upload-container.medium .kg-upload-title { .kg-file-card .kg-upload-container.medium .kg-upload-title {
margin-top: -4px; margin-top: -4px;
padding-top: 0; padding-top: 0;
@ -2502,6 +2512,10 @@ button.emoji-picker__category-button.active {
height: 20px; height: 20px;
} }
.kg-file-card .kg-upload-container.small .kg-file-data-container {
justify-content: center;
}
/* Video card /* Video card
/* --------------------------------------------------------------- */ /* --------------------------------------------------------------- */

View File

@ -42,7 +42,7 @@
<GhTextInput <GhTextInput
@value={{@payload.fileCaption}} @value={{@payload.fileCaption}}
@input={{action "setFileCaption" value="target.value"}} @input={{action "setFileCaption" value="target.value"}}
@placeholder="File caption" @placeholder="Add optional file description"
@class="kg-upload-caption {{if (and (not @isEditing) (not @payload.fileCaption)) "hide"}}" @class="kg-upload-caption {{if (and (not @isEditing) (not @payload.fileCaption)) "hide"}}"
@maxlength="100" @maxlength="100"
/> />