fix: namespace new buttons on mobile #1262
No reviewers
Labels
No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
No Milestone
No project
No Assignees
3 Participants
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: vikunja/frontend#1262
Loading…
Reference in New Issue
No description provided.
Delete Branch "fix/new-buttons"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Before:
After:
Hi konrad!
Thank you for creating a PR!
I've deployed the changes of this PR on a preview environment under this URL: https://1262-fixnew-buttons--vikunja-frontend-preview.netlify.app
You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
Have a nice day!
@ -73,3 +73,3 @@
.should('contain', newNamespaceName)
.should('not.contain', newNamespaces[0].title)
cy.get('.content.namespaces-list')
cy.get('.content')
Use a
v-cy
anchor for this:I think we should reduce the use of the content class from bulma.
By bulma it is meant as a wrapper class for blog like / prose content.
Done.
Agreed.
@ -1,4 +0,0 @@
// FIXME: used in navigation.vue and in ListNamespaces.vue
Nice! 🔥
@ -13,0 +5,4 @@
{{ $t('namespace.showArchived') }}
</fancycheckbox>
<div>
This
div
doesn't add a semantics and I can't find styles applied. What is it for?It's used to put the two buttons on the right side, since I applied
justify-content: space-between
to the container one level above.How about:
Or using a ul with li to add semantics.
That's a really nice trick! I've used an
ml-auto
class instead though, the:first-child
selector didn't work.@ -148,0 +138,4 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
The elements below have already a margin top. Can we remove it here?
Done.
@ -148,0 +147,4 @@
> * {
@media screen and (max-width: $tablet) {
margin-bottom: .5rem;
use
gap
Done.
@ -148,0 +151,4 @@
}
}
.new-namespace {
unindent class (no need because it's scoped).
Done.
@ -148,0 +152,4 @@
}
.new-namespace {
margin-left: 1rem;
Scope this for
min-width $tablet
so that we don't need an overwrite for smaller devices (mobile first)Done.
I had to override the width though.
79d5c65e1d
to5b6d8f5527
5b6d8f5527
to8a95bb7422