jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #133 from christianesperar/master 

Enhance inbox page
pull/136/merge
Aigars Silkalns 2016-05-07 16:27:00 +03:00
parent ba6899ece2 6a22654347
commit c6d4823f1c
5 changed files with 460 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
production/css/custom.css
View File

@ -860,10 +860,6 @@ h2 {
legend { legend {
padding-bottom: 7px; padding-bottom: 7px;
} }
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.demo-placeholder { .demo-placeholder {
height: 280px; height: 280px;
} }
@ -1692,8 +1688,7 @@ h4.graph_title {
/* ********* /iconts-display **************************** */ /* ********* /iconts-display **************************** */
/* ********* Tile stats **************************** */ /** tile stats **/
.tile-stats { .tile-stats {
position: relative; position: relative;
display: block; display: block;
@ -1713,6 +1708,7 @@ h4.graph_title {
-webkit-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
} }
.tile-stats:hover .icon i { .tile-stats:hover .icon i {
animation-name: tansformAnimation; animation-name: tansformAnimation;
animation-duration: .5s; animation-duration: .5s;
@ -1731,6 +1727,7 @@ h4.graph_title {
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
} }
.tile-stats .icon { .tile-stats .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -1740,6 +1737,7 @@ h4.graph_title {
top: 22px; top: 22px;
z-index: 1; z-index: 1;
} }
.tile-stats .icon i { .tile-stats .icon i {
margin: 0; margin: 0;
font-size: 60px; font-size: 60px;
@ -1747,11 +1745,13 @@ h4.graph_title {
vertical-align: bottom; vertical-align: bottom;
padding: 0; padding: 0;
} }
.tile-stats .count { .tile-stats .count {
font-size: 38px; font-size: 38px;
font-weight: bold; font-weight: bold;
line-height: 1.65857143 line-height: 1.65857143
} }
.tile-stats .count, .tile-stats h3, .tile-stats p { .tile-stats .count, .tile-stats h3, .tile-stats p {
position: relative; position: relative;
margin: 0; margin: 0;
@ -1759,13 +1759,16 @@ h4.graph_title {
z-index: 5; z-index: 5;
padding: 0; padding: 0;
} }
.tile-stats h3 { .tile-stats h3 {
color: #BAB8B8; color: #BAB8B8;
} }
.tile-stats p { .tile-stats p {
margin-top: 5px; margin-top: 5px;
font-size: 12px; font-size: 12px;
} }
.tile-stats > .dash-box-footer { .tile-stats > .dash-box-footer {
position: relative; position: relative;
text-align: center; text-align: center;
@ -1778,36 +1781,44 @@ h4.graph_title {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
text-decoration: none; text-decoration: none;
} }
.tile-stats > .dash-box-footer:hover { .tile-stats > .dash-box-footer:hover {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
.tile-stats > .dash-box-footer:hover { .tile-stats > .dash-box-footer:hover {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
table.tile_info { table.tile_info {
padding: 10px 15px; padding: 10px 15px;
} }
table.tile_info span.right { table.tile_info span.right {
margin-right: 0; margin-right: 0;
float: right; float: right;
position: absolute; position: absolute;
right: 4%; right: 4%;
} }
.tile:hover { .tile:hover {
text-decoration: none; text-decoration: none;
} }
.tile_header { .tile_header {
border-bottom: transparent; border-bottom: transparent;
padding: 7px 15px; padding: 7px 15px;
margin-bottom: 15px; margin-bottom: 15px;
background: #E7E7E7; background: #E7E7E7;
} }
.tile_head h4 { .tile_head h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tiles-bottom { .tiles-bottom {
padding: 5px 10px; padding: 5px 10px;
margin-top: 10px; margin-top: 10px;
@ -1815,14 +1826,14 @@ table.tile_info span.right {
text-align: left; text-align: left;
} }
/* ********* /Tile stats **************************** */
/** /tile stats **/
/* ********* /inbox design **************************** */ /** inbox **/
a.star { a.star {
color: #428bca !important color: #428bca !important
} }
.mail_content { .mail_content {
background: none repeat scroll 0 0 #FFFFFF; background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px; border-radius: 4px;
@ -1831,19 +1842,23 @@ a.star {
padding: 10px 11px; padding: 10px 11px;
width: 100%; width: 100%;
} }
.list-btn-mail { .list-btn-mail {
margin-bottom: 15px; margin-bottom: 15px;
} }
.list-btn-mail.active { .list-btn-mail.active {
border-bottom: 1px solid #39B3D7; border-bottom: 1px solid #39B3D7;
padding: 0 0 14px; padding: 0 0 14px;
} }
.list-btn-mail > i { .list-btn-mail > i {
float: left; float: left;
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
width: 33px; width: 33px;
} }
.list-btn-mail > .cn { .list-btn-mail > .cn {
background: none repeat scroll 0 0 #39B3D7; background: none repeat scroll 0 0 #39B3D7;
border-radius: 12px; border-radius: 12px;
@ -1852,71 +1867,86 @@ a.star {
font-style: normal; font-style: normal;
padding: 0 5px; padding: 0 5px;
} }
.button-mail { .button-mail {
margin: 0 0 15px !important; margin: 0 0 15px !important;
text-align: left; text-align: left;
width: 100%; width: 100%;
} }
.buttons, button, .btn { .buttons, button, .btn {
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
} }
.btn-group-vertical .btn, .btn-group .btn { .btn-group-vertical .btn, .btn-group .btn {
margin-bottom: 0; margin-bottom: 0;
margin-right: 0; margin-right: 0;
} }
.mail_list_column { .mail_list_column {
border-left: 1px solid #DBDBDB; border-left: 1px solid #DBDBDB;
} }
.mail_view { .mail_view {
border-left: 1px solid #DBDBDB border-left: 1px solid #DBDBDB
} }
.mail_list { .mail_list {
width: 100%; width: 100%;
border-bottom: 1px solid #DBDBDB; border-bottom: 1px solid #DBDBDB;
margin-bottom: 2px; margin-bottom: 2px;
display: inline-block; display: inline-block;
} }
.mail_list .left { .mail_list .left {
width: 5%; width: 5%;
float: left; float: left;
margin-right: 3% margin-right: 3%
} }
.mail_list .right { .mail_list .right {
width: 90%; width: 90%;
float: left float: left
} }
.mail_list h3 { .mail_list h3 {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
margin: 0px 0 6px; margin: 0px 0 6px;
} }
.mail_list h3 small { .mail_list h3 small {
float: right; float: right;
color: #ADABAB; color: #ADABAB;
font-size: 11px; font-size: 11px;
line-height: 20px; line-height: 20px;
} }
.mail_list .badge { .mail_list .badge {
padding: 3px 6px; padding: 3px 6px;
font-size: 8px; font-size: 8px;
background: #BAB7B7 background: #BAB7B7
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.mail_list { .mail_list {
margin-bottom: 5px; margin-bottom: 5px;
display: inline-block; display: inline-block;
} }
} }
.mail_heading h4 { .mail_heading h4 {
font-size: 18px; font-size: 18px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
padding-bottom: 10px; padding-bottom: 10px;
margin-top: 20px; margin-top: 20px;
} }
.attachment { .attachment {
margin-top: 30px; margin-top: 30px;
} }
.attachment ul { .attachment ul {
width: 100%; width: 100%;
list-style: none; list-style: none;
@ -1924,31 +1954,78 @@ a.star {
display: inline-block; display: inline-block;
margin-bottom: 30px; margin-bottom: 30px;
} }
.attachment ul li { .attachment ul li {
float: left; float: left;
width: 150px; width: 150px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.attachment ul li img { .attachment ul li img {
height: 150px; height: 150px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.attachment ul li span { .attachment ul li span {
float: right; float: right;
} }
.attachment .file-name { .attachment .file-name {
float: left; float: left;
} }
.attachment .links { .attachment .links {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
} }
/* ********* /inbox design **************************** */ .compose {
padding: 0;
position: fixed;
bottom: 0;
right: 0;
background: #fff;
border: 1px solid #D9DEE4;
border-right: 0;
border-bottom: 0;
border-top-left-radius: 5px;
z-index: 9999;
display: none;
}
.compose .compose-header {
padding: 5px;
background: #169F85;
color: #fff;
border-top-left-radius: 5px;
}
.compose .compose-header .close {
text-shadow: 0 1px 0 #ffffff;
line-height: .8;
}
.compose .compose-body .editor.btn-toolbar {
margin: 0;
}
.compose .compose-body .editor-wrapper {
height: 100%;
min-height: 50px;
max-height: 180px;
border-radius: 0;
border-left: none;
border-right: none;
overflow: auto;
}
.compose .compose-footer {
padding: 10px;
}
/** /inbox **/
/* ********* form design **************************** */ /* ********* form design **************************** */
@ -3726,7 +3803,7 @@ header {
/** bootstrap-wysiwyg **/ /** bootstrap-wysiwyg **/
#editor { .editor-wrapper {
min-height: 250px; min-height: 250px;
background-color: white; background-color: white;
border-collapse: separate; border-collapse: separate;

36
production/form.html
View File

@ -325,13 +325,14 @@
<div class="title_left"> <div class="title_left">
<h3>Form Elements</h3> <h3>Form Elements</h3>
</div> </div>
<div class="title_right"> <div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-default" type="button">Go!</button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
@ -999,20 +1000,17 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" class="btn btn-primary">Go!</button> <button type="button" class="btn btn-primary">Go!</button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-12 col-sm-12 col-xs-12"> <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
@ -1035,8 +1033,6 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div id="alerts"></div> <div id="alerts"></div>
<div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor"> <div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group"> <div class="btn-group">
@ -1044,6 +1040,7 @@
<ul class="dropdown-menu"> <ul class="dropdown-menu">
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a> <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@ -1064,24 +1061,28 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a> <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a> <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a> <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a> <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a> <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a> <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a> <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a> <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a> <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a> <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a> <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a> <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a> <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append"> <div class="dropdown-menu input-append">
@ -1089,23 +1090,23 @@
<button class="btn" type="button">Add</button> <button class="btn" type="button">Add</button>
</div> </div>
<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a> <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a> <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" /> <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a> <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a> <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div> </div>
</div> </div>
<div id="editor"> <div id="editor" class="editor-wrapper"></div>
</div>
<textarea name="descr" id="descr" style="display:none;"></textarea> <textarea name="descr" id="descr" style="display:none;"></textarea>
<br /> <br />
<div class="ln_solid"></div> <div class="ln_solid"></div>
@ -1116,12 +1117,10 @@
<textarea class="resizable_textarea form-control" placeholder="This text area automatically resizes its height as you fill in more text courtesy of autosize-master it out..."></textarea> <textarea class="resizable_textarea form-control" placeholder="This text area automatically resizes its height as you fill in more text courtesy of autosize-master it out..."></textarea>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Form Input Grid <small>form input </small></h2> <h2>Form Input Grid <small>form input </small></h2>
@ -1419,12 +1418,6 @@
<!-- bootstrap-wysiwyg --> <!-- bootstrap-wysiwyg -->
<script> <script>
$(document).ready(function() {
$('.xcxc').click(function() {
$('#descr').val($('#editor').html());
});
});
$(document).ready(function() { $(document).ready(function() {
function initToolbarBootstrapBindings() { function initToolbarBootstrapBindings() {
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
@ -1484,7 +1477,8 @@
fileUploadError: showErrorAlert fileUploadError: showErrorAlert
}); });
window.prettyPrint && prettyPrint(); window.prettyPrint;
prettyPrint();
}); });
</script> </script>
<!-- /bootstrap-wysiwyg --> <!-- /bootstrap-wysiwyg -->

353
production/inbox.html
View File

@ -13,6 +13,8 @@
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome --> <!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- bootstrap-wysiwyg -->
<link href="../vendors/google-code-prettify/bin/prettify.min.css" rel="stylesheet">
<!-- Custom styling plus plugins --> <!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet">
@ -326,20 +328,20 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-default" type="button">Go!</button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2> Inbox Design<small>User Mail</small></h2> <h2>Inbox Design<small>User Mail</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
@ -358,103 +360,111 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<div class="row"> <div class="row">
<div class="col-sm-3 mail_list_column"> <div class="col-sm-3 mail_list_column">
<button id="compose" class="btn btn-sm btn-success btn-block" type="button">COMPOSE</button>
<div class="mail_list"> <a href="#">
<div class="left"> <div class="mail_list">
<i class="fa fa-circle"></i> <i class="fa fa-edit"></i> <div class="left">
<i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
</div>
<div class="right">
<h3>Dennis Mugo <small>3.00 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
<div class="right"> </a>
<h3>Dennis Mugo <small>3.00 PM</small></h3> <a href="#">
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p> <div class="mail_list">
<div class="left">
<i class="fa fa-star"></i>
</div>
<div class="right">
<h3>Jane Nobert <small>4.09 PM</small></h3>
<p><span class="badge">To</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
</div> </a>
<div class="mail_list"> <a href="#">
<div class="left"> <div class="mail_list">
<i class="fa fa-star"></i> <div class="left">
<i class="fa fa-circle-o"></i><i class="fa fa-paperclip"></i>
</div>
<div class="right">
<h3>Musimbi Anne <small>4.09 PM</small></h3>
<p><span class="badge">CC</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
<div class="right"> </a>
<h3>Jane Nobert <small>4.09 PM</small></h3> <a href="#">
<p><span class="badge">To</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p> <div class="mail_list">
<div class="left">
<i class="fa fa-paperclip"></i>
</div>
<div class="right">
<h3>Jon Dibbs <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
</div> </a>
<div class="mail_list"> <a href="#">
<div class="left"> <div class="mail_list">
<i class="fa fa-circle-o"></i><i class="fa fa-paperclip"></i> <div class="left">
.
</div>
<div class="right">
<h3>Debbis & Raymond <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
<div class="right"> </a>
<h3>Musimbi Anne <small>4.09 PM</small></h3> <a href="#">
<p><span class="badge">CC</span> Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p> <div class="mail_list">
<div class="left">
.
</div>
<div class="right">
<h3>Debbis & Raymond <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
</div> </a>
<div class="mail_list"> <a href="#">
<div class="left"> <div class="mail_list">
<i class="fa fa-paperclip"></i> <div class="left">
<i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
</div>
<div class="right">
<h3>Dennis Mugo <small>3.00 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
<div class="right"> </a>
<h3>Jon Dibbs <small>4.09 PM</small></h3> <a href="#">
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p> <div class="mail_list">
<div class="left">
<i class="fa fa-star"></i>
</div>
<div class="right">
<h3>Jane Nobert <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div> </div>
</div> </a>
<div class="mail_list">
<div class="left">
.
</div>
<div class="right">
<h3>Debbis & Raymond <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
<div class="mail_list">
<div class="left">
.
</div>
<div class="right">
<h3>Debbis & Raymond <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
<div class="mail_list">
<div class="left">
<i class="fa fa-circle"></i> <i class="fa fa-edit"></i>
</div>
<div class="right">
<h3>Dennis Mugo <small>3.00 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
<div class="mail_list">
<div class="left">
<i class="fa fa-star"></i>
</div>
<div class="right">
<h3>Jane Nobert <small>4.09 PM</small></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</div> </div>
<!-- /MAIL LIST --> <!-- /MAIL LIST -->
<!-- CONTENT MAIL --> <!-- CONTENT MAIL -->
<div class="col-sm-9 mail_view"> <div class="col-sm-9 mail_view">
<div class="inbox-body"> <div class="inbox-body">
<div class="mail_heading row"> <div class="mail_heading row">
<div class="col-md-8"> <div class="col-md-8">
<div class="compose-btn"> <div class="btn-group">
<a class="btn btn-sm btn-primary" href="mail_compose.html"><i class="fa fa-reply"></i> Reply</a> <button class="btn btn-sm btn-primary" type="button"><i class="fa fa-reply"></i> Reply</button>
<button title="" data-placement="top" data-toggle="tooltip" type="button" data-original-title="Print" class="btn btn-sm tooltips"><i class="fa fa-print"></i> </button> <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Forward"><i class="fa fa-share"></i></button>
<button title="" data-placement="top" data-toggle="tooltip" data-original-title="Trash" class="btn btn-sm tooltips"><i class="fa fa-trash-o"></i> <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Print"><i class="fa fa-print"></i></button>
</button> <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Trash"><i class="fa fa-trash-o"></i></button>
</div> </div>
</div> </div>
<div class="col-md-4 text-right"> <div class="col-md-4 text-right">
<p class="date"> 8:02 PM 12 FEB 2014</p> <p class="date"> 8:02 PM 12 FEB 2014</p>
@ -539,12 +549,11 @@
</ul> </ul>
</div> </div>
<div class="compose-btn pull-left"> <div class="btn-group">
<a class="btn btn-sm btn-primary" href="mail_compose.html"><i class="fa fa-reply"></i> Reply</a> <button class="btn btn-sm btn-primary" type="button"><i class="fa fa-reply"></i> Reply</button>
<button class="btn btn-sm "><i class="fa fa-arrow-right"></i> Forward</button> <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Forward"><i class="fa fa-share"></i></button>
<button title="" data-placement="top" data-toggle="tooltip" type="button" data-original-title="Print" class="btn btn-sm tooltips"><i class="fa fa-print"></i> </button> <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Print"><i class="fa fa-print"></i></button>
<button title="" data-placement="top" data-toggle="tooltip" data-original-title="Trash" class="btn btn-sm tooltips"><i class="fa fa-trash-o"></i> <button class="btn btn-sm btn-default" type="button" data-placement="top" data-toggle="tooltip" data-original-title="Trash"><i class="fa fa-trash-o"></i></button>
</button>
</div> </div>
</div> </div>
@ -570,6 +579,96 @@
</div> </div>
</div> </div>
<!-- compose -->
<div class="compose col-md-6 col-xs-12">
<div class="compose-header">
New Message
<button type="button" class="close compose-close">
<span>×</span>
</button>
</div>
<div class="compose-body">
<div id="alerts"></div>
<div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a data-edit="fontSize 5">
<p style="font-size:17px">Huge</p>
</a>
</li>
<li>
<a data-edit="fontSize 3">
<p style="font-size:14px">Normal</p>
</a>
</li>
<li>
<a data-edit="fontSize 1">
<p style="font-size:11px">Small</p>
</a>
</li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink" />
<button class="btn" type="button">Add</button>
</div>
<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
</div>
<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
</div>
<div id="editor" class="editor-wrapper"></div>
</div>
<div class="compose-footer">
<button id="send" class="btn btn-sm btn-success" type="button">Send</button>
</div>
</div>
<!-- /compose -->
<!-- jQuery --> <!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script> <script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap --> <!-- Bootstrap -->
@ -578,8 +677,86 @@
<script src="../vendors/fastclick/lib/fastclick.js"></script> <script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress --> <!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script> <script src="../vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-wysiwyg -->
<script src="../vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js"></script>
<script src="../vendors/jquery.hotkeys/jquery.hotkeys.js"></script>
<script src="../vendors/google-code-prettify/src/prettify.js"></script>
<!-- Custom Theme Scripts --> <!-- Custom Theme Scripts -->
<script src="js/custom.js"></script> <script src="js/custom.js"></script>
<!-- bootstrap-wysiwyg -->
<script>
$(document).ready(function() {
function initToolbarBootstrapBindings() {
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana'
],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function(idx, fontName) {
fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
});
$('a[title]').tooltip({
container: 'body'
});
$('.dropdown-menu input').click(function() {
return false;
})
.change(function() {
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
})
.keydown('esc', function() {
this.value = '';
$(this).change();
});
$('[data-role=magic-overlay]').each(function() {
var overlay = $(this),
target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
});
if ("onwebkitspeechchange" in document.createElement("input")) {
var editorOffset = $('#editor').offset();
$('.voiceBtn').css('position', 'absolute').offset({
top: editorOffset.top,
left: editorOffset.left + $('#editor').innerWidth() - 35
});
} else {
$('.voiceBtn').hide();
}
}
function showErrorAlert(reason, detail) {
var msg = '';
if (reason === 'unsupported-file-type') {
msg = "Unsupported format " + detail;
} else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
'<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
}
initToolbarBootstrapBindings();
$('#editor').wysiwyg({
fileUploadError: showErrorAlert
});
prettyPrint();
});
</script>
<!-- /bootstrap-wysiwyg -->
<!-- compose -->
<script>
$('#compose, .compose-close').click(function(){
$('.compose').slideToggle();
});
</script>>
<!-- /compose -->
</body> </body>
</html> </html>

4
production/js/custom.js
View File

@ -120,7 +120,9 @@ $(document).ready(function() {
// Tooltip // Tooltip
$(document).ready(function() { $(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
}); });
// /Tooltip // /Tooltip

99
production/less/custom.css
View File

@ -860,10 +860,6 @@ h2 {
legend { legend {
padding-bottom: 7px; padding-bottom: 7px;
} }
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.demo-placeholder { .demo-placeholder {
height: 280px; height: 280px;
} }
@ -1692,8 +1688,7 @@ h4.graph_title {
/* ********* /iconts-display **************************** */ /* ********* /iconts-display **************************** */
/* ********* Tile stats **************************** */ /** tile stats **/
.tile-stats { .tile-stats {
position: relative; position: relative;
display: block; display: block;
@ -1713,6 +1708,7 @@ h4.graph_title {
-webkit-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;
} }
.tile-stats:hover .icon i { .tile-stats:hover .icon i {
animation-name: tansformAnimation; animation-name: tansformAnimation;
animation-duration: .5s; animation-duration: .5s;
@ -1731,6 +1727,7 @@ h4.graph_title {
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
} }
.tile-stats .icon { .tile-stats .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -1740,6 +1737,7 @@ h4.graph_title {
top: 22px; top: 22px;
z-index: 1; z-index: 1;
} }
.tile-stats .icon i { .tile-stats .icon i {
margin: 0; margin: 0;
font-size: 60px; font-size: 60px;
@ -1747,11 +1745,13 @@ h4.graph_title {
vertical-align: bottom; vertical-align: bottom;
padding: 0; padding: 0;
} }
.tile-stats .count { .tile-stats .count {
font-size: 38px; font-size: 38px;
font-weight: bold; font-weight: bold;
line-height: 1.65857143 line-height: 1.65857143
} }
.tile-stats .count, .tile-stats h3, .tile-stats p { .tile-stats .count, .tile-stats h3, .tile-stats p {
position: relative; position: relative;
margin: 0; margin: 0;
@ -1759,13 +1759,16 @@ h4.graph_title {
z-index: 5; z-index: 5;
padding: 0; padding: 0;
} }
.tile-stats h3 { .tile-stats h3 {
color: #BAB8B8; color: #BAB8B8;
} }
.tile-stats p { .tile-stats p {
margin-top: 5px; margin-top: 5px;
font-size: 12px; font-size: 12px;
} }
.tile-stats > .dash-box-footer { .tile-stats > .dash-box-footer {
position: relative; position: relative;
text-align: center; text-align: center;
@ -1778,36 +1781,44 @@ h4.graph_title {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
text-decoration: none; text-decoration: none;
} }
.tile-stats > .dash-box-footer:hover { .tile-stats > .dash-box-footer:hover {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
.tile-stats > .dash-box-footer:hover { .tile-stats > .dash-box-footer:hover {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
table.tile_info { table.tile_info {
padding: 10px 15px; padding: 10px 15px;
} }
table.tile_info span.right { table.tile_info span.right {
margin-right: 0; margin-right: 0;
float: right; float: right;
position: absolute; position: absolute;
right: 4%; right: 4%;
} }
.tile:hover { .tile:hover {
text-decoration: none; text-decoration: none;
} }
.tile_header { .tile_header {
border-bottom: transparent; border-bottom: transparent;
padding: 7px 15px; padding: 7px 15px;
margin-bottom: 15px; margin-bottom: 15px;
background: #E7E7E7; background: #E7E7E7;
} }
.tile_head h4 { .tile_head h4 {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tiles-bottom { .tiles-bottom {
padding: 5px 10px; padding: 5px 10px;
margin-top: 10px; margin-top: 10px;
@ -1815,14 +1826,14 @@ table.tile_info span.right {
text-align: left; text-align: left;
} }
/* ********* /Tile stats **************************** */
/** /tile stats **/
/* ********* /inbox design **************************** */ /** inbox **/
a.star { a.star {
color: #428bca !important color: #428bca !important
} }
.mail_content { .mail_content {
background: none repeat scroll 0 0 #FFFFFF; background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px; border-radius: 4px;
@ -1831,19 +1842,23 @@ a.star {
padding: 10px 11px; padding: 10px 11px;
width: 100%; width: 100%;
} }
.list-btn-mail { .list-btn-mail {
margin-bottom: 15px; margin-bottom: 15px;
} }
.list-btn-mail.active { .list-btn-mail.active {
border-bottom: 1px solid #39B3D7; border-bottom: 1px solid #39B3D7;
padding: 0 0 14px; padding: 0 0 14px;
} }
.list-btn-mail > i { .list-btn-mail > i {
float: left; float: left;
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
width: 33px; width: 33px;
} }
.list-btn-mail > .cn { .list-btn-mail > .cn {
background: none repeat scroll 0 0 #39B3D7; background: none repeat scroll 0 0 #39B3D7;
border-radius: 12px; border-radius: 12px;
@ -1852,71 +1867,86 @@ a.star {
font-style: normal; font-style: normal;
padding: 0 5px; padding: 0 5px;
} }
.button-mail { .button-mail {
margin: 0 0 15px !important; margin: 0 0 15px !important;
text-align: left; text-align: left;
width: 100%; width: 100%;
} }
.buttons, button, .btn { .buttons, button, .btn {
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
} }
.btn-group-vertical .btn, .btn-group .btn { .btn-group-vertical .btn, .btn-group .btn {
margin-bottom: 0; margin-bottom: 0;
margin-right: 0; margin-right: 0;
} }
.mail_list_column { .mail_list_column {
border-left: 1px solid #DBDBDB; border-left: 1px solid #DBDBDB;
} }
.mail_view { .mail_view {
border-left: 1px solid #DBDBDB border-left: 1px solid #DBDBDB
} }
.mail_list { .mail_list {
width: 100%; width: 100%;
border-bottom: 1px solid #DBDBDB; border-bottom: 1px solid #DBDBDB;
margin-bottom: 2px; margin-bottom: 2px;
display: inline-block; display: inline-block;
} }
.mail_list .left { .mail_list .left {
width: 5%; width: 5%;
float: left; float: left;
margin-right: 3% margin-right: 3%
} }
.mail_list .right { .mail_list .right {
width: 90%; width: 90%;
float: left float: left
} }
.mail_list h3 { .mail_list h3 {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
margin: 0px 0 6px; margin: 0px 0 6px;
} }
.mail_list h3 small { .mail_list h3 small {
float: right; float: right;
color: #ADABAB; color: #ADABAB;
font-size: 11px; font-size: 11px;
line-height: 20px; line-height: 20px;
} }
.mail_list .badge { .mail_list .badge {
padding: 3px 6px; padding: 3px 6px;
font-size: 8px; font-size: 8px;
background: #BAB7B7 background: #BAB7B7
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.mail_list { .mail_list {
margin-bottom: 5px; margin-bottom: 5px;
display: inline-block; display: inline-block;
} }
} }
.mail_heading h4 { .mail_heading h4 {
font-size: 18px; font-size: 18px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
padding-bottom: 10px; padding-bottom: 10px;
margin-top: 20px; margin-top: 20px;
} }
.attachment { .attachment {
margin-top: 30px; margin-top: 30px;
} }
.attachment ul { .attachment ul {
width: 100%; width: 100%;
list-style: none; list-style: none;
@ -1924,31 +1954,78 @@ a.star {
display: inline-block; display: inline-block;
margin-bottom: 30px; margin-bottom: 30px;
} }
.attachment ul li { .attachment ul li {
float: left; float: left;
width: 150px; width: 150px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.attachment ul li img { .attachment ul li img {
height: 150px; height: 150px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.attachment ul li span { .attachment ul li span {
float: right; float: right;
} }
.attachment .file-name { .attachment .file-name {
float: left; float: left;
} }
.attachment .links { .attachment .links {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
} }
/* ********* /inbox design **************************** */ .compose {
padding: 0;
position: fixed;
bottom: 0;
right: 0;
background: #fff;
border: 1px solid #D9DEE4;
border-right: 0;
border-bottom: 0;
border-top-left-radius: 5px;
z-index: 9999;
display: none;
}
.compose .compose-header {
padding: 5px;
background: #169F85;
color: #fff;
border-top-left-radius: 5px;
}
.compose .compose-header .close {
text-shadow: 0 1px 0 #ffffff;
line-height: .8;
}
.compose .compose-body .editor.btn-toolbar {
margin: 0;
}
.compose .compose-body .editor-wrapper {
height: 100%;
min-height: 50px;
max-height: 180px;
border-radius: 0;
border-left: none;
border-right: none;
overflow: auto;
}
.compose .compose-footer {
padding: 10px;
}
/** /inbox **/
/* ********* form design **************************** */ /* ********* form design **************************** */
@ -3726,7 +3803,7 @@ header {
/** bootstrap-wysiwyg **/ /** bootstrap-wysiwyg **/
#editor { .editor-wrapper {
min-height: 250px; min-height: 250px;
background-color: white; background-color: white;
border-collapse: separate; border-collapse: separate;