From 79a3ebe2a303417dd07eba17b52246811fd9ddaa Mon Sep 17 00:00:00 2001 From: "venbatechnologies@gmail.com" Date: Wed, 16 Oct 2019 20:34:01 +0530 Subject: [PATCH] Fairoj : Mobile Responsive table implemented --- .../contribute/contribute.component.html | 58 ++++--- .../contribute/contribute.component.scss | 123 ++++++++++++-- .../contribute/contribute.component.ts | 3 +- .../project-detail.component.html | 160 +++++++++--------- .../project-detail.component.scss | 114 +++++++++++-- .../project-detail.component.ts | 28 ++- .../src/app/dashboard/dashboard.module.ts | 4 +- .../layouts/admin/admin-layout.component.html | 31 ++-- .../layouts/admin/admin-layout.component.ts | 3 + .../assets/styles/scss/core/_main-panel.scss | 10 ++ ng8-seed/src/environments/environment.ts | 2 +- 11 files changed, 388 insertions(+), 148 deletions(-) diff --git a/ng8-seed/src/app/components/contribute/contribute.component.html b/ng8-seed/src/app/components/contribute/contribute.component.html index 11ffaf6..f238808 100644 --- a/ng8-seed/src/app/components/contribute/contribute.component.html +++ b/ng8-seed/src/app/components/contribute/contribute.component.html @@ -6,7 +6,7 @@
Contribute to Specific Need
-
+
@@ -14,8 +14,8 @@ - - + + {{ item.school_name }} @@ -48,7 +48,8 @@ -
+ +
@@ -58,61 +59,62 @@ --> - + Item Needed - {{row.material_name}} + {{row.material_name}} - School - {{row.school_name}}, {{row.block_name}} Block, {{row.district_name}} District. + School + {{row.school_name}},
{{row.block_name}} Block, {{row.district_name}} District. - - Required Qty - {{row.qty}} + + Required Qty + {{row.qty}} - - Received Qty - {{row.received_qty}} + + Received Qty + {{row.received_qty}} - - Balance Qty - {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }} + + Balance Qty + {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }} - - Sponsored Qty - + + Sponsored Qty + - - Cost Per Unit
(in Rs) - {{row.cost_per_unit === null?0:row.cost_per_unit}} + + Cost Per Unit
(in Rs) + {{row.cost_per_unit === null?0:row.cost_per_unit}} - Amount
(in Rs) - {{Total[i]}} + Amount
(in Rs) + {{Total[i]}} - - + +
- +
TotalTotal ₹{{grandTotal}}
diff --git a/ng8-seed/src/app/components/contribute/contribute.component.scss b/ng8-seed/src/app/components/contribute/contribute.component.scss index b7cf608..236055a 100644 --- a/ng8-seed/src/app/components/contribute/contribute.component.scss +++ b/ng8-seed/src/app/components/contribute/contribute.component.scss @@ -19,19 +19,19 @@ a { text-decoration: underline; color: #4CAF50; } - table { - // width: 100%; - } + // table { + // // width: 100%; + // } .mat-form-field { font-size: 14px; width: 100%; } - td, th { - width: 25%; - // text-align: center; - } + // .mat-cell, .mat-header-cell { + // // width: 35%; + // // text-align: center; + // } table.shop-table { // border-collapse: separate; border-spacing: 0; @@ -51,6 +51,7 @@ a { .table-responsive { text-align: right; + // border:2px solid black; } .calculated-shipping { @@ -67,16 +68,17 @@ a { margin-top: 1rem; } - table.shop-table th { + table.shop-table .mat-header-cell { text-align: left; } - table td, - table th { + .mat-table .mat-cell, + .mat-table .mat-header-cell, mat-cell { border: none; - border-bottom: 1px solid #e9e9e9; - padding: 4px; + // border-bottom: 1px solid #e9e9e9; + padding: 12px 16px 12px 0; vertical-align: middle; + } .order-total { @@ -150,3 +152,100 @@ a { font-style: italic; } +@media screen and (max-width: 960px) { + .mat-table { + border: 0; + vertical-align: middle + } + + .mat-table caption { + font-size: 1em; + } + + /* Enable this to hide header*/ + .mat-table .mat-header-cell { + + border: 10px solid; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + padding: 0; + position: absolute; + width: 1px; + } + + .mat-table .mat-row { + border-bottom: 5px solid #ddd; + display: block; + } + /* + .mat-table .mat-row:nth-child(even) {background: #CCC} + .mat-table .mat-row:nth-child(odd) {background: #FFF} + */ + .mat-table .mat-cell { + border-bottom: 1px solid #ddd; + display: block; + font-size: 1em; + text-align: right; + font-weight: bold; + //height:20px; + // margin-bottom: 4%; + } + .mat-table .mat-cell:before { + /* + * aria-label has no advantage, it won't be read inside a table + content: attr(aria-label); + */ + content: attr(data-label); + float: left; + text-transform: uppercase; + font-weight: normal; + + font-size: .85em; + } + .mat-table .mat-cell:last-child { + border-bottom: 0; + } + .mat-table .mat-cell:first-child { + margin-top: 4%; + } + } + .mat-column-School{ + flex: 0 0 18%; +} +.mat-column-Item_Need{ + flex: 0 0 18%; + +} +.mat-column-Required_Qty{ + + justify-content: center; + +} +.mat-column-Received_Qty{ + justify-content: center; + +} +.mat-column-balance_Qty{ + justify-content: center; + +} +.mat-column-Cost_Per_Unit{ + flex: 0 0 12%; + justify-content: flex-end !important; +} +.mat-column-Amount{ + justify-content: flex-end !important; + + +} +.sponsor_input{ + width: 100% ; + text-align: center; +} +@media(max-width:580px){ +.sponsor_input{ + width:30%; + text-align: left; +} +} \ No newline at end of file diff --git a/ng8-seed/src/app/components/contribute/contribute.component.ts b/ng8-seed/src/app/components/contribute/contribute.component.ts index c1ef65b..aec3e68 100644 --- a/ng8-seed/src/app/components/contribute/contribute.component.ts +++ b/ng8-seed/src/app/components/contribute/contribute.component.ts @@ -15,7 +15,7 @@ import { SchoolDetailsService } from 'app/shared/school-details.service'; }) export class ContributeComponent implements OnInit { - displayedColumns: string[] = [ 'Item Need', 'School', 'Required Qty','Received Qty','balance Qty', 'Sponsor Qty', 'Cost Per Unit', 'Amount']; + displayedColumns: string[] = [ 'Item_Need', 'School', 'Required_Qty','Received_Qty','balance_Qty', 'Sponsor_Qty', 'Cost_Per_Unit', 'Amount']; dataSource:any = new MatTableDataSource(); dataLength :number; @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; @@ -330,6 +330,7 @@ export class ContributeComponent implements OnInit { // this.table_element=this.table_element.nativeElement.clientWidth this.clientWidth=this.table_element.nativeElement.clientWidth console.log("table elemnt",this.clientWidth); + //this.clientWidth <=500 ? this.pageSize=4 : 10 } diff --git a/ng8-seed/src/app/components/project-detail/project-detail.component.html b/ng8-seed/src/app/components/project-detail/project-detail.component.html index c386396..8184141 100644 --- a/ng8-seed/src/app/components/project-detail/project-detail.component.html +++ b/ng8-seed/src/app/components/project-detail/project-detail.component.html @@ -288,88 +288,90 @@
- --> -
- - - - - - - - - - - - - - - - - - - - - - - - - - - + --> +
+ + + + + + + + Item Needed + {{row.material_name}} - -
- + + + + Description + {{row.desc}} + + + + + Required Qty + {{row.qty}} + + + + Received Qty + {{row.received_qty}} + + + Balance Qty + {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }} - - - - - - - - - - - - - - - - - - - - - - - -
Item Needed{{row.material_name}} Description {{row.desc}} Required Qty {{row.qty}} Received Qty {{row.received_qty}} Balance Qty {{row.qty-row.received_qty <= 0 ? '' : row.qty-row.received_qty }} Sponsored Qty Cost Per Unit
(in Rs) 		{{row.cost_per_unit === null?0:row.cost_per_unit}} Amount (in Rs) {{Total[i]}}
-
-
- - - - - -
Total ₹{{grandTotal}}
-
-
- - -
- - -
-
+ + + Sponsored Qty + + + + + + Cost Per Unit
(in Rs) + {{row.cost_per_unit === null?0:row.cost_per_unit}} + + + + + + Amount
(in Rs) + {{Total[i]}} + + + + + + + +
+
+ + + + + +
Total ₹{{grandTotal}}
+
+
+ + +
+ + +
+
+

{{msg}}

 + +
- +
+ +
-
+ +
+