Hide actions for changing projects and entries while in mobile view

Relates to MS-534

client/cypress/integration/frontend/portfolio/project-page.spec.js

@@ -184,9 +184,14 @@ describe('Project Page', () => {
     cy.getByDataCy('project-entry-more').should('not.exist');
   });
 
+  it('does not show button on mobile', () => {
+    cy.viewport('iphone-8');
+    cy.getByDataCy('project-title').should('exist');
+    cy.getByDataCy('add-project-entry').should('not.exist');
+  });
+
   describe('Project Entry', () => {
-    // todo: this test fails half of  the time in pipelines, fix and re-enable
-    it.skip('should create a new project entry', () => {
+    it('should create a new project entry', () => {
       cy.visit('/portfolio');
       cy.get('[data-cy=project-link]:first-of-type').click();
       cy.get('[data-cy=add-project-entry]:first-of-type').click();
@@ -237,6 +242,14 @@ describe('Project Page', () => {
       cy.getByDataCy('use-template-button').click();
       cy.getByDataCy('project-entry-textarea').should('have.value', PROJECT_ENTRY_TEMPLATE);
     });
+
+    it('should not display the entry actions on mobile', () => {
+      cy.viewport('iphone-8') ;
+      cy.visit('/portfolio/groot');
+      cy.getByDataCy('project-entry').should('exist');
+      cy.getByDataCy('project-entry-more').should('not.be.visible');
+      cy.getByDataCy('project-actions').should('not.be.visible');
+    });
   });
 })
 ;

client/cypress/integration/frontend/portfolio/projects-page.spec.js

@@ -83,7 +83,6 @@ describe('Projects page', () => {
         ],
       },
       AddProject: variables => {
-        console.log(variables);
         const {input: {project}} = variables;
         return {
           addProject: {
@@ -110,4 +109,20 @@ describe('Projects page', () => {
 
     cy.getByDataCy('project').should('have.length', 2);
   });
+
+  it('does not display button on mobile', () => {
+    const operations = {
+      MeQuery,
+      ProjectsQuery: {
+        projects: [],
+      },
+    };
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.viewport('iphone-8');
+
+    cy.getByDataCy('page-title').should('exist');
+    cy.getByDataCy('create-project-button').should('not.be.visible');
+  });
 });

client/src/components/portfolio/ProjectEntry.vue

@@ -53,6 +53,7 @@
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
   import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
   import {removeAtIndex} from '@/graphql/immutable-operations.ts';
+
   const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
 
 
@@ -98,8 +99,8 @@
                 const data = {
                   project: {
                     ...project,
-                    entries
-                  }
+                    entries,
+                  },
                 };
                 store.writeQuery({query, variables, data});
               }
@@ -145,6 +146,10 @@
       position: absolute;
       top: 10px;
       right: 10px;
+      display: none;
+      @include desktop {
+        display: block;
+      }
     }
 
   }

client/src/pages/portfolio/portfolio.vue

@@ -79,8 +79,11 @@
     padding: $large-spacing $medium-spacing;
 
     &__create-button {
-      display: inline-flex;
+      display: none;
       width: 150px;
+      @include desktop {
+        display: inline-flex;
+      }
     }
 
     &__page {

client/src/pages/portfolio/project.vue

@@ -164,6 +164,13 @@
       justify-self: end;
     }
 
+    &__more {
+      display: none;
+      @include desktop {
+        display: block;
+      }
+    }
+
     &__share {
       margin-right: $medium-spacing;
     }
@@ -179,6 +186,11 @@
 
     &__add-entry {
       height: 120px;
+
+      display: none;
+      @include desktop {
+        display:flex;
+      }
     }
 
     &__description {