diff options
Diffstat (limited to 'src/app')
4 files changed, 13 insertions, 60 deletions
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 58e8a82..dd41340 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,27 +1,5 @@ -/* Attachment */ - .attachment { - width: 100%; - height: 100%; - display: flex; - border: 2px solid black; - border-top: 0; - border-radius: 0 0 .6em .6em; - padding: .4em; - padding-top: 1em; - margin-top: calc(-0.8em - 2px); -} - -.attachment:hover { - cursor: pointer; -} - -.attachment-name { - flex: 1; -} - -.attachment-type { - margin-left: .2em; + background-color: #424242; } /* Full attachment */ @@ -33,9 +11,6 @@ width: 100vw; height: 100vh; background-color: #000000AF; - display: flex; - justify-content: center; - align-items: center; z-index: 2; } @@ -46,27 +21,6 @@ .attachment-download { max-width: 420px !important; - margin: 0 .4em; text-decoration: none; - color: white; - border-color: white; - background-color: black; -} - -.attachment-download:hover { - background-color: white; - color: var(--focus-color); -} - -.close { - position: fixed; - top: .2em; - right: .2em; - font-size: 2em; - color: whitesmoke; -} - -.close:hover { - color: var(--failure); - cursor: pointer; + color: inherit; } diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 401068c..8605ca0 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,16 +1,16 @@ -<figure class="attachment" (click)="toggleShowFull()"> - <summary class="attachment-name"> +<figure class="attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()"> + <div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType"> + <img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg"> + <img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg"> + </div> + <summary class="flex-col flex-justify-center"> {{ fileName }} </summary> - <summary class="attachment-type"> - {{ fileType }} - </summary> </figure> -<div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()"> +<div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()"> <img class="attachment-img" *ngIf="isImage" src="{{paramURL}}"> - <a class="attachment-download submit-btn" *ngIf="!isImage" href="{{paramURL}}">Download attachment</a> - <div class="close"> - ☒ - </div> + <a class="attachment-download faded-slim-border padding-normal lighter-hover click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}"> + Download attachment + </a> </div> diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index f263386..c5919fd 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -16,7 +16,6 @@ } .message { - margin: 0.2em 0; word-break: break-word; } diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index a966d00..133b747 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -13,7 +13,7 @@ @{{ user.userName }} </span> </summary> - <article class="message"> + <article class="message margin-top-bot-small"> {{ post.message }} </article> <section class="flex-row flexible-children"> |