✨ get websites availables added

Author: marcode24

src/app/features/home/components/components.module.ts

@@ -1,13 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
 import { WebsitesCardComponent } from './websites-card/websites-card.component';
 
 @NgModule({
   declarations: [
     WebsitesCardComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   exports: [
     WebsitesCardComponent,

src/app/features/home/components/websites-card/websites-card.component.css

@@ -68,19 +68,3 @@
   height: 100%;
   border-radius: inherit;
 }
-
-.btn-subscribe {
-  max-width: 95px;
-  min-width: 90px;
-  width: fit-content;
-  border-radius: 30px;
-  font-weight: 500;
-  height: 36px;
-}
-
-.btn-following {
-  background: transparent;
-  border: 1px solid transparent;
-  color: #000;
-  border-color: var(--primary-color);
-}

src/app/features/home/components/websites-card/websites-card.component.html

@@ -10,6 +10,6 @@
       'Following' : 'Subscribe' }}</button>
   </div>
   <div class="more">
-    <a href="">Show more...</a>
+    <a routerLink="/websites">Show more...</a>
   </div>
 </div>

src/app/features/website/pages/websites/websites.component.css

@@ -1,8 +1,21 @@
-.websites-wrapper {
-  max-width: 70%;
+.websites-section {
+  display: grid;
+  grid-template-columns: auto 300px;
+  gap: 0.5rem;
+  max-width: 1000px;
   margin: 0 auto;
 }
 
+.title-wrapper {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  z-index: 99;
+  height: 50px;
+}
+
 .title {
   font-size: 32px;
   font-weight: bold;
@@ -12,17 +25,20 @@
   display: flex;
   margin: 1rem 0;
   transition: 0.5s;
+  padding: 1rem;
 }
 
 .card.card-website:hover {
-  cursor: pointer;
+  cursor: default;
   box-shadow: rgb(0 0 0 / 20%) 1px 1px 24px 1px;
 }
 
 .card.card-website figure {
-  width: 100%;
-  max-width: 15rem;
-  border-radius: 10px 0 0 10px;
+  width: 4rem;
+  min-width: 4rem;
+  height: 4rem;
+  min-height: 4rem;
+  border-radius: 50%;
 }
 
 .card.card-website figure img {
@@ -34,48 +50,43 @@
 
 .card.card-website .card-body {
   display: flex;
-  padding: 1rem;
+  padding: 0 0.5rem 0 1rem;
   flex-grow: 1;
   flex-direction: column;
+  gap: 10px;
 }
 
-.card-body .w-title {
+.card-body .website-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.card-body .website-title .title {
   font-size: 26px;
   font-weight: bold;
 }
 
+.card-body .website-title .btn {
+  border-radius: 40px;
+  max-width: 100px;
+}
+
 .card-body .w-desc {
   font-size: 16px;
   color: var(--font-color-secondary);
 }
 
-.card-body .bottom {
-  display: flex;
-  align-items: flex-end;
-  flex-grow: 1;
-  margin-top: 1rem;
-}
-
-.card-body .bottom .buttons {
-  flex-wrap: wrap;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  gap: 5px;
-}
-
-.card-body .bottom .buttons .w-link {
-  display: flex;
-  align-items: flex-end;
-  text-decoration: none;
+.card-body .link a.w-link {
   color: var(--primary-color);
   font-size: 16px;
+  text-decoration: none;
+  transition: 0.5s ease;
 }
 
-.card-body .bottom .buttons .btn {
-  flex-grow: 1;
-  max-width: 10rem;
+.card-body .link a.w-link:hover {
+  cursor: pointer;
+  text-decoration: underline;
 }
 
 @media (max-width: 768px) {

src/app/features/website/pages/websites/websites.component.html

@@ -1,19 +1,25 @@
-<div class="websites-wrapper" *ngIf="websites">
+<div class="websites-section" *ngIf="websites">
 
-  <span class="title">Websites availables</span>
-  <div class="card card-website" *ngFor="let website of websites">
-    <figure>
-      <img [src]="website.image" alt="website-image" onerror="this.src='/assets/images/not-found-image.jpg'">
-    </figure>
-    <div class="card-body">
-      <span class="w-title">{{website.name}}</span>
-      <p class="w-desc">{{website.description}}</p>
-      <div class="bottom">
-        <div class="buttons">
-          <button class="btn btn-primary">Subscribe</button>
+  <section class="websites-wrapper">
+    <div class="title-wrapper">
+      <span class="title">Websites availables</span>
+    </div>
+    <div class="card card-website" *ngFor="let website of websites">
+      <figure>
+        <img [src]="website.image" alt="website-image" onerror="this.src='/assets/images/not-found-image.jpg'">
+      </figure>
+      <div class="card-body">
+        <div class="website-title">
+          <span class="title">{{website.name}}</span>
+          <button (click)="subscribeWebsite(website._id)" [class.btn-following]="website.inUser"
+            class="btn btn-primary btn-subscribe">{{ (website.inUser) ?
+            'Following' : 'Subscribe' }}</button>
+        </div>
+        <p class="w-desc">{{website.description}}</p>
+        <div class="link">
           <a [href]="website.link" target="_blank" class="w-link">View original site</a>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </div>

src/app/features/website/pages/websites/websites.component.ts

@@ -3,6 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { WebsiteService } from '@services/website.service';
 
 import { Website } from '@models/website.model';
+import { AuthService } from '@services/auth.service';
+import { UserService } from '@services/user.service';
 
 @Component({
   selector: 'app-websites',
@@ -12,9 +14,12 @@ import { Website } from '@models/website.model';
 export class WebsitesComponent implements OnInit {
 
   public websites: Website[];
+  private isAuthenticated: boolean;
 
   constructor(
-    private websiteService: WebsiteService
+    private websiteService: WebsiteService,
+    private authService: AuthService,
+    private userService: UserService
   ) { }
 
   ngOnInit(): void {
@@ -33,4 +38,16 @@ export class WebsitesComponent implements OnInit {
     })
   }
 
+  subscribeWebsite(id: string){
+    this.isAuthenticated = this.authService.isAuthenticated();
+    if(this.isAuthenticated) {
+      this.userService.modifyPreferences(id, 'subscription').subscribe(resp => {
+        this.websites.map(website => {
+          if( website._id === id)
+            website.inUser = !website.inUser;
+        });
+      });
+    }
+  }
+
 }

src/app/shared/news-container/news-container.component.css

@@ -33,13 +33,14 @@
   height: 100%;
   width: 100%;
   flex-grow: 1;
-  padding: 10px;
+  padding: 1rem;
 }
 
 .card.card-new .card-body .title-wrapper {
   display: flex;
   justify-content: space-between;
   font-size: 24px;
+  gap: 5px;
 }
 
 .card.card-new .card-body .title-wrapper .new-title {

src/styles.css

@@ -172,3 +172,19 @@ input:focus-within {
 .error {
   color: var(--secondary-color);
 }
+
+.btn-subscribe {
+  max-width: 95px;
+  min-width: 90px;
+  width: fit-content;
+  border-radius: 30px;
+  font-weight: 500;
+  height: 36px;
+}
+
+.btn-following {
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  color: #000 !important;
+  border-color: var(--primary-color) !important;
+}