Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(profile):Fix Dividing components | JIRA PT-201 #124

Merged
merged 3 commits into from
Jul 4, 2022
Merged

fix(profile):Fix Dividing components | JIRA PT-201 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7bfb2b
fix(profile):Fix Dividing components | JIRA PT-201
Jul 1, 2022
7028b56
fix(profile): Fix code smell | JIRA PT-201
Jul 1, 2022
05f53d3
fix(profile): Import profile card | JIRA PT-201
Jul 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions src/assets/css/form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ body {
.el-overlay-dialog {
@apply overflow-hidden #{!important};
}

}
// Notification - Form popup
.el-dialog.sign-in {
Expand All @@ -41,7 +40,6 @@ body {
.el-dialog__header {
@apply hidden;
}

}

// Shadow form
Expand Down Expand Up @@ -91,7 +89,6 @@ body {
}
}
.authentication-form {

.el-form-item__error {
@apply font-bold;
}
Expand All @@ -112,7 +109,7 @@ body {
@apply rounded h-4 w-4 border-0 shadow #{!important};
}
.el-checkbox__inner::after {
@apply border-2 w-0.5 h-[5px] mt-0.5 ml-0.5 #{!important};
@apply border-[3px] w-0.5 h-[5px] mt-0.5 ml-0.5 #{!important};
}
}
.el-checkbox.is-checked {
Expand Down
5 changes: 5 additions & 0 deletions src/assets/css/grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
body {
.grid-items {
@apply p-3 my-1 bg-[#fff] border border-slate-200 rounded drop-shadow-[0_4px_16px_rgba(0,0,0,0.10)] shadow-[0_0_0_1px_rgb(0,0,0,0.10)] text-left text-sm text-[#393f49] border-0 font-normal;
}
}
1 change: 1 addition & 0 deletions src/components/element-plus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import 'assets/css/el-popper.scss'
import 'assets/css/el-breadcrumb.scss'
import 'assets/css/notifications.scss'
import 'assets/css/form.scss'
import 'assets/css/grid.scss'

import 'assets/css/el-progress.scss'
import 'assets/css/el-loading.scss'
Expand Down
16 changes: 15 additions & 1 deletion src/modules/cards/views/components/ProfileCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="w-full">
<el-card
class="text-center border-slate-100"
class="text-center border-slate-100 border-0"
:body-style="{ padding: '0px', position: 'relative' }"
>
<img alt="..." :src="backgroundImg" />
Expand Down Expand Up @@ -66,6 +66,12 @@
{{ location }}
</h5>
</div>
<div class="text-center text-primary">
<h3 class="text-[13px] mt-6 font-semibold pb-2">
{{ pos }}
</h3>
<h5 class="text-base text-dark-lighter font-normal">{{ degree }}</h5>
</div>
</div>
</el-card>
</div>
Expand Down Expand Up @@ -109,6 +115,14 @@ export default defineComponent({
type: String,
default: '',
},
pos: {
type: String,
default: '',
},
degree: {
type: String,
default: '',
},
},
setup() {
const isHover = ref(false)
Expand Down
26 changes: 9 additions & 17 deletions src/modules/grid/views/components/OneColumnWidth.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>
<div class="w-full">
<div>
<div class="flex gap-4 text-center mb-6">
<div class="grid-items flex-auto">1 of 3</div>
<div class="grid-items flex-auto w-2/4">2 of 3 (wider)</div>
<div class="grid-items flex-auto">3 of 3</div>
</div>
<div class="flex gap-4 text-center">
<div class="grid-items flex-auto">1 of 3</div>
<div class="grid-items flex-auto w-2/5">2 of 3 (wider)</div>
<div class="grid-items flex-auto">3 of 3</div>
</div>
<div class="flex gap-4 text-center mb-6">
<div class="grid-items flex-auto">1 of 3</div>
<div class="grid-items flex-auto w-2/4">2 of 3 (wider)</div>
<div class="grid-items flex-auto">3 of 3</div>
</div>
<div class="flex gap-4 text-center">
<div class="grid-items flex-auto">1 of 3</div>
<div class="grid-items flex-auto w-2/5">2 of 3 (wider)</div>
<div class="grid-items flex-auto">3 of 3</div>
</div>
</div>
</template>
Expand All @@ -22,9 +20,3 @@ export default defineComponent({
name: 'OneColumnWidth',
})
</script>

<style scoped>
.grid-items {
@apply p-3 my-1 bg-[#fff] border border-slate-200 rounded drop-shadow-[0_4px_16px_rgba(0,0,0,0.10)] shadow-[0_0_0_1px_rgb(0,0,0,0.10)] text-left text-sm text-[#393f49] border-0 font-normal;
}
</style>
115 changes: 115 additions & 0 deletions src/modules/profile/views/components/FormCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<template>
<div class="w-full">
<el-card class="items-center border-white">
<template #header>
<div class="flex justify-between py-2">
<h3>Edit Profile</h3>
<el-button class="text-sky-700" size="small" type="primary">Settings</el-button>
</div>
</template>
<!-- USER INFORMATION -->
<div class="user-info">
<div class="user-form">
<!-- form title -->
<h6 class="text-xs text-muted py-1 -tracking-tighter uppercase mb-6 leading-6">
USER INFORMATION
</h6>
<div class="lg:pl-6">
<el-form :model="userForm" label-position="top">
<el-form-item label="Name">
<el-input v-model="userForm.name" placeholder="Admin" />
</el-form-item>
<el-form-item label="Email">
<el-input v-model="userForm.mail" placeholder="admin@argon.com" />
</el-form-item>

<el-form-item label="Profile photo">
<el-upload class="w-full" action="#">
<el-input placeholder="demo.png" class="input-upload">
<template #append>Browse</template>
</el-input>
</el-upload>
</el-form-item>
</el-form>
<div class="flex justify-center mt-[50px]">
<el-button type="success">Save</el-button>
</div>
</div>
</div>
</div>

<hr />

<!-- Password -->
<div class="pass-info">
<div class="pass-form">
<!-- Form title -->
<h6 class="text-xs text-muted py-1 -tracking-tighter uppercase mb-6 leading-6">
PASSWORD
</h6>
<div class="lg:pl-6">
<el-form :model="passForm" label-position="top" show-password>
<el-form-item label="Current Password">
<el-input
v-model="passForm.oldPass"
type="password"
placeholder="Current Password"
/>
</el-form-item>
<el-form-item label="New Password">
<el-input v-model="passForm.newPass" type="password" placeholder="New Password" />
</el-form-item>
<el-form-item label="Confirm New Password">
<el-input
v-model="passForm.confirmPass"
type="password"
placeholder="Confirm New Password"
/>
</el-form-item>
</el-form>
<div class="flex justify-center mt-[50px]">
<el-button type="success">Change password</el-button>
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>

<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
name: 'FormCard',
setup() {
const userForm = reactive({
name: '',
mail: '',
})

const passForm = reactive({
oldPass: '',
newPass: '',
confirmPass: '',
})

return {
userForm,
passForm,
}
},
})
</script>

<style lang="scss" scoped>
:deep(.el-input.el-input--default.el-input-group.el-input-group--append):focus-within {
@apply border border-blue-500 rounded #{!important};
&.input-upload .el-input__inner {
@apply focus:border-t-0 focus:border-l-0 focus:border-b-0;
}
&.input-upload .el-input-group__append {
@apply border-0 #{!important};
}
}
</style>
38 changes: 38 additions & 0 deletions src/modules/profile/views/components/LeftIndicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div class="w-full">
<el-card class="border-white indicator bg-gradient-to-r from-info to-blue-410 border-0">
<div class="flex flex-wrap">
<div class="basis-0 grow">
<div class="card-header">
<h5 class="font-semibold text-0.8125 text-white mb-0">TOTAL TRAFFIC</h5>
</div>
<h2 class="text-xl text-white font-semibold mb-0 leading-7.5">350,897</h2>
</div>
<div
class="w-12 h-12 text-center inline-flex items-center justify-center rounded-full text-black bg-white"
>
<font-awesome-icon :icon="['fas', 'hand-point-up']" size="lg" />
</div>
</div>
<p class="mt-4 mb-0 text-sm">
<span class="text-white mr-2 inline">
<ArrowUpIcon class="inline pb-1 h-5 w-4" aria-hidden="true" />
3.48%
</span>
<span class="whitespace-nowrap text-light">Since last month</span>
</p>
</el-card>
</div>
</template>

<script>
import { defineComponent } from 'vue'
import { ArrowUpIcon } from '@heroicons/vue/solid'

export default defineComponent({
name: 'LeftIndicator',
components: {
ArrowUpIcon,
},
})
</script>
Loading