From b06091a7612322f05d48b74b62100c30a4f05a31 Mon Sep 17 00:00:00 2001
From: Aulia Adila <13519100@std.stei.itb.ac.id>
Date: Thu, 21 Apr 2022 08:54:13 +0700
Subject: [PATCH] fix margin props from parent
---
src/components/dropdown.vue | 37 +++++++++++++++++++++++++++++++------
src/components/header.vue | 2 +-
2 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/src/components/dropdown.vue b/src/components/dropdown.vue
index 6095073..cebeca3 100644
--- a/src/components/dropdown.vue
+++ b/src/components/dropdown.vue
@@ -12,11 +12,11 @@
</button>
</div>
<Transition name="fade">
- <ul v-if="isVisible" class="item-parent">
- <li class="item" style="margin-right:7.5em">
+ <ul v-if="isVisible" class="item-parent" :style="topMargin">
+ <li class="item" style="margin-right:var(--right-margin)">
<slot name="item-1"></slot>
</li>
- <li class="item">
+ <li class="item" style="margin-right:var(--left-margin)">
<slot name="item-2"></slot>
</li>
</ul>
@@ -29,9 +29,13 @@ import { mixin as VueClickAway } from "vue3-click-away";
export default{
mixins: [VueClickAway],
+ props:['type'],
data(){
return{
- isVisible: false
+ isVisible: false,
+ top: 0,
+ right: 0,
+ left: 0,
}
},
methods: {
@@ -40,10 +44,31 @@ export default{
},
hideDropdown(){
this.isVisible = false
+ },
+ defineCSS(){
+ if (this.type === "dropdownUser"){
+ console.log(this.left);
+ this.top = 2.08;
+ this.right = 7.5;
+ }
+ else if (this.type === "addUser"){
+ this.top = 10.25;
+ this.right = 3;
+ this.left = -4.5;
+ }
+ }
+ },
+ computed: {
+ topMargin(){
+ this.defineCSS();
+ return{
+ '--top-margin': (this.top) + "rem",
+ '--right-margin': (this.right) + "em",
+ '--left-margin': (this.left) + "em"
+ }
}
}
}
-
</script>
@@ -65,7 +90,7 @@ export default{
flex-wrap: nowrap;
justify-content: space-between;
align-items: baseline;
- top: 2.08rem;
+ top: var(--top-margin);
}
.item {
position: absolute;
diff --git a/src/components/header.vue b/src/components/header.vue
index ec9e829..15dc364 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -31,7 +31,7 @@
>
<h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
- <Dropdown>
+ <Dropdown type="dropdownUser">
<template v-slot:start-button-item>
<i
class="icon ion-ios-person-outline text-red"
--
GitLab