Update mobile styling for project list and detail pages

Resolves MS-532

client/package.json

@@ -25,7 +25,9 @@
     "install:cypress": "cypress install",
     "test:unit": "jest",
     "cypress:parallel": "CYPRESS_API_URL=\"https://iterativ-cypress-director.herokuapp.com/\" cy2 run --parallel --record --key somekey --config-file cypress.frontend.json --ci-build-id some-id",
-    "cypress:parallel:run": "cy2 run --parallel --record  --config-file cypress.frontend.json --ci-build-id "
+    "cypress:parallel:run": "cy2 run --parallel --record  --config-file cypress.frontend.json --ci-build-id ",
+    "prettier": "prettier . --write",
+    "prettier:check": "prettier . --check"
   },
   "dependencies": {
     "@apollo/client": "^3.5.8",

client/src/components/portfolio/ProjectListItem.vue

@@ -10,7 +10,7 @@
 
       <owner-widget :owner="project.student" class="project__owner" />
 
-      <entry-count-widget :verbose="false" :entry-count="project.entriesCount" />
+      <entry-count-widget class="project__entry-count" :verbose="false" :entry-count="project.entriesCount" />
     </router-link>
     <project-actions
       :final="project.final"
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import OwnerWidget from '@/components/portfolio/OwnerWidget';
+import OwnerWidget from '@/components/portfolio/OwnerWidget.vue';
-import ProjectActions from '@/components/portfolio/ProjectActions';
+import ProjectActions from '@/components/portfolio/ProjectActions.vue';
-import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
 
 import me from '@/mixins/me';
 
@@ -65,18 +65,43 @@ export default {
   border-bottom: 1px solid $color-silver;
 
   &__link {
-    flex: 80%;
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: auto;
+    row-gap: $small-spacing;
+    align-items: flex-start;
+    flex-direction: column;
+    @include desktop {
       display: flex;
+      flex: 80%;
+      flex-direction: row;
       align-items: center;
     }
+  }
 
   &__title {
     flex: 50%;
     @include heading-4;
+    grid-column: 1 / span 2;
   }
 
   &__owner {
     flex: 40%;
+    grid-column: 1 / span 1;
+  }
+
+  &__actions {
+    display: none;
+
+    @include desktop {
+      display: block;
+    }
+  }
+
+  &__entry-count {
+    justify-self: flex-end;
+    grid-column: 2 / span 1;
   }
 }
 </style>

client/src/pages/portfolio/project.vue

@@ -121,27 +121,44 @@ export default {
 
 .project {
   &__header {
+    padding: $medium-spacing;
+    @include desktop {
       padding: $large-spacing;
+    }
     border-bottom: 1px solid $color-silver;
 
     display: grid;
+    grid-template-areas:
+      'b'
+      't'
+      'd'
+      'm'
+      'a';
+    @include desktop {
       grid-template-areas:
         'b a'
         't t'
         'd d'
         'm m';
     }
+  }
 
   &__back {
     grid-area: b;
+    margin-bottom: $medium-spacing;
+    @include desktop {
+      margin-bottom: 0;
+    }
   }
 
   &__actions {
     grid-area: a;
     display: flex;
 
+    @include desktop {
       justify-self: end;
     }
+  }
 
   &__more {
     display: none;
@@ -181,21 +198,29 @@ export default {
 
     display: flex;
     flex-direction: column;
+    margin-bottom: $medium-spacing;
+
     @include desktop {
       flex-direction: row-reverse;
+      align-items: center;
+      margin-bottom: 0;
     }
     justify-content: flex-start;
     position: relative;
-    align-items: center;
-
     & > :first-child {
+      margin-bottom: $medium-spacing;
+      @include desktop {
         margin-left: $large-spacing;
+        margin-bottom: 0;
+      }
     }
 
     & > :nth-child(2) {
+      @include desktop {
         margin-left: $large-spacing;
       }
     }
+  }
 
   &__content {
     display: flex;