Добавлена поддержка LESS для некоторых компонентов.

Убран лишний тег <form> из EditFromBox.

3 files changed, 104 insertions, 97 deletions

diff --git a/day9/task5_vue/src/components/AddNewEntryButton.vue b/day9/task5_vue/src/components/AddNewEntryButton.vue
index dc86907..6b7e19b 100644
--- a/day9/task5_vue/src/components/AddNewEntryButton.vue
+++ b/day9/task5_vue/src/components/AddNewEntryButton.vue
@@ -36,7 +36,10 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+    @button-radius: 100px;
+    @button-hovered-width: 300px;
+
     button {
         overflow: hidden;
         white-space: nowrap;
@@ -44,9 +47,9 @@
         position: fixed;
 
         padding: 5px;
-        border-radius: 50px;
-        width: 100px;
-        height: 100px;
+        border-radius: @button-radius / 2;
+        width: @button-radius;
+        height: @button-radius;
         border: none;
         background-color: #2871e2;
         color: white;
@@ -60,7 +63,7 @@
     }
 
     button:hover {
-        width: 300px;
+        width: @button-hovered-width;
         font-size: 30px;
         background-color: #286bd6;
     }
diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue
index c994656..f18bf69 100644
--- a/day9/task5_vue/src/components/EditFormBox.vue
+++ b/day9/task5_vue/src/components/EditFormBox.vue
@@ -1,107 +1,105 @@
 <template>
     <div class="backgroundTint shown">
         <div class="contentBox shown">
-            <form ref="tableForm" action="/api/actionNotChanged" method="post">
-                <div class="formRow">
-                    <div class="formRow-label">service_id</div>
-
-                    <div class="formRow-input">
-                        <input
-                                v-if="formType === 'update'"
-                                type="text" ref="service_id" class="formInput"
-                                readonly="readonly" v-bind:value="tableRow['service_id']">
-                        <input
-                                v-else-if="formType === 'create'"
-                                type="text" ref="service_id" class="formInput"
-                                v-bind:value="tableRow['service_id']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label">service_id</div>
+
+                <div class="formRow-input">
+                    <input
+                            v-if="formType === 'update'"
+                            type="text" ref="service_id" class="formInput"
+                            readonly="readonly" v-bind:value="tableRow['service_id']">
+                    <input
+                            v-else-if="formType === 'create'"
+                            type="text" ref="service_id" class="formInput"
+                            v-bind:value="tableRow['service_id']">
                 </div>
+            </div>
 
-                <div class="formRow">
-                    <div class="formRow-label"> servtype </div>
-                    <div class="formRow-input">
-                        <input type="text" ref="servtype" class="formInput" v-bind:value="tableRow['servtype']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label"> servtype </div>
+                <div class="formRow-input">
+                    <input type="text" ref="servtype" class="formInput" v-bind:value="tableRow['servtype']">
                 </div>
+            </div>
 
-                <div class="formRow">
-                    <div class="formRow-label"> subtype </div>
-                    <div class="formRow-input">
-                        <input type="text" ref="subtype" class="formInput" v-bind:value="tableRow['subtype']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label"> subtype </div>
+                <div class="formRow-input">
+                    <input type="text" ref="subtype" class="formInput" v-bind:value="tableRow['subtype']">
                 </div>
+            </div>
 
-                <div class="formRow">
-                    <div class="formRow-label"> user_id </div>
-                    <div class="formRow-input">
-                        <input type="text" ref="user_id" class="formInput" v-bind:value="tableRow['user_id']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label"> user_id </div>
+                <div class="formRow-input">
+                    <input type="text" ref="user_id" class="formInput" v-bind:value="tableRow['user_id']">
                 </div>
+            </div>
 
-                <div class="formRow">
-                    <div class="formRow-label"> referrer_user_id </div>
-                    <div class="formRow-input">
-                        <input type="text" ref="referrer_user_id" class="formInput" v-bind:value="tableRow['referrer_user_id']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label"> referrer_user_id </div>
+                <div class="formRow-input">
+                    <input type="text" ref="referrer_user_id" class="formInput" v-bind:value="tableRow['referrer_user_id']">
                 </div>
-
-                <div class="formRow">
-                    <div class="formRow-label"> state </div>
-                    <div class="formRow-input">
-                        <select ref="state" v-bind:value="tableRow['state']">
-                            <option>N</option>
-                            <option>A</option>
-                            <option>S</option>
-                            <option>D</option>
-                            <option>O</option>
-                        </select>
-                    </div>
+            </div>
+
+            <div class="formRow">
+                <div class="formRow-label"> state </div>
+                <div class="formRow-input">
+                    <select ref="state" v-bind:value="tableRow['state']">
+                        <option>N</option>
+                        <option>A</option>
+                        <option>S</option>
+                        <option>D</option>
+                        <option>O</option>
+                    </select>
                 </div>
+            </div>
 
-                <div class="formRow">
-                    <div class="formRow-label"> creation_date </div>
-                    <div class="formRow-input">
-                        <input type="date" ref="creation_date" class="formInput" v-bind:value="tableRow['creation_date']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label"> creation_date </div>
+                <div class="formRow-input">
+                    <input type="date" ref="creation_date" class="formInput" v-bind:value="tableRow['creation_date']">
                 </div>
