msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat: admin dashboard UI

Browse Source
pull/5698/head
Nicolas Giard 3 years ago
parent cd5e7545ee
commit d5a85774ee
No known key found for this signature in database
GPG Key ID: 85061B8F9D55B7C8
4 changed files with 111 additions and 40 deletions
Show Stats Download Patch File Download Diff File

1
ux/public/_assets/icons/fluent-female-working-with-a-laptop.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><radialGradient id="Yp1l7K9iBwNMskNzQGNbda" cx="23.764" cy="100.187" r="13.162" gradientTransform="matrix(.9728 0 0 -.9728 .653 115.634)" gradientUnits="userSpaceOnUse"><stop offset=".376" stop-color="#261103"/><stop offset=".68" stop-color="#431d06"/><stop offset="1" stop-color="#662c09"/></radialGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbda)" d="M24,6.587c-9.615,0-12,15.526-12,15.526c0,2.764,1.284,5.186,3.972,5.827 C18.274,28.49,21.172,29,24,29s5.726-0.51,8.028-1.059C34.716,27.299,36,24.877,36,22.114C36,22.113,33.615,6.587,24,6.587z"/><linearGradient id="Yp1l7K9iBwNMskNzQGNbdb" x1="24" x2="24" y1="96.599" y2="108.435" gradientTransform="matrix(1 0 0 -1 0 118)" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#ffdb80"/><stop offset=".141" stop-color="#fed97c"/><stop offset=".449" stop-color="#f4bf3b"/><stop offset=".594" stop-color="#f0b421"/></linearGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbdb)" d="M24,4.866c-3.455,0-7,2.525-7,9.991c0,0.598,0,4.571,0,5.21C17,22.733,21.2,26,24,26 s7-3.266,7-5.933c0-0.639,0-4.612,0-5.21C31,7.391,27.455,4.866,24,4.866z"/><radialGradient id="Yp1l7K9iBwNMskNzQGNbdc" cx="17.431" cy="114.563" r="29.854" gradientTransform="matrix(1 0 0 -1 0 118)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c26715"/><stop offset=".508" stop-color="#b85515"/><stop offset="1" stop-color="#ad3f16"/></radialGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbdc)" d="M24,3c-4.789,0-5.538,2.769-5.538,2.769C16.515,6.056,12,6.692,12,21.903 c0,3.509,2.357,4.797,3,5.172C12.6,13.816,20,18,19,8c3.735,10.904,14.39-0.335,14,18.754c1.113-0.846,3-2.545,3-4.852 C36,9.159,30.83,3,24,3z"/><linearGradient id="Yp1l7K9iBwNMskNzQGNbdd" x1="23.451" x2="26.26" y1="96.713" y2="73.8" gradientTransform="matrix(1 0 0 -1 0 118)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8795a1"/><stop offset="1" stop-color="#6d7882"/></linearGradient><path fill="url(#Yp1l7K9iBwNMskNzQGNbdd)" d="M40,21H8c-1.173,0-2.094,1.005-1.992,2.173l1.652,19C7.75,43.207,8.615,44,9.652,44h28.695 c1.037,0,1.903-0.793,1.992-1.827l1.652-19C42.094,22.005,41.173,21,40,21z"/><path fill="#a3b3c2" d="M26.476,36h-4.953c-0.129,0-0.236-0.099-0.246-0.227l-0.282-3.506C20.984,32.123,21.098,32,21.242,32 h5.516c0.144,0,0.258,0.123,0.246,0.267l-0.282,3.506C26.712,35.901,26.605,36,26.476,36z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

4
ux/src/components/HeaderNav.vue
Unescape View File

