fix layout and restrict text inputs length

ErwanDL · May 13, 2020 · dbd2bb4 · dbd2bb4
1 parent c75bd2b
commit dbd2bb4
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/front/src/components/NewCardButton.vue b/front/src/components/NewCardButton.vue
@@ -15,6 +15,7 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .container {
     display: flex;
+    width: $card-width;
     flex-direction: column;
     align-items: center;
     padding: 1em;

diff --git a/front/src/components/Subtask.vue b/front/src/components/Subtask.vue
@@ -5,9 +5,10 @@
         </div>
         <div :class="['inputs', { strikeout: completed }]">
             <BaseTextInput
+                class="description-input"
                 :value="description"
                 @blur="update('description', $event)"
-                :max-length="50"
+                :max-length="40"
             />
             <div class="duration">
                 <BaseTextInput
@@ -84,6 +85,7 @@ export default Vue.extend({
 .inputs {
     position: relative;
     display: flex;
+    flex-grow: 1;
     &::after {
         content: " ";
         position: absolute;
@@ -94,6 +96,10 @@ export default Vue.extend({
     }
 }
 
+.description-input {
+    flex-grow: 1;
+}
+
 .duration {
     display: flex;
     align-items: center;

diff --git a/front/src/components/TaskCard.vue b/front/src/components/TaskCard.vue
@@ -7,9 +7,9 @@
                         margin-top: 0.3em;
                         margin-bottom: 1em;"
             @blur="update('title', $event)"
-            :max-length="30"
+            :max-length="25"
         />
-        <div v-if="task.subtasks.length > 0">
+        <div class="subtasks" v-if="task.subtasks.length > 0">
             <div class="list-header">
                 <div>Subtasks</div>
                 <div>Duration</div>
@@ -117,6 +117,12 @@ export default Vue.extend({
     width: $card-width;
 }
 
+.subtasks {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
 .list-header {
     display: flex;
     flex-direction: row;

diff --git a/front/src/components/base/BaseCard.vue b/front/src/components/base/BaseCard.vue
@@ -20,7 +20,6 @@ export default Vue.extend({
     border: none;
     border-radius: 5px;
     padding: 1em;
-    margin: 1em;
     display: flex;
     flex-direction: column;
     align-items: flex-start;

diff --git a/front/src/views/Tasks.vue b/front/src/views/Tasks.vue
@@ -4,11 +4,12 @@
             <TaskCard
                 @update="updateTask($event, index)"
                 @delete="deleteTask(index)"
+                class="card"
                 :key="task.id"
                 :task="task"
             />
         </template>
-        <NewCardButton @click="pushNewTask()" class="new-card-button" />
+        <NewCardButton @click="pushNewTask()" class="card" />
     </div>
     <h2 align="center" style="margin: 20%;" v-else>
         There is no registered user with the name {{ user }}. Ensure you have
@@ -107,7 +108,7 @@ export default Vue.extend({
     flex-wrap: wrap;
 }
 
-.new-card-button {
-    margin: 60px 120px 60px 120px;
+.card {
+    margin: 20px;
 }
 </style>