From 3f5d70587720b0cc2d3a5f40e43d0338b5744935 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 31 Aug 2021 21:22:45 +0200 Subject: [PATCH] Add portfolio onboarding page --- .../frontend/portfolio/projects-page.spec.js | 2 +- .../illustrations/PortfolioIllustration.vue | 347 ++++++------ .../illustrations/RoomsIllustration.vue | 526 +++++++----------- .../portfolio/PortfolioOnboarding.vue | 51 ++ .../src/components/rooms/RoomsOnboarding.vue | 19 +- .../src/graphql/gql/queries/allProjects.gql | 6 +- client/src/pages/portfolio/portfolio.vue | 35 +- client/src/styles/_mixins.scss | 26 + 8 files changed, 471 insertions(+), 541 deletions(-) create mode 100644 client/src/components/portfolio/PortfolioOnboarding.vue diff --git a/client/cypress/integration/frontend/portfolio/projects-page.spec.js b/client/cypress/integration/frontend/portfolio/projects-page.spec.js index 623f3d55..4c580227 100644 --- a/client/cypress/integration/frontend/portfolio/projects-page.spec.js +++ b/client/cypress/integration/frontend/portfolio/projects-page.spec.js @@ -22,7 +22,7 @@ describe('Projects page', () => { cy.getByDataCy('page-title').should('contain', 'Portfolio'); cy.getByDataCy('portfolio-onboarding-illustration').should('exist'); cy.getByDataCy('portfolio-onboarding-subtitle').should('contain', 'Woran denken Sie gerade'); - cy.getByDataCy('portfolio-onboarding-text').should('contain', 'Hier können Sie Projekte erstellen.'); + cy.getByDataCy('portfolio-onboarding-text').should('contain', 'Hier können Sie Projekte erstellen'); cy.getByDataCy('page-footer').should('not.exist'); cy.getByDataCy('create-project-button').should('exist'); }); diff --git a/client/src/components/illustrations/PortfolioIllustration.vue b/client/src/components/illustrations/PortfolioIllustration.vue index a041a90d..fb20d18c 100644 --- a/client/src/components/illustrations/PortfolioIllustration.vue +++ b/client/src/components/illustrations/PortfolioIllustration.vue @@ -1,234 +1,201 @@ diff --git a/client/src/components/illustrations/RoomsIllustration.vue b/client/src/components/illustrations/RoomsIllustration.vue index 25c124ed..7f90ba6c 100644 --- a/client/src/components/illustrations/RoomsIllustration.vue +++ b/client/src/components/illustrations/RoomsIllustration.vue @@ -1,370 +1,270 @@ diff --git a/client/src/components/portfolio/PortfolioOnboarding.vue b/client/src/components/portfolio/PortfolioOnboarding.vue new file mode 100644 index 00000000..964ac7c8 --- /dev/null +++ b/client/src/components/portfolio/PortfolioOnboarding.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/client/src/components/rooms/RoomsOnboarding.vue b/client/src/components/rooms/RoomsOnboarding.vue index 13ca43ca..66fbf1f4 100644 --- a/client/src/components/rooms/RoomsOnboarding.vue +++ b/client/src/components/rooms/RoomsOnboarding.vue @@ -47,31 +47,18 @@ @import '~styles/helpers'; .rooms-onboarding { - display: flex; - width: 100vw; - max-width: 800px; - flex-direction: column; - justify-self: center; - margin: 0 auto; - grid-column: 1 / -1; - align-items: center; + @include onboarding-page; &__heading { margin-bottom: $large-spacing; } &__illustration { - width: 400px; - height: 320px; - flex-shrink: 0; - margin-bottom: $large-spacing; + @include onboarding-illustration; } &__text { - @include regular-text; - text-align: center; - max-width: 500px; - margin-bottom: $large-spacing; + @include onboarding-text; } } diff --git a/client/src/graphql/gql/queries/allProjects.gql b/client/src/graphql/gql/queries/allProjects.gql index 82f30894..b626a7ca 100644 --- a/client/src/graphql/gql/queries/allProjects.gql +++ b/client/src/graphql/gql/queries/allProjects.gql @@ -1,10 +1,6 @@ #import "../fragments/projectParts.gql" query ProjectsQuery { projects { - edges { - node { - ...ProjectParts - } - } + ...ProjectParts } } diff --git a/client/src/pages/portfolio/portfolio.vue b/client/src/pages/portfolio/portfolio.vue index 3f956f83..4e4e410f 100644 --- a/client/src/pages/portfolio/portfolio.vue +++ b/client/src/pages/portfolio/portfolio.vue @@ -1,19 +1,23 @@ @@ -23,9 +27,11 @@ import ME_QUERY from '@/graphql/gql/queries/meQuery.gql'; import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql'; + import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding'; export default { components: { + PortfolioOnboarding, ProjectWidget, AddProject }, @@ -33,9 +39,6 @@ apollo: { projects: { query: PROJECTS_QUERY, - update(data) { - return this.$getRidOfEdges(data).projects; - }, pollInterval: 5000, }, me: { diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss index 1c1b2480..4b6848b0 100644 --- a/client/src/styles/_mixins.scss +++ b/client/src/styles/_mixins.scss @@ -78,6 +78,7 @@ @content } } + @mixin light-border($border-position) { border-#{$border-position}: 1px solid $color-silver; } @@ -188,3 +189,28 @@ border: 0; min-height: 110px; } + +@mixin onboarding-illustration { + width: 400px; + height: 320px; + flex-shrink: 0; + margin-bottom: $large-spacing; +} + +@mixin onboarding-page { + display: flex; + width: 100vw; + max-width: 800px; + flex-direction: column; + justify-self: center; + margin: 0 auto; + grid-column: 1 / -1; + align-items: center; +} + +@mixin onboarding-text { + @include regular-text; + text-align: center; + max-width: 500px; + margin-bottom: $large-spacing; +}