fixed small bugs and made comment fields bigger

This commit is contained in:
2024-04-02 14:53:14 +02:00
parent 423ff7e48b
commit aaa3bba79f
20 changed files with 502 additions and 412 deletions

View File

@ -17,7 +17,7 @@
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr v-for="todo in mvtTodos" :key="todo.primaryID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
{{ todo.rowID }}
@ -42,17 +42,15 @@
<input type="text" v-model="todo.task" @change="updateMVTTodo(todo)"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</td>
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
todo.commets
}}</td>
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
type="text" v-model="todo.commets" @change="updateMVTTodo(todo)"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
<textarea type="text" v-model="todo.commets" :readonly="!editable" @change="updateMVTTodo(todo)"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
<button v-if="editable"
:class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
@click="deleteMVTTodo(todo.primaryID)">-</button>
</td>
</tr>
<tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
<tr v-if="editable && addRow" :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
id="row-1">
<td
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@ -72,10 +70,10 @@
<input type="text" v-model="newTaskTodo"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
v-model="newCommentsTodo"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
:class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
<textarea type="text" v-model="newCommentsTodo"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
<button :class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
@click="addMVTTodo()">Save</button> <button
:class="[darkMode ? 'deleteLastMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
@click="deleteNewRow()">-</button>
@ -106,7 +104,7 @@
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr v-for="(newT, index) in newTodos" :key="index"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
{{ newT.rowID }}
@ -125,10 +123,10 @@
<input type="text" v-model="newT.task"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
v-model="newT.comments"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
:class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
<textarea type="text" v-model="newT.comments"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
<button :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
@click="deleteMVTTodoFromNewTodos(index)">-</button>
</td>
</tr>
@ -522,6 +520,14 @@ export default {
gap: 0.625rem;
}
.table-row-data {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
@ -549,6 +555,10 @@ td {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
td {
height: 5rem;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
@ -651,9 +661,11 @@ th {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
border: none;
border-radius: 0.625rem;
margin-left: 10rem;
margin-left: 1rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
height: 2.1rem;
margin-top: 1.5rem;
}
.saveNewMVT-darkmode {
@ -673,9 +685,11 @@ th {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
border: none;
border-radius: 0.625rem;
margin-left: 15.8rem;
margin-left: 6rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
height: 2.1rem;
margin-top: 1.5rem;
}
.deleteLastMvtTodos-darkmode {
@ -684,9 +698,11 @@ th {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
border: none;
border-radius: 0.625rem;
margin-left: 2rem;
margin-left: 1rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
height: 2.1rem;
margin-top: 1.5rem;
}
@ -707,9 +723,11 @@ th {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
border: none;
border-radius: 0.625rem;
margin-left: 10rem;
margin-left: 1rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
height: 2.1rem;
margin-top: 1.5rem;
}
.deleteMvtTodos-lightmode {
@ -718,9 +736,11 @@ th {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
border: none;
border-radius: 0.625rem;
margin-left: 15.8rem;
margin-left: 6rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
height: 2.1rem;
margin-top: 1.5rem;
}
.deleteLastMvtTodos-lightmode {
@ -729,9 +749,11 @@ th {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
border: none;
border-radius: 0.625rem;
margin-left: 2rem;
margin-left: 1rem;
padding-left: 0.9rem;
padding-right: 0.9rem;
height: 2.1rem;
margin-top: 1.5rem;
}
.saveNewMVT-lightmode {
@ -772,4 +794,10 @@ th {
#editMvtTodos {
text-align: right;
}
textarea {
resize: none;
width: 20rem;
height: 5rem;
}
</style>