-                <div class="formRow">
-                    <div class="formRow-label"> creation_time </div>
-                    <div class="formRow-input">
-                        <input type="time" ref="creation_time" class="formInput" v-bind:value="tableRow['creation_time']">
-                    </div>
+            </div>
+            <div class="formRow">
+                <div class="formRow-label"> creation_time </div>
+                <div class="formRow-input">
+                    <input type="time" ref="creation_time" class="formInput" v-bind:value="tableRow['creation_time']">
                 </div>
-
-                <div class="formRow">
-                    <div class="formRow-label"> creation_request_sent_date </div>
-                    <div class="formRow-input" style="display: flex; flex-direction: row">
-                        <input
-                                type="date" ref="creation_request_sent_date"
-                                class="formInput" style="width: 50%;"
-                                v-bind:value="tableRow['creation_request_sent_date'].split(' ')[0]">
-                        <input
-                                type="time" ref="creation_request_sent_time"
-                                class="formInput" style="width: 50%;"
-                                v-bind:value="tableRow['creation_request_sent_date'].split(' ')[1]">
-                    </div>
-                    <div class="formRow-error" v-if="validationResponse.creation_request_sent_date !== null">
-                        {{ validationResponse.creation_request_sent_date }}
-                    </div>
+            </div>
+
+            <div class="formRow">
+                <div class="formRow-label"> creation_request_sent_date </div>
+                <div class="formRow-input" style="display: flex; flex-direction: row">
+                    <input
+                            type="date" ref="creation_request_sent_date"
+                            class="formInput" style="width: 50%;"
+                            v-bind:value="tableRow['creation_request_sent_date'].split(' ')[0]">
+                    <input
+                            type="time" ref="creation_request_sent_time"
+                            class="formInput" style="width: 50%;"
+                            v-bind:value="tableRow['creation_request_sent_date'].split(' ')[1]">
                 </div>
+                <div class="formRow-error" v-if="validationResponse.creation_request_sent_date !== null">
+                    {{ validationResponse.creation_request_sent_date }}
+                </div>
+            </div>
 
-                <div class="formRow">
-                    <div class="formRow-label"> notified_about_expiration </div>
-                    <div class="formRow-input">
-                        <input type="text" ref="notified_about_expiration" class="formInput" v-bind:value="tableRow['notified_about_expiration']">
-                    </div>
+            <div class="formRow">
+                <div class="formRow-label"> notified_about_expiration </div>
+                <div class="formRow-input">
+                    <input type="text" ref="notified_about_expiration" class="formInput" v-bind:value="tableRow['notified_about_expiration']">
                 </div>
+            </div>
 
-                <div class="formButtons">
-                    <button type="button" @click="cancelCallback">Cancel</button>
+            <div class="formButtons">
+                <button type="button" @click="cancelCallback">Cancel</button>
 
-                    <button type="button" v-if="formType === 'update'" @click="submitForm">Update</button>
-                    <button type="button" v-else-if="formType === 'create'" @click="submitForm">Create</button>
-                </div>
-            </form>
+                <button type="button" v-if="formType === 'update'" @click="submitForm">Update</button>
+                <button type="button" v-else-if="formType === 'create'" @click="submitForm">Create</button>
+            </div>
         </div>
     </div>
 </template>
@@ -259,7 +257,6 @@
     .contentBox {
         padding: 20px;
         width: 500px;
-        height: 695px;
         background-color: #f0f0f0;
         border-radius: 10px;
         box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue
index 96f3576..c668a0e 100644
--- a/day9/task5_vue/src/components/UploadFileButton.vue
+++ b/day9/task5_vue/src/components/UploadFileButton.vue
@@ -11,7 +11,7 @@
                 @click="triggerUploadFile">
             <div v-if="isHovered">Upload File</div>
             <div v-else>
-                <img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">
+                <img src="/static/images/upload_icon.png">
             </div>
         </button>
     </div>
@@ -36,7 +36,10 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+    @button-radius: 100px;
+    @button-hovered-width: 300px;
+
     button {
         overflow: hidden;
         white-space: nowrap;
@@ -44,13 +47,13 @@
         position: fixed;
 
         padding: 5px;
-        border-radius: 50px;
-        width: 100px;
-        height: 100px;
+        border-radius: @button-radius / 2;
+        width: @button-radius;
+        height: @button-radius;
         border: none;
         background-color: #2871e2;
         color: white;
-        font-size: 45px;
+        font-size: 30px;
 
         transition-property: width;
         transition-duration: 0.6s;
@@ -60,12 +63,16 @@
     }
 
     button:hover {
-        width: 300px;
-        font-size: 30px;
+        width: @button-hovered-width;
         background-color: #286bd6;
     }
 
     button:focus {
         background-color: #2861c3;
     }
+
+    img {
+        width: @button-radius * 0.7;
+        height: @button-radius * 0.7;
+    }
 </style>
\ No newline at end of file