From 964fdeb2e8b10268d006a4f0004dc1dc4543ba6f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 29 Dec 2021 21:27:24 +0100
Subject: [PATCH] fix: namespace new buttons on mobile

---
 src/components/home/navigation.vue      |   4 +
 src/styles/components/_index.scss       |   3 +-
 src/styles/components/namespaces.scss   |   4 -
 src/views/namespaces/ListNamespaces.vue | 107 ++++++++++++++----------
 4 files changed, 66 insertions(+), 52 deletions(-)
 delete mode 100644 src/styles/components/namespaces.scss

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});
+}
 </style>
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..4ee8d9fd 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -1,15 +1,19 @@
 <template>
-	<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
-		<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
-			{{ $t('namespace.create.title') }}
-		</x-button>
-		<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
-			{{ $t('filters.create.title') }}
-		</x-button>
+	<div class="content loader-container" :class="{'is-loading': loading}">
+		<div class="create-buttons">
+			<fancycheckbox v-model="showArchived" @change="saveShowArchivedState">
+				{{ $t('namespace.showArchived') }}
+			</fancycheckbox>
 
-		<fancycheckbox class="show-archived-check" v-model="showArchived" @change="saveShowArchivedState">
-			{{ $t('namespace.showArchived') }}
-		</fancycheckbox>
+			<div>
+				<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
+					{{ $t('filters.create.title') }}
+				</x-button>
+				<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
+					{{ $t('namespace.create.title') }}
+				</x-button>
+			</div>
+		</div>
 
 		<p class="has-text-centered has-text-grey mt-4 is-italic" v-if="namespaces.length === 0">
 			{{ $t('namespace.noneAvailable') }}
@@ -103,47 +107,58 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.namespaces-list {
-  .button.new-namespace {
-    float: right;
-    margin-left: 1rem;
+.namespace {
+	&:not(:last-child) {
+		margin-bottom: 1rem;
+	}
 
-    @media screen and (max-width: $mobile) {
-      float: none;
-      width: 100%;
-      margin-bottom: 1rem;
-    }
-  }
+	h1 {
+		display: flex;
+		align-items: center;
+	}
 
-  .show-archived-check {
-    margin-bottom: 1rem;
-  }
+	.is-archived {
+		font-size: 0.75rem;
+		border: 1px solid var(--grey-500);
+		color: $grey !important;
+		padding: 2px 4px;
+		border-radius: 3px;
+		font-family: $vikunja-font;
+		background: var(--white-translucent);
+		margin-left: .5rem;
+	}
 
-  .namespace {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
+	.lists {
+		display: flex;
+		flex-flow: row wrap;
+	}
+}
 
-    h1 {
-      display: flex;
-      align-items: center;
-    }
+.create-buttons {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: .5rem;
 
-    .is-archived {
-      font-size: 0.75rem;
-      border: 1px solid var(--grey-500);
-      color: $grey !important;
-      padding: 2px 4px;
-      border-radius: 3px;
-      font-family: $vikunja-font;
-      background: var(--white-translucent);
-      margin-left: .5rem;
-    }
+	@media screen and (max-width: $tablet) {
+		width: 100%;
+		flex-direction: column;
+	}
 
-    .lists {
-      display: flex;
-      flex-flow: row wrap;
-    }
-  }
+	> * {
+		@media screen and (max-width: $tablet) {
+			margin-bottom: .5rem;
+		}
+	}
+
+	.new-namespace {
+		margin-left: 1rem;
+
+		@media screen and (max-width: $tablet) {
+			width: 100%;
+			margin-left: 0;
+			margin-bottom: .5rem;
+		}
+	}
 }
 </style>
\ No newline at end of file