Skip to content

Commit

Permalink
Merge pull request #40 from hadesdday/vanhieu
Browse files Browse the repository at this point in the history 
#5 - divide some part into component
Tách một số phần thành component riêng
Sửa lại UI một số component khác
  • Loading branch information
@hadesdday
hadesdday authored Aug 19, 2022
2 parents 03bfb6c + 4444d20 commit a934630
Show file tree
Hide file tree
Showing 40 changed files with 511 additions and 561 deletions.
16 changes: 11 additions & 5 deletions db.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@
"id": 1,
"password": "hoang",
"email": "[email protected]",
"phone": "0971280168",
"phone": "0987654321",
"name": "Trần Huy Hoàng",
"address": "123/4 Thủ Đức Thành phố Hồ Chí Minh",
"dateBirth": "2001-07-12",
"gender": "male",
"comfirmToken": "ok"
"address": "dia chi",
"dateBirth": "2001-08-27",
"gender": "male"
},
{
"email": "[email protected]",
Expand Down Expand Up @@ -109,6 +108,13 @@
"fullname": "Nguyễn Văn Hiếu",
"content": "cau mong chau doan tu voi gia dinh 🤷‍♀️",
"id": 12
},
{
"article_id": 2051473,
"email": "[email protected]",
"fullname": "Trần Huy Hoàng",
"content": "tiểu vương quốc thanh hóa",
"id": 13
}
]
}
11 changes: 8 additions & 3 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,12 @@ import { PostModule } from './post/post.module';
import { ProfileModule } from "./profile/profile.module";
import { SharedModule } from './shared/shared.module';
import { SafeHtmlPipe } from './_pipes/safe-html.pipe';
import { SubPostsComponent } from './pages/home/sub-posts/sub-posts.component';
import { SubNewComponent } from './pages/home/sub-new/sub-new.component';
import { SubHotComponent } from './pages/home/sub-hot/sub-hot.component';

