Skip to content

Instantly share code, notes, and snippets.

/admin-dashboard-ui-1-project-management.markdown

Created October 3, 2016 16:09
Show Gist options
  • Save anonymous/a42d487538f555ccdc9120274b9944be to your computer and use it in GitHub Desktop.
Save anonymous/a42d487538f555ccdc9120274b9944be to your computer and use it in GitHub Desktop.
Download ZIP
Admin Dashboard UI #1 : Project management
Raw
index.jade
.container.card-list
.card.blue
.title new projects
span.glyphicon.glyphicon-upload
.value 89
.stat #[b 13]% increase
.card.green
.title team members
span.glyphicon.glyphicon-upload
.value 5,990
.stat #[b 4]% increase
.card.orange
.title total budget
span.glyphicon.glyphicon-download
.value $80,990
.stat #[b 13]% decrease
.card.red
.title new customers
span.glyphicon.glyphicon-download
.value 3
.stat #[b 13]% decrease
.container.projects
.projects-inner
header.projects-header
.title Ongoing Projects
.count | 32 Projects
span.glyphicon.glyphicon-download-alt
table.projects-table
tr
th.table-head Project
th.table-head Deadline
th.table-head Leader + Team
th.table-head Budget
th.table-head Status
tr.danger-item
td
p New Dashboard
p Google
td
p 17th Oct, 15
p.danger-text Overdue
td.member
figure
img(src="https://source.unsplash.com/random/151x151")
.member-info
p Myrtle Erickson
p UK Design Team
td
p $4,670
p Paid
td.status
span.status-text.status-blue Early stages
form.form(action="#" method="POST")
select.action-box
option Actions
option Start project
option Send for QA
option Send invoice
tr
td
p New Dashboard
p Google
td
p 17th Oct, 15
p Overdue
td.member
figure
img(src="https://source.unsplash.com/random/151x151")
.member-info
p Myrtle Erickson
p UK Design Team
td
p $4,670
p Paid
td.status
span.status-text.status-orange In progress
form.form(action="#" method="POST")
select.action-box
option Actions
option Start project
option Send for QA
option Send invoice
tr
td
p New Dashboard
p Google
td
p 17th Oct, 15
p In 1 month(s)
td.member
figure
img(src="https://source.unsplash.com/random/151x151")
.member-info
p Myrtle Erickson
p UK Design Team
td
p $4,670
p.danger-text Delayed
td.status
span.status-text.status-green Finished
form.form(action="#" method="POST")
select.action-box
option Actions
option Start project
option Send for QA
option Send invoice
a.link(href="http://codepen.io/olsiodobashi/pens/popular/" target="_blank" title="Olsi Odobashi")
img(src="https://dl.dropbox.com/s/quibvbjjcflq84t/o.png?dl=0")
Raw
script.typescript
class Selectize {
constructor() {
this.init();
}
init() {
$('.action-box').selectric({
onChange: (element) => {
$(element).parents('form').submit();
}
});
}
}
new Selectize();
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.selectric/1.10.1/jquery.selectric.min.js"></script>
Raw
style.less
.card-list {
.clear;
margin-top: 15px;
width: 100%;
}
.card {
border: 5px solid @bg;
border-radius: 8px;
color: white;
float: left;
padding: 10px;
position: relative;
width: 25%;
.glyphicon {
color: white;
font-size: 28px;
opacity: 0.3;
position: absolute;
right: 13px;
top: 13px;
}
.stat {
border-top: 1px solid rgba(255, 255, 255, 0.3);
font-size: 8px;
margin-top: 25px;
padding: 10px 10px 0;
text-transform: uppercase;
}
.title {
display: inline-block;
font-size: 8px;
padding: 10px 10px 0;
text-transform: uppercase;
}
.value {
font-size: 26px;
font-weight: lighter;
padding: 0 10px;
}
&.blue {
background-color: #2298F1;
}
&.green {
background-color: #66B92E;
}
&.orange {
background-color: #DA932C;
}
&.red {
background-color: #D65B4A;
}
}
.projects {
background-color: @dark-text;
border: 4px solid @bg;
width: 100%;
&-inner {
border: 1px solid @light-bg;
border-radius: 4px;
}
}
.projects-header {
color: white;
padding: 22px;
.count,
.title {
display: inline-block;
}
.count {
color: #738297;
}
.glyphicon {
cursor: pointer;
float: right;
font-size: 16px;
margin: 5px 0;
}
.title {
font-size: 21px;
font-weight: lighter;
+ .count {
margin-left: 5px;
}
}
}
.projects-table {
width: 100%;
td,
th {
color: white;
padding: 10px 22px;
vertical-align: middle;
}
td p {
font-size: 12px;
&:last-of-type {
color: @light-text;
font-size: 11px;
}
}
tr:not(:last-of-type) {
border-bottom: 1px solid @light-bg;
}
.member {
figure,
.member-info {
display: inline-block;
vertical-align: top;
}
figure + .member-info {
margin-left: 7px;
}
img {
border-radius: 50%;
height: 32px;
width: 32px;
}
}
.table-head {
background-color: @light-bg;
color: #738297;
}
.status > form {
float: right;
}
.status-text {
display: inline-block;
font-size: 12px;
margin: 11px 0;
padding-left: 20px;
position: relative;
&:before {
border: 3px solid;
border-radius: 50%;
content: "";
height: 14px;
left: 0;
position: absolute;
top: 1px;
width: 14px;
}
&.status-blue:before {
border-color: #1C93ED;
}
&.status-green:before {
border-color: #66B92E;
}
&.status-orange:before {
border-color: #DA932C;
}
}
}
// selectric plugin styling
.selectric {
background-color: transparent;
border-color: @light-bg;
border-radius: 4px;
.label {
color: @light-text;
line-height: 34px;
margin-right: 10px;
text-align: left;
}
&-wrapper {
float: right;
width: 150px;
}
}
// helper classes
.danger-item {
border-left: 4px solid #A84D43;
}
.danger-text {
color: #A84D43 !important;
}
// global stuff
@bg: #1b2431;
@light-text: #738297;
@dark-text: #273142;
@light-bg: #313D4F;
body {
background-color: @bg;
color: #202020;
font-family: "Helvetica", "Open Sans", "Arial";
font-size: 13px;
}
p,
figure,
ul,
li {
margin: 0;
padding: 0;
}
.container {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 960px;
}
.link {
position: fixed;
bottom: 0;
right: 0;
width: 32px;
img {
width: 100%;
}
}
.clear() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/jquery.selectric/1.10.1/selectric.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment