diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 658a76235a720f7637d3ec906eaf3daa9bc26173..a01b321b339e5870fa56f03f689e19372170ddc6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
<template>
- <div id="app" class="h-100">
+ <div id="app">
<router-view></router-view>
</div>
</template>
@@ -15,10 +15,6 @@ export default {
<style>
-html, body {
- height: 100%;
-}
-
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@@ -26,6 +22,11 @@ html, body {
text-align: center;
background-color: #2d2d2d;
color: #fff;
+ height: 100vh !important;
+ max-height: 100vh !important;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.toast:not(.show) {
diff --git a/frontend/src/components/CustomListElement.vue b/frontend/src/components/CustomListElement.vue
index b955b5675d79db799ebee604daf8a5bfd1d8cb32..9d64bf14cd8fc2840eec184b44889ddaa86c321c 100644
--- a/frontend/src/components/CustomListElement.vue
+++ b/frontend/src/components/CustomListElement.vue
@@ -29,7 +29,6 @@ export default {
<!-- Bottom-left description -->
<div class="list-item-description mb-0">{{ description }}</div>
-
</div>
</template>
@@ -40,7 +39,7 @@ export default {
justify-content: flex-start;
position: relative;
padding: 10px;
- height: 100px; /* You can adjust height based on your layout */
+ height: 100px;
}
.list-item-header {
@@ -52,39 +51,8 @@ export default {
.list-item-description {
align-self: flex-start;
- margin-top: 20px; /* Pushes to the bottom */
+ margin-top: 20px;
margin-bottom: auto;
font-size: 1.3rem;
}
-
-.custom-badge-completed {
- position: absolute;
- right: 10px;
- top: 50%;
- padding-left: 20px;
- padding-right: 20px;
- transform: translateY(-50%); /* Vertically center the badge */
- background-color: #92ca19;
- border: 1px #7eb900 solid;
- border-radius: 15px;
-}
-
-.custom-badge-not-completed {
- position: absolute;
- right: 10px;
- top: 50%;
- padding-left: 20px;
- padding-right: 20px;
- transform: translateY(-50%); /* Vertically center the badge */
- background-color: #ffd133;
- border: 1px #caa219 solid;
- border-radius: 15px;
- color: black;
-}
-
-.custom-badge-not-completed:hover {
- background-color: #caa219;
- border: 1px #ffd133 solid;
- color: white;
-}
</style>
diff --git a/frontend/src/components/LoginPageAlternative.vue b/frontend/src/components/LoginPageAlternative.vue
deleted file mode 100644
index 8697a983f5e85bf61f02ce8f3f3d66258e8037c8..0000000000000000000000000000000000000000
--- a/frontend/src/components/LoginPageAlternative.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-
-</script>
-
-<template>
- <b-container id="main-container" class="d-flex h-100 justify-content-center align-items-center">
- <b-row id="main-row" class="d-flex justify-content-center align-items-center">
- <b-col id="main-col" class="h-100 justify-content-center align-items-center">
- <b-card class="h-100 border-1 shadow-lg justify-content-center align-items-center">
-
- </b-card>
- </b-col>
- </b-row>
- </b-container>
-</template>
-
-<style scoped>
-#main-row {
- height: 75%;
- width: 50%;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/MainPage.vue b/frontend/src/components/MainPage.vue
index 0b7441bf07f51616b0db34c9273515f91b465695..ad8a622c217be8cd808d49268618e677f01ba8ef 100644
--- a/frontend/src/components/MainPage.vue
+++ b/frontend/src/components/MainPage.vue
@@ -150,32 +150,25 @@ export default {
</script>
<template>
- <b-container class="d-flex h-100 justify-content-center align-items-center" id="main-container">
- <b-row id="main-row" class="d-flex justify-content-center align-items-center">
- <b-col class="h-100 justify-content-center align-items-center">
- <b-card id="main-card" class="h-100 border-1 shadow-lg" title="ToDo-App">
- <b-card-body class="mt-1">
+ <b-container class="main-container d-flex justify-content-center align-items-center">
+ <b-row class="main-row d-flex justify-content-center align-items-center">
+ <b-col class="main-col justify-content-center align-items-center">
+ <b-card class="main-card border-1 shadow-lg" title="ToDo-App">
+ <b-card-body class="main-card-body mt-1">
+
<b-button class="mb-4" variant="primary" @click="showAddModal = true">
Hinzufügen
</b-button>
- <b-modal v-model="showAddModal" title="Neuen Namen hinzufügen" @ok="addTodo" hide-header id="showAddModal">
- <b-form-group label="Titel">
- <b-form-input v-model="todo.title" placeholder="Name eingeben"></b-form-input>
- </b-form-group>
- <b-form-group label="Beschreibung">
- <b-form-input v-model="todo.description" placeholder="Beschreibung eingeben"></b-form-input>
- </b-form-group>
- </b-modal>
- <b-tabs class="mt-2 tab-content-scrollable">
- <b-tab title="Active ToDos">
- <ul class="list-group mt-3 h-100" v-if="items.length > 0">
+ <b-tabs class="tabs mt-2">
+ <b-tab class="tab" title="Active ToDos">
+ <ul class="main-list mt-3" v-if="items.length > 0">
<li v-for="(item, index) in items" :key="index" class="list-group-item">
<div class="d-flex justify-content-between align-items-center w-100">
<div class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div>
<div class="badge-container">
- <b-button @click="setTodoComplete(item.todoId)" class="custom-badge-not-completed">mark as completed</b-button>
+ <b-button variant="link" @click="setTodoComplete(item.todoId)" class="custom-badge-not-completed">mark as completed</b-button>
</div>
<b-button variant="danger" @click.stop="deleteTodo(item.todoId)">Delete</b-button>
</div>
@@ -183,8 +176,8 @@ export default {
</ul>
<p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
</b-tab>
- <b-tab title="Completed ToDos">
- <ul class="list-group mt-3 h-100" v-if="completedItems.length > 0">
+ <b-tab class="tab" title="Completed ToDos">
+ <ul class="main-list mt-3" v-if="completedItems.length > 0">
<li v-for="(item, index) in completedItems" :key="index" class="list-group-item">
<div class="d-flex justify-content-between align-items-center w-100">
<div class="flex-grow-1">
@@ -210,6 +203,14 @@ export default {
<p>{{this.todoIdForDeleteModal}}</p>
</b-modal>
+ <b-modal v-model="showAddModal" title="Neuen Namen hinzufügen" @ok="addTodo" hide-header id="showAddModal">
+ <b-form-group label="Titel">
+ <b-form-input v-model="todo.title" placeholder="Name eingeben"></b-form-input>
+ </b-form-group>
+ <b-form-group label="Beschreibung">
+ <b-form-input v-model="todo.description" placeholder="Beschreibung eingeben"></b-form-input>
+ </b-form-group>
+ </b-modal>
</b-card-body>
</b-card>
</b-col>
@@ -218,42 +219,33 @@ export default {
</template>
<style scoped>
-#main-row {
- height: 75%;
- width: 75%;
+
+.main-row {
+ height: 100%;
+ width: 80%;
}
-#main-card {
+.main-card {
background-color: #1c1c1c;
color: #fff;
+ height: 100%;
}
-.list-group {
- height: 70%;
- overflow-y: auto;
+.main-card-body {
+ height: 100%;
}
-.tab-content-scrollable {
- height: 70%;
- overflow-y: auto;
+.tabs {
+ height: 100%;
}
-.list-group-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: 1px gray solid;
- border-radius: 25px;
- width: 100%;
- margin-bottom: 2px;
-}
-
-.list-group-item:hover {
- background-color: #e9ecef;
+.tab {
+ height: 100%;
}
-.flex-grow-1 {
- flex-grow: 1;
+.main-list {
+ height: 600px;
+ overflow-y: auto;
}
.badge-container {
@@ -266,18 +258,24 @@ export default {
.custom-badge-completed,
.custom-badge-not-completed {
padding: 6px 10px;
- margin-left: 10px; /* Add some space between the badge and the element before it */
- border-radius: 15px;
+ margin-left: 10px;
}
.custom-badge-completed {
background-color: #92ca19;
- border: 1px #7eb900 solid;
+ color: #1c1c1c;
+ border-radius: 20px;
}
.custom-badge-not-completed {
background-color: #ffd133;
- border: 1px #caa219 solid;
- color: black;
+ color: #1c1c1c;
+ text-decoration: none !important;
+}
+
+.custom-badge-not-completed:hover {
+ background-color: #c29f27;
+ color: inherit;
+ text-decoration: none;
}
</style>
\ No newline at end of file