@ -55,10 +55,10 @@ q-header.bg-header.text-white.site-header(
)
q-space
transition(name='syncing')
q-spinner-rings(
q-spinner-tail(
v-show='siteStore.routerLoading'
color='accent'
size='34px'
size='24px'
)
q-btn.q-ml-md(
flat

4
ux/src/layouts/AdminLayout.vue
Unescape View File

@ -17,10 +17,10 @@ q-layout.admin(view='hHh Lpr lff')
q-toolbar(style='height: 64px;', dark)
q-space
transition(name='syncing')
q-spinner-rings(
q-spinner-tail(
v-show='siteStore.routerLoading'
color='accent'
size='34px'
size='24px'
)
q-btn.q-ml-md(flat, dense, icon='las la-times-circle', label='Exit' color='pink', to='/')
account-menu

138
ux/src/pages/AdminDashboard.vue
Unescape View File

@ -7,6 +7,82 @@ q-page.admin-dashboard
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.dashboard.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.dashboard.subtitle') }}
.row.q-px-md.q-col-gutter-md
.col-3
q-card.shadow-1
q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-change-theme.svg')
div
strong Sites
span 4
q-separator
q-card-actions(align='right')
q-btn(
flat
color='primary'
icon='las la-plus'
label='New'
)
q-separator.q-mx-sm(vertical)
q-btn(
flat
color='primary'
icon='las la-sitemap'
label='Manage'
to='/_admin/sites'
)
.col-3
q-card.shadow-1
q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-account.svg')
div
strong Users
span 123
q-separator
q-card-actions(align='right')
q-btn(
flat
color='primary'
icon='las la-plus'
label='New'
)
q-separator.q-mx-sm(vertical)
q-btn(
flat
color='primary'
icon='las la-users'
label='Manage'
to='/_admin/users'
)
.col-3
q-card.shadow-1
q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-female-working-with-a-laptop.svg')
div
strong Logins
small 45 / last 24h
q-separator
q-card-actions(align='right')
q-btn(
flat
color='primary'
icon='las la-chart-area'
label='Analytics'
)
.col-3
q-card.shadow-1
q-card-section.admin-dashboard-card
img(src='/_assets/icons/fluent-ssd-animated.svg')
div
strong Storage
small Operational
q-separator
q-card-actions(align='right')
q-btn(
flat
color='primary'
icon='las la-server'
label='Manage'
)
.col-12
q-banner.bg-positive.text-white(
inline-actions
@ -24,6 +100,9 @@ q-page.admin-dashboard
label='System Info'
to='/_admin/system'
)
.col-12
q-card.shadow-1
q-card-section ---
//- v-container(fluid, grid-list-lg)
//- v-layout(row, wrap)
@ -149,48 +228,39 @@ useMeta({
<style lang='scss'>
.dashboard-card {
.admin-dashboard {
&-card {
display: flex;
width: 100%;
border-radius: 7px;
align-items: center;
.v-card__text {
overflow: hidden;
position: relative;
}
img {
width: 64px;
margin-right: 12px;
}
.dashboard-contribute {
background-color: #FFF;
background-image: linear-gradient(to bottom, #FFF 0%, lighten($indigo-1, 3%) 100%);
border-radius: 7px;
@at-root .theme--dark & {
background-color: $grey-8;
background-image: linear-gradient(to bottom, $grey-8 0%, darken($grey-8, 6%) 100%);
strong {
font-size: 1.1rem;
font-weight: 300;
display: block;
line-height: 1.2rem;
padding-left: 2px;
}
.v-card__text {
display: flex;
align-items: center;
color: $indigo !important;
@at-root .theme--dark & {
color: $grey-4 !important;
}
span {
font-size: 2rem;
line-height: 2rem;
font-weight: 500;
color: $secondary;
display: block;
}
}
.v-icon.dashboard-icon {
position: absolute !important;
right: 0;
top: 12px;
font-size: 100px !important;
opacity: .25;
@at-root .v-application--is-rtl & {
left: 0;
right: initial;
small {
font-size: 1.4rem;
line-height: 2rem;
font-weight: 400;
color: $positive;
display: block;
}
}
}

Write Preview
Loading…
Cancel
Save