@NgModule({
declarations: [AppComponent, HomeComponent, NotfoundComponent, ContactComponent, SafeHtmlPipe],
declarations: [AppComponent, HomeComponent, NotfoundComponent, ContactComponent, SafeHtmlPipe, SubPostsComponent, SubNewComponent, SubHotComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
Expand Down Expand Up @@ -117,11 +120,13 @@ import { SafeHtmlPipe } from './_pipes/safe-html.pipe';
SharedModule,
PostModule,
AuthModule,
ToastNoAnimationModule.forRoot({
ToastNoAnimationModule.forRoot({
timeOut: 1500,
positionClass: 'toast-top-right',
preventDuplicates: true,
}),
easing: "ease-in",
easeTime: 1500
}),
],
providers: [MdbCookiesManagementService, MdbStorageManagementService],
bootstrap: [AppComponent],
Expand Down
174 changes: 9 additions & 165 deletions src/app/pages/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,191 +65,35 @@ <h6 class="fs-20 news-title">{{item.title}}</h6>
</div>
</div>
</div>
<div class="row sub__posts mt-5 lazy d-flex justify-content-between lazy">
<div class="col-md-2 p-3" *ngFor="let item of get_home_list_with_amount(4,9)">
<div class="row">
<img mdbLazyLoading [loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="item.media" alt="'../../../assets/images/skeleton-loading.gif'"
class="img-fluid my-3 img__sub" />
</div>
<div class="row">
<a href="{{item.link}}" class="text-break news-title" target="_blank">{{item.title}}</a>
</div>
</div>
</div>
<sub-posts [subPosts]="get_home_list_with_amount(4,9)"></sub-posts>
<div class="row new__posts mt-5 lazy">
<div class="col-md-3 first__column border-end">
<div class="row">
<div class="col">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="article_list[10]?.media" alt="'../../../assets/images/skeleton-loading.gif'">
</div>
<div class="col">
<a href="{{article_list[10]?.link}}" class="text-break news-title"
target="_blank">{{article_list[10]?.title}}</a>
</div>
</div>
<div class="row pt-4" *ngFor="let item of get_home_list_with_amount(11,27)">
<div class="col">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="item.media" alt="'../../../assets/images/skeleton-loading.gif'">
</div>
<div class="col">
<a href="{{item.link}}" class="text-break news-title" target="_blank">{{item.title}}</a>
</div>
</div>
<sub-hot [posts]="get_home_list_with_amount(10,27)"></sub-hot>
</div>
<!-- middle column -->
<div class="col-md-6 middle__column">
<!-- start new article -->
<div class="row border-bottom middle__title">
<h3><a routerLink="/chu-de/thoi-su" class="text-body">Thời sự</a></h3>
</div>

<div class="row p-4">
<div class="col-md-3">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="ts_news[5]?.media" alt="'../../../assets/images/skeleton-loading.gif'" />
</div>
<div class="col-md-9">
<a href="{{ts_news[5]?.link}}" class="news-title" target="_blank">{{ts_news[5]?.title}}</a>
</div>
</div>
<div class="row p-4 pt-0">
<a href="{{item.link}}" class="news-title mt-3" *ngFor="let item of get_list_with_amount(6,10,ts_news)"
target="_blank">{{item.title}}</a>
</div>
<sub-new [posts]="get_list_with_amount(5,10,ts_news)" [title]="'Thời sự'"></sub-new>
<!-- end new article -->
<!-- start new article -->
<div class="row border-bottom middle__title">
<h3><a routerLink="/chu-de/cong-nghe" class="text-body">Công nghệ</a></h3>
</div>

<div class="row p-4">
<div class="col-md-3">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="tech_news[0]?.media" alt="'../../../assets/images/skeleton-loading.gif'" />
</div>
<div class="col-md-9">
<a href="{{tech_news[0]?.link}}" class="news-title" target="_blank">{{tech_news[0]?.title}}</a>
</div>
</div>
<div class="row p-4 pt-0">
<a href="{{item.link}}" class="news-title mt-3" *ngFor="let item of get_list_with_amount(1,5,tech_news)"
target="_blank">{{item.title}}</a>
</div>
<sub-new [posts]="get_list_with_amount(0,5,tech_news)" [title]="'Công nghệ'"></sub-new>
<!-- end new article -->
<!-- start new article -->
<div class="row border-bottom middle__title">
<h3><a routerLink="/chu-de/kinh-doanh" class="text-body">Kinh doanh</a></h3>
</div>

<div class="row p-4">
<div class="col-md-3">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="business_news[0]?.media" alt="'../../../assets/images/skeleton-loading.gif'" />
</div>
<div class="col-md-9">
<a href="{{business_news[0]?.link}}" class="news-title"
target="_blank">{{business_news[0]?.title}}</a>
</div>
</div>
<div class="row p-4 pt-0">
<a href="{{item.link}}" class="news-title mt-3"
*ngFor="let item of get_list_with_amount(1,5,business_news)" target="_blank">{{item.title}}</a>
</div>
<sub-new [posts]="get_list_with_amount(0,5,business_news)" [title]="'Kinh doanh'"></sub-new>
<!-- end new article -->
<!-- start new article -->
<div class="row border-bottom middle__title">
<h3><a routerLink="/chu-de/the-gioi" class="text-body">Thế giới</a></h3>
</div>

<div class="row p-4">
<div class="col-md-3">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="world_news[0]?.media" alt="'../../../assets/images/skeleton-loading.gif'" />
</div>
<div class="col-md-9">
<a href="{{world_news[0]?.link}}" class="news-title" target="_blank">{{world_news[0]?.title}}</a>
</div>
</div>
<div class="row p-4 pt-0">
<a href="{{item.link}}" class="news-title mt-3"
*ngFor="let item of get_list_with_amount(1,5,world_news)" target="_blank">{{item.title}}</a>
</div>
<sub-new [posts]="get_list_with_amount(0,5,world_news)" [title]="'Thế giới'"></sub-new>
<!-- end new article -->
<!-- start new article -->
<div class="row border-bottom middle__title">
<h3><a routerLink="/chu-de/the-thao" class="text-body">Thể thao</a></h3>
</div>

<div class="row p-4">
<div class="col-md-3">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="sport_news[0]?.media" alt="'../../../assets/images/skeleton-loading.gif'" />
</div>
<div class="col-md-9">
<a href="{{sport_news[0]?.link}}" class="news-title" target="_blank">{{sport_news[0]?.title}}</a>
</div>
</div>
<div class="row p-4 pt-0">
<a href="{{item.link}}" class="news-title mt-3"
*ngFor="let item of get_list_with_amount(1,5,sport_news)" target="_blank">{{item.title}}</a>
</div>
<sub-new [posts]="get_list_with_amount(0,5,sport_news)" [title]="'Thể thao'"></sub-new>
<!-- end new article -->
<!-- start new article -->
<div class="row border-bottom middle__title">
<h3><a routerLink="/chu-de/giao-duc" class="text-body">Giáo dục</a></h3>
</div>

<div class="row p-4">
<div class="col-md-3">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="education_news[0]?.media"
alt="'../../../assets/images/skeleton-loading.gif'" />
</div>
<div class="col-md-9">
<a href="{{education_news[0]?.link}}" class="news-title"
target="_blank">{{education_news[0]?.title}}</a>
</div>
</div>
<div class="row p-4 pt-0">
<a href="{{item.link}}" class="news-title mt-3"
*ngFor="let item of get_list_with_amount(1,5,education_news)" target="_blank">{{item.title}}</a>
</div>
<sub-new [posts]="get_list_with_amount(0,5,education_news)" [title]="'Giáo dục'"></sub-new>
<!-- end new article -->

</div>
<!-- last column -->
<div class="col-md-3 last__column border-start">
<div class="row">
<div class="col">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="article_list[28]?.media" alt="'../../../assets/images/skeleton-loading.gif'">
</div>
<div class="col">
<a href="{{article_list[28]?.link}}" class="text-break news-title">{{article_list[28]?.title}}</a>
</div>
</div>
<div class="row pt-4" *ngFor="let item of get_list_with_amount(29,45,article_list)">
<div class="col">
<img class="w-100" mdbLazyLoading
[loadingPlaceholder]="'../../../assets/images/skeleton-loading.gif'"
[attr.data-src]="item.media" alt="'../../../assets/images/skeleton-loading.gif'">
</div>
<div class="col">
<a href="{{item.link}}" class="text-break news-title">{{item.title}}</a>
</div>
</div>
<sub-hot [posts]="get_list_with_amount(28,45,article_list)"></sub-hot>
</div>
</div>
</div>
Expand Down
43 changes: 0 additions & 43 deletions src/app/pages/home/home.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,46 +101,3 @@
}
}
}

#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
z-index: 1001;
cursor: pointer;
}

.circle-loading {
width: 7rem;
height: 7rem;
border-radius: 15rem;
position: relative;
top: 40%;
margin: 0 auto;
--color: #ff4081;
}

.circle-loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
border: 1rem solid transparent;
border-right-color: var(--color);
border-bottom-color: var(--color);
animation: circleLoading 1s forwards infinite linear;
}

@keyframes circleLoading {
to {
transform: rotate(360deg);
}
}
Loading

0 comments on commit a934630

Please sign in to comment.