summaryrefslogtreecommitdiff
path: root/day9/task5_vue/src
diff options
context:
space:
mode:
Diffstat (limited to 'day9/task5_vue/src')
-rw-r--r--day9/task5_vue/src/components/AddNewEntryButton.vue13
-rw-r--r--day9/task5_vue/src/components/EditFormBox.vue165
-rw-r--r--day9/task5_vue/src/components/UploadFileButton.vue23
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
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-16 19:21:34 +0000