Restructure card content

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.html

@@ -52,23 +52,20 @@
     <span [textContent]="wpProjectName(workPackage)"
           class="op-wp-single-card--content-project-name">
     </span>
-    <span [textContent]="wpTypeAttribute(workPackage)"
-          class="op-wp-single-card--content-type"
-          data-qa-selector="op-wp-single-card--content-type"
-          [ngClass]="typeHighlightingClass(workPackage)">
+    <span class="op-wp-single-card--content-id">
+      #{{workPackage.id}} -
     </span>
+
     <span class="op-wp-single-card--content-subject"
           data-qa-selector="op-wp-single-card--content-subject">
-      <a class="op-wp-single-card--content-id"
-         [href]="fullWorkPackageLink(workPackage)"
-         [ngClass]="uiStateLinkClass"
-         (click)="emitStateLinkClicked($event, workPackage)"
-      >
-        #{{workPackage.id}}
-      </a>
-      <span [textContent]="wpSubject(workPackage)">
-      </span>
+      <span [textContent]="wpTypeAttribute(workPackage)"
+            class="op-wp-single-card--content-type"
+            data-qa-selector="op-wp-single-card--content-type"
+            [ngClass]="typeHighlightingClass(workPackage)">
+      </span>&nbsp;
+      <span [textContent]="wpSubject(workPackage)"></span>
     </span>
+
     <img *ngIf="this.cardCoverImageShown(workPackage)"
          [src]="this.bcfSnapshotPath(workPackage)"
          class="op-wp-single-card--content-cover-image">
@@ -80,7 +77,7 @@
     <op-principal
       *ngIf="workPackage.assignee"
       [principal]="workPackage.assignee"
-      [hideName]="true"
+      [hideName]="false"
       [link]="false"
       size="mini"
       class="op-wp-single-card--content-assignee"

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass

@@ -39,11 +39,11 @@
 
     &:not(.-new)
       display: grid
-      grid-template-columns: max-content max-content max-content max-content 1fr
-      grid-template-rows: auto auto 1fr auto
+      grid-template-columns: max-content max-content auto auto 1fr
+      grid-template-rows: auto max-content max-content 1fr
       grid-row-gap: 5px
       grid-column-gap: 5px
-      grid-template-areas: "project type status status status" "subject subject subject subject subject" "image image image image image" "avatar avatar avatar dates dates"
+      grid-template-areas: "status id project project project" "subject subject subject subject subject" "image image image image image" "avatar avatar avatar dates dates"
       overflow: hidden
       flex-grow: 1
       font-size: 14px
@@ -53,8 +53,8 @@
       grid-area: project
       font-style: italic
       color: var(--gray-dark)
+      font-size: 12px
       @include text-shortener
-      max-width: 80px
     &-type
       grid-area: type
     &-subject
@@ -62,7 +62,11 @@
       @include text-shortener(false)
     &-assignee
       grid-area: avatar
-      place-self: center left
+      max-width: 140px
+      color: var(--gray-dark)
+      font-size: 12px
+    &-id
+      grid-area: id
       color: var(--gray-dark)
       font-size: 12px
     &-status