Merged in feature/mobile-improvements-MS-534-MS-535-MS-525-MS-528-MS-529-MS-527 (pull request #113)

Feature/mobile improvements MS-534 MS 535 MS 525 MS 528 MS 529 MS 527

Approved-by: Lorenz Padberg

client/cypress/integration/frontend/modules/assignment-in-module.spec.js

@@ -0,0 +1,77 @@
+import {getMinimalMe} from '../../../support/helpers';
+
+// const operations = {
+//   MeQuery: getMinimalMe({isTeacher: false}),
+// };
+const MeQuery = getMinimalMe();
+
+describe('Content Blocks', () => {
+  const slug = 'some-module';
+  const assignment = {
+    id: 'abc',
+    title: 'Some assignment',
+    assignment: 'Please write down your thoughts',
+    submission: null,
+  };
+  const module = {
+    title: 'Hello world',
+    slug,
+    solutionsEnabled: false,
+    chapters: [{
+      contentBlocks: [
+        {
+          title: 'A content block',
+          contents: [
+            {
+              type: 'text_block',
+              value: {
+                text: 'Ein Text',
+              },
+            },
+            {
+              type: 'assignment',
+              value: assignment,
+            },
+          ],
+        },
+      ],
+    }],
+  };
+  const operations = {
+    ModuleDetailsQuery: {
+      module,
+    },
+    MeQuery,
+    ModuleEditModeQuery: {
+      module: {
+        slug,
+      },
+    },
+    UpdateLastModule: {
+      module,
+    },
+    AssignmentQuery: {
+      assignment,
+    },
+    UpdateAssignmentWithSuccess: {
+      updateAssignment: {
+        successful: true,
+        updatedAssignment: assignment
+      },
+    },
+  };
+  beforeEach(() => {
+    cy.setup();
+    cy.mockGraphqlOps({operations});
+    cy.visit(`module/${slug}`);
+  });
+
+  it('types into the assignment input', () => {
+    cy.getByDataCy('submission-textarea').should('exist').type('My Solution');
+  });
+
+  it('does not see assignment input on mobile', () => {
+    cy.viewport('iphone-8');
+    cy.getByDataCy('submission-textarea').should('not.be.visible');
+  });
+});

client/cypress/integration/frontend/modules/custom-content-block.spec.js

@@ -9,7 +9,14 @@ const chapters = [{
       title: 'A ContentBlock',
       userCreated: true,
       mine: true,
-      contents: [],
+      contents: [
+        {
+          type: 'text_block',
+          value: {
+            text: 'Hello World'
+          }
+        }
+      ],
     },
   ],
 }];
@@ -21,6 +28,11 @@ const operations = {
       chapters,
     },
   },
+  ModuleEditModeQuery: {
+    module: {
+      slug: 'some-module',
+    }
+  },
   DeleteContentBlock: {
     success: true,
   },
@@ -32,6 +44,7 @@ describe('Custom Content Block', () => {
     cy.setup();
   });
 
+  // todo: fix this test
   it.skip('Deletes the custom content block and removes it from the view', () => {
     cy.mockGraphqlOps({
       operations,

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/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');
+  });
 });

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');
   });
 });

client/src/components/book-navigation/ContentNavigation.vue

@@ -15,7 +15,7 @@
           {{ $flavor.textTopics }}
         </router-link>
 
-        <book-topic-navigation
+        <topic-navigation
           v-if="isSidebar"
         />
       </div>
@@ -97,7 +97,7 @@
 </template>
 
 <script>
-  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+  import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
@@ -114,7 +114,7 @@
     mixins: [sidebarMixin, meMixin],
 
     components: {
-      BookTopicNavigation,
+      TopicNavigation,
       Logo
     },
 

client/src/components/book-navigation/TopicNavigation.vue

@@ -1,11 +1,11 @@
 <template>
-  <nav class="book-topics">
+  <nav class="topic-navigation">
     <router-link
       :to="{name: 'topic', params: {topicSlug: topic.slug}}"
-      :class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
+      :class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
       tag="div"
       active-class="book-subnavigation__item--active"
-      class="book-topics__topic book-subnavigation__item"
+      class="topic-navigation__topic book-subnavigation__item"
       v-for="topic in topics"
       :key="topic.id"
       @click.native="closeSidebar('navigation')"
