diff --git a/projects/discussion-ui/assets/images/Buffer-512.svg b/projects/discussion-ui/assets/images/Buffer-512.svg new file mode 100644 index 00000000..94371fc2 --- /dev/null +++ b/projects/discussion-ui/assets/images/Buffer-512.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/discussion-ui/assets/images/Buffer-512.webp b/projects/discussion-ui/assets/images/Buffer-5121.webp similarity index 100% rename from projects/discussion-ui/assets/images/Buffer-512.webp rename to projects/discussion-ui/assets/images/Buffer-5121.webp diff --git a/projects/discussion-ui/assets/images/swap_vert.svg b/projects/discussion-ui/assets/images/swap_vert.svg new file mode 100644 index 00000000..0b0359d2 --- /dev/null +++ b/projects/discussion-ui/assets/images/swap_vert.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/discussion-ui/assets/images/trending_up.svg b/projects/discussion-ui/assets/images/trending_up.svg new file mode 100644 index 00000000..814cdc57 --- /dev/null +++ b/projects/discussion-ui/assets/images/trending_up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/discussion-ui/package.json b/projects/discussion-ui/package.json index 6208e5ed..9a6cb31b 100644 --- a/projects/discussion-ui/package.json +++ b/projects/discussion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sunbird-cb/discussions-ui-v8", - "version": "2.0.56", + "version": "2.0.62", "repository": { "type": "git", "url": "git+https://github.com/Sunbird-Ed/discussions-UI.git" diff --git a/projects/discussion-ui/src/lib/components/components.module.ts b/projects/discussion-ui/src/lib/components/components.module.ts index 4c94038a..06225352 100644 --- a/projects/discussion-ui/src/lib/components/components.module.ts +++ b/projects/discussion-ui/src/lib/components/components.module.ts @@ -18,6 +18,8 @@ import { DiscussAllComponent } from './discuss-all/discuss-all.component'; import { TagAllDiscussionComponent } from './tag-all-discussion/tag-all-discussion.component'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { TrendingTagsComponent } from './trending-tags/trending-tags.component'; +import { LeaderBoardComponent } from './leader-board/leaderboard-component'; + @NgModule({ declarations: [ SidePannelComponent, @@ -30,6 +32,7 @@ import { TrendingTagsComponent } from './trending-tags/trending-tags.component'; DiscussAllComponent, TagAllDiscussionComponent, TrendingTagsComponent, + LeaderBoardComponent, ], imports: [ CommonModule, @@ -39,7 +42,7 @@ import { TrendingTagsComponent } from './trending-tags/trending-tags.component'; ReactiveFormsModule, TagInputModule, PipesModule, - InfiniteScrollModule + InfiniteScrollModule, ], exports: [ SidePannelComponent, @@ -53,6 +56,7 @@ import { TrendingTagsComponent } from './trending-tags/trending-tags.component'; DiscussAllComponent, TagAllDiscussionComponent, TrendingTagsComponent, + LeaderBoardComponent, ], providers: [ DiscussionService, ConfigService diff --git a/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.html b/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.html index 4fde9f0a..68326052 100644 --- a/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.html +++ b/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.html @@ -6,22 +6,20 @@
-
+
@@ -30,7 +28,7 @@ ' font-medium':currentFilter !== 'recent'}" mat-button (click)="filter('recent')" role="button">Recent Popular - Watching + Watching
All categories @@ -41,8 +39,7 @@ -
+
@@ -59,7 +56,7 @@
-->
-
+
diff --git a/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.scss b/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.scss index 79a00185..2652574c 100644 --- a/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.scss +++ b/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.scss @@ -2,191 +2,197 @@ // @import 'ws-vars'; // @import 'ws-mixins'; // @import "node_modules/bootstrap/scss/bootstrap"; - .fade:not(.show) { - opacity: 1 !important; + opacity: 1 !important; +} + +.discussion_main_box { + width: 685px; + @media screen and (max-width: 992px) { + width: 100%; + } +} + +.right_tag_box { + width: 275px; + @media screen and (max-width: 992px) { + width: 100%; + } } .buton { - display: flex; - border: 1px solid; - flex: 1; - background: red; - align-content: center; - text-align: center; + display: flex; + border: 1px solid; + flex: 1; + background: red; + align-content: center; + text-align: center; } .sticky { - position: fixed; - top: 0; - overflow: hidden; - z-index: 10; - width: 100%; + position: fixed; + top: 0; + overflow: hidden; + z-index: 10; + width: 100%; } .text-box { - display: flex; - border: 1px solid; - flex: 3; - align-content: center; - text-align: center; + display: flex; + border: 1px solid; + flex: 3; + align-content: center; + text-align: center; } // .margin-fix { // @include breakpoint-xs { // margin: 0 $size-l 0 $size-l; // } - // @include breakpoint-s { // margin: 0 $size-l 0 $size-l; // } // } - .overflow { - // @include breakpoint-xs { - // width: 10em; - // // outline: 1px solid #000; - // margin: 0 0 2em 0; - // text-overflow: ellipsis !important; - // /** - // * Required properties to achieve text-overflow - // */ - // white-space: nowrap; - // overflow: hidden; - // } - overflow: hidden; + // @include breakpoint-xs { + // width: 10em; + // // outline: 1px solid #000; + // margin: 0 0 2em 0; + // text-overflow: ellipsis !important; + // /** + // * Required properties to achieve text-overflow + // */ + // white-space: nowrap; + // overflow: hidden; + // } + overflow: hidden; } // .custom { - // height: 48px; // max-height: 48px; // @include breakpoint-xs { // flex-direction: column; // } - // @include breakpoint-s { // flex-direction: column; // } // } - // .pagination-container { // // margin-top: $size-l; - // } - .font-medium { - font-weight: 500 !important; + font-weight: 500 !important; } .discuss-border { - border-radius: 4px; - /*.75rem;*/ - border: 1px solid #DEDFE0; - flex: 1; - // max-width: 500px; - /* border-color: #cecece;*/ + border-radius: 4px; + /*.75rem;*/ + border: 1px solid #DEDFE0; + flex: 1; + // max-width: 500px; + /* border-color: #cecece;*/ } .discuss .mat-form-field-wrapper { - padding-bottom: 0px; - - .mat-form-field-infix { - border-top-width: 5px !important; - padding: 0px; - padding-bottom: 5px; - } - + padding-bottom: 0px; + .mat-form-field-infix { + border-top-width: 5px !important; + padding: 0px; + padding-bottom: 5px; + } } .discuss-card-content { - z-index: 1!important; + z-index: 1!important; } - .discuss-home { - background: #0074B6 0% 0% no-repeat padding-box; - border-radius: 0px 4px 4px 0px; - padding: 13px 32px; - // text-decoration: underline; - /* flex: 1; */ - min-width: fit-content; - margin: 0; + background: #0074B6 0% 0% no-repeat padding-box; + border-radius: 0px 4px 4px 0px; + padding: 13px 32px; + // text-decoration: underline; + /* flex: 1; */ + min-width: fit-content; + margin: 0; } .flex-3 { - flex: 3; + flex: 3; } .filter { - .filter-option { - // margin: $size-xs $size-m; - /* border-bottom: darkslateblue; */ - border-radius: 0; - border-bottom-width: 2px; - border-top-width: 0; - border-left-width: 0; - border-right-width: 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - } - .filter-option.tabs-active { - border-bottom: 3px solid var(--blue); - } + .filter-option { + // margin: $size-xs $size-m; + /* border-bottom: darkslateblue; */ + border-radius: 0; + border-bottom-width: 2px; + border-top-width: 0; + border-left-width: 0; + border-right-width: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + } + .filter-option.tabs-active { + border-bottom: 3px solid var(--blue); + } } .max-height-60 { - max-height: 60px; + max-height: 60px; } .height-48 { - max-height: 48px; + max-height: 48px; } .df-start-btn { - height: 2rem; - outline: none; - font-weight: bold; - border: none; - border-radius: .25rem; - background: var(--blue); - color: var(--white); - padding: 0.5rem 0.75rem; - font-size: .75rem; - display: flex; - align-items: center; - cursor: pointer; - margin: 0 0 1rem 0; -} -.start-btn-hint{ - color: rgba(0, 0, 0, 0.54); - display: block; - margin-bottom: 0; + height: 2rem; + outline: none; + font-weight: bold; + border: none; + border-radius: .25rem; + background: var(--blue); + color: var(--white); + padding: 0.5rem 0.75rem; + font-size: .75rem; + display: flex; + align-items: center; + cursor: pointer; + margin: 0 0 1rem 0; +} + +.start-btn-hint { + color: rgba(0, 0, 0, 0.54); + display: block; + margin-bottom: 0; } + .tab_margin { - margin-bottom: 15px!important; + margin-bottom: 15px!important; } + a.all_category_link { - color: #0074b6; - display: none; + color: #0074b6; + display: none; } -.watching_link{ - display: none; +.watching_link { + display: none; } @media (max-width: 768px) { - - .main-div { - display: block!important; - width:100%!important; - padding: 0px 0px!important; - } - .discussion_outer_box { - display: block!important; - } - .discussion_main_box, .right_tag_box { - width: 100%; - display: block!important; - float: none; - } -} + .main-div { + display: block!important; + width: 100%!important; + padding: 0px 0px!important; + } + .discussion_outer_box { + display: block!important; + } + .discussion_main_box, + .right_tag_box { + width: 100%; + display: block!important; + float: none; + } +} \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.ts b/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.ts index 1b034e07..bfc2a11d 100644 --- a/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.ts +++ b/projects/discussion-ui/src/lib/components/discuss-all/discuss-all.component.ts @@ -124,7 +124,7 @@ export class DiscussAllComponent implements OnInit { // tslint:disable-next-line: max-line-length const input = { data: { url: `${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TOPIC}${slug}`, queryParams: {} }, action: CONSTANTS.CATEGORY_DETAILS, } this.navigationService.navigate(input); - this.stateChange.emit({ action: CONSTANTS.CATEGORY_DETAILS, title: discussionData.title, tid: discussionData.tid }); + this.stateChange.emit({ action: CONSTANTS.CATEGORY_DETAILS, title: discussionData.title, tid: discussionData.tid, cId: this.cIds }); // this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TOPIC}${slug}`], { queryParamsHandling: "merge" }); } diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css index 327e8941..54fdbf2a 100644 --- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css +++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.css @@ -1,6 +1,7 @@ -.discuss-category-cards{ +.discuss-category-cards { display: grid; - grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); + /* grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); */ + grid-template-columns: repeat(auto-fill, minmax(475px, 1fr)); grid-gap: 24px; margin-bottom: 24px; cursor: pointer; @@ -13,12 +14,128 @@ } .card-comp { - height: calc(100% - 24px); + height: calc(100% - 32px); display: inline-block; } +.discuss-home { + background: no-repeat padding-box #0074b6; + border-radius: 4px 4px; + padding: 14px 15px; + box-sizing: border-box; + width: 140px; + height: 50px; +} + +.recent-tabs { + padding: 0 0!important; +} + +.filter-option { + border-bottom: 1px solid rgba(0, 0, 0, .3); +} + +.filter-option.tabs-active { + border-bottom: 3px solid var(--blue); +} + @media (max-width: 700px) { -.discuss-category-cards { - grid-template-columns: 1fr; - } + .discuss-category-cards { + grid-template-columns: 1fr; + } +} + +h1 { + text-align: center; + font-family: Tahoma, Arial, sans-serif; + color: #06D85F; + margin: 80px 0; +} + +.box { + width: 40%; + margin: 0 auto; + background: rgba(255, 255, 255, 0.2); + padding: 35px; + border: 2px solid #fff; + border-radius: 20px/50px; + background-clip: padding-box; + text-align: center; } + +.button { + font-size: 1em; + padding: 10px; + color: #fff; + border: 2px solid #06D85F; + border-radius: 20px/50px; + text-decoration: none; + cursor: pointer; + transition: all 0.3s ease-out; +} + +.button:hover { + background: #06D85F; +} + +.overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + transition: opacity 500ms; + visibility: hidden; + opacity: 0; +} + +.overlay:target { + visibility: visible; + opacity: 1; +} + +.popup { + margin: 0px auto; + padding: 20px; + background: transparent; + border-radius: 5px; + width: 1195px; + position: relative; + border: 5px solid #3C3E62; +} + +.popup h2 { + margin-top: 0; + color: #333; + font-family: Tahoma, Arial, sans-serif; +} + +.popup .close { + position: absolute; + top: 20px; + right: 30px; + transition: all 200ms; + font-size: 30px; + font-weight: bold; + text-decoration: none; + color: #333; +} + +.popup .close:hover { + color: #06D85F; +} + +.popup .content { + max-height: 30%; + overflow: auto; +} + +@media screen and (max-width: 700px) { + .box { + width: 70%; + } + .popup { + width: 70%; + } +} \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.html b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.html index 389a44a2..e526439b 100644 --- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.html +++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.html @@ -1,11 +1,28 @@ - -
- -
- -
+ + +
+
+
+
+ + All + + Watching + +
+
+
+ + +
+ +
+ +
+ +
-
+
- + \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts index 9bedf100..920829bb 100644 --- a/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts +++ b/projects/discussion-ui/src/lib/components/discuss-category/discuss-category.component.ts @@ -19,9 +19,12 @@ import { NavigationServiceService } from '../../navigation-service.service'; }) export class DiscussCategoryComponent implements OnInit, OnDestroy { + + categories: NSDiscussData.ICategorie[] = []; forumIds: any; + @Input() category: any; @Input() categoryIds; @Input() categoryAction; @Output() stateChange: EventEmitter = new EventEmitter(); @@ -34,6 +37,8 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy { categoryId: any; + trendingTags: any; + paramsSubscription: Subscription; showLoader = false; @@ -45,13 +50,18 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy { public activatedRoute: ActivatedRoute, private telemetryUtils: TelemetryUtilsService, private navigationService: NavigationServiceService + ) { } ngOnInit() { /** It will look for the queryParams, if back button is clicked, * the queryParams will change and it will fetch the categories * if there is no queryParams available, then it will fetch the default categories of the forumIds + * + * */ + + this.telemetryUtils.setContext([]); this.telemetryUtils.logImpression(NSDiscussData.IPageName.CATEGORY); this.forumIds = this.categoryIds ? this.categoryIds : this.discussService.forumIds; @@ -67,6 +77,7 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy { } } }); + } fetchAllAvailableCategories(ids) { @@ -99,6 +110,10 @@ export class DiscussCategoryComponent implements OnInit, OnDestroy { return this.discussService.fetchSingleCategoryDetails(cid); } + + + + /** * It will fetch the children for each category click. * if there is no children available the it will redirect to the topic list page diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.html b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.html index f3332af3..d5277bf8 100644 --- a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.html +++ b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.html @@ -1,30 +1,46 @@ - - -
-

-
-
-   -
- - -
- -
- +
+
+ + +
+
+
+ Buffer-image +

+
+ +
+
+ +
- -
-
No Data
-
-  
+ + + +
+ +
+ + + +
+
No Data
+
+   +
+
+ + + + + +
- - - - \ No newline at end of file + +
+ +
+ +
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.scss b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.scss index 94331a81..e1bfc39f 100644 --- a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.scss +++ b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.scss @@ -1,23 +1,60 @@ -.df-start-btn{ - height: 2rem; - outline: none; - font-weight: bold; - border: none; - border-radius: .25rem; - background: var(--blue); - color: var(--white); - padding: 0.5rem 0.75rem; - font-size: .75rem; - display: flex; - align-items: center; - cursor: pointer; - margin: 0 0 1rem 0; - } +.df-start-btn { + // height: 2rem; + outline: none; + // font-weight: bold; + border: none; + border-radius: .25rem; + background: #0074B6; + color: var(--white); + // padding: 0.5rem 0.75rem; + // font-size: .75rem; + padding: 14px 15px; + display: flex; + align-items: center; + cursor: pointer; + // margin: 0 0 1rem 0; +} - .infinite-scroll { +.infinite-scroll { overflow-y: scroll; +} + +.category_main_box { + width: 685px; + @media screen and (max-width: 992px) { + width: 100%; + } +} + +.right_tag_box { + width: 275px; + @media screen and (max-width: 992px) { + width: 100%; + margin-left: 0px!important; + margin-bottom: 32px!important; } +} + +.discuss-card-content { + z-index: 1!important; +} - .discuss-card-content { - z-index: 1!important; - } \ No newline at end of file +.category_title_div { + background-color: #fff; + padding: 1.5rem; + border-radius: 4px 4px; + background-image: url('assets/images/banners/category_header.svg'); + background-position: center; + background-size: cover; +} + +.category_img { + height: 48px; + width: 48px; +} + +.category_inner_box { + @media screen and (max-width: 992px) { + flex-direction: column!important; + } +} \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts index 6e7af569..e5f66809 100644 --- a/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts +++ b/projects/discussion-ui/src/lib/components/discuss-home/discuss-home.component.ts @@ -17,10 +17,13 @@ import { NavigationServiceService } from '../../navigation-service.service'; styleUrls: ['./discuss-home.component.scss'] }) export class DiscussHomeComponent implements OnInit { + @Input() categoryId; @Input() categoryHomeAction; @Output() stateChange: EventEmitter = new EventEmitter(); + + discussionList = []; routeParams: any; showStartDiscussionModal = false; @@ -38,6 +41,7 @@ export class DiscussHomeComponent implements OnInit { pageSize: number; totalTopics: number; title: any; + trendingTags: any; constructor( public router: Router, @@ -56,10 +60,14 @@ export class DiscussHomeComponent implements OnInit { categoryIds = this.categoryId ? this.categoryId : categoryIds this.getDiscussionList(categoryIds); }) - // this.routeParams = params; - // this.categoryId = this.discussionService.getContext(CONTEXT_PROPS.cid); - // this.getDiscussionList(_.get(this.routeParams, 'slug')); + this.routeParams = params; + this.categoryId = this.discussionService.getContext(CONTEXT_PROPS.cid); + this.getDiscussionList(_.get(this.routeParams, 'slug')); }); + + this.fetchAllTags(); + + } navigateToDiscussionDetails(discussionData) { @@ -83,8 +91,10 @@ export class DiscussHomeComponent implements OnInit { */ getDiscussionList(slug: string) { this.showLoader = true; + // TODO : this.currentActivePage shoulb be dynamic when pagination will be implemented this.discussionService.getContextBasedTopic(slug, this.currentActivePage).subscribe(data => { + this.showLoader = false; this.title = _.get(data, 'title') this.isTopicCreator = _.get(data, 'privileges.topics:create') === true ? true : false; @@ -117,6 +127,19 @@ export class DiscussHomeComponent implements OnInit { this.showStartDiscussionModal = false; } + fetchAllTags() { + this.showLoader = true; + this.discussionService.fetchAllTag().subscribe(data => { + this.showLoader = false; + this.trendingTags = _.get(data, 'tags'); + }, error => { + this.showLoader = false; + // TODO: toaster + console.log('error fetching tags'); + }); + } + + /** * @description - call the topic get api when scrolled down */ diff --git a/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.scss b/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.scss index f7132af0..7c51e539 100644 --- a/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.scss +++ b/projects/discussion-ui/src/lib/components/discuss-start/discuss-start.component.scss @@ -284,9 +284,10 @@ select.post_form_select:focus { border: 1px solid #024f9d; } .text_form_field_box { - width: calc(100% - 290px); - margin-left: 18px; - float: right; + // width: calc(100% - 290px); + // margin-left: 18px; + // float: right; + width: 100%; } .text_form_field_box_full_width { diff --git a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html index 7b2bbec8..ef2cdb3c 100644 --- a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html +++ b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.html @@ -1,22 +1,21 @@
- - - + + + - -
-
- - +
+ + - {{tag.value}} - {{tag.score}} -
-
- -
- - + {{tag.value}} + +

{{tag.score}}

+ +
+
+ +
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss index f058f78f..10bf47e0 100644 --- a/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss +++ b/projects/discussion-ui/src/lib/components/discuss-tags/discuss-tags.component.scss @@ -1,57 +1,71 @@ .sb-search-box { - display: flex; - align-items: center; - border: 0px; + display: flex; + align-items: center; + border: 0px; } .sb-search-box .sb-search-input { - width: 100%; - font-size: 14px; - min-height: 2rem; - outline: 0; - border-radius: 0; - line-height: normal; - background: none; - padding: 1em; - border-radius: 5px; - border: 0px; + width: 100%; + font-size: 14px; + min-height: 2rem; + outline: 0; + border-radius: 0; + line-height: normal; + background: none; + padding: 1em; + border-radius: 5px; + border: 0px; } .search-icon { - width: 18px; - height: 18px; - margin: 16px 0px 16px 16px; + width: 18px; + height: 18px; + margin: 16px 0px 16px 16px; } .sb-search-box .input-div { - border-radius: 24px; - background: var(--white); - display: flex; - align-items: center; - border: 1px solid #ddd; - width: 100%; + border-radius: 24px; + background: var(--white); + display: flex; + align-items: center; + border: 1px solid #ddd; + width: 100%; } .sb-search-box .input-div:hover { - border-color: var(--blue); + border-color: var(--blue); } .tags { - z-index: 1!important; + z-index: 1!important; } .tag { - cursor: pointer; - - .count { - background-color: transparent!important; - color: #fff!important; - } + cursor: pointer; + background-color: #fff; + padding: 4px 4px 4px 0px; + margin: 0px 24px 16px 0px; + box-sizing: border-box; + max-height: 48px!important; + height: 48px; + border-radius: 100px 100px; + font-size: 16px; + font-family: 'Lato'; + border: 1px solid rgba(0, 0, 0, 0.08); + .count { + background-color: #E9D9CC!important; + height: 40px; + width: 40px; + border-radius: 100%; + .tag_score { + font: 400 12px/40px Lato; + color: rgba(0, 0, 0, 0.87); + } + } } - .search { - border: 1px solid #dedfe0; + border: 1px solid #dedfe0; height: 1.5rem; padding: 12px; font: inherit; @@ -62,13 +76,11 @@ } .theme-igot.day-mode .ws-mat-default-text { - color:#fff; + color: #fff; } - @media (max-width: 768px) { - .discuss-tags { - flex-direction: column; - } -} - + .discuss-tags { + flex-direction: column; + } +} \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html index 86c134d6..82818ced 100644 --- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html +++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.html @@ -1,36 +1,56 @@
-
-
-
- -
+
+
+
+ +
+
+
+ {{ post?.user?.username | splitInitials }} + + + +
+
+
-
-
-
-
-
Edit -
-
Delete
+ + +
+
+
+
+
Edit +
+
Delete
+
+
+
-
-
-
- -
-
- -
+ +
+
+ + + + +
+ + + -

- -
- - - {{tag.value}} - - -
-
-
- + + + + +
+ + + + {{tag.value}} + + +
+ + +

+ + +
+
+ up-arrow @@ -59,8 +93,8 @@ {{data?.upvotes}} - - + + @@ -73,13 +107,13 @@ {{data?.downvotes}} - - + + - profit-image + profit-image {{data.viewcount}} views - - + + @@ -92,83 +126,79 @@ -
-
- +
+
+ {{data?.postcount-1}} comments - + 0 comments -
-
+
+
-
- +
+ +
+
- -
- + - -
-
-
- + +
+
+
+ Recent -
-
-
- - - -
- -
-
- +
+
+ + + +
+ +
+
+ {{ post?.user?.username | splitInitials }} - - - -
-
- {{ post?.timestamp | date: 'dd MMM yyyy hh:mm a'}} - -
-
- -
-
-

-
(edited)
-
-
- -
-
-
- +
+
+ +
+
+

+
(edited)
+
+
+ +
+
+
+ - + {{post?.upvotes}} - + - + - + {{post?.downvotes}} - -
+ +
- -
-
- - -
- - -
-
-
- - 1 reply - + +
+
+
+ + 1 reply + - - - + + + - -
-
-
- Last reply + +
+
+
+ Last reply {{ post?.replies?.timestampISO | date: 'dd MMM yyyy hh:mm a' }} -
-
-
- - -
- - -
-
- - + -
- {{post?.replies?.count}} replies - - +
+ {{post?.replies?.count}} replies + + - - - + + + - -
-
-
- Last reply + +
+
+
+ Last reply {{ post.replies.timestampISO | date: 'dd MMM yyyy hh:mm a' }} -
-
-
- - +
+
+
+ + +
+ +
- -
-
-
- -
+
+ +
-
-
+
+
+
+ +
- - -
-
- - -
+
+ + +
-
- - -
- -
-
- + + +
+ +
+
+ {{ post?.user?.username | splitInitials }} - - -
- {{ post?.timestamp | date}} -
-
-

-
-
- + + +
+ {{ post?.timestamp | date}} +
+
+

+
+
+ up-arrow select-up-arrow {{post.upvotes}} - - + + down-arrow @@ -358,19 +376,17 @@ (click)="deleteVote(post);logTelemetry($event, post)" id="delete-vote" src="./assets/discussion-ui/images/down.svg" alt="select-down-arrow" class="icons"> {{post?.downvotes}} - + +
+
+
-
-
-
- - -
+ + +
- + - \ No newline at end of file + \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss index d44bf638..5c0e0515 100644 --- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss +++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.scss @@ -7,24 +7,36 @@ box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12); background: var(--white); color: rgba(0, 0, 0, .87); - flex: 3; + // flex: 3; height: auto; transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1); display: block; position: relative; - padding: 0.875rem 1rem; - border-radius: 1rem; + padding: 24px 24px; + border-radius: 4px; justify-content: space-between; z-index: unset; margin-bottom: 1rem; white-space: initial; word-break: break-word; + width: 685px; + box-sizing: border-box; + + @media (max-width: 992px) { + width: 100%; + } } .related-discuss-part { padding: 0 0 1rem 1rem; position: relative; z-index: 2; + width: 295px; + box-sizing: border-box; + + @media (max-width: 992px) { + width: 100%; + } } .discussion-card-title { @@ -42,7 +54,7 @@ .discussion-content { display: flex; align-items: center; - margin-bottom: 6px; + margin-bottom: 12px; font-size: 14px; color: rgba(0, 0, 0, .6); flex-wrap: wrap; @@ -68,8 +80,8 @@ .circle-text { // border-radius: 50%; border-radius: 4px 4px; - width: 28px; - height: 28px; + width: 24px; + height: 24px; display: flex; justify-content: center; align-items: center; @@ -82,7 +94,7 @@ .circle-label { color: var(--white); - font-size: 17px; + font-size: 10px; line-height: 12px; letter-spacing: .2625px; text-transform: uppercase; @@ -92,7 +104,6 @@ color: #948e8e; margin-left: 8px; font-size: 14px; - html[dir="rtl"] & { margin-right: 0.5rem; } @@ -105,7 +116,6 @@ .vote-data { margin-left: 8px; color: rgba(0, 0, 0, .6); - html[dir="rtl"] & { margin-right: 0.5rem; } @@ -198,7 +208,6 @@ border-radius: 4px; } - .post-card { border-bottom: 1px solid #ddd; margin: 0 0 1.75rem 0; @@ -213,6 +222,17 @@ z-index: 1!important; } +.post_tag { + display: inline-block; + border-radius: 100px 4px 4px 100px; + padding: 4px 12px; + width: auto; + justify-content: space-between; + background-color: rgba(0, 0, 0, .04); + border: 1px solid rgba(0, 0, 0, .08); + box-sizing: border-box; +} + .post-sub-card { margin: 0 8px 8px; } @@ -228,7 +248,6 @@ font-weight: 700; margin-left: 16px; word-break: break-all; - html[dir="rtl"] & { margin-right: 1rem; } @@ -274,14 +293,13 @@ color: rgba(0, 0, 0, .6); } -.viewsIcon{ - height: 14px !important; - width: 18px !important; +.viewsIcon { + height: 18px !important; + width: 20px !important; object-fit: cover; vertical-align: middle; } - .df-update-btn, .df-reply-btn { background-color: var(--blue); @@ -293,32 +311,27 @@ cursor: pointer; } -.df-reply-btn.transparent{ +.df-reply-btn.transparent { background-color: transparent; color: var(--black60); border: 0; } -.df-reply-btn.transparent:hover{ +.df-reply-btn.transparent:hover { color: var(--black60); border: 0; background-color: #f5f6fa; } - - :host { .df-reply-btn { margin-left: 1rem; - html[dir="rtl"] & { margin-right: 1rem; } - } } - .df-cancel-btn { background-color: var(--white); color: var(--blue); @@ -345,29 +358,23 @@ .discuss-details-content { flex-direction: column; } - .related-discuss-part { padding: 0px; } - .post-btn { width: 100%; margin-top: 8px; } - .comments-area { flex-direction: column; } - .comments-count { margin-top: 8px; } - .post-time { margin-top: 8px; margin-left: 0px; } - .comment-section { flex-direction: column; align-items: start; @@ -384,7 +391,6 @@ margin-top: 3px; font-size: 12px; color: rgba(0, 0, 0, 0.6); - html[dir="rtl"] & { padding-right: 0.5rem; } @@ -396,7 +402,6 @@ width: 1rem; height: 1rem; margin-left: 1rem; - html[dir="rtl"] & { margin-right: 1rem; } @@ -424,16 +429,13 @@ position: absolute; right: 8px; top: 22px; - html[dir="rtl"] & { padding-right: 6px; } - &:hover { background: var(--gray-0); cursor: pointer; } - &::after { content: '\2807'; font-size: 24px; @@ -451,7 +453,6 @@ right: 0; top: 0; min-width: 210px; - .list { cursor: pointer; font-size: 14px; @@ -459,18 +460,15 @@ display: flex; align-items: center; width: 100%; - &:hover, &:active { background-color: var(--primary-100); } - &:last-child { .sb-btn-normal { color: var(--red-400); } } - .sb-btn-normal { font-size: 14px; } diff --git a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts index a5dd6844..a2bfe88d 100644 --- a/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts +++ b/projects/discussion-ui/src/lib/components/discussion-details/discussion-details.component.ts @@ -28,6 +28,7 @@ export class DiscussionDetailsComponent implements OnInit, OnDestroy { @Input() topicId: any; @Input() slug: string; @Input() widget: boolean; + @Input() cid: number; @Output() stateChange: EventEmitter = new EventEmitter(); diff --git a/projects/discussion-ui/src/lib/components/leader-board/leader-board.html b/projects/discussion-ui/src/lib/components/leader-board/leader-board.html new file mode 100644 index 00000000..db035023 --- /dev/null +++ b/projects/discussion-ui/src/lib/components/leader-board/leader-board.html @@ -0,0 +1,182 @@ + + + + +
+ + + +
+ +

Top contributors of the month

+
+ +
+
+
+
+ DN +
+
+

Devaprathap Nagendra

+

Joint Secretary at Tourism

+ +42 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Anand Bhairavi

+

Joint Secretary at Tourism

+ +37 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Munmunja Mukherjee

+

Under Secretary at Ministry of Ex..

+ +29 Karma +
+
+
+
+ +
+
+ +
+ +

All users

+ +
+
+
+ + Most Karma + + Top posters + +
+
+
+
+ +
+
+
+
+ DN +
+
+

Somorjit Phuritshabam

+

Under Secretary at Ministry of Ext.

+ 542 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Renuka Karmakar

+

Joint Secretary at AYUSH

+ 538 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Manjunatha HS

+

Joint Secretary Finance

+ 456 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Rakhi Mohapatra

+

Director at Civil Aviation

+ 454 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Satyaki Roy

+

Additional Secretary at Urban Dev

+ 508 Karma +
+
+
+
+ + +
+
+
+
+ DN +
+
+

Joy Mathew

+

Joint Secretary at DoPT

+ 412 Karma +
+
+
+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/leader-board/leader-board.scss b/projects/discussion-ui/src/lib/components/leader-board/leader-board.scss new file mode 100644 index 00000000..7d10da2c --- /dev/null +++ b/projects/discussion-ui/src/lib/components/leader-board/leader-board.scss @@ -0,0 +1,129 @@ + +// leader board css + + +.df-back-header { + display: none; +} + +.search { + border: 1px solid #dedfe0; + height: 1.5rem; + padding: 12px; + font: inherit; + border-radius: 5px; + margin-bottom: 2rem; + width: 685px; +} +.leader_board_box { + width:100%; + .top_contributor_box { + width: 100%; + margin-bottom: 56px; + } + .discuss-category-cards { + display: grid; + grid-template-columns: repeat(auto-fill,minmax(292px,1fr)); + grid-gap: 24px; + margin-bottom: 24px; + cursor: pointer; + position: relative; + z-index: unset; + width: 100%; + + } + + .category-card { + // box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); + background: #fff; + color: rgba(0,0,0,.87); + transition: box-shadow 280ms cubic-bezier(.4,0,.2,1); + display: block; + position: relative; + border-radius: 4px; + // height: 100%; + width: auto; + padding: 16px; + z-index: 2; + } + .categories-card-content { + width: 315px; + height: 96px; + } + + p.user_content_heading { + margin-bottom: 4px!important; + } + + p.user_designation { + font: 400 12px/16px Lato; + margin-bottom: 4px!important; + } + .user_title_box { + width: 48px; + height: 48px; + border-radius: 4px 4px; + text-align: center; + color: #fff; + justify-content: center; + display: flex; + } + + .inner_contributor_box { + width: 100%; + box-sizing: border-box; + } + + + .user_content_box { + margin-left: 12px; + text-align: left; + align-content: flex-start; + } + p.user_content_heading { + margin-bottom: 4px!important; + } + + p.user_designation { + font: 400 12px/16px Lato; + margin-bottom: 4px!important; + } + + .tabs-filter { + .filter-option { + border-bottom: 1px solid rgba(0, 0, 0, .3); + } + .filter-option.tabs-active { + border-bottom: 3px solid var(--blue); + } + } + + .recent-tabs { + padding: 0 0!important; + } + + // p.karma_text { + + // } + + + + .bg_pink { + background-color: #C4544E; + } + .bg_blue { + background-color: #49418C; + } + .bg_purple { + background-color: #7B418C; + } + .bg_light_blue { + background-color: #4E91C4; + } + .bg_gray { + background-color: #84762C; + } + .bg_green { + background-color: #306933; + } +} diff --git a/projects/discussion-ui/src/lib/components/leader-board/leaderboard-component.ts b/projects/discussion-ui/src/lib/components/leader-board/leaderboard-component.ts new file mode 100644 index 00000000..06220d39 --- /dev/null +++ b/projects/discussion-ui/src/lib/components/leader-board/leaderboard-component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from "@angular/core"; + + +@Component({ + selector: 'lib-leaderboard', + templateUrl: './leader-board.html', + styleUrls: ['./leader-board.scss'] + }) + export class LeaderBoardComponent { + + } \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss index 7e0a21ac..d0d77e32 100644 --- a/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss +++ b/projects/discussion-ui/src/lib/components/lib-entry/lib-entry.component.scss @@ -3,12 +3,13 @@ margin-bottom: 1rem; .df-btn-container { - display: flex; + // display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; position: relative; margin: 0 1rem; + display:none; s .df-back-btn { outline: none; @@ -90,10 +91,15 @@ s width:100%; } +lib-lib-entry { + overflow: hidden!important; + width:100%; +} + @media (max-width: 992px) { .discussion-forum { padding: 0 0px; - height: 100vh; + // height: 100vh; overflow: auto; overflow-x: hidden; background: #e9e8d9; diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html index bd4d8d22..c6af8d12 100644 --- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html +++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.html @@ -2,77 +2,94 @@
-
-
- {{ data?.username | splitInitials }} -
-
-
-
{{data?.department}}
-
{{data?.location}}
-
{{data?.email || data?.username}}
-
-
-
- +
+
+ {{ data?.username | splitInitials }} + +
+
+
+ +
+ + +
+
+ +
+
+
+ {{data?.topiccount || 0 }} - Discussions - - + Discussions + + {{data?.postcount || 0 }} - Posts - + Posts + + +
+ + +
+
-
+
-
-
- -
-
-
- + +
+
+
+ Recent posts - - Best posts - + Best posts + Saved posts - - + Upvoted - + Downvoted +
+
-
-
- -
- -
- -
-
- -
-
No Data
-
-   -
+
+ +
+ +
+
- + +
+
No Data
+
+   +
+
+
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.scss b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.scss index 05f66c6b..7853042f 100644 --- a/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.scss +++ b/projects/discussion-ui/src/lib/components/my-discussion/my-discussion.component.scss @@ -10,7 +10,14 @@ position: relative; padding: 16px; border-radius: 4px; - width: 96.5%; + width: 100%; + box-sizing: border-box; +} + +img.karma_img { + height: 21px; + width: 21px; + vertical-align: bottom; } .profilecard-content { @@ -30,6 +37,11 @@ margin-right: 24px; background: var(--green); text-align: center; + + @media (max-width: 992px) { + max-width: 70px; + height: 70px; + } } .profile-name { @@ -49,35 +61,51 @@ // font-weight: 700; // margin-bottom: 8px; // font-size: 14px; - font-weight: 400; margin-bottom: 5px; font-size: 14px; line-height: 20px; } + .profile-label.department_name { - color: rgba(0,0,0,.87); + color: rgba(0, 0, 0, .87); } .profile-label.location_name { - color: rgba(0,0,0,.6); + color: rgba(0, 0, 0, .6); } .info { display: flex; flex-direction: column; align-items: baseline; - justify-content: space-evenly; + // justify-content: space-evenly; + justify-content: space-between; + width: calc(100% - 180px); + + @media (max-width: 992px) { + width: calc(100% - 100px); + } +} + +.bottom_info_box { + width: 100%; + display: flex; +} + +.info-top-box { + flex-wrap: wrap; + width: 100%; } .profile-data { margin-top: 16px; font-size: 14px; + width: 100%; } .post-count-area { margin-left: 32px; - html[dir="rtl"] & { margin-right: 32px; } @@ -86,7 +114,7 @@ .number { // color: var(--blue); font-size: 14px; - color:#3F87C5; + color: #3F87C5; font-weight: 700; } @@ -95,13 +123,11 @@ margin-left: 8px; font-weight: 700; font-family: inherit; - html[dir="rtl"] & { margin-right: 4px; } } - .no-data-label { font-size: 20px; font-weight: bold; @@ -110,11 +136,10 @@ .profileCard { .profilecard-content { margin-bottom: 5px; - .profile-header-image { .box-text { border-radius: 4px; - width: 28px; + // width: 28px; height: 28px; display: inline-block; justify-content: center; @@ -124,20 +149,37 @@ text-align: center; font-weight: 600; line-height: 28px; + } } - - // .discuss-user-label{ // margin-left: 10px; // } } } +a.karma_btn { + padding: 10px 40px; + box-sizing: border-box; + text-align: center; + font: 700 14px/21px Lato; + border-radius: 4px 4px; + background-color: rgba(0, 0, 0, .04); + width: 185px; +} + +.post-time-box { + p { + font-weight: 700; + } +} + +// .karma_icon { +// margin-right: 8px; +// } .discuss-card-content { z-index: 1!important; - } - +} @media (max-width: 768px) { .profileCard { @@ -149,6 +191,10 @@ font-size: 4rem; color: var(--white); text-transform: uppercase; + + @media (max-width: 992px) { + font-size: 3rem; + } } .tabs-filter { @@ -157,7 +203,7 @@ } .filter-option.tabs-active { border-bottom: 3px solid var(--blue); - } + } } .recent-tabs { diff --git a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html index 0e734518..d3a4c37c 100644 --- a/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html +++ b/projects/discussion-ui/src/lib/components/side-pannel/side-pannel.component.html @@ -1,23 +1,22 @@ - +
-
- × -
- -
-
+
+ × +
+ +
+
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.html b/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.html index 5a3a43da..b962f637 100644 --- a/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.html +++ b/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.html @@ -1,11 +1,45 @@ + + + + + +
-
-

{{tagName}}

+
+ +

{{tagName}}

 
-
+ + +
diff --git a/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.scss b/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.scss index 3a0d631a..a543c991 100644 --- a/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.scss +++ b/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.scss @@ -12,4 +12,36 @@ .discuss-card-content { z-index: 1!important; - } \ No newline at end of file + } + +.tag_header_box { + width: 100%; + height: 180px; + background-color: #fff; + padding: 1.5rem; + border-radius: 4px; + background-image: url(assets/images/banners/category_header.svg); + background-position: center; + background-size: cover; + box-sizing: border-box; +} + +.df-start-btn { + outline: 0; + border: none; + border-radius: 0.25rem; + background: #0074b6; + color: var(--white); + padding: 14px 15px; + display: flex; + align-items: center; + cursor: pointer; + margin:0; +} +.filter { + height: 48px; +} +.filter-option { + margin:0; + margin-right: 8px; +} \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.ts b/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.ts index f26c2214..e0d4e0bf 100644 --- a/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.ts +++ b/projects/discussion-ui/src/lib/components/tag-all-discussion/tag-all-discussion.component.ts @@ -35,6 +35,11 @@ export class TagAllDiscussionComponent implements OnInit { paramsSubscription: Subscription; getParams: any; cIds: any; + currentFilter = 'recent' + showLoader = false; + discussionList: any[]; + allTopics: any; + showStartDiscussionModal = false; constructor( private route: ActivatedRoute, @@ -189,4 +194,99 @@ export class TagAllDiscussionComponent implements OnInit { return { color, 'background-color': bgColor }; } + fillrecent(_page?: any) { + this.getRecentData(_page) + } + + fillPopular(page?: any) { + this.showLoader = true; + return this.discussService.fetchPopularD(page).subscribe((response: any) => { + this.showLoader = false; + this.discussionList = []; + _.filter(response.topics, (topic) => { + if (topic.user.uid !== 0 && topic.cid !== 1 ) { + this.discussionList.push(topic); + } + }); + // this.discussionList = _.get(response, 'topics') + }, error => { + this.showLoader = false; + // TODO: Toaster + console.log('error fetching topic list', error); + }); + } + + filter(key: string | 'recent' | 'popular') { + if (key) { + this.currentFilter = key; + switch (key) { + case 'recent': + this.cIds.length ? this.getContextData(this.cIds.result) : this.fillrecent() + break; + case 'popular': + this.cIds.length ? this.getContextData(this.cIds.result) : this.fillPopular() + break; + default: + break; + } + } + } + + getContextBasedDiscussion(cid: any) { + this.currentFilter === 'recent' ? this.getContextData(cid) : this.getContextData(cid) + } + + refreshData(page?: any) { + this.currentFilter === 'recent' ? this.getRecentData(page) : this.fillPopular(page) + } + + + getRecentData(page: any) { + this.showLoader = true; + return this.discussService.fetchRecentD(page).subscribe( + (data: any) => { + this.showLoader = false; + this.discussionList = []; + _.filter(data.topics, (topic) => { + if (topic.user.uid !== 0 && topic.cid !== 1) { + this.discussionList.push(topic); + } + }); + }, error => { + this.showLoader = false; + // TODO: Toaster + console.log('error fetching topic list', error); + }); + } + + getContextData(cid: any) { + this.showLoader = true; + const req = { + // request: { + cids: cid + // } + }; + return this.discussService.getContextBasedDiscussion(req).subscribe( + (data: any) => { + this.showLoader = false; + let result = data.result + let res = result.filter((elem) => { + return (elem.statusCode !== 404) + }) + this.allTopics = _.map(res, (topic) => topic.topics); + this.discussionList = _.flatten(this.allTopics) + }, error => { + this.showLoader = false; + // TODO: Toaster + console.log('error fetching topic list', error); + }); + } + + + + + + + + } diff --git a/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.html b/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.html index 9915ca05..cb161110 100644 --- a/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.html +++ b/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.html @@ -1,49 +1,57 @@ -
+
Trending tags +
+ +
-
- {{tag.value}} - {{tag.score}} -
+ [ngStyle]="{'background-image':'linear-gradient(to right, #ECECEC, #ECECEC ' + ((tag.score / max) *100 ) + '%, #FFF 24px)'}" (click)="getAllDiscussions(tag)"> --> +
+ {{tag.value}} + +

{{tag.score}}

+ +
-
+
+ + -
+
Updates
-
-
-

1 Upvote on your question

+
+
+

1 Upvote on your question

+
+
+

What is the most reliable and useful source for COVID related ..

+
-
-

What is the most reliable and useful source for COVID related ..

-
-
-
-
-

@sundaramraj answered your question

-
-
-

I think the solution to such a problem would be to extensively..

+
+
+

@sundaramraj answered your question

+
+
+

I think the solution to such a problem would be to extensively..

+
-
-
-
-

1 Upvote on your question

+
+
+

1 Upvote on your question

+
+
+

What is the most reliable and useful source for COVID related ..

+
-
-

What is the most reliable and useful source for COVID related ..

-
-
-
- ALL UPDATES -
+
+ ALL UPDATES +
-
\ No newline at end of file +
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.scss b/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.scss index ec9418ad..ca3c3882 100644 --- a/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.scss +++ b/projects/discussion-ui/src/lib/components/trending-tags/trending-tags.component.scss @@ -1,31 +1,49 @@ @import '../../../../assets/styles/global.scss'; +.tag_title_box { + width: 100%; + display: block; +} -.tag { - display: flex; - width: 276px; - height: 32px; - border-radius: 4px; - justify-content: space-between; - // margin: $size-m 0; - margin:10px 0; - // background-color: red; - align-items: center; - box-sizing: border-box; - - @include breakpoint-xs { - width: auto; +.right_tag_inner_box { + width: 100%; +} - } +.tag_score_box { + height: 22px; + width: 22px; + border-radius: 100%; + background-color: #E9D9CC; + display: inline-block; + .tag_text { + font: 400 10px/22px Lato; + } +} - @include breakpoint-s { +.tag { + // display: flex; + // width: 276px; + // height: 32px; + display: inline-block; + border-radius: 100px 4px 4px 100px; + padding: 4px 6px 4px 0px; width: auto; - - } + justify-content: space-between; + // margin: $size-m 0; + margin: 0px 8px 8px 0px; + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid rgba(0, 0, 0, 0.08); + box-sizing: border-box; + @include breakpoint-xs { + width: auto; + } + @include breakpoint-s { + width: auto; + } } .custom-margin { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto !important; + margin-bottom: auto !important; } // .progress { @@ -34,7 +52,6 @@ // /* (height of inner div) / 2 + padding */ // // padding: 3px; // } - // .progress::after { // content: ''; // position: fixed; @@ -43,56 +60,43 @@ // left: 50%; // background: #116699 // } - - @media (max-width: 768px) { - .right_tag_inner_box { - width: 100%; - margin-left: 0!important; - } + .right_tag_inner_box { + width: 100%; + margin-left: 0!important; + } } - .update_box { - box-sizing: border-box; - margin-top: 32px; - display: none; - - .update_inner_box { box-sizing: border-box; - margin-top: 16px; - - .update_card { - box-sizing: border-box; - - .card_head { - - p.blue_heading { - color: #0074b6; - margin-bottom: 8px; + margin-top: 32px; + display: none; + .update_inner_box { + box-sizing: border-box; + margin-top: 16px; + .update_card { + box-sizing: border-box; + .card_head { + p.blue_heading { + color: #0074b6; + margin-bottom: 8px; + } + } + // .card_body { + // width: 100%; + // } + } + .update_btn_box { + width: 100%; + margin-top: 8px; + a.all_update_link { + width: 100%; + padding: 10px 0; + text-align: center; + color: #0074b6; + border-radius: 4px 4px; + border: 1px solid rgba(0, 0, 0, 0.16); + } } - } - - // .card_body { - // width: 100%; - // } - - - } - - .update_btn_box { - width: 100%; - margin-top: 8px; - - a.all_update_link { - width: 100%; - padding: 10px 0; - text-align: center; - color: #0074b6; - border-radius: 4px 4px; - border: 1px solid rgba(0, 0, 0, 0.16); - } } - - } } \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts index 909531c8..695f6808 100644 --- a/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts +++ b/projects/discussion-ui/src/lib/discussion-routing/discussion-routing.module.ts @@ -9,6 +9,7 @@ import { RouterModule, Routes } from '@angular/router'; import { DiscussHomeComponent } from './../components/discuss-home/discuss-home.component'; import { DiscussAllComponent } from './../components/discuss-all/discuss-all.component'; import { TagAllDiscussionComponent } from './../components/tag-all-discussion/tag-all-discussion.component'; +import { LeaderBoardComponent } from '../components/leader-board/leaderboard-component'; const routes: Routes = [ @@ -50,12 +51,20 @@ const routes: Routes = [ { path: 'category/:slug', pathMatch: 'full', - component: DiscussHomeComponent + component: DiscussHomeComponent, + data: { + pageId: 'catergory/:categoryId', + module: 'Discuss', + } }, { path: 'topic/:topicId/:slug', pathMatch: 'full', - component: DiscussionDetailsComponent + component: DiscussionDetailsComponent, + data: { + pageId: 'topic/:topicId/:topicSlug', + module: 'Discuss', + } } ] }, diff --git a/projects/discussion-ui/src/lib/elements/category-card/category-card.component.html b/projects/discussion-ui/src/lib/elements/category-card/category-card.component.html index 68b2febf..3e4b8037 100644 --- a/projects/discussion-ui/src/lib/elements/category-card/category-card.component.html +++ b/projects/discussion-ui/src/lib/elements/category-card/category-card.component.html @@ -1,16 +1,21 @@
-
-
- Buffer-image +
+
+ Buffer-image +
+
+
+

{{category.description}}

+
+
-
-
-

{{category.description}}

-
-
-
{{category.totalTopicCount}} discussions
-
{{category.totalPostCount}} posts
+ +
+
+ +
{{category.totalTopicCount}} discussions
+
{{category.totalPostCount}} posts
+
+
follow
-
eye-icon
-
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/elements/category-card/category-card.component.scss b/projects/discussion-ui/src/lib/elements/category-card/category-card.component.scss index 1e4c5f3d..d1e345d2 100644 --- a/projects/discussion-ui/src/lib/elements/category-card/category-card.component.scss +++ b/projects/discussion-ui/src/lib/elements/category-card/category-card.component.scss @@ -11,16 +11,13 @@ width: auto; padding: 1rem; z-index: 2; - @media (max-width: 768px) { z-index: 1; } - .category-card-header { display: flex; flex-direction: row; align-items: center; - .catergory-card-header-image { // border: 1px solid #fed7d7; border-radius: 50%; @@ -28,17 +25,18 @@ width: 100%; height: 50px; position: relative; - .category-card-img { position: absolute; top: 3px; - left: 3px; + left: 0px; width: 45px; height: 45px; vertical-align: middle; } } - + .category-card-text { + margin-left: 1rem; + } .category-card-header-label { display: -webkit-box; -webkit-line-clamp: 2; @@ -50,11 +48,10 @@ color: rgba(0, 0, 0, .87); word-break: break-all; font-size: 1rem; - margin:0 1rem; + // margin:0 1rem; font-weight: 700 !important; } } - .category-card-header-text { color: #5f5f5f !important; /* autoprefixer: off */ @@ -68,32 +65,36 @@ font-size: 14px; margin: 0.5rem 0; } - .category-card-main { display: flex; justify-content: space-between; align-items: center; - .category-card-main-content { display: flex; justify-content: space-between; align-items: center; color: rgba(0, 0, 0, .6); - + img.view_image { + height: 20px; + width: 20px; + margin-right: 10px; + } .post-label { margin-left: 16px; font-size: 14px; font-weight: 700 !important; font-family: inherit; } - .discussion-label { font-size: 14px; font-weight: 700 !important; font-family: inherit; + // .trend_icon { + // margin-right: 4px; + // color: rgba(0, 0, 0, .6); + // } } } - .eye-icon { background-repeat: no-repeat; display: inline-block; diff --git a/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.html b/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.html index 92df9c9f..b19a90bf 100644 --- a/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.html +++ b/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.html @@ -1,58 +1,56 @@
-
- -
- + +
+ {{ discussionData?.user?.username | splitInitials }} -
- {{discussionData?.user?.username}} - {{'Anonymous'}} - {{discussionData.lastposttime | date}} +
+ {{discussionData?.user?.username}} + {{'Anonymous'}} + {{discussionData.lastposttime | date}} +
+
- -
- -
- -

-

-

- -
-
- + +
+ +

+

+

+ +
+
+ Buffer-image {{discussionData.category.name}} - - + +
-
-
- - - {{tag.value}} - - -
-
-
- - votes-image +
+ + + + {{tag.value}} + + +
+
+
+ + votes-image {{(discussionData.upvotes + discussionData.downvotes) || 0 }} Votes - - - views-image + + + views-image {{discussionData.viewcount || 0}} Views - + +
+
{{((discussionData.postcount || 1) -1) }} comment
+
{{((discussionData.postcount || 1) -1) }} comments
-
{{((discussionData.postcount || 1) -1) }} comment
-
{{((discussionData.postcount || 1) -1) }} comments
-
\ No newline at end of file diff --git a/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.scss b/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.scss index 744cb4ba..3f5e2d99 100644 --- a/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.scss +++ b/projects/discussion-ui/src/lib/elements/discuss-card/discuss-card.component.scss @@ -4,13 +4,11 @@ cursor: pointer; font-size: 16px; font-weight: 700; - } .discuss-card-label { color: #0074b6; display: flex; - img { width: 20px; margin-right: 0.5rem; @@ -29,46 +27,37 @@ justify-content: space-between; font-size: 14px; flex-wrap: wrap; - .discuss-comments-area { display: -webkit-box; font-weight: 700; font-size: 0.75rem; - .views-content { margin-left: 1.5rem; display: flex; align-items: center; - html[dir="rtl"] & { margin-right: 1.5rem; - } } - .votes-content { display: flex; align-items: center; } - .votes-content img, .views-content img { // height: 24px; // width: 24px; - height: 15px; + height: 20px; width: 20px; } - .votes-content span, .views-content span { margin-left: 10px; - html[dir="rtl"] & { margin-right: 0.5rem; } } } - .comments-count { // color: #0074b6; font-weight: 700; @@ -78,11 +67,11 @@ .discuss-card-header { .user_name_div { - margin-bottom: 10px; + margin-bottom: 12px; .circle-text { border-radius: 4px; - width: 28px; - height: 28px; + width: 24px; + height: 24px; // display: flex; display: inline-block; justify-content: center; @@ -91,24 +80,26 @@ color: #fff; text-align: center; font-weight: 600; - line-height: 28px; + line-height: 20px; vertical-align: middle; + text-transform: uppercase; + .circle-label { + font: 400 10px/12px Lato; + } } - .post_user_text_box { margin-left: 10px; display: inline-block; vertical-align: middle; width: calc(100% - 42px); - .discuss-user-label{ - - // color: rbga(0, 0, 0, 0.6)!important; - color: rgba(0, 0, 0, 0.6)!important; - } + font: 400 14px/21px Lato; + color: rgba(0, 0, 0, 0.6)!important; + text-transform: capitalize; + // .discuss-user-label { + // color: rgba(0, 0, 0, 0.6)!important; + // } } - } - .discuss_main_text_box { white-space: inherit; word-break: break-all; @@ -119,7 +110,7 @@ .discuss-card-content { z-index: 1!important; - } +} .dot { height: 6px; @@ -130,14 +121,23 @@ margin: 0 1rem; } -.timing { - color: #858181; - margin-left: 1rem; - font-size: 14px; +.post_tag { + display: inline-block; + border-radius: 100px 4px 4px 100px; + padding: 4px 12px 4px 12px; + width: auto; + justify-content: space-between; + background-color: rgba(0, 0, 0, .04); + border: 1px solid rgba(0, 0, 0, .08); + box-sizing: border-box; +} +.timing { + // color: #858181; + margin-left: 10px; + // font-size: 14px; html[dir="rtl"] & { margin-right: 1rem; - } } @@ -145,9 +145,8 @@ .discuss-card-header { .user_name_div { .post_user_text_box { - - .discuss-user-label{ - margin-left: 0; + .discuss-user-label { + margin-left: 0; vertical-align: top; line-height: 1; } @@ -155,10 +154,9 @@ display: block; margin: 0; line-height: 1; - padding:0; + padding: 0; } } } } - -} +} \ No newline at end of file diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html index bcff81fc..04fbfbbb 100644 --- a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html +++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.html @@ -1,12 +1,17 @@
Related discussions
-
- +
+
-
+
+ Buffer-image +
+
+
+ +
{{ discussion.timestamp | pipeRelativeTime }}
diff --git a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss index de3bb292..e6415087 100644 --- a/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss +++ b/projects/discussion-ui/src/lib/elements/related-discussion/related-discussion.component.scss @@ -1,30 +1,27 @@ .related-discuss-card { - padding: 1rem; - display: flex; + padding: 1.5rem; border-radius: 4px; - box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12); background: var(--white); - margin-bottom: 16px; - flex-direction: column; - max-width: 300px; - @media (max-width: 768px) { - max-width: 100%; - } + max-width: 300px; + @media (max-width: 768px) { + max-width: 100%; + } } -.related-discuss-label{ +.related-discuss-label { font-weight: bold; - margin: 0 0 1rem 0; + margin: 0 0 1rem 0; color: #000; font-size: .875rem; font-weight: 700; - @media (max-width: 768px) { - margin: 1rem 0; - } + @media (max-width: 768px) { + margin: 1rem 0; + } } .related-discuss-card-content { - margin: 0; + margin: 0; color: #000; cursor: pointer; font-size: 0.875rem; @@ -34,23 +31,33 @@ } .related-discuss-card-description { - display: flex; + display: flex; -webkit-box-align: center; align-items: center; font-size: 0.875rem; - flex-wrap: wrap; + flex-wrap: wrap; margin-top: 8px; } .separator-dot { - display: inline-block; + display: inline-block; height: 6px; width: 6px; border-radius: 50%; - background-color: rgba(0,0,0,.4); - margin:0 8px; + background-color: rgba(0, 0, 0, .4); + margin: 0 8px; } .time { - color: rgba(0, 0, 0, 0.4); + color: rgba(0, 0, 0, 0.4); } + +.category_text img.category_img { + width: 20px; + display: inline-block; + vertical-align: middle; +} + +.category_text .category-name { + display: inline-block; +} \ No newline at end of file