diff options
Diffstat (limited to 'src/app')
8 files changed, 73 insertions, 82 deletions
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html index 2d110d6..ae114da 100644 --- a/src/app/components/comment-page/comment-page.component.html +++ b/src/app/components/comment-page/comment-page.component.html @@ -1,14 +1,16 @@ <app-loading *ngIf="!loaded"></app-loading> -<div id="content" *ngIf="loaded"> - <button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button> +<main id="content" *ngIf="loaded"> + <nav> + <button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button> + </nav> <app-comment [paramId]="commentId.toString()"></app-comment> - <div class="many-buttons" *ngIf="editable"> + <nav class="many-buttons" *ngIf="editable"> <button class="submit-btn" (click)="editComment()">Edit comment</button> <button class="submit-btn delete-btn" (click)="deleteComment()">Delete comment</button> - </div> + </nav> <form [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()"> <input type="text" *ngIf="editingComment" placeholder="New comment message" class="input-field" formControlName="newCommentMessage"> <input type="submit" style="display: none" /> </form> -<div> +</main> diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css index d82f10e..419cbf8 100644 --- a/src/app/components/comment/comment.component.css +++ b/src/app/components/comment/comment.component.css @@ -1,5 +1,6 @@ .comment { display: flex; + flex-direction: column; width: 100%; margin: .5em auto; @@ -40,10 +41,6 @@ /* Content */ -.content { - flex: 1; -} - .message { margin: .3em 0; word-break: break-all; diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 718e25c..e46bdb7 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,23 +1,21 @@ <app-loading *ngIf="!loaded"></app-loading> -<div class="comment rounded-border" *ngIf="loaded"> - <div class="content"> - <div class="author" (click)="goToAuthorProfile()"> - <img class="round-image" [src]="user.profilePictureURL"> - <div class="author-info"> - <div class="name"> - {{ user.firstName }} {{ user.lastName }} - </div> - <div class="handle"> - @{{ user.userName }} - </div> +<section class="comment rounded-border" *ngIf="loaded"> + <summary class="author" (click)="goToAuthorProfile()"> + <img class="round-image" [src]="user.profilePictureURL"> + <div class="author-info"> + <div class="name"> + {{ user.firstName }} {{ user.lastName }} + </div> + <div class="handle"> + @{{ user.userName }} </div> </div> - <div class="message" (click)="goToCommentPage()"> - {{ comment.message }} - </div> - <div class="timestamp" (click)="goToCommentPage()"> - {{ timeCreated }} - </div> - </div> -</div> + </summary> + <article class="message" (click)="goToCommentPage()"> + {{ comment.message }} + </article> + <time class="timestamp" (click)="goToCommentPage()"> + {{ timeCreated }} + </time> +</section> diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 2fece23..74657dc 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -40,9 +40,9 @@ None of your friends have posted anything yet!<br> Try refreshing your page! </mark> - <article *ngFor="let friendPost of posts" class="post"> + <div *ngFor="let friendPost of posts" class="post"> <app-post [paramId]="friendPost.postId.toString()"></app-post> - </article> + </div> </section> </section> </main> diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 572cc99..58e8a82 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,6 +1,9 @@ /* Attachment */ .attachment { + width: 100%; + height: 100%; + display: flex; border: 2px solid black; border-top: 0; border-radius: 0 0 .6em .6em; @@ -9,13 +12,7 @@ margin-top: calc(-0.8em - 2px); } -.clickable { - width: 100%; - height: 100%; - display: flex; -} - -.clickable:hover { +.attachment:hover { cursor: pointer; } diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 4d381d1..401068c 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,13 +1,11 @@ -<div class="attachment"> - <div class="clickable" (click)="toggleShowFull()"> - <div class="attachment-name"> - {{ fileName }} - </div> - <div class="attachment-type"> - {{ fileType }} - </div> - </div> -</div> +<figure class="attachment" (click)="toggleShowFull()"> + <summary class="attachment-name"> + {{ fileName }} + </summary> + <summary class="attachment-type"> + {{ fileType }} + </summary> +</figure> <div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()"> <img class="attachment-img" *ngIf="isImage" src="{{paramURL}}"> diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 8665865..b8e7e22 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -1,11 +1,13 @@ <app-loading *ngIf="!dataArrived"></app-loading> -<div id="content" *ngIf="dataArrived"> - <div class="many-buttons" *ngIf="loggedIn"> - <button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button> - <button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button> - </div> - <button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button> +<main id="content" *ngIf="dataArrived"> + <nav> + <div class="many-buttons" *ngIf="loggedIn"> + <button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button> + <button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button> + </div> + <button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button> + </nav> <app-post [paramId]="postId.toString()"></app-post> <div class="many-buttons" *ngIf="editable"> <button class="submit-btn" (click)="editPost()">Edit post</button> @@ -17,21 +19,19 @@ <input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> <input type="submit" style="display: none" /> </form> - <div class="form-attachments" *ngIf="editingPost"> + <figure class="form-attachments" *ngIf="editingPost"> <div *ngFor="let file of files" class="form-attachment"> {{ file.name ? file.name : 'Attachment' }} <div class="remove-form-attachment" (click)="removeAttachment(file.name)"> ☒ </div> </div> - </div> + </figure> <form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()"> <input type="text" placeholder="Add comment" class="input-field" formControlName="newComment"> <input type="submit" style="display: none" /> </form> - <div> - <div class="comment" *ngFor="let comm of post?.comments"> - <app-comment [paramId]="comm.id.toString()"></app-comment> - </div> - </div> -<div> + <section class="comment" *ngFor="let comm of post?.comments"> + <app-comment [paramId]="comm.id.toString()"></app-comment> + </section> +</main> diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index bc0d84a..4ba4d43 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -1,8 +1,8 @@ <app-loading *ngIf="!loaded"></app-loading> -<div class="post rounded-border" *ngIf="loaded"> - <div class="content"> - <div class="author" (click)="goToAuthorProfile()"> +<section class="post rounded-border" *ngIf="loaded"> + <section class="content"> + <summary class="author" (click)="goToAuthorProfile()"> <img class="round-image" [src]="user.profilePictureURL"> <div class="author-info"> <div class="name"> @@ -12,38 +12,37 @@ @{{ user.userName }} </div> </div> - </div> - <div class="message" (click)="goToPostPage()"> + </summary> + <article class="message" (click)="goToPostPage()"> {{ post.message }} - </div> + </article> <div class="bottom-post" (click)="goToPostPage()"> - <div class="timestamp"> + <time class="timestamp"> {{ timeCreated }} - </div> + </time> <div class="separator"> ║ </div> - <div class="comment-count"> + <summary class="comment-count"> {{ post.comments.length }} <img src="assets/images/comment.png"> - </div> + </summary> </div> - - </div> - <div class="rating"> + </section> + <section class="rating"> <button class="vote"> ᐃ </button> - <div class="score"> + <summary class="score"> {{ votesNumber }} - </div> + </summary> <button class="vote"> ᐁ </button> - </div> -</div> -<div class="attachments"> - <div *ngFor="let fileURL of post.fileURLs"> + </section> +</section> +<aside class="attachments"> + <figure *ngFor="let fileURL of post.fileURLs"> <app-post-attachment class="no-events" [paramURL]="fileURL"></app-post-attachment> - </div> -</div> + </figure> +</aside> |