issue #18 responsive-teacher-tasks-table fix

encorelab · Aug 29, 2020 · 24afdf3 · 24afdf3
1 parent f21d63d
commit 24afdf3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/...re/teachingassistant/src/app/core/components/task-datatable/task-datatable.component.html b/...re/teachingassistant/src/app/core/components/task-datatable/task-datatable.component.html
@@ -1,13 +1,13 @@
-<div class="tab-container l-constrained" fxLayout="column" fxLayoutAlign="start stretch">
-    <h2>Task Information {{selectionTitle}}</h2>
-    <br>
+<div class="l-constrained view-content view-content--with-sidemenu" fxLayout="column" fxLayoutAlign="center">
+    <!-- <h2>Task Information {{selectionTitle}}</h2> -->
+    <!-- <br> -->
     <div *ngIf="periodName === 'All Periods'">
         <div style="display: inline-flex; vertical-align: middle; align-items: center;">
             <i class="material-icons">error_outline</i>
             <span> Showing tasks for all periods is currently not supported. Please choose a specific period.</span>
         </div>
     </div>
-    <div class="mat-elevation-z1">
+    <div class="view-content--with-sidemenu" class="mat-elevation-z1">
         <table [dataSource]="tasksDataSource" mat-table matSort>
             <!-- Position Column -->
             <ng-container matColumnDef="id">
@@ -89,6 +89,7 @@ <h2>Task Information {{selectionTitle}}</h2>
             <tr *matRowDef="let row; columns: tasksDisplayedColumns;" mat-row></tr>
         </table>
         <mat-paginator
+            class="table-controls"
             [pageSizeOptions]="[10,20,40]"
             [pageSize]="10" showFirstLastButtons></mat-paginator>
     </div>

diff --git a/...re/teachingassistant/src/app/core/components/task-datatable/task-datatable.component.scss b/...re/teachingassistant/src/app/core/components/task-datatable/task-datatable.component.scss
@@ -1,6 +1,6 @@
-$main-background: #f5f5f5;
-$padding: 15px;
-$flex-shrink: 10px;
+$main-background: #c04141;
+$padding: 5px;
+$flex-shrink: 5px;
 $flex-grow: 10px;
 $small-column: 10px;
 $medium-column: 20px;
@@ -20,15 +20,14 @@ $large-column: 40px;
     margin: 0;
 }
 
-.tab-container {
-    background: #f5f5f5;
-    //height: 91vh;
-    //margin: 10px 10px 20px 10px;
-    padding: 10px 10px 20px 10px;
+.table-controls {
+    width: 91vw;
+    background: #eef1ee;
 }
 
 table {
-    width: 100%;
+    width: 91vw;
+    background: #eef1ee;
 }
 
 .mat-form-field {
@@ -59,7 +58,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -68,7 +67,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $large-column;
+    // width: $large-column;
     text-align: center;
 }
 
@@ -77,7 +76,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -86,7 +85,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -95,7 +94,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -104,7 +103,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -113,7 +112,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -122,7 +121,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -131,7 +130,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -140,7 +139,7 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }
 
@@ -149,6 +148,6 @@ h3 {
     flex-shrink: $flex-shrink;
     flex-grow: $flex-grow;
     flex-basis: $flex-shrink;
-    width: $small-column;
+    // width: $small-column;
     text-align: center;
 }