Modified styles and validation

giwi97 · Oct 16, 2020 · 8b2b685 · 8b2b685
1 parent 5c493dd
commit 8b2b685
Show file tree

Hide file tree

Showing 11 changed files with 260 additions and 187 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@asigloo/vue-dynamic-forms": "^1.3.0",
+    "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.3",
-    "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "install": "^0.13.0",
     "vee-validate": "^3.4.1",

diff --git a/src/components/AddPost.vue b/src/components/AddPost.vue
@@ -16,7 +16,7 @@
               <v-list-item-content>
                 <v-list-item-title>You</v-list-item-title>
               </v-list-item-content>
-              <div class="text-right">02/10/2020</div>
+
             </v-row>
             <v-card-title primary-title>
               <div>
@@ -87,10 +87,14 @@
       <v-app>
         <v-content>
           <v-container>
-            <v-card class="mx-auto teal lighten-4" max-width="650">
+            <div style="margin-left: 8%; width: 92%; padding-top: 10px">
+            <v-card class="mx-auto">
               <v-form ref="form" v-model="valid" lazy-validation>
-                <p class="subtitle-1 font-weight-bold">Add Your Post</p>
+
+                <div id="addBook">Add Your Post</div>
+
                 <v-text-field
+                class="mx-auto"
                   :rules="[(v) => !!v || 'Subject is required']"
                   v-model="task"
                   label="Subject"
@@ -99,8 +103,7 @@
                 </v-text-field>
                 <v-textarea
                   :rules="[(v) => !!v || 'Description is required']"
-                  background-color="teal lighten-5"
-                  auto-grow
+                   auto-grow
                   rows="4"
                   row-height="30"
                   class="pa-3"
@@ -109,11 +112,15 @@
                   required
                 >
                 </v-textarea>
-                <v-row align="center" justify="center">
+
+                <v-row align="end" justify="end">
+                  <div style="float: right; margin: 0px 39px 20px 0px">
                   <v-btn v-if="edit != true" color="normal" @click="reset">
                     clear
                   </v-btn>
+
                   <v-btn
+                     id="add"
                     :disabled="!valid"
                     v-if="edit != true"
                     color="primary"
@@ -123,22 +130,28 @@
                   </v-btn>
 
                   <v-btn
+                  id="edit"
                     v-if="edit == true"
                     color="success"
                     @click="updateTask($event, validate)"
                   >
                     Update
                   </v-btn>
                   <v-btn
+                  id="delete"
                     v-if="edit == true"
                     color="secondary"
                     @click="cancelTask($event)"
                   >
                     Cancel
                   </v-btn>
+                  </div>
+
                 </v-row>
+
               </v-form>
             </v-card>
+            </div>
           </v-container>
         </v-content>
       </v-app>
@@ -221,4 +234,23 @@ export default {
     }
   },
 };
-</script>
+</script>
+
+<style>
+#addBook {
+  height: 45px;
+  background-color: teal;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  padding-top: 10px;
+  font-size: 18px;
+  margin: -20px -11px 10px -11px;
+}
+#add,
+#edit,
+#delete {
+  margin-left: 10px;
+}
+
+</style>