Added anchor column

Added an anchor column, so the user can open a separate tab.

prettified

Changed name of variable

Resolves answer from pull-request

- Moved the style for the anchor columns to `styles.scss`
- Set the anchor column to the last place in the array

client/src/app/site/motions/components/motion-list/motion-list.component.html

@@ -121,6 +121,14 @@
             </mat-cell>
         </ng-container>
 
+        <!-- Anchor column to open separate tab -->
+        <ng-container matColumnDef="anchor">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let motion">
+                <a [routerLink]="motion.id"></a>
+            </mat-cell>
+        </ng-container>
+
         <!-- Speakers column -->
         <ng-container matColumnDef="speakers">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
@@ -139,7 +147,6 @@
         <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
         <mat-row
             [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
-            (click)="selectItem(row, $event)"
             *matRowDef="let row; columns: getColumnDefinition()"
             class="lg"
         >

client/src/app/site/motions/components/motion-list/motion-list.component.ts

@@ -41,12 +41,12 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
     /**
      * Columns to display in table when desktop view is available
      */
-    public displayedColumnsDesktop: string[] = ['identifier', 'title', 'state'];
+    public displayedColumnsDesktop: string[] = ['identifier', 'title', 'state', 'anchor'];
 
     /**
      * Columns to display in table when mobile view is available
      */
-    public displayedColumnsMobile = ['identifier', 'title'];
+    public displayedColumnsMobile = ['identifier', 'title', 'anchor'];
 
     /**
      * Value of the configuration variable `motions_statutes_enabled` - are statutes enabled?

client/src/app/site/users/components/user-list/user-list.component.html

@@ -64,6 +64,14 @@
             </mat-cell>
         </ng-container>
 
+        <!-- Anchor column to open separate tab -->
+        <ng-container matColumnDef="anchor">
+            <mat-header-cell *matHeaderCellDef></mat-header-cell>
+            <mat-cell *matCellDef="let user">
+                <a [routerLink]="user.id"></a>
+            </mat-cell>
+        </ng-container>
+
         <!-- Presence column -->
         <ng-container matColumnDef="presence">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Presence</mat-header-cell>

client/src/app/site/users/components/user-list/user-list.component.ts

@@ -80,12 +80,12 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
     /**
      * Columns to display in table when desktop view is available
      */
-    public displayedColumnsDesktop: string[] = ['name', 'group'];
+    public displayedColumnsDesktop: string[] = ['name', 'group', 'anchor'];
 
     /**
      * Columns to display in table when mobile view is available
      */
-    public displayedColumnsMobile = ['name'];
+    public displayedColumnsMobile = ['name', 'anchor'];
 
     /**
      * Stores the observed configuration if the presence view is available to administrators

client/src/styles.scss

@@ -193,6 +193,7 @@ mat-card {
 
     /** size of the mat row  */
     mat-row {
+        position: relative;
         min-height: 60px;
     }
     mat-row.lg {
@@ -653,3 +654,25 @@ button.mat-menu-item.selected {
 .white {
     color: white;
 }
+
+/** Style for the anchor column */
+.mat-column-anchor {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.1;
+    z-index: 1;
+
+    a {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+/** functional items should lay over the anchor column */
+.mat-cell > * {
+    z-index: 2;
+}