fix: dashboard
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="activity-card">
|
||||
<SvgIcon name="card-corner-arrow" :size="'1.5rem'" class="activity-card__corner" />
|
||||
|
||||
<div class="activity-card__thumb">
|
||||
<SvgIcon name="play" :size="'1.5rem'" />
|
||||
</div>
|
||||
|
||||
<div class="activity-card__body">
|
||||
<p class="activity-card__title">{{ title }}</p>
|
||||
|
||||
<div class="activity-card__meta">
|
||||
<SvgIcon :name="metaIcon" :size="'0.875rem'" class="activity-card__meta-icon" />
|
||||
<div class="activity-card__rows">
|
||||
<p v-for="(row, i) in meta" :key="i" class="activity-card__row">
|
||||
<span class="activity-card__row-label">{{ row.label }}</span>
|
||||
<span
|
||||
class="activity-card__row-value"
|
||||
:class="{ 'activity-card__row-value--num': row.numeric }"
|
||||
>
|
||||
{{ row.value }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
|
||||
defineProps({
|
||||
title: { type: String, default: '' },
|
||||
/** rows of { label, value, numeric? } */
|
||||
meta: { type: Array, default: () => [] },
|
||||
/** @type {import('vue').PropType<import('@/components/icons/icon-names').IconName>} */
|
||||
metaIcon: { type: String, default: 'calendar' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.activity-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.875rem 1rem;
|
||||
min-height: 5.9375rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.9375rem;
|
||||
|
||||
&__corner {
|
||||
position: absolute;
|
||||
inset-block-start: 0.75rem;
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.6875rem;
|
||||
height: 3.6875rem;
|
||||
background: #f4f4f4;
|
||||
border-radius: 0.9375rem;
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.625rem;
|
||||
text-align: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
&__meta-icon {
|
||||
order: 2;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
&__rows {
|
||||
order: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
margin: 0;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.6875rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
&__row-value {
|
||||
&--num {
|
||||
font-family: var(--font-family-number-fa);
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="calendar">
|
||||
<p class="calendar__title">{{ monthLabel }}</p>
|
||||
|
||||
<div class="calendar__week">
|
||||
<div
|
||||
v-for="(d, i) in days"
|
||||
:key="i"
|
||||
class="calendar__day"
|
||||
:class="{ 'calendar__day--active': d.selected }"
|
||||
>
|
||||
<span v-if="d.marker" class="calendar__marker" />
|
||||
<span class="calendar__weekday">{{ d.weekday }}</span>
|
||||
<span class="calendar__date">{{ d.day }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
monthLabel: { type: String, default: '' },
|
||||
/** ordered right-to-left: { weekday, day, selected?, marker? } */
|
||||
days: { type: Array, default: () => [] },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calendar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1.125rem 1rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.9375rem;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&__week {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
&__day {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.125rem;
|
||||
border-radius: 999px;
|
||||
|
||||
&--active {
|
||||
background: var(--color-secondary);
|
||||
box-shadow: 0 9px 9.75px rgba(0, 112, 116, 19%);
|
||||
|
||||
.calendar__weekday,
|
||||
.calendar__date {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__marker {
|
||||
position: absolute;
|
||||
inset-block-start: 0.125rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border-radius: 50%;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
&__weekday {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.625rem;
|
||||
color: #828282;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-family: var(--font-family-number-fa);
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="profile-card">
|
||||
<div class="profile-card__avatar">
|
||||
<img v-if="avatarUrl" :src="avatarUrl" :alt="name" />
|
||||
</div>
|
||||
|
||||
<p class="profile-card__name">{{ name }}</p>
|
||||
|
||||
<div class="profile-card__location">
|
||||
<SvgIcon name="map-pin-simple-area" :size="'0.9375rem'" />
|
||||
<span>{{ location }}</span>
|
||||
</div>
|
||||
|
||||
<div class="profile-card__stats">
|
||||
<div v-for="(stat, i) in stats" :key="i" class="profile-card__stat">
|
||||
<span class="profile-card__stat-label">{{ stat.label }}</span>
|
||||
<span class="profile-card__stat-value">
|
||||
{{ stat.value }}
|
||||
<span class="profile-card__stat-unit">{{ stat.unit }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
|
||||
defineProps({
|
||||
name: { type: String, default: '' },
|
||||
location: { type: String, default: '' },
|
||||
avatarUrl: { type: String, default: '' },
|
||||
/** mini-stats of { label, value, unit } */
|
||||
stats: { type: Array, default: () => [] },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 2rem 1.25rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.9375rem;
|
||||
|
||||
&__avatar {
|
||||
width: 7.75rem;
|
||||
height: 7.75rem;
|
||||
border-radius: 50%;
|
||||
background: #f4f4f4;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&__location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
color: #989898;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
&__stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__stat-label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 0.6875rem;
|
||||
color: #a7a7a7;
|
||||
}
|
||||
|
||||
&__stat-value {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-family-number-fa);
|
||||
font-weight: 400;
|
||||
font-size: 1.5625rem;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
&__stat-unit {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 0.75rem;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="stat-card">
|
||||
<SvgIcon name="card-corner-arrow" :size="'1.5rem'" class="stat-card__corner" />
|
||||
|
||||
<div class="stat-card__head">
|
||||
<SvgIcon :name="icon" :size="'1.0625rem'" class="stat-card__head-icon" />
|
||||
<span class="stat-card__label">{{ label }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-card__body">
|
||||
<span class="stat-card__value">{{ value }}</span>
|
||||
<div class="stat-card__meta">
|
||||
<span class="stat-card__unit">{{ unit }}</span>
|
||||
<span class="stat-card__subtitle">{{ subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
|
||||
defineProps({
|
||||
/** @type {import('vue').PropType<import('@/components/icons/icon-names').IconName>} */
|
||||
icon: { type: String, required: true },
|
||||
label: { type: String, default: '' },
|
||||
value: { type: [String, Number], default: '' },
|
||||
unit: { type: String, default: '' },
|
||||
subtitle: { type: String, default: '' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stat-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.125rem 1.25rem;
|
||||
min-height: 8.75rem;
|
||||
background: rgba(255, 255, 255, 58%);
|
||||
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.9375rem;
|
||||
|
||||
&__corner {
|
||||
position: absolute;
|
||||
inset-block-start: 0.875rem;
|
||||
inset-inline-end: 1.125rem;
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
&__head-icon {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&__label {
|
||||
order: 1;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.625rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-family: var(--font-family-number-fa);
|
||||
font-weight: 700;
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
color: var(--color-primary);
|
||||
text-shadow: 0 5.25px 8.625px rgba(243, 102, 117, 18%);
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
&__unit {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user