From 85ef1bc092d67ca1203b3e2b2f1154ceb41b57fc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Jul 2022 00:02:24 +0200
Subject: [PATCH] Remove items for editing on mobile for rooms and entries

Relates to MS-534
---
 .../frontend/rooms/article-page.spec.js           | 10 ++++++++++
 .../integration/frontend/rooms/room-page.spec.js  | 15 +++++++++++++++
 client/src/components/rooms/RoomActions.vue       |  5 +++++
 client/src/components/rooms/RoomEntry.vue         |  5 +++++
 client/src/pages/article.vue                      |  5 ++++-
 client/src/styles/_article.scss                   |  8 ++++++++
 6 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/client/cypress/integration/frontend/rooms/article-page.spec.js b/client/cypress/integration/frontend/rooms/article-page.spec.js
index 692b9101..5ef7e1d3 100644
--- a/client/cypress/integration/frontend/rooms/article-page.spec.js
+++ b/client/cypress/integration/frontend/rooms/article-page.spec.js
@@ -69,4 +69,14 @@ describe('Article page', () => {
     cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();
     cy.getByDataCy('comment').first().should('contain', commentText + emoji);
   });
+
+  it('does not show input field on mobile', () => {
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.viewport('iphone-8');
+    cy.visit(`/article/${slug}`);
+    cy.getByDataCy('article-title').should('exist');
+    cy.getByDataCy('comment-textarea').should('not.be.visible');
+  });
 });
diff --git a/client/cypress/integration/frontend/rooms/room-page.spec.js b/client/cypress/integration/frontend/rooms/room-page.spec.js
index bad29605..78895913 100644
--- a/client/cypress/integration/frontend/rooms/room-page.spec.js
+++ b/client/cypress/integration/frontend/rooms/room-page.spec.js
@@ -383,6 +383,21 @@ describe('The Room Page (student)', () => {
     cy.getByDataCy('room-entry').should('have.length', 1).within(() => {
       cy.getByDataCy('entry-count').should('contain.text', '2');
     });
+  });
 
+  it('does not show actions on mobile', () => {
+    const operations = {
+      MeQuery,
+      RoomEntriesQuery,
+    };
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.viewport('iphone-8');
+
+    cy.visit(`/room/${slug}`);
+    cy.getByDataCy('room-actions').should('not.exist');
+    cy.getByDataCy('room-entry').should('have.length', 1);
+    cy.getByDataCy('room-entry-actions').should('not.be.visible');
   });
 });
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index 44f48bc5..895ca287 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/client/src/components/rooms/RoomActions.vue
@@ -1,6 +1,7 @@
 <template>
   <more-actions
     v-slot="{toggle}"
+    class="room-actions"
     data-cy="room-actions"
   >
     <popover-link
@@ -122,6 +123,10 @@
 
   .room-actions {
     height: $height;
+    display: none;
+    @include desktop {
+      display: block;
+    }
 
     &__more-link {
       cursor: pointer;
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 15e72395..3f3f3b67 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -132,6 +132,11 @@
       position: absolute;
       top: 10px;
       right: 10px;
+      display: none;
+
+      @include desktop {
+        display: block;
+      }
     }
 
     &__footer {
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index de281c59..49474e3a 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -4,7 +4,10 @@
       <div class="article__meta">
         <user-meta-widget v-bind="roomEntry.author" />
       </div>
-      <h1 class="article__title">
+      <h1
+        data-cy="article-title"
+        class="article__title"
+      >
         {{ roomEntry.title }}
       </h1>
     </div>
diff --git a/client/src/styles/_article.scss b/client/src/styles/_article.scss
index 7756217d..b7ed7925 100644
--- a/client/src/styles/_article.scss
+++ b/client/src/styles/_article.scss
@@ -47,4 +47,12 @@
       line-height: 1.5;
     }
   }
+
+  &__comments {
+    display: none;
+
+    @include desktop {
+      display: flex;
+    }
+  }
 }