From 05275d80c65c82fd9be1e7137af8514aff9dbbc2 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Mon, 30 Dec 2024 20:14:38 +0100
Subject: [PATCH] esercizio sistemazione style
---
07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue | 37 +++++++++---------
07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue | 2
07 - development setup/cmp-communication-assignment-problem/src/App.vue | 26 +++++++-----
3 files changed, 34 insertions(+), 31 deletions(-)
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/App.vue b/07 - development setup/cmp-communication-assignment-problem/src/App.vue
index 1960c3a..90f8343 100644
--- a/07 - development setup/cmp-communication-assignment-problem/src/App.vue
+++ b/07 - development setup/cmp-communication-assignment-problem/src/App.vue
@@ -55,13 +55,6 @@
max-width: 40rem;
}
-#app ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-#app li,
#app form {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 1rem auto;
@@ -74,19 +67,19 @@
#app h2 {
font-size: 2rem;
- border-bottom: 4px solid #ccc;
color: #58004d;
- margin: 0 0 1rem 0;
+ margin: 0 0 0 0;
}
#app button {
font: inherit;
cursor: pointer;
- border: 1px solid #ff0077;
- background-color: #ff0077;
+ border: 1px solid #08301a;
+ background-color: #08301a;
color: white;
padding: 0.05rem 1rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
+ border-radius: 10px;
}
#app button:hover,
@@ -111,4 +104,15 @@
#app form div {
margin: 1rem 0;
}
+
+#app .user{
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 1rem auto;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+ width: 90%;
+ max-width: 40rem;
+
+}
</style>
\ No newline at end of file
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue b/07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue
index 2ae9038..bb10287 100644
--- a/07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue
+++ b/07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="user">
<h2>Utente: {{ username }}</h2>
<h3>Eta: {{ age }}</h3>
</div>
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue b/07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue
index 8d16db1..d272af8 100644
--- a/07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue
+++ b/07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue
@@ -1,37 +1,36 @@
<template>
<form @submit.prevent="submitData">
- <div>
- <label>Utente: </label>
- <input type="text" v-model="username">
- </div>
- <div>
- <label>Eta: </label>
- <input type="text" v-model="age">
- </div>
- <div>
- <button>Update</button>
- </div>
-</form>
+ <div>
+ <label>Utente: </label>
+ <input type="text" v-model="username">
+ </div>
+ <div>
+ <label>Eta: </label>
+ <input type="text" v-model="age">
+ </div>
+ <div>
+ <button>Update</button>
+ </div>
+ </form>
</template>
<script>
export default {
- data(){
+ data() {
return {
username: "",
age: "",
}
},
emits: ['update-user'],
- methods:{
+ methods: {
submitData() {
- if(this.username !== "" && this.age !== ""){
-
- this.$emit('update-user', this.username, this.age);
+ if (this.username !== "" && this.age !== "") {
+ this.$emit('update-user', this.username, this.age);
} else {
- alert("insert data")
- }
+ alert("insert data");
+ }
}
}
--
Gitblit v1.8.0