diff --git a/angular-primeng-app/src/app/components/posts/posts.component.scss b/angular-primeng-app/src/app/components/posts/posts.component.scss index d22928b..e77b45c 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.scss +++ b/angular-primeng-app/src/app/components/posts/posts.component.scss @@ -1,5 +1,5 @@ .posts-view { - width: 70vw; + width: 80vw; min-height: 67.2vh; padding: 0.5rem 0; @@ -12,6 +12,10 @@ .post-card { display: flex; } + + .card-title { + min-height: 3.5rem; + } } .load-more-posts { diff --git a/angular-primeng-app/src/app/components/series/series.component.scss b/angular-primeng-app/src/app/components/series/series.component.scss index 905765c..281e6c8 100644 --- a/angular-primeng-app/src/app/components/series/series.component.scss +++ b/angular-primeng-app/src/app/components/series/series.component.scss @@ -1,5 +1,5 @@ .series-view { - width: 70vw; + width: 80vw; min-height: 67.2vh; padding: 0.5rem 0; diff --git a/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html b/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html index d54a69a..39faf31 100644 --- a/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html +++ b/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html @@ -4,10 +4,10 @@ @if (blogURLChanged) {
-

Blog URL changed and set in local storage

-

Reload the page to see your content loading

-

When resetting you may need to click on

-

the logo image to load the content again

+

Blog URL was changed

+

You are seeing blog posts

+

from the following blog:

+

{{blogURL}}

@@ -18,15 +18,26 @@

Try with your Blog

try AnguHashBlog

with another Hashnode blog - @if (newBlogURL) { - + @if (newBlogInput) { + } - + +
+ @if (emptyInput) { + Please provide a valid Hashnode Blog URL. + } + @if (noBlogFound) { + No Hashnode Blog found. + } + @if (invalidInput) { + Invalid input, please try again. + } +
- +
} diff --git a/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss b/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss index 67b18ea..c8ee0ec 100644 --- a/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss +++ b/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss @@ -15,7 +15,7 @@ p-dialog { } p-button { - margin: 0.5rem 0; + margin: 1.5rem 0; } p { @@ -31,7 +31,16 @@ p-dialog { input { margin : 1rem 0; } - } + + .error { + color: red; + position: absolute; + top: 4rem; + font-size: 0.9rem; + text-align: center; + font-weight: 300; + } + } } diff --git a/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.ts b/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.ts index 739d4b4..c01f5ff 100644 --- a/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.ts +++ b/angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.ts @@ -22,8 +22,12 @@ import { ButtonModule } from "primeng/button"; export class SettingsDialogComponent implements OnInit { visible = false; blogURL: string = "hashnode.anguhashblog.com"; + newBlogInput: string = ""; newBlogURL: string = ""; blogURLChanged: boolean = false; + noBlogFound: boolean = false; + emptyInput: boolean = false; + invalidInput: boolean = false; blogService: BlogService = inject(BlogService); ngOnInit() { @@ -35,21 +39,55 @@ export class SettingsDialogComponent implements OnInit { } } - changeBlogURL(): void { - this.blogService.setBlogURL(this.newBlogURL); - this.blogURL = this.blogService.getBlogURL(); - if (this.blogURL === "hashnode.anguhashblog.com") { + changeBlogURL(): void { + this.noBlogFound = false; + if (this.newBlogInput === "") { + this.emptyInput = true; + return; + } else if ( this.newBlogInput !== "") { + this.emptyInput = false; + + if (this.newBlogInput.includes("https://") || this.newBlogInput.endsWith("/")) { + const cleanedBlogURL = this.newBlogInput.split("https://")[1]; + this.newBlogURL = cleanedBlogURL.split("/")[0]; + + } else { + this.newBlogURL = this.newBlogInput; + } + + this.blogService.getBlogInfo(this.newBlogURL).subscribe((blogInfo) => { + if (blogInfo === null) { + this.noBlogFound = true; + this.blogURLChanged = false; + this.newBlogInput = ""; + } else { + this.blogService.setBlogURL(this.newBlogURL); + this.blogURL = this.blogService.getBlogURL(); + this.blogURLChanged = true; + this.visible = false; + window.location.reload(); + } + }); + } else if (this.blogURL === "hashnode.anguhashblog.com") { this.blogURLChanged = false; } else { - this.blogURLChanged = true; - } - } - - resetBlogURL(): void { - this.blogService.resetBlogURL(); - this.blogURL = this.blogService.getBlogURL(); - this.blogURLChanged = false; - } + this.noBlogFound = true; + this.emptyInput = false; + this.blogURLChanged = false; + this.invalidInput = true; + this.newBlogInput = ""; + } + } + + + resetBlogURL(): void { + this.blogService.resetBlogURL(); + this.blogURL = this.blogService.getBlogURL(); + this.emptyInput = false; + this.blogURLChanged = false; + this.visible = false; + window.location.reload(); + } showDialog() { this.visible = true; diff --git a/angular-primeng-app/src/styles.scss b/angular-primeng-app/src/styles.scss index 23ab0d5..c040ec2 100644 --- a/angular-primeng-app/src/styles.scss +++ b/angular-primeng-app/src/styles.scss @@ -7,7 +7,7 @@ a { } .post-card { - width: 20vw; + width: 23vw; margin: 1rem; cursor: pointer; @@ -18,12 +18,14 @@ a { .p-card { height: 100%; + width: 100%; } .p-card-title { - font-size: 1.1rem; + font-size: 1rem; line-height: 1.7rem; font-weight: 500; + min-height: 3.5rem; } .p-card-content { @@ -33,7 +35,7 @@ a { .card-image { width: 100%; - height: 10rem; + height: 12rem; overflow: hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; @@ -92,6 +94,10 @@ article { } } + .p-card-title { + min-width: 75vw; + } + // !important statement shall only be used if there are no alternatives, like in this case for overwriting very persistent styles set by PrimeNG app-follow-dialog {