From 2b5b2f2449317b8aebd2d8962a930bf454d100fb Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 24 Feb 2021 18:32:16 +0200 Subject: Improved semantics and simplifed some code in feed component --- src/app/components/feed/feed.component.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src/app/components/feed/feed.component.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index cb155c6..23a70d5 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -77,7 +77,7 @@ #top-bar { display: flex; - flex-direction: column; + flex-direction: row; width: 98%; margin: 0 auto; margin-bottom: .5em; @@ -100,10 +100,6 @@ display: none; } -#main-content { - display: flex; -} - /* Create post */ #create-post-form { -- cgit v1.2.3 From 6c52fd1199525a63dd5bed80a8609b96510282aa Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 4 Mar 2021 17:03:13 +0200 Subject: Made file input hide it's button part of the global styling --- src/app/components/feed/feed.component.css | 4 ---- src/app/components/profile-settings/profile-settings.component.css | 5 ----- src/styles.css | 5 +++++ 3 files changed, 5 insertions(+), 9 deletions(-) (limited to 'src/app/components/feed/feed.component.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 23a70d5..3d22349 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -136,10 +136,6 @@ cursor: pointer; } -#file-upload::-webkit-file-upload-button { - visibility: hidden; -} - #attachment-img { height: 1.5em; width: 1.5em; diff --git a/src/app/components/profile-settings/profile-settings.component.css b/src/app/components/profile-settings/profile-settings.component.css index a10d9c6..347c650 100644 --- a/src/app/components/profile-settings/profile-settings.component.css +++ b/src/app/components/profile-settings/profile-settings.component.css @@ -65,11 +65,6 @@ hr { cursor: pointer; } -#upload-file > input::-webkit-file-upload-button, -#upload-file > input::file-selector-button { - visibility: hidden; -} - #update-user { margin-top: 1.1em; } diff --git a/src/styles.css b/src/styles.css index ae70525..cc92d4d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -24,6 +24,11 @@ button:focus { outline: 0; } +input[type=file]::-webkit-file-upload-button, +input[type=file]::file-selector-button { + visibility: hidden; +} + #content { /* Used for the login and register pages */ height: 100%; -- cgit v1.2.3 From 4ff1d8194a2f2ae2a837e1d15167cd3b6b74d32f Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 18:19:53 +0200 Subject: Major redesign of feed component styling --- src/app/components/feed/feed.component.css | 171 +++------------------------- src/app/components/feed/feed.component.html | 67 +++++------ src/assets/icons/tabler-icon-paperclip.svg | 65 +++++++++++ src/styles.css | 6 +- 4 files changed, 113 insertions(+), 196 deletions(-) create mode 100644 src/assets/icons/tabler-icon-paperclip.svg (limited to 'src/app/components/feed/feed.component.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 3d22349..baa96d5 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,171 +1,36 @@ -#feed-page { - height: 100%; - max-width: 40em; - box-sizing: border-box; - border: .5em solid var(--bg-color); - - margin: 0 auto; - - display: flex; -} - -@media screen and (max-width: 750px) { - #profile-bar { - display: none !important; - } - #top-bar-profile-pic { - display: initial; - } -} -@media screen and (min-width: 750px) { - #profile-bar { - display: initial; - } - #top-bar-profile-pic { - display: none !important; - } -} - -/* Content */ - -#feed-content { - flex: 1; - display: flex; - flex-direction: column; -} - -/* Profile bar */ - -#profile-bar { - width: 20%; - height: fit-content; - display: flex; - flex-direction: column; - align-items: center; - - box-sizing: border-box; - background-color: var(--bg-color); - - margin-right: .5em; - padding-bottom: 1em; - padding: .5em; - border-radius: .6em; -} - -#profile-bar-profile-pic { - width: 7em; - height: 7em; - box-sizing: border-box; - padding: .5em; -} - -#profile-bar-name { - text-align: center; -} - -#profile-bar-username { - margin: .5em 0; -} - -#profile-bar > #profile-info { - display: flex; - flex-direction: column; - align-items: center; +#create-post { + width: 100%; + margin: 1em 0; } -/* Top bar */ - -#top-bar { - display: flex; - flex-direction: row; - width: 98%; - margin: 0 auto; - margin-bottom: .5em; - box-sizing: border-box; +#new-post-message { + min-height: 1.5em; + resize: vertical; } -#top-bar-profile-pic { - height: 2.5em; - width: 2.5em; - margin-right: .5em; +#attachments-btns { + padding: 0.5em 0; } -#top-bar-profile-pic > img { - height: inherit; - width: inherit; +#attachments-btns img, .file-button > input { + height: 1.4em; + width: 1.4em; } -#top-bar-open-chat { - /* Until implemented */ - display: none; +#new-post-attachments { + margin-bottom: 0.5em; } -/* Create post */ - -#create-post-form { - width: 100%; +.file-button { position: relative; - display: flex; - flex-direction: column; - box-sizing: border-box; -} - -#form-inputs { - display: flex; -} - -#top-bar-create-post { - flex: 1; - font-size: inherit; - width: 100%; - height: 100%; - margin: 0 auto; - box-sizing: border-box; - border: 2px solid var(--bg-color); - border-radius: .6em; -} - -#file-upload { - font-size: inherit; - color: transparent; - width: 1.5em; - height: 1.5em; } -#file-upload:hover { - cursor: pointer; -} - -#attachment-img { - height: 1.5em; - width: 1.5em; +.file-button > img { position: absolute; - right: .4em; pointer-events: none; } -/* Posts */ - -#no-posts-msg { - width: 100%; - margin-top: 1em; - color: gray; - text-align: center; -} - -/* Elements, that act as buttons */ - -#profile-bar > #profile-info:hover, -#top-bar-profile-pic:hover { - cursor: pointer; -} - -/* Can't copy text from */ - -#profile-bar, -.vote { - -webkit-user-select: none; /* Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+/Edge */ - user-select: none; /* Standard */ +.file-button > input { + font-size: inherit; + color: transparent; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 5694b09..c5c4401 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -2,49 +2,34 @@ -
- -
- -
-
- None of your friends have posted anything yet!
- Try refreshing your page! -
-
- +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+ ☒ +
+ + +
+
+ None of your friends have posted anything yet!
+ Try refreshing your page! +
+
+ +
diff --git a/src/assets/icons/tabler-icon-paperclip.svg b/src/assets/icons/tabler-icon-paperclip.svg new file mode 100644 index 0000000..955e6fb --- /dev/null +++ b/src/assets/icons/tabler-icon-paperclip.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index af9bbeb..b4f7539 100644 --- a/src/styles.css +++ b/src/styles.css @@ -24,16 +24,18 @@ body { background-color: var(--bg-color); } -button { +button, textarea, input { color: inherit; background: inherit; + background-color: inherit; font: inherit; padding: 0; border: none; } input:focus, -button:focus { +button:focus, +textarea:focus { outline: 0; } -- cgit v1.2.3 From 69624c2a75f04375793d31203e63b8a1797749bf Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 19:29:45 +0200 Subject: Added an hr to feed and profile components, styled properly --- src/app/components/feed/feed.component.css | 2 +- src/app/components/feed/feed.component.html | 1 + src/app/components/profile/profile.component.html | 1 + src/styles.css | 6 ++++++ 4 files changed, 9 insertions(+), 1 deletion(-) (limited to 'src/app/components/feed/feed.component.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index baa96d5..372792c 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,6 +1,6 @@ #create-post { width: 100%; - margin: 1em 0; + margin-top: 1em; } #new-post-message { diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index a8290a1..3b5b69b 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -23,6 +23,7 @@ Post +
None of your friends have posted anything yet!
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 38f15e4..4bb6752 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -47,6 +47,7 @@
+
{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet! diff --git a/src/styles.css b/src/styles.css index 0f60fd0..66fedf7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -254,6 +254,12 @@ input[type=file]::file-selector-button { } } +.card-hr { + width: calc(100% - 1em); + border: 1px solid var(--fg-color); + background-color: var(--fg-color); +} + /* Effects */ .lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover { -- cgit v1.2.3 From 88b8336f0fa51a6f1ac1334e1237d1053d52d8a7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 15:14:54 +0200 Subject: Major redesign of form attachments (the ones you find on post creation and edit) --- src/app/components/feed/feed.component.css | 12 ++-- src/app/components/feed/feed.component.html | 14 ++-- .../post-attachment/post-attachment.component.css | 4 -- .../post-attachment/post-attachment.component.html | 2 +- src/assets/icons/tabler-icon-x.svg | 75 ++++++++++++++++++++++ src/styles.css | 27 ++++---- 6 files changed, 101 insertions(+), 33 deletions(-) create mode 100644 src/assets/icons/tabler-icon-x.svg (limited to 'src/app/components/feed/feed.component.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 372792c..a0b6d2e 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,3 +1,7 @@ +section:empty { + display: none; +} + #create-post { width: 100%; margin-top: 1em; @@ -8,19 +12,11 @@ resize: vertical; } -#attachments-btns { - padding: 0.5em 0; -} - #attachments-btns img, .file-button > input { height: 1.4em; width: 1.4em; } -#new-post-attachments { - margin-bottom: 0.5em; -} - .file-button { position: relative; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index fb969da..3fd778a 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -5,17 +5,19 @@
-
+
-
-
- {{ file.name ? file.name : 'Attachment' }} -
- ☒ +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+
+
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 3c25563..6cdab0b 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,7 +1,3 @@ -.attachment { - background-color: #424242; -} - /* Full attachment */ .show-full-attachment { diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 12004dc..04ba633 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/assets/icons/tabler-icon-x.svg b/src/assets/icons/tabler-icon-x.svg new file mode 100644 index 0000000..28725c8 --- /dev/null +++ b/src/assets/icons/tabler-icon-x.svg @@ -0,0 +1,75 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index 93ed57b..b166d70 100644 --- a/src/styles.css +++ b/src/styles.css @@ -277,6 +277,15 @@ input[type=file]::file-selector-button { padding-left: 0.3em; } +.bot-padding-bigger { + padding-bottom: 0.5em; +} + +.top-bot-padding-bigger { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + .top-bot-padding-small { padding-top: 0.2em; padding-bottom: 0.2em; @@ -446,6 +455,10 @@ input[type=file]::file-selector-button { /* Form attachments (the ones that are shown while creating and editing a post) */ +.form-attachment { + background-color: #424242; +} + .form-attachments { display: flex; flex-wrap: wrap; @@ -454,20 +467,6 @@ input[type=file]::file-selector-button { margin: 0 0.3em; } -.form-attachment { - border: 2px solid black; - border-radius: 0.6em; - margin-top: 0.2em; - margin-right: 0.2em; - padding: 0.2em; - display: flex; - align-items: center; -} - -.form-attachment:last-child { - margin-right: 0; -} - .remove-form-attachment { font-size: 0.9em; color: var(--failure); -- cgit v1.2.3 From 0133f3b5e9086fba5006314c183451974d50502c Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 15:48:03 +0200 Subject: Major redesign of post page component and removed post edit and delete functionality, as well as old navbar from it --- src/app/components/feed/feed.component.css | 5 -- src/app/components/feed/feed.component.html | 2 +- .../components/post-page/post-page.component.css | 61 +--------------------- .../components/post-page/post-page.component.html | 40 ++++---------- .../components/post-page/post-page.component.ts | 50 ------------------ src/styles.css | 40 ++++++-------- 6 files changed, 30 insertions(+), 168 deletions(-) (limited to 'src/app/components/feed/feed.component.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index a0b6d2e..295a379 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -7,11 +7,6 @@ section:empty { margin-top: 1em; } -#new-post-message { - min-height: 1.5em; - resize: vertical; -} - #attachments-btns img, .file-button > input { height: 1.4em; width: 1.4em; diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 3fd778a..ee9d89b 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -4,7 +4,7 @@
- +
diff --git a/src/app/components/post-page/post-page.component.css b/src/app/components/post-page/post-page.component.css index 4f2ae60..7405240 100644 --- a/src/app/components/post-page/post-page.component.css +++ b/src/app/components/post-page/post-page.component.css @@ -1,60 +1,3 @@ -#content { - justify-content: flex-start !important; -} - -#content > * { - width: 100%; -} - -.many-buttons { - width: 100%; - display: flex; -} - -.many-buttons > * { - flex: 1; - margin-right: .3em; -} - -.many-buttons > *:last-of-type { - margin-right: 0; -} - -#editPost { - display: flex; - position: relative; -} - -#new-message-input { - flex: 1; - box-sizing: border-box; -} - -#file-upload { - font-size: inherit; - color: transparent; - width: 1.99em; - height: 1.99em; - margin-left: .3em; -} - -#file-upload:hover { - cursor: pointer; -} - -#file-upload::-webkit-file-upload-button { - visibility: hidden; -} - -#attachment-img { - height: 1.99em; - width: 1.99em; - position: absolute; - right: 0; - pointer-events: none; -} - -.submit-btn { - margin: 0 auto; - margin-bottom: .5em; +main { + padding-top: 0.5em; } diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index ad748e3..529d971 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -2,38 +2,18 @@ -
- +
-
- - -
- - - - - + + + -
-
- {{ file.name ? file.name : 'Attachment' }} -
- ☒ -
+
+
+
+
-
-
- - -
-
-
diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts index a60f4da..e159c69 100644 --- a/src/app/components/post-page/post-page.component.ts +++ b/src/app/components/post-page/post-page.component.ts @@ -87,48 +87,6 @@ export class PostPageComponent implements OnInit { } } - backToFeed(): void { - this._router.navigate(['/']); - } - - backToProfile(): void { - this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]); - } - - toLogin(): void { - this._router.navigate(['/login']); - } - - onFileUpload(event: any): void { - this.files.push(...event.target.files); - this.editPostFormGroup.get('fileUpload')?.reset(); - } - - removeAttachment(fileName: string): void { - this.files = this.files.filter(x => x.name !== fileName); - } - - editPost(): void { - if (this._tokenService.getTokenFromSessionStorage() === '') { - this.toLogin(); - return; - } - - if (this.editingPost) { - const newMessage = this.editPostFormGroup.get('newPostMessage')?.value; - - if (newMessage === '' && newMessage !== this.post.message) { - this._postService.putPostWithSessionStorageRequest(this.postId, newMessage, this.files).subscribe({ - next: () => { - this.reloadPage(); - } - }); - this.dataArrived = false; - } - } - this.editingPost = !this.editingPost; - } - addComment(): void { if (!this.loggedIn) { this._router.navigate(['/login']); @@ -146,14 +104,6 @@ export class PostPageComponent implements OnInit { } } - deletePost(): void { - this._postService.deletePostWithSessionStorage(this.postId).subscribe({ - next: () => { - this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]); - } - }); - } - private reloadPage(): void { this._router.routeReuseStrategy.shouldReuseRoute = () => false; this._router.onSameUrlNavigation = 'reload'; diff --git a/src/styles.css b/src/styles.css index b166d70..d57416e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -297,10 +297,22 @@ input[type=file]::file-selector-button { margin: 0; } +.no-margin-top { + margin-top: 0; +} + .margin-top-normal { margin-top: 0.4em; } +.margin-top-bigger { + margin-top: 0.5em; +} + +.margin-bot-bigger { + margin-bottom: 0.5em; +} + .margin-top-bot-small { margin-top: 0.2em; margin-bottom: 0.2em; @@ -359,6 +371,11 @@ input[type=file]::file-selector-button { /* Inputs, the type found in login and register */ +.textarea-new-msg { + min-height: 1.5em; + resize: vertical; +} + .fancy-input { box-sizing: border-box; margin-bottom: 0.5em; @@ -458,26 +475,3 @@ input[type=file]::file-selector-button { .form-attachment { background-color: #424242; } - -.form-attachments { - display: flex; - flex-wrap: wrap; - color: gray; - font-size: 0.75em; - margin: 0 0.3em; -} - -.remove-form-attachment { - font-size: 0.9em; - color: var(--failure); - background-color: white; - border-radius: 0.2em; - margin: 0 0.2em; - padding: 0.2em; -} - -.remove-form-attachment:hover { - color: white; - background-color: var(--failure); - cursor: pointer; -} -- cgit v1.2.3