From c618b7e0b6aaa20f7747a688867ee7111767ed71 Mon Sep 17 00:00:00 2001 From: konrad Date: Wed, 5 Jan 2022 12:46:33 +0000 Subject: [PATCH] fix: namespace new buttons on mobile (#1262) Before: ![image](/attachments/7626e28d-8a13-4f92-b162-697676f765c7) After: ![image](/attachments/5331af47-4887-4ba5-98d7-ee70311e20d7) Co-authored-by: kolaente Co-authored-by: Dominik Pschenitschni Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1262 Reviewed-by: Dominik Pschenitschni Co-authored-by: konrad Co-committed-by: konrad --- cypress/integration/list/list.spec.js | 2 +- cypress/integration/list/namespaces.spec.js | 26 ++--- src/components/home/navigation.vue | 4 + src/i18n/lang/en.json | 8 +- src/styles/components/_index.scss | 3 +- src/styles/components/namespaces.scss | 4 - src/views/namespaces/ListNamespaces.vue | 108 +++++++++++--------- 7 files changed, 82 insertions(+), 73 deletions(-) delete mode 100644 src/styles/components/namespaces.scss diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js index 43939197..8b8630fd 100644 --- a/cypress/integration/list/list.spec.js +++ b/cypress/integration/list/list.spec.js @@ -31,7 +31,7 @@ describe('Lists', () => { cy.url() .should('contain', '/namespaces/1/list') cy.get('.card-header-title') - .contains('Create a new list') + .contains('New list') cy.get('input.input') .type('New List') cy.get('.button') diff --git a/cypress/integration/list/namespaces.spec.js b/cypress/integration/list/namespaces.spec.js index 12a3b27e..2ede493f 100644 --- a/cypress/integration/list/namespaces.spec.js +++ b/cypress/integration/list/namespaces.spec.js @@ -15,7 +15,7 @@ describe('Namepaces', () => { it('Should be all there', () => { cy.visit('/namespaces') - cy.get('.namespace h1 span') + cy.get('[data-cy="namespace-title"]') .should('contain', namespaces[0].title) }) @@ -23,14 +23,14 @@ describe('Namepaces', () => { const newNamespaceTitle = 'New Namespace' cy.visit('/namespaces') - cy.get('a.button') - .contains('Create a new namespace') + cy.get('[data-cy="new-namespace"]') + .should('contain', 'New namespace') .click() cy.url() .should('contain', '/namespaces/new') cy.get('.card-header-title') - .should('contain', 'Create a new namespace') + .should('contain', 'New namespace') cy.get('input.input') .type(newNamespaceTitle) cy.get('.button') @@ -72,7 +72,7 @@ describe('Namepaces', () => { cy.get('.namespace-container .menu.namespaces-lists') .should('contain', newNamespaceName) .should('not.contain', newNamespaces[0].title) - cy.get('.content.namespaces-list') + cy.get('[data-cy="namespaces-list"]') .should('contain', newNamespaceName) .should('not.contain', newNamespaces[0].title) }) @@ -116,30 +116,30 @@ describe('Namepaces', () => { // Initial cy.visit('/namespaces') - cy.get('.namespaces-list .namespace') + cy.get('.namespace') .should('not.contain', 'Archived') // Show archived - cy.get('.namespaces-list .fancycheckbox.show-archived-check label.check span') + cy.get('[data-cy="show-archived-check"] label.check span') .should('be.visible') .click() - cy.get('.namespaces-list .fancycheckbox.show-archived-check input') + cy.get('[data-cy="show-archived-check"] input') .should('be.checked') - cy.get('.namespaces-list .namespace') + cy.get('.namespace') .should('contain', 'Archived') // Don't show archived - cy.get('.namespaces-list .fancycheckbox.show-archived-check label.check span') + cy.get('[data-cy="show-archived-check"] label.check span') .should('be.visible') .click() - cy.get('.namespaces-list .fancycheckbox.show-archived-check input') + cy.get('[data-cy="show-archived-check"] input') .should('not.be.checked') // Second time visiting after unchecking cy.visit('/namespaces') - cy.get('.namespaces-list .fancycheckbox.show-archived-check input') + cy.get('[data-cy="show-archived-check"] input') .should('not.be.checked') - cy.get('.namespaces-list .namespace') + cy.get('.namespace') .should('not.contain', 'Archived') }) }) diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue index 84117027..adf0bff9 100644 --- a/src/components/home/navigation.vue +++ b/src/components/home/navigation.vue @@ -555,4 +555,8 @@ $vikunja-nav-selected-width: 0.4rem; width: 32px; flex-shrink: 0; } + +.namespaces-list.loader-container.is-loading { + min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem}); +} diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json index 35dbec8f..7e145529 100644 --- a/src/i18n/lang/en.json +++ b/src/i18n/lang/en.json @@ -7,7 +7,7 @@ "lastViewed": "Last viewed", "list": { "newText": "You can create a new list for your new tasks:", - "new": "Create a new list", + "new": "New list", "importText": "Or import your lists and tasks from other services into Vikunja:", "import": "Import your data into Vikunja" } @@ -157,7 +157,7 @@ "searchSelect": "Click or press enter to select this list", "shared": "Shared Lists", "create": { - "header": "Create a new list", + "header": "New list", "titlePlaceholder": "The list's title goes here…", "addTitleRequired": "Please specify a title.", "createdSuccess": "The list was successfully created.", @@ -315,7 +315,7 @@ "namespaces": "Namespaces", "search": "Type to search for a namespace…", "create": { - "title": "Create a new namespace", + "title": "New namespace", "titleRequired": "Please specify a title.", "explanation": "A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.", "tooltip": "What's a namespace?", @@ -383,7 +383,7 @@ "reminderRange": "Reminder Date Range" }, "create": { - "title": "Create A Saved Filter", + "title": "New Saved Filter", "description": "A saved filter is a virtual list which is computed from a set of filters each time it is accessed. Once created, it will appear in a special namespace.", "action": "Create new saved filter" }, diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index 99a3c5aa..ba87006b 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -2,5 +2,4 @@ @import "labels"; @import "list"; @import "task"; -@import "tasks"; -@import "namespaces"; \ No newline at end of file +@import "tasks"; \ No newline at end of file diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss deleted file mode 100644 index caead25e..00000000 --- a/src/styles/components/namespaces.scss +++ /dev/null @@ -1,4 +0,0 @@ -// FIXME: used in navigation.vue and in ListNamespaces.vue -.namespaces-list.loader-container.is-loading { - min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem}); -} \ No newline at end of file diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue index c31ee9cc..fdefe4f9 100644 --- a/src/views/namespaces/ListNamespaces.vue +++ b/src/views/namespaces/ListNamespaces.vue @@ -1,15 +1,19 @@