From e43399dc97bbacf1d44a875fe1d52e9030994fa1 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 24 Feb 2021 19:02:50 +0200 Subject: Improved semantics of logn and register pages --- src/app/components/login/login.component.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 13f9bbf..1fda5b5 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,30 +1,30 @@ -
-
Login
+
+ Login
-
+
-
+ -
-
+ + -
+
-
+
- + -- cgit v1.2.3 From c4c85daf3eedbbfb6d9cf615b1a7d96fe26d8112 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 24 Feb 2021 19:13:44 +0200 Subject: Fixed login page HTML --- src/app/components/login/login.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 1fda5b5..b641fcb 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,5 +1,5 @@
- Login + Login
-- cgit v1.2.3 From d9d76c97bd76ddd503739d94f88eb15905bb4f3b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 25 Feb 2021 14:11:27 +0200 Subject: Reverted mark elements to divs, because mark has a style already --- src/app/components/feed/feed.component.html | 4 ++-- src/app/components/login/login.component.html | 4 ++-- src/app/components/register/register.component.html | 20 ++++++++++---------- 3 files changed, 14 insertions(+), 14 deletions(-) (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 74657dc..230c27b 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -36,10 +36,10 @@
- +
None of your friends have posted anything yet!
Try refreshing your page! - +
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index b641fcb..9f74faa 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -8,9 +8,9 @@ - +
- +
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index df6f6c9..0075b1d 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -10,51 +10,51 @@ - +
- +
- +
- +
- +
- +
- +
- +
- +
- +
-- cgit v1.2.3 From ca7e618ca3350a5cf200ae39c851b016c9088d41 Mon Sep 17 00:00:00 2001 From: transtrike Date: Thu, 25 Feb 2021 20:51:24 +0200 Subject: Footer added; Pages fucked up --- src/app/app.module.ts | 4 +- .../admin-panel-page.component.html | 154 +++++++++++--- .../comment-page/comment-page.component.html | 19 +- src/app/components/feed/feed.component.html | 71 +++++-- src/app/components/footer/footer.component.css | 20 ++ src/app/components/footer/footer.component.html | 12 ++ src/app/components/footer/footer.component.ts | 18 ++ src/app/components/login/login.component.html | 40 +++- .../components/not-found/not-found.component.html | 15 +- .../components/post-page/post-page.component.html | 63 ++++-- .../profile-settings.component.html | 234 +++++++++++++++++---- src/app/components/profile/profile.component.html | 67 ++++-- .../components/register/register.component.html | 134 ++++++++++-- src/styles.css | 103 ++++----- src/theme.scss | 14 -- 15 files changed, 755 insertions(+), 213 deletions(-) create mode 100644 src/app/components/footer/footer.component.css create mode 100644 src/app/components/footer/footer.component.html create mode 100644 src/app/components/footer/footer.component.ts delete mode 100644 src/theme.scss (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1bf44ad..e331a5d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import { CommentComponent } from './components/comment/comment.component'; import { CommentPageComponent } from './components/comment-page/comment-page.component'; import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component'; import { RouterModule } from '@angular/router'; +import { FooterComponent } from './components/footer/footer.component'; @NgModule({ declarations: [ @@ -43,7 +44,8 @@ import { RouterModule } from '@angular/router'; AdminPanelPageComponent, CommentComponent, CommentPageComponent, - PostAttachmentComponent + PostAttachmentComponent, + FooterComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 31f0849..0c0954a 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -2,84 +2,182 @@
-
+
- - + +
- +
- - + +
- +
-
+
Available languages:
-
+
{{ lang.name }}
-
+
- -
+ +
- +
- - + +
- +
- -
+ +
Available technologies:
-
+
{{ tech.name }}
-
+
- -
+ +
- +
- +
- +
-
+
+
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html index ae114da..d59c956 100644 --- a/src/app/components/comment-page/comment-page.component.html +++ b/src/app/components/comment-page/comment-page.component.html @@ -2,15 +2,26 @@
-
- + +
+
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 230c27b..7f3cb68 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -3,41 +3,81 @@
-
+
- None of your friends have posted anything yet!
+ None of your friends have posted anything yet!
Try refreshing your page!
@@ -45,4 +85,5 @@
+
diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css new file mode 100644 index 0000000..b93e1f3 --- /dev/null +++ b/src/app/components/footer/footer.component.css @@ -0,0 +1,20 @@ +footer { + display: flex; + width: 100%; +} + +footer > * { + flex: 1; +} + +#version { + text-align: left; +} + +#middle-footer-message { + text-align: center; +} + +#license { + text-align: right; +} diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html new file mode 100644 index 0000000..d410597 --- /dev/null +++ b/src/app/components/footer/footer.component.html @@ -0,0 +1,12 @@ + diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts new file mode 100644 index 0000000..e83f840 --- /dev/null +++ b/src/app/components/footer/footer.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.css'] +}) +export class FooterComponent implements OnInit { + public version: string = "v0.1"; + public licenseUrl: string = "https://github.com/Team-Kaleidoscope/DevHive-Angular/blob/main/LICENSE"; + public organizationUrl: string = "https://github.com/Team-Kaleidoscope"; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 9f74faa..d4f956d 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -2,29 +2,55 @@ Login
-
+
- +
- +
- +
- +
-
+
- + +
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 83d73ce..4588d2c 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -1,10 +1,13 @@
- - Page not found! - -
+ Page not found! +
+
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index b8e7e22..9781c18 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -2,36 +2,75 @@
- +
-
- - - + + + +
- {{ file.name ? file.name : 'Attachment' }} -
+ {{ file.name ? file.name : "Attachment" }} +
☒
- +
+
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index 502697d..f5f19bd 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -3,114 +3,276 @@
-
+
-
- + +
- +
- +
-
-
+
+
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - - + + +
- +
- +
- +
Available languages:
-
+
{{ lang.name }}
- +
- +
- +
Available technologies:
-
+
{{ tech.name }}
- + -
+
- Are you sure you want to delete your account?
This is permanent! + Are you sure you want to delete your account?
This is + permanent!
- +
+
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 0e5f633..0d9dc6a 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,25 +3,48 @@
-
+
- +
-
- {{ user.firstName }} {{ user.lastName }} -
-
- @{{ user.userName }} -
-
- -
- +
{{ user.firstName }} {{ user.lastName }}
+
@{{ user.userName }}
+ + +
+
@@ -32,9 +55,7 @@ {{ lang.name }}
-
-  None -
+
 None
Technologies: @@ -43,18 +64,18 @@ {{ tech.name }}
-
-  None -
+
 None
-
+
- {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet! + {{ user.firstName }} {{ user.lastName }} hasn't posted anything + yet!
+ diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 0075b1d..c521d44 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -2,64 +2,160 @@ Register
-
+
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - - + + +
-
+
- + + diff --git a/src/styles.css b/src/styles.css index eeb93fe..b215190 100644 --- a/src/styles.css +++ b/src/styles.css @@ -9,24 +9,27 @@ --failure: indianred; } -html, body { - height: 100%; - margin: 0; +html, +body { + height: 100%; + margin: 0; } body { font: 21px sans-serif !important; background-color: var(--bg-color); } -input:focus, button:focus { +input:focus, +button:focus { outline: 0; } -#content { /* Used for the login and register pages */ +#content { + /* Used for the login and register pages */ height: 100%; max-width: 20em; box-sizing: border-box; - border: .5em solid var(--bg-color); + border: 0.5em solid var(--bg-color); margin: 0 auto; @@ -36,10 +39,15 @@ input:focus, button:focus { flex-direction: column; } +#content > *:first-child, +#content > *:last-child { + flex: 1; +} + .rounded-border { border: 2px solid black; - border-radius: .6em; - padding: .4em; + border-radius: 0.6em; + padding: 0.4em; } .round-image { @@ -62,22 +70,23 @@ input:focus, button:focus { overflow-y: auto; } - /* Hide scrollbar for Chrome, Safari and Opera */ +/* Hide scrollbar for Chrome, Safari and Opera */ .scroll-standalone::-webkit-scrollbar { display: none; } - /* Hide scrollbar for IE, Edge and Firefox */ +/* Hide scrollbar for IE, Edge and Firefox */ .scroll-standalone { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } -.user-language, .user-technology { - border-radius: .4em; +.user-language, +.user-technology { + border-radius: 0.4em; background-color: lightgrey; - padding: .26em; - margin: .1em .2em; + padding: 0.26em; + margin: 0.1em 0.2em; width: fit-content; } @@ -85,10 +94,10 @@ input:focus, button:focus { .input-selection { position: relative; - margin-top: .7em; + margin-top: 0.7em; } - /* Don't show the placeholder when the label is on top +/* Don't show the placeholder when the label is on top */ .input-selection .input-field::-webkit-input-placeholder { opacity: 0; @@ -102,8 +111,8 @@ input:focus, button:focus { border-bottom: 1px solid grey; box-sizing: border-box; - margin-bottom: .5em; - padding: .4em; + margin-bottom: 0.5em; + padding: 0.4em; padding-left: 0; font-size: inherit; @@ -115,22 +124,22 @@ input:focus, button:focus { position: absolute; left: 0; - margin-top: .4em; + margin-top: 0.4em; color: grey; } - /* When hovering, typing or having typed something in an input, +/* When hovering, typing or having typed something in an input, * make the label smaller, color it and then move it up */ -.input-selection:hover > .input-field-label , -.input-selection > input:not(:placeholder-shown) + .input-field-label , +.input-selection:hover > .input-field-label, +.input-selection > input:not(:placeholder-shown) + .input-field-label, .input-selection > input:focus + .input-field-label { - font-size: .7em; + font-size: 0.7em; color: var(--focus-color); transform: translate(0, -1.2em); } - /* Show the placeholder, when you've hovered or +/* Show the placeholder, when you've hovered or * focused (typing in) on the input-field */ .input-selection:hover > .input-field::-webkit-input-placeholder, @@ -138,7 +147,7 @@ input:focus, button:focus { opacity: 1; } - /* Make the underline thicker and change it's and the cursors's +/* Make the underline thicker and change it's and the cursors's * color when hovered or focused (typing in) on the input-field */ .input-selection:hover > .input-field, @@ -149,19 +158,18 @@ input:focus, button:focus { margin-top: -1px !important; } - /* Input errors */ .input-errors { - margin-top: -.8em; - font-size: .7em; + margin-top: -0.8em; + font-size: 0.7em; position: absolute; right: 0; top: 0; } - /* Move the errors above the input when +/* Move the errors above the input when * using the site on a small screen and * add some space for them above the input */ @@ -175,7 +183,7 @@ input:focus, button:focus { } .input-errors > .error { - margin-left: .3em; + margin-left: 0.3em; } .input-field:focus ~ .input-errors > .error { @@ -194,14 +202,14 @@ input:focus, button:focus { background-color: black; border: 2px solid black; - border-radius: .4em; + border-radius: 0.4em; box-sizing: border-box; - font-size: .8em; + font-size: 0.8em; text-align: center; - margin-top: .5em; - padding: .3em; + margin-top: 0.5em; + padding: 0.3em; } .submit-btn:hover { @@ -213,7 +221,7 @@ input:focus, button:focus { .submit-btn:active { transition: 0s; - transform: scale(.9); + transform: scale(0.9); } .delete-btn:hover { @@ -227,16 +235,16 @@ input:focus, button:focus { display: flex; flex-wrap: wrap; color: gray; - font-size: .75em; - margin: 0 .3em; + font-size: 0.75em; + margin: 0 0.3em; } .form-attachment { border: 2px solid black; - border-radius: .6em; - margin-top: .2em; - margin-right: .2em; - padding: .2em; + border-radius: 0.6em; + margin-top: 0.2em; + margin-right: 0.2em; + padding: 0.2em; display: flex; align-items: center; } @@ -246,12 +254,12 @@ input:focus, button:focus { } .remove-form-attachment { - font-size: .9em; + font-size: 0.9em; color: var(--failure); background-color: white; - border-radius: .2em; - margin: 0 .2em; - padding: .2em; + border-radius: 0.2em; + margin: 0 0.2em; + padding: 0.2em; } .remove-form-attachment:hover { @@ -259,4 +267,3 @@ input:focus, button:focus { background-color: var(--failure); cursor: pointer; } - diff --git a/src/theme.scss b/src/theme.scss deleted file mode 100644 index a87ae45..0000000 --- a/src/theme.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Import theming functions -@import '~@angular/material/theming'; -@import './styles.css'; -@include mat-core(); - -// Custom Angular theme - -// $my-custom-primary: mat-palette($mat-deep-purple); -// $my-custom-accent: mat-palette($mat-pink, 100, 500, A100); -// $my-custom-warn: mat-palette($mat-lime); - -// $my-custom-theme: mat-light-theme($my-custom-primary, $my-custom-accent, $my-custom-warn); - -// @include angular-material-theme($my-custom-theme); \ No newline at end of file -- cgit v1.2.3 From 4b094fb29ea7eaeb58f0c29df60e55586a74db76 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 6 Mar 2021 14:29:14 +0200 Subject: Reverted footer --- src/app/app.module.ts | 4 +- .../admin-panel-page.component.html | 154 +++----------- .../comment-page/comment-page.component.html | 19 +- src/app/components/feed/feed.component.html | 71 ++----- src/app/components/footer/footer.component.css | 20 -- src/app/components/footer/footer.component.html | 12 -- src/app/components/footer/footer.component.ts | 18 -- src/app/components/login/login.component.html | 40 +--- .../components/not-found/not-found.component.html | 15 +- .../components/post-page/post-page.component.html | 63 ++---- .../profile-settings.component.html | 234 ++++----------------- src/app/components/profile/profile.component.html | 67 ++---- .../components/register/register.component.html | 134 ++---------- 13 files changed, 151 insertions(+), 700 deletions(-) delete mode 100644 src/app/components/footer/footer.component.css delete mode 100644 src/app/components/footer/footer.component.html delete mode 100644 src/app/components/footer/footer.component.ts (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e331a5d..1bf44ad 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,7 +25,6 @@ import { CommentComponent } from './components/comment/comment.component'; import { CommentPageComponent } from './components/comment-page/comment-page.component'; import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component'; import { RouterModule } from '@angular/router'; -import { FooterComponent } from './components/footer/footer.component'; @NgModule({ declarations: [ @@ -44,8 +43,7 @@ import { FooterComponent } from './components/footer/footer.component'; AdminPanelPageComponent, CommentComponent, CommentPageComponent, - PostAttachmentComponent, - FooterComponent + PostAttachmentComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 0c0954a..31f0849 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -2,182 +2,84 @@
-
+
- -
+ +
- +
- - + +
- +
-
+
Available languages:
-
+
{{ lang.name }}
-
+
- -
+ +
- +
- - + +
- +
- -
+ +
Available technologies:
-
+
{{ tech.name }}
-
+
- -
+ +
- +
- +
- +
-
+
-
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html index d59c956..ae114da 100644 --- a/src/app/components/comment-page/comment-page.component.html +++ b/src/app/components/comment-page/comment-page.component.html @@ -2,26 +2,15 @@
-
- + +
-
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 7f3cb68..230c27b 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -3,81 +3,41 @@
-
+
- None of your friends have posted anything yet!
+ None of your friends have posted anything yet!
Try refreshing your page!
@@ -85,5 +45,4 @@
-
diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css deleted file mode 100644 index b93e1f3..0000000 --- a/src/app/components/footer/footer.component.css +++ /dev/null @@ -1,20 +0,0 @@ -footer { - display: flex; - width: 100%; -} - -footer > * { - flex: 1; -} - -#version { - text-align: left; -} - -#middle-footer-message { - text-align: center; -} - -#license { - text-align: right; -} diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html deleted file mode 100644 index d410597..0000000 --- a/src/app/components/footer/footer.component.html +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts deleted file mode 100644 index e83f840..0000000 --- a/src/app/components/footer/footer.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-footer', - templateUrl: './footer.component.html', - styleUrls: ['./footer.component.css'] -}) -export class FooterComponent implements OnInit { - public version: string = "v0.1"; - public licenseUrl: string = "https://github.com/Team-Kaleidoscope/DevHive-Angular/blob/main/LICENSE"; - public organizationUrl: string = "https://github.com/Team-Kaleidoscope"; - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index d4f956d..9f74faa 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -2,55 +2,29 @@ Login
-
+
- +
- +
- +
- +
-
+
- - + diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 4588d2c..83d73ce 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -1,13 +1,10 @@
- Page not found! -
+ + Page not found! + +
-
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 9781c18..b8e7e22 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -2,75 +2,36 @@
- +
-
- - - + + + +
- {{ file.name ? file.name : "Attachment" }} -
+ {{ file.name ? file.name : 'Attachment' }} +
☒
- +
-
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index f5f19bd..502697d 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -3,276 +3,114 @@
-
+
-
- + +
- +
- +
-
-
+
+
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - - + + +
- +
- +
- +
Available languages:
-
+
{{ lang.name }}
- +
- +
- +
Available technologies:
-
+
{{ tech.name }}
- + -
+
- Are you sure you want to delete your account?
This is - permanent! + Are you sure you want to delete your account?
This is permanent!
- +
-
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 0d9dc6a..0e5f633 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,48 +3,25 @@
-
+
- +
-
{{ user.firstName }} {{ user.lastName }}
-
@{{ user.userName }}
-
- -
- +
+ {{ user.firstName }} {{ user.lastName }} +
+
+ @{{ user.userName }} +
+ + +
+
@@ -55,7 +32,9 @@ {{ lang.name }}
-
 None
+
+  None +
Technologies: @@ -64,18 +43,18 @@ {{ tech.name }}
-
 None
+
+  None +
-
+
- {{ user.firstName }} {{ user.lastName }} hasn't posted anything - yet! + {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
- diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index c521d44..0075b1d 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -2,160 +2,64 @@ Register
-
+
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - + +
- +
- - - + + +
-
+
- - + -- cgit v1.2.3 From 17a8110e3e0450a88207b9b8b05ebde166a433bc Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 13:50:39 +0200 Subject: Major redesign of login component styling --- src/app/components/login/login.component.css | 28 +---- src/app/components/login/login.component.html | 27 ++--- src/styles.css | 164 +++++++++++--------------- 3 files changed, 84 insertions(+), 135 deletions(-) (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css index 103f5c0..3cd7198 100644 --- a/src/app/components/login/login.component.css +++ b/src/app/components/login/login.component.css @@ -1,32 +1,8 @@ -form { - width: 100%; -} - -#content hr { - width: 100%; - border: 1px solid black; - box-sizing: border-box; -} - -.submit-btn { - transition: 0.2s; -} - -.input-selection:nth-of-type(1) { - margin-top: 1.2em; -} - -.submit-btn { - margin-bottom: .2em; +.input-selection:first-of-type { + margin-top: 0.5em; } .redirect-to-register { color: var(--focus-color); - background-color: var(--bg-color); border-color: var(--focus-color); } - -.redirect-to-register:hover { - border-color: black !important; - color: black; -} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 9f74faa..5ed1ac8 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,30 +1,25 @@ -
- Login +
+ Login -
-
- -
- - + + +
+ +
-
- - - + +
-
- - + - +
diff --git a/src/styles.css b/src/styles.css index c06a9bd..93ed57b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -5,10 +5,10 @@ --max-width: 40rem; --bg-color: #18191a; --fg-color: #ffeede; - --focus-color: forestgreen; + --focus-color: #669908; --card-bg: #303030; --card-padding: 0.5em; - --success: forestgreen; + --success: #669908; --failure: indianred; --faded-color: #696969; --navbar-height: 2.6em; @@ -53,21 +53,6 @@ input[type=file]::file-selector-button { visibility: hidden; } -#content { - /* Used for the login and register pages */ - height: 100%; - max-width: var(--max-width); - box-sizing: border-box; - border: 0.5em solid var(--bg-color); - - margin: 0 auto; - - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - .rounded-border { border: 2px solid black; border-radius: 0.6em; @@ -82,6 +67,7 @@ input[type=file]::file-selector-button { .title { font-size: 2em; font-weight: bold; + text-align: center; } .error { @@ -115,6 +101,44 @@ input[type=file]::file-selector-button { width: fit-content; } +/* Cards */ + +.card { + margin: 0.5em auto; + box-sizing: border-box; + padding: var(--card-padding); + background-color: var(--card-bg); + position: relative; +} + +@media screen and (max-width: 30rem) { + .card { + font-size: 0.8em; + } + + .card button { + font-size: 0.9em; + } + + .title { + font-size: 1.5em; + } + + .input-selection:first-child { + margin-top: 1.2em !important; + } + + :not(card) button { + font-size: 0.7em; + } +} + +.card-hr { + width: calc(100% - 1em); + border: 1px solid var(--fg-color); + background-color: var(--fg-color); +} + /* General flex */ .flex-row, .flex-col { @@ -205,7 +229,7 @@ input[type=file]::file-selector-button { } .border-radius-normal, .card { - border-radius: 0.5em; + border-radius: 0.5rem; } .border-radius-smaller { @@ -224,6 +248,14 @@ input[type=file]::file-selector-button { /* General padding */ +.padding-big { + padding: 0.6em; +} + +.padding-bigger { + padding: 0.5em; +} + .padding-normal { padding: 0.4em; } @@ -252,6 +284,14 @@ input[type=file]::file-selector-button { /* Margin */ +.no-margin { + margin: 0; +} + +.margin-top-normal { + margin-top: 0.4em; +} + .margin-top-bot-small { margin-top: 0.2em; margin-bottom: 0.2em; @@ -261,32 +301,6 @@ input[type=file]::file-selector-button { margin-right: 0.2em; } -/* Cards */ - -.card { - margin: 0.5em auto; - box-sizing: border-box; - padding: var(--card-padding); - background-color: var(--card-bg); - position: relative; -} - -@media screen and (max-width: 30rem) { - .card { - font-size: 0.8em; - } - - .card button { - font-size: 0.9em; - } -} - -.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 { @@ -311,6 +325,10 @@ input[type=file]::file-selector-button { /* Misc */ +.full-height { + height: 100%; +} + .full-width { width: 100%; } @@ -325,39 +343,34 @@ input[type=file]::file-selector-button { height: calc(100% - var(--navbar-height)) !important; } -/* Inputs, the type found in login and register */ +.focus-fg-color { + color: var(--focus-color); + border-color: var(--focus-color); +} -.input-field { - width: 100%; - background-color: var(--bg-color); +/* Inputs, the type found in login and register */ - border: 0; - border-bottom: 1px solid grey; +.fancy-input { box-sizing: border-box; - margin-bottom: 0.5em; padding: 0.4em; padding-left: 0; - - font-size: inherit; } -.input-field-label { +.fancy-input-label { width: inherit; height: inherit; position: absolute; left: 0; margin-top: 0.4em; - color: grey; - transition: 0.2s; scale: 1em; } .input-selection { position: relative; - margin-top: 0.7em; + margin-top: 0.5em; } .input-selection input::placeholder { @@ -406,7 +419,7 @@ input[type=file]::file-selector-button { top: 0; } -/* Move the errors above the input when + /* Move the errors above the input when * using the site on a small screen and * add some space for them above the input */ @@ -431,41 +444,6 @@ input[type=file]::file-selector-button { opacity: 0; } -/* Submit button */ - -.submit-btn { - width: 100%; - color: white; - background-color: black; - - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - - font-size: 0.8em; - text-align: center; - - margin-top: 0.5em; - padding: 0.3em; -} - -.submit-btn:hover { - cursor: pointer; - color: var(--focus-color); - background-color: white; - border-color: var(--focus-color) !important; -} - -.submit-btn:active { - transition: 0s !important; - transform: scale(0.9); -} - -.delete-btn:hover { - color: indianred; - border-color: indianred !important; -} - /* Form attachments (the ones that are shown while creating and editing a post) */ .form-attachments { -- cgit v1.2.3 From 9906b285148f54b4060c71012854a814409cc9d7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:23:30 +0200 Subject: Improved readability and consistency of font-size, text, border, colors and padding CSS class names --- .../admin-panel-page.component.html | 62 +++++++++++----------- src/app/components/comment/comment.component.html | 18 +++---- src/app/components/feed/feed.component.html | 12 ++--- src/app/components/login/login.component.html | 22 ++++---- src/app/components/navbar/navbar.component.html | 20 +++---- .../components/not-found/not-found.component.html | 10 ++-- .../post-attachment/post-attachment.component.html | 4 +- .../components/post-page/post-page.component.html | 6 +-- src/app/components/post/post.component.html | 36 ++++++------- .../profile-settings.component.html | 54 +++++++++---------- src/app/components/profile/profile.component.html | 22 ++++---- .../components/register/register.component.html | 34 ++++++------ src/styles.css | 54 ++++++++++--------- 13 files changed, 178 insertions(+), 176 deletions(-) (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 65f9691..80d6795 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -6,34 +6,34 @@ -
+
-
-
-
+
{{ lang.name }}
@@ -49,32 +49,32 @@
-
-
-
+
{{ tech.name }}
@@ -90,26 +90,26 @@
-
-
No languages available! @@ -81,12 +81,12 @@ Available languages:
-
+
{{ lang.name }}
-
@@ -94,7 +94,7 @@ - +
No technologies available! @@ -103,7 +103,7 @@ Available technologies:
-
+
{{ tech.name }}
@@ -112,15 +112,15 @@ - -
-
+
+
Are you sure you want to delete your account?
This is permanent!
-
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index e6abeb9..8963d1b 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,47 +3,47 @@
-
+
-
+
{{ user.firstName }} {{ user.lastName }}
@{{ user.userName }}
-
- -
-
-
+
+
Languages
None
-
+
{{ lang.name }}
-
-
+
+
Technologies
None
-
+
{{ tech.name }}
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 4aae7ed..7d3a0bf 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,44 +1,44 @@ -
- Register +
+ Register - + -
-
- - + +
+ +
- - + +
- - + +
- - + +
- - + +
@@ -47,9 +47,9 @@
- + -
diff --git a/src/styles.css b/src/styles.css index 6c43f1f..373ff93 100644 --- a/src/styles.css +++ b/src/styles.css @@ -179,7 +179,7 @@ input[type=file]::file-selector-button { justify-content: center; } -.flex-center-align-children > * { +.align-children-center > * { display: flex; align-items: center; } @@ -203,10 +203,6 @@ input[type=file]::file-selector-button { font-size: 0.7em; } -.img-height-font-size { - height: 1em; -} - /* General text */ .text-centered { @@ -219,19 +215,19 @@ input[type=file]::file-selector-button { /* General border */ -.faded-slim-border { +.border-faded-slim { border: 1px solid var(--faded-color); } -.border-radius-normal, .card { +.border-radius-dot5r, .card { border-radius: 0.5rem; } -.border-radius-smaller { +.border-radius-dot3 { border-radius: 0.3em; } -.border-radius-small { +.border-radius-dot2 { border-radius: 0.2em; } @@ -243,66 +239,66 @@ input[type=file]::file-selector-button { /* General colors */ -.fg-color-faded { +.fg-faded { color: var(--faded-color); } -.focus-fg-color { +.fg-focus { color: var(--focus-color); border-color: var(--focus-color); } -.error-fg-color { +.fg-error { color: var(--failure); border-color: var(--failure); } /* General padding */ -.padding-big { +.padding-dot6 { padding: 0.6em; } -.padding-bigger { +.padding-dot5 { padding: 0.5em; } -.padding-normal { +.padding-dot4 { padding: 0.4em; } -.padding-smaller { +.padding-dot3 { padding: 0.3em; } -.padding-small { +.padding-dot2 { padding: 0.2em; } -.padding-tiny { +.padding-dot1 { padding: 0.1em; } -.side-padding-font { +.padding-side-font { padding-right: 1em; padding-left: 1em; } -.side-padding-smaller { +.padding-side-dot3 { padding-right: 0.3em; padding-left: 0.3em; } -.bot-padding-bigger { +.padding-bot-dot5 { padding-bottom: 0.5em; } -.top-bot-padding-bigger { +.padding-top-bot-dot5 { padding-top: 0.5em; padding-bottom: 0.5em; } -.top-bot-padding-small { +.padding-top-bot-dot2 { padding-top: 0.2em; padding-bottom: 0.2em; } @@ -370,16 +366,22 @@ input[type=file]::file-selector-button { transform: scale(0.9); } -/* Misc */ +/* Size */ -.full-height { +.height-full { height: 100%; } -.full-width { +.width-full { width: 100%; } +.height-font { + height: 1em; +} + +/* Misc */ + .centered-content { max-width: var(--max-width); margin: 0 auto; -- cgit v1.2.3 From 1afe87209a9e7140fabd3ba58b5e7b470b68fc7b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:35:04 +0200 Subject: Improved readability and consistency of margin global styling --- .../admin-panel-page.component.html | 22 +++++++++++----------- src/app/components/comment/comment.component.html | 6 +++--- src/app/components/feed/feed.component.html | 2 +- src/app/components/login/login.component.html | 6 +++--- .../components/not-found/not-found.component.html | 2 +- .../post-attachment/post-attachment.component.html | 4 ++-- .../components/post-page/post-page.component.html | 4 ++-- src/app/components/post/post.component.html | 6 +++--- .../profile-settings.component.html | 20 ++++++++++---------- src/app/components/profile/profile.component.html | 4 ++-- .../components/register/register.component.html | 6 +++--- src/styles.css | 18 +++++++++--------- 12 files changed, 50 insertions(+), 50 deletions(-) (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 80d6795..bc4a71f 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -11,7 +11,7 @@ -
+ @@ -21,7 +21,7 @@ Update language:
- +
@@ -33,14 +33,14 @@ -
+
No languages in database!
Available languages:
-
+
{{ lang.name }}
@@ -49,10 +49,10 @@
- -
+ @@ -62,7 +62,7 @@ Update technology:
- +
@@ -74,14 +74,14 @@ -
+
No technologies in database!
Available technologies:
-
+
{{ tech.name }}
@@ -90,10 +90,10 @@
- -
+ diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 0ec443b..9403ea2 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -14,12 +14,12 @@ - -
-
+
{{ comment.message }}
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index d81a142..93171a2 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -12,7 +12,7 @@
-
+
{{ file.name ? file.name : 'Attachment' }}
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 7649a3c..29aebf9 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,7 +1,7 @@
- Login + Login - +
@@ -21,5 +21,5 @@ - +
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 7b776bd..4d1165d 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -5,7 +5,7 @@
-
-
+
@@ -80,17 +80,17 @@
Available languages:
-
+
{{ lang.name }}
-
-
+
@@ -102,13 +102,13 @@
Available technologies:
-
+
{{ tech.name }}
-
+
@@ -117,7 +117,7 @@
-
+
Are you sure you want to delete your account?
This is permanent!
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 7d3a0bf..1f547c4 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,7 +1,7 @@
- Register + Register - +
@@ -49,7 +49,7 @@ -
diff --git a/src/styles.css b/src/styles.css index 373ff93..11c2973 100644 --- a/src/styles.css +++ b/src/styles.css @@ -305,42 +305,42 @@ input[type=file]::file-selector-button { /* Margin */ -.no-margin { +.margin-0 { margin: 0; } -.no-margin-top { +.margin-top-0 { margin-top: 0; } -.margin-top-normal { +.margin-top-dot4 { margin-top: 0.4em; } -.margin-top-bigger { +.margin-top-dot5 { margin-top: 0.5em; } -.margin-bot-bigger { +.margin-bot-dot5 { margin-bottom: 0.5em; } -.margin-top-bot-very-big { +.margin-top-bot-dot7 { margin-top: 0.7em; margin-bottom: 0.7em; } -.margin-top-bot-smaller { +.margin-top-bot-dot3 { margin-top: 0.3em; margin-bottom: 0.3em; } -.margin-top-bot-small { +.margin-top-bot-dot2 { margin-top: 0.2em; margin-bottom: 0.2em; } -.margin-right-small { +.margin-right-dot2 { margin-right: 0.2em; } -- cgit v1.2.3 From f4d7b7c41ccaab06e50351cf144157d5194c0545 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 28 Mar 2021 18:18:00 +0300 Subject: Implemented a password show and hide button to register and login pages; added it's icons (eye and eye-off) --- src/app/components/login/login.component.html | 7 +- src/app/components/login/login.component.ts | 5 ++ .../components/register/register.component.html | 8 ++- src/app/components/register/register.component.ts | 6 ++ src/assets/icons/tabler-icon-eye-off.svg | 76 ++++++++++++++++++++++ src/assets/icons/tabler-icon-eye.svg | 71 ++++++++++++++++++++ src/styles.css | 7 ++ 7 files changed, 175 insertions(+), 5 deletions(-) create mode 100644 src/assets/icons/tabler-icon-eye-off.svg create mode 100644 src/assets/icons/tabler-icon-eye.svg (limited to 'src/app/components/login/login.component.html') diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 29aebf9..13ae97a 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,4 +1,4 @@ -
+
Login @@ -12,8 +12,11 @@
- + +
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index edbc461..a0ce730 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -16,6 +16,7 @@ export class LoginComponent implements OnInit { @ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent; private _title = 'Login'; public loginUserFormGroup: FormGroup; + public showingPassword = false; constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) { this._titleService.setTitle(this._title); @@ -32,6 +33,10 @@ export class LoginComponent implements OnInit { }); } + toggleShowPassword(): void { + this.showingPassword = !this.showingPassword; + } + onSubmit(): void { this._errorBar.hideError(); this._userService.loginUserRequest(this.loginUserFormGroup).subscribe({ diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 1f547c4..1cd6cdb 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,4 +1,4 @@ -
+
Register @@ -37,8 +37,11 @@
- + +
@@ -46,7 +49,6 @@
-
- +
- +