diff --git a/src/app/core/components/sidebar/sidebar.component.css b/src/app/core/components/sidebar/sidebar.component.css index 1bdec64..03376f5 100644 --- a/src/app/core/components/sidebar/sidebar.component.css +++ b/src/app/core/components/sidebar/sidebar.component.css @@ -8,6 +8,7 @@ nav { display: flex; flex-direction: column; align-items: flex-start; + max-width: 260px; } nav .logo-details { @@ -138,7 +139,7 @@ nav li i { } nav .profile { - width: 100%; + width: -webkit-fill-available; padding: 0.2rem; display: flex; flex-grow: 1; @@ -274,6 +275,7 @@ nav .profile { @media (max-width: 768px) { nav { + max-width: 100%; width: 100vw !important; height: auto; bottom: 0; diff --git a/src/app/core/models/feed.model.ts b/src/app/core/models/feed.model.ts index 971ef23..f6dee33 100644 --- a/src/app/core/models/feed.model.ts +++ b/src/app/core/models/feed.model.ts @@ -13,5 +13,6 @@ export class Feed { public likes: number, public inUser?: boolean, public liked?: boolean, + public readingTime?: number, ) {} } diff --git a/src/app/core/models/website.model.ts b/src/app/core/models/website.model.ts index 8ba7080..114490a 100644 --- a/src/app/core/models/website.model.ts +++ b/src/app/core/models/website.model.ts @@ -7,5 +7,6 @@ export class Website { public linkFeed: string, public _id: string, public inUser?: boolean, + public feedCount?: number, ) {} } diff --git a/src/app/core/services/website.service.ts b/src/app/core/services/website.service.ts index 9d9da72..6eb43b5 100644 --- a/src/app/core/services/website.service.ts +++ b/src/app/core/services/website.service.ts @@ -20,8 +20,9 @@ export class WebsiteService { constructor(private http: HttpClient, private authService: AuthService) { } - getWebsites(all = false, skip = 0, limit = 5): Observable { - const url = `${base_url}/website?all=${all}&limit=${limit}&skip=${skip}`; + getWebsites({count = false, all = false, skip = 0, limit = 5}): Observable { + const url = + `${base_url}/website?all=${all}&limit=${limit}&skip=${skip}&count=${count}`; return this.http.get(url).pipe(map(resp => { const { websites } = resp; const userActive = this.authService.getUserActive(); diff --git a/src/app/features/features.component.css b/src/app/features/features.component.css index 103029c..5692f80 100644 --- a/src/app/features/features.component.css +++ b/src/app/features/features.component.css @@ -2,7 +2,7 @@ max-width: 1280px; margin: 0 auto; display: grid; - grid-template-columns: minmax(80px, 20%) 1fr; + grid-template-columns: minmax(80px, 260px) 1fr; } .wrapper .container { diff --git a/src/app/features/home/components/websites-card/websites-card.component.css b/src/app/features/home/components/websites-card/websites-card.component.css index 09956a2..decd727 100644 --- a/src/app/features/home/components/websites-card/websites-card.component.css +++ b/src/app/features/home/components/websites-card/websites-card.component.css @@ -9,26 +9,32 @@ flex-direction: column; } -.card.card-websites .card-title { +.card-title, +.card.card-websites .item { + padding: 0.6rem 1rem; +} + +.card-title { font-size: 20px; font-weight: bold; - padding: 0.6rem 0.8rem; } .card.card-websites .item { display: flex; - padding: 0.5rem 0.8rem; gap: 10px; transition: 0.4s; - min-height: 65px; + min-height: 60px; align-items: center; + justify-content: space-between; } .card.card-websites a.item { text-decoration: none; - font-size: 14px; + font-size: 18px; font-weight: 500; color: var(--secondary-color); + border-top: var(--border); + justify-content: center; } .card.card-websites .item:last-child { @@ -38,23 +44,32 @@ .card.card-websites .item:hover, .card.card-websites .more:hover { background-color: var(--bg-hover); - cursor: pointer; } -.card.card-websites .item .website-name { +.website-name { flex-grow: 1; font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: 120px; +} + +.total-feeds { + font-size: 14px; + color: var(--font-color-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; } .card.card-websites .item figure { - width: 3.5rem; - height: 3.5rem; - min-width: 3.5rem; - min-height: 3.5rem; + width: 2rem; + height: 2rem; + min-width: 2rem; + min-height: 2rem; border-radius: 50%; } @@ -64,3 +79,9 @@ height: 100%; border-radius: inherit; } + +.name-wrapper { + display: flex; + flex-direction: column; + flex: 1; +} diff --git a/src/app/features/home/components/websites-card/websites-card.component.html b/src/app/features/home/components/websites-card/websites-card.component.html index 6c93053..6e98142 100644 --- a/src/app/features/home/components/websites-card/websites-card.component.html +++ b/src/app/features/home/components/websites-card/websites-card.component.html @@ -4,7 +4,10 @@
website-image
- {{website.name}} +
+ {{website.name}} + {{website.feedCount}} {{ (website.feedCount && website.feedCount > 1) ? 'feeds' : 'feed' }} +
diff --git a/src/app/features/home/components/websites-card/websites-card.component.ts b/src/app/features/home/components/websites-card/websites-card.component.ts index b380b15..1097895 100644 --- a/src/app/features/home/components/websites-card/websites-card.component.ts +++ b/src/app/features/home/components/websites-card/websites-card.component.ts @@ -29,8 +29,7 @@ export class WebsitesCardComponent implements OnInit { } this.userService.modifyPreferences(id, 'subscription').subscribe(() => { this.websites.map(website => { - if( website._id === id) - website.inUser = !website.inUser; + if( website._id === id) website.inUser = !website.inUser; }); }); } diff --git a/src/app/features/home/home.component.css b/src/app/features/home/home.component.css index 9897107..e69de29 100644 --- a/src/app/features/home/home.component.css +++ b/src/app/features/home/home.component.css @@ -1,53 +0,0 @@ -.home-section { - display: grid; - grid-template-columns: 1fr minmax(300px, 20%); -} - -.home-section .websites { - width: 300px; - opacity: 1; -} - -.skeletons { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.news-container { - margin: 1rem; -} - -.top-search { - display: flex; - align-items: center; - width: inherit; - min-height: 70px; -} - -.top-search app-search-input { - width: 100%; -} - -.websites-wrapper { - position: sticky; - top: 0; - display: flex; - flex-direction: column; - gap: 1rem; -} - -@media (max-width: 1200px) { - .home-section .recently .news { - grid-template-columns: repeat(1, 100%); - } -} - -@media (max-width: 768px) { - .home-section { - grid-template-columns: 100%; - } - .home-section .websites { - opacity: 0; - } -} diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts index 1b8fb91..8e661c9 100644 --- a/src/app/features/home/home.component.ts +++ b/src/app/features/home/home.component.ts @@ -63,7 +63,7 @@ export class HomeComponent implements OnInit, OnDestroy { this.isLoading = true; forkJoin({ feeds: this.getFeeds(), - websites: this.websiteService.getWebsites(), + websites: this.websiteService.getWebsites({ count: true }) }).subscribe({ next: ({ feeds, websites }) => { this.feeds = feeds; diff --git a/src/app/features/home/pages/explore/explore.component.css b/src/app/features/home/pages/explore/explore.component.css index d841e65..e69de29 100644 --- a/src/app/features/home/pages/explore/explore.component.css +++ b/src/app/features/home/pages/explore/explore.component.css @@ -1,25 +0,0 @@ -.home-section { - display: grid; - grid-template-columns: auto 300px; - gap: 0.5rem; -} - -.home-section .websites { - width: 300px; - opacity: 1; -} - -@media (max-width: 1200px) { - .home-section .recently .news { - grid-template-columns: repeat(1, 100%); - } -} - -@media (max-width: 768px) { - .home-section { - grid-template-columns: 100%; - } - .home-section .websites { - opacity: 0; - } -} diff --git a/src/app/features/home/pages/explore/explore.component.html b/src/app/features/home/pages/explore/explore.component.html index 0d4ab9e..d53bfb3 100644 --- a/src/app/features/home/pages/explore/explore.component.html +++ b/src/app/features/home/pages/explore/explore.component.html @@ -2,7 +2,7 @@
Explore news - +
@@ -12,11 +12,19 @@ - + + +
- - +
+ + + +
- \ No newline at end of file + diff --git a/src/app/features/home/pages/explore/explore.component.ts b/src/app/features/home/pages/explore/explore.component.ts index 47dcbdf..a8d5526 100644 --- a/src/app/features/home/pages/explore/explore.component.ts +++ b/src/app/features/home/pages/explore/explore.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { Observable, Subject, debounceTime, forkJoin, map } from 'rxjs'; @@ -25,7 +26,8 @@ export class ExploreComponent implements OnInit { constructor( private websiteService: WebsiteService, - private feedService: FeedService + private feedService: FeedService, + private router: Router ) { this.loadingNews.pipe(debounceTime(2000)).subscribe(() => this.getDataInitial()); } @@ -41,7 +43,7 @@ export class ExploreComponent implements OnInit { this.isLoading = true; forkJoin({ feeds: this.getFeeds(), - websites: this.websiteService.getWebsites(), + websites: this.websiteService.getWebsites({}), }).subscribe({ next: ({ feeds, websites }) => { this.feeds = feeds; @@ -72,4 +74,8 @@ export class ExploreComponent implements OnInit { return this.skip; } + search(value: string): void { + this.router.navigate(['/search'], { queryParams: { q: value } }); + } + } diff --git a/src/app/features/website/pages/websites/websites.component.ts b/src/app/features/website/pages/websites/websites.component.ts index 6db1032..1b76106 100644 --- a/src/app/features/website/pages/websites/websites.component.ts +++ b/src/app/features/website/pages/websites/websites.component.ts @@ -44,7 +44,7 @@ export class WebsitesComponent implements OnInit, OnDestroy { } getWebsites(): void { - this.websiteService.getWebsites(true).subscribe({ + this.websiteService.getWebsites({ all: true }).subscribe({ next: (websites) => { this.websites = websites; }, diff --git a/src/app/shared/news-container/news-container.component.html b/src/app/shared/news-container/news-container.component.html index 7610f52..4dc1d35 100644 --- a/src/app/shared/news-container/news-container.component.html +++ b/src/app/shared/news-container/news-container.component.html @@ -14,7 +14,7 @@

{{ feed.pubDate | date: 'dd-MM-yyyy' }}

-

{{ 10 }} min

+

{{ feed.readingTime! <= 0 ? 1 : feed.readingTime }} min read

diff --git a/src/app/shared/search-input/search-input.component.css b/src/app/shared/search-input/search-input.component.css index 2ecc8e5..6cf22b0 100644 --- a/src/app/shared/search-input/search-input.component.css +++ b/src/app/shared/search-input/search-input.component.css @@ -16,11 +16,12 @@ input.icon { } input.icon ~ i { - top: 15px; + top: 12px; left: 20px; position: absolute; color: #71767b; transition: 0.2s; + font-size: 22px; } input.icon:focus ~ i { diff --git a/src/styles.css b/src/styles.css index 7bd9a58..74b3c7a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -229,6 +229,11 @@ input:focus-within { border-color: var(--primary-color) !important; } + +.news-container { + margin: 1rem; +} + section > .title-wrapper { position: sticky; top: 0; @@ -324,3 +329,56 @@ section > .title-wrapper { font-size: 32px; } } + + + +.home-section { + display: grid; + grid-template-columns: 1fr minmax(300px, 20%); +} + +.home-section .websites { + width: 300px; + opacity: 1; +} + +.skeletons { + display: flex; + flex-direction: column; + gap: 1rem; +} + + +.top-search { + display: flex; + align-items: center; + width: inherit; + min-height: 70px; +} + +.top-search app-search-input { + width: 100%; +} + +.websites-wrapper { + position: sticky; + top: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +@media (max-width: 1200px) { + .home-section .recently .news { + grid-template-columns: repeat(1, 100%); + } +} + +@media (max-width: 768px) { + .home-section { + grid-template-columns: 100%; + } + .home-section .websites { + opacity: 0; + } +}