Skip to content

Commit bf1d427

Browse files
jccjcc
committed
Optimize dashboard sidebar
1 parent 3e4184b commit bf1d427

File tree

11 files changed

+62
-69
lines changed

11 files changed

+62
-69
lines changed

‎resources/assets/js/dashboard/Main.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ body {
6262
height: 100%;
6363
margin-left: -250px;
6464
overflow-y: auto;
65-
background: #4d5e70;
65+
background-color: transparent;
66+
background-image: linear-gradient(180deg, #647f9d, #3d4e60);
6667
transition: all 0.5s ease;
6768
}
6869

‎resources/assets/js/dashboard/components/Form.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<div class="row">
3-
<div class="ibox">
4-
<div class="ibox-title">
3+
<div class="box">
4+
<div class="box-title">
55
<small class="float-right">
66
<slot name="buttons"></slot>
77
</small>
88
<h5>{{ title }}</h5>
99
</div>
10-
<div class="ibox-content">
10+
<div class="box-content">
1111
<slot name="content"></slot>
1212
</div>
1313
</div>

‎resources/assets/js/dashboard/components/Table.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div :class="wrapperClass" class="ibox">
3-
<div class="ibox-title d-flex">
2+
<div :class="wrapperClass" class="box">
3+
<div class="box-title d-flex">
44
<h5 class="align-self-center font-weight-normal">{{ title }}</h5>
55
<small class="ml-auto d-flex flex-row">
66
<div class="input-group input-group-sm mr-2">
@@ -12,7 +12,7 @@
1212
<slot name="buttons"></slot>
1313
</small>
1414
</div>
15-
<div class="ibox-content no-padding table-responsive">
15+
<div class="box-content no-padding table-responsive">
1616
<table :class="tableClass">
1717
<thead>
1818
<tr>

‎resources/assets/js/dashboard/components/particals/Navbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<nav class="navbar navbar bg-white">
2+
<nav class="navbar navbar bg-white shadow">
33
<div class="navbar-brand">
44
<a class="navbar-toggler text-left" @click="toggle">
55
<i class="fas fa-bars text-secondary"></i>

‎resources/assets/js/dashboard/components/particals/Sidebar.vue‎

Lines changed: 8 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
.user {
8686
text-align: center;
8787
padding-top: 15px;
88-
background-color: #52697f;
8988
}
9089
9190
.user .avatar {
@@ -107,25 +106,27 @@
107106
height: 40px;
108107
line-height: 40px;
109108
margin-right: 5px;
110-
color: #828a9a;
109+
color: #fff;
110+
opacity: .5;
111111
}
112112
.buttons a:hover {
113-
color: #fff;
113+
opacity: 1;
114114
}
115115
.sidebar-nav li a {
116116
display: block;
117117
text-decoration: none;
118-
color: #999999;
118+
color: #fff;
119+
opacity: .5;
119120
}
120121
121122
.sidebar-nav li a:hover {
123+
opacity: 1;
122124
text-decoration: none;
123-
color: #fff;
124-
background: rgba(255,255,255,0.2);
125+
background: #647f9d;
125126
}
126127
127128
.sidebar-nav li .active {
128-
color: #fff !important;
129+
opacity: 1;
129130
}
130131
131132
.sidebar-nav li a i {
@@ -144,19 +145,4 @@
144145
.active a {
145146
color: #fff !important;
146147
}
147-
148-
.sidebar-nav > .sidebar-brand {
149-
height: 65px;
150-
font-size: 18px;
151-
line-height: 60px;
152-
}
153-
154-
.sidebar-nav > .sidebar-brand a {
155-
color: #999999;
156-
}
157-
158-
.sidebar-nav > .sidebar-brand a:hover {
159-
color: #fff;
160-
background: none;
161-
}
162148
</style>

‎resources/assets/js/dashboard/modules/file/File.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="row">
3-
<div class="ibox">
4-
<div class="ibox-title">
3+
<div class="box">
4+
<div class="box-title">
55
<div class="row d-flex no-margin">
66
<div class="col-md-6 d-flex align-self-center">
77
<h5 class="align-self-center float-left">{{ $t('page.files') }}&nbsp;&nbsp;</h5>
@@ -30,7 +30,7 @@
3030
</div>
3131
</div>
3232
</div>
33-
<div class="ibox-content no-padding">
33+
<div class="box-content no-padding">
3434
<table id="uploads-table" class="table table-striped table-hover">
3535
<tbody>
3636
<tr>
@@ -313,7 +313,7 @@ export default {
313313
</script>
314314

315315
<style lang="scss" scoped>
316-
.ibox-content .btn {
316+
.box-content .btn {
317317
display: inline-block;
318318
border-radius: 50%;
319319
width: 2.2rem;

‎resources/assets/js/dashboard/modules/home/Home.vue‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,46 @@
11
<template>
22
<div class="wrapper">
3-
<div class="row">
4-
<div class="col-md-12 col-sm-12 col-xs-12">
5-
<div class="ibox">
6-
<div class="ibox-title ibox-warning">
7-
<span class="badge badge-secondary float-right">{{ $t('page.admin') }}</span>
8-
<h5 class="no-margins">Notice For Everyone.</h5>
9-
</div>
10-
</div>
11-
</div>
12-
</div>
13-
<div class="row">
3+
<div class="row pt-3">
144
<div class="col-md-3 col-sm-6 col-xs-12">
15-
<div class="ibox">
16-
<div class="ibox-title">
5+
<div class="box shadow-sm box-radius">
6+
<div class="box-title">
177
<span class="badge badge-success float-right">{{ $t('page.all') }}</span>
188
<h5 class="no-margins">{{ $t('page.user_num') }}</h5>
199
</div>
20-
<div class="ibox-content">
10+
<div class="box-content">
2111
<h1 class="no-margins"><i class="fas fa-users"></i>{{ statistics.users }}</h1>
2212
</div>
2313
</div>
2414
</div>
2515
<div class="col-md-3 col-sm-6 col-xs-12">
26-
<div class="ibox">
27-
<div class="ibox-title">
16+
<div class="box box-radius">
17+
<div class="box-title">
2818
<span class="badge badge-success float-right">{{ $t('page.all') }}</span>
2919
<h5 class="no-margins">{{ $t('page.view_num') }}</h5>
3020
</div>
31-
<div class="ibox-content">
21+
<div class="box-content">
3222
<h1 class="no-margins"><i class="fas fa-eye"></i>{{ statistics.visitors }}</h1>
3323
</div>
3424
</div>
3525
</div>
3626
<div class="col-md-3 col-sm-6 col-xs-12">
37-
<div class="ibox">
38-
<div class="ibox-title">
27+
<div class="box box-radius">
28+
<div class="box-title">
3929
<span class="badge badge-success float-right">{{ $t('page.all') }}</span>
4030
<h5 class="no-margins">{{ $t('page.article_num') }}</h5>
4131
</div>
42-
<div class="ibox-content">
32+
<div class="box-content">
4333
<h1 class="no-margins"><i class="fas fa-newspaper"></i>{{ statistics.articles }}</h1>
4434
</div>
4535
</div>
4636
</div>
4737
<div class="col-md-3 col-sm-6 col-xs-12">
48-
<div class="ibox">
49-
<div class="ibox-title">
38+
<div class="box box-radius">
39+
<div class="box-title">
5040
<span class="badge badge-success float-right">{{ $t('page.all') }}</span>
5141
<h5 class="no-margins">{{ $t('page.comment_num') }}</h5>
5242
</div>
53-
<div class="ibox-content">
43+
<div class="box-content">
5444
<h1 class="no-margins"><i class="fas fa-comments"></i>{{ statistics.comments }}</h1>
5545
</div>
5646
</div>

‎resources/assets/js/dashboard/modules/system/System.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="row">
3-
<div class="ibox">
4-
<div class="ibox-title">
3+
<div class="box">
4+
<div class="box-title">
55
<h5>{{ $t('page.systems') }}</h5>
66
</div>
7-
<div class="ibox-content">
7+
<div class="box-content">
88
<div class="row">
99
<div class="col-md-2">
1010
<div class="sidebar">

resources/assets/sass/_ibox.scss renamed to resources/assets/sass/_box.scss

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
.ibox {
1+
.box {
22
clear: both;
33
margin-bottom: 25px;
44
margin-top: 0;
55
padding: 0;
66
width: 100%;
77
}
8-
.ibox-title {
8+
.box-title {
99
-moz-border-bottom-colors: none;
1010
-moz-border-left-colors: none;
1111
-moz-border-right-colors: none;
@@ -20,22 +20,22 @@
2020
padding: 15px 15px 7px;
2121
min-height: 48px;
2222
}
23-
.ibox-default {
23+
.box-default {
2424
border-color: #e7eaec;
2525
}
26-
.ibox-success {
26+
.box-success {
2727
border-color: #3498db;
2828
}
29-
.ibox-success {
29+
.box-success {
3030
border-color: #1abc9c;
3131
}
32-
.ibox-warning {
32+
.box-warning {
3333
border-color: #f1c40f;
3434
}
35-
.ibox-danger {
35+
.box-danger {
3636
border-color: #e74c3c;
3737
}
38-
.ibox-content {
38+
.box-content {
3939
clear: both;
4040
background-color: #ffffff;
4141
color: inherit;
@@ -48,3 +48,13 @@
4848
.no-padding {
4949
padding: 0;
5050
}
51+
.box-radius {
52+
.box-title {
53+
border-top-left-radius: 5px;
54+
border-top-right-radius: 5px;
55+
}
56+
.box-content {
57+
border-bottom-left-radius: 5px;
58+
border-bottom-right-radius: 5px;
59+
}
60+
}

‎resources/assets/sass/_variables.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,15 @@ $green: #2ECC71 !default;
1616
$teal: #1ABC9C !default;
1717
$cyan: #3498db !default;
1818
$wet-asphalt: #34495e !default;
19+
$black: #000 !default;
1920

2021
$component-active-bg: $wet-asphalt !default;
2122

23+
// Shadow
24+
$box-shadow-sm: 0 .125rem .25rem rgba($black, .025) !default;
25+
$box-shadow: 0 .25rem .5rem rgba($black, .05) !default;
26+
$box-shadow-lg: 0 .5rem 1.5rem rgba($black, .075) !default;
27+
2228
// Toggle
2329
$rgb-black: "0,0,0" !default;
2430
$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default;

0 commit comments

Comments
 (0)