@@ -58,7 +58,7 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
-  .book-topics {
+  .topic-navigation {
     &__topic {
     }
   }

client/src/components/content-blocks/assignment/Assignment.vue

@@ -144,11 +144,12 @@
                 const variables = {
                   id: updatedAssignment.id,
                 };
-                const data = store.readQuery({query, variables});
-
-                data.assignment = Object.assign({}, updatedAssignment, {
+                const assignment = Object.assign({}, updatedAssignment, {
                   submission,
                 });
+                const data = {
+                  assignment
+                };
                 store.writeQuery({query, variables, data});
               }
             } catch (e) {

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -127,6 +127,11 @@
 
     margin-bottom: $medium-spacing;
 
+    display: none;
+    @include desktop {
+      display: block;
+    }
+
     &__inputs {
       margin-bottom: 12px;
     }

client/src/components/modules/Module.vue

@@ -67,7 +67,6 @@
   import BookmarkActions from '@/components/notes/BookmarkActions';
 
   export default {
-
     props: {
       module: {
         type: Object,
@@ -137,8 +136,8 @@
 
     &__intro {
       > /deep/ p {
-        font-size: toRem(25px);
         margin-bottom: $large-spacing;
+        @include lead-paragraph;
 
         &:last-child {
           margin-bottom: 0;

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/components/profile/Avatar.vue

@@ -73,7 +73,9 @@
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
-            profile: false
+            sidebar: {
+              profile: false
+            }
           }
         });
       }

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;

client/src/components/rooms/RoomEntry.vue

@@ -132,6 +132,11 @@
       position: absolute;
       top: 10px;
       right: 10px;
+      display: none;
+
+      @include desktop {
+        display: block;
+      }
     }
 
     &__footer {

client/src/graphql/gql/queries/modules/moduleDetailsQuery.gql

@@ -1,5 +1,4 @@
 #import "gql/fragments/chapterParts.gql"
-#import "gql/fragments/assignmentParts.gql"
 #import "gql/fragments/objectiveGroupParts.gql"
 #import "gql/fragments/objectiveParts.gql"
 #import "gql/fragments/moduleParts.gql"
@@ -8,9 +7,6 @@
 query ModuleDetailsQuery($slug: String, $id: ID) {
   module(slug: $slug, id: $id) {
     ...ModuleParts
-    assignments {
-      ...AssignmentParts
-    }
     objectiveGroups {
       ...ObjectiveGroupParts
       objectives {

client/src/layouts/SimpleLayout.vue

@@ -92,6 +92,9 @@
     display:flex;
     justify-content:end;
 
+    margin-right: $small-spacing;
+    margin-top: $small-spacing;
+
     @include desktop {
       grid-column: 3;
       grid-row: 1;

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>

client/src/pages/module/module.vue

@@ -220,7 +220,3 @@
     },
   };
 </script>
-
-<style scoped lang="scss">
-
-</style>

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 {

client/src/pages/topic-page.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topic">
     <div class="topic__navigation">
-      <book-topic-navigation />
+      <topic-navigation />
     </div>
 
     <div class="topic__content">
@@ -48,7 +48,7 @@
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
-  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+  import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
@@ -60,7 +60,7 @@
 
     mixins: [me],
     components: {
-      BookTopicNavigation,
+      TopicNavigation,
       ModuleTeaser,
       PlayIcon,
       BulbIcon,
@@ -154,10 +154,17 @@
   .topic {
     display: grid;
     padding: $large-spacing 0;
-    grid-template-columns: 300px 1fr;
+    grid-template-columns: 1fr;
+    @include desktop {
+      grid-template-columns: 300px 1fr;
+    }
 
     &__navigation {
       padding: 0 $medium-spacing;
+      display: none;
+      @include desktop {
+        display: block;
+      }
     }
 
     &__teaser {

client/src/styles/_article.scss

@@ -47,4 +47,12 @@
       line-height: 1.5;
     }
   }
+
+  &__comments {
+    display: none;
+
+    @include desktop {
+      display: flex;
+    }
+  }
 }

client/src/styles/mixins/_typography.scss

@@ -1,37 +1,46 @@
+$largest-font: toRem(64px);
+$larger-font: toRem(44px);
+$large-font-size: toRem(34px);
+$slightly-large-font-size: toRem(24px);
+$regular-font-size: toRem(18px);
+$slightly-small-font-size: toRem(16px);
+$small-font-size: toRem(14px);
+$tiny-font-size: toRem(11px);
+
 @mixin main-title {
   font-family: $sans-serif-font-family;
   font-weight: 800;
-  font-size: toRem(64px);
+  font-size: $largest-font;
 }
 
 @mixin heading-1 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(44px);
+  font-size: $larger-font;
 }
 
 @mixin heading-2 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(34px);
+  font-size: $large-font-size;
 }
 
 @mixin heading-3 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(24px);
+  font-size: $slightly-large-font-size;
 }
 
 @mixin heading-4 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
 }
 
 @mixin sub-heading {
   font-family: $sans-serif-font-family;
   font-weight: 400;
-  font-size: toRem(16px);
+  font-size: $slightly-small-font-size;
 }
 
 @mixin modal-heading {
@@ -43,18 +52,18 @@
 @mixin regular-text {
   font-family: $sans-serif-font-family;
   font-weight: 400;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
 }
 
 @mixin small-text {
   font-family: $sans-serif-font-family;
   font-weight: 400;
   //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
-  font-size: toRem(14px);
+  font-size: $small-font-size;
 }
 
 @mixin tiny-text {
-  font-size: toRem(11px);
+  font-size: $tiny-font-size;
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   color: $color-silver-dark;
@@ -62,7 +71,7 @@
 
 @mixin aside-text {
   @include regular-text;
-  font-size: toRem(14px);
+  font-size: $small-font-size;
 }
 
 @mixin aside-with-cheese {
@@ -73,19 +82,19 @@
 @mixin navigation-link {
   font-family: $sans-serif-font-family;
   color: $color-charcoal-dark;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
   font-weight: 600;
 }
 
 @mixin large-link {
   font-family: $sans-serif-font-family;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
   font-weight: 400;
 }
 
 @mixin meta-title {
   color: $color-silver-dark;
-  font-size: toRem(36px);
+  font-size: $large-font-size;
   font-weight: 300;
   font-family: $serif-font-family;
   line-height: $default-heading-line-height;
@@ -99,16 +108,19 @@
 @mixin lead-paragraph {
   font-family: $serif-font-family;
   line-height: 1.4;
-  font-size: toRem(26px);
+  font-size: $regular-font-size;
+  @include desktop {
+    font-size: $slightly-large-font-size;
+  }
 }
 
 @mixin regular-paragraph {
   font-family: $serif-font-family;
-  font-size: toRem(18px);
+  font-size: $regular-font-size;
 }
 
 @mixin link-base {
-  font-size: toRem(14px);
+  font-size: $slightly-small-font-size;
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   cursor: pointer;