A Pen by Olsi Odobashi on CodePen.
Forked from anonymous/admin-dashboard-ui-1-project-management.markdown
Created
October 3, 2016 16:09
-
-
Save 0x7An/eef574c6e855474a62039d3e05594242 to your computer and use it in GitHub Desktop.
Admin Dashboard UI #1 : Project management
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Selectize { | |
constructor() { | |
this.init(); | |
} | |
init() { | |
$('.action-box').selectric({ | |
onChange: (element) => { | |
$(element).parents('form').submit(); | |
} | |
}); | |
} | |
} | |
new Selectize(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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