Skip to content

U
ulakbus-ui
Commit fece6430 authored by Evren Kutar's avatar Evren Kutar
Browse files
Options

Merge branch 'Dashboard-Works'

parents f1031741 fc44b359
Hide whitespace changes
Inline Side-by-side
Showing with 642 additions and 2 deletions
app/app.css
View file @ fece6430
......@@ -39,6 +39,11 @@ body {
a {
color:#a61229;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-ms-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
}
a:hover {
......@@ -452,6 +457,145 @@ select {
padding-left: 52px;
}
.sidebar-person-info {
overflow-x: visible;
overflow-y: auto;
position: absolute;
width: 100%;
max-height: calc(85% - 139px);
background: #fff;
display:none;
}
.sidebar-person-info .identity {
color:#555;
padding:15px;
padding-bottom: 0px;
}
.sidebar-person-info .identity-header {
border-bottom: 1px solid #ECECEC;
}
.sidebar-person-info .identity-info {
margin-top:10px;
color: #6D6D6D;
border-bottom: 1px solid #ECECEC;
}
.sidebar-person-info .identity-info div {
margin-bottom:4px;
}
.sidebar-person-info .identity-info div div {
float:left;
width:80%;
}
.sidebar-person-info .identity-info span {
float:left;
width:27px;
margin-top: 3px;
}
.sidebar-person-info .identity img {
width:50px;
height:50px;
border-radius:100%;
margin:10px auto;
float:left;
margin-right:10px;
}
.sidebar-person-info .identity p.identity-name {
font-family:'robotomedium';
font-size:16px;
margin-bottom: 0;
margin-top:13px;
}
.sidebar-person-info .identity p.identity-surname {
font-family:'robotomedium';
font-size:16px;
margin-bottom: 0;
text-transform:uppercase;
}
.sidebar-person-info .identity p.identity-email {
float:left;
}
.sidebar-person-info .identity ul {
margin:0;
padding:0;
}
.sidebar-person-info .identity ul li {
list-style:none;
border:none;
}
.sidebar-person-info .person-actions {
}
.sidebar-person-info .person-actions ul {
margin:0;
padding:0;
}
.sidebar-person-info .person-actions ul li {
list-style:none;
border:none;
}
.sidebar-person-info .person-actions ul li a {
text-decoration:none;
color:#555;
display:block;
padding:10px 15px;
font-family: 'robotobold';
}
.sidebar-person-info .person-actions ul li a:hover {
background-color:#f5f5f5;
}
.sidebar-person-info .person-actions ul li a span {
margin-right:13px;
}
.sidebar-person-info .close-sidebar-person-info {
width: 45%;
margin-left: auto;
margin-right: auto;
margin-top: 11px;
border-radius: 5px;
padding: 8px 10px;
text-align: center;
cursor: pointer;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
background-color: #B93939;
color: #fff;
display:block;
}
.sidebar-person-info .close-sidebar-person-info:hover {
background-color:#9A1026;
}
.sidebar-person-info .close-sidebar-person-info span {
font-size: 12px;
color: #555;
margin-right: 6px;
position: relative;
top: -1px;
}
.btn-outline {
color: inherit;
background-color: transparent;
......@@ -834,6 +978,235 @@ table.dataTable thead .sorting:after {
color:#fff;
}
.dashboard-main-search {
width: calc(100% - 300px);
}
.dashboard-main-search .dashboard-student-search h3,
.dashboard-main-search .dashboard-personnel-search h3 {
font-family: 'robotoblack';
color: #5A5A5A;
letter-spacing: 1px;
}
.dashboard-main-search input {
width: 70%;
border-radius: 3px;
border: 1px solid #e0e0e0;
padding: 7px;
outline: none;
border-right: none;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.dashboard-main-search .fa {
padding: 10px 15px;
border: 1px solid #e0e0e0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
background-color: #FBF9F9;
cursor:pointer;
color:#5A5A5A;
}
.dashboard-student-search {
float: left;
width: 50%;
border-right: 1px solid #e8e8e8;
}
.dashboard-personnel-search {
float: left;
width: 50%;
}
.dashboard-search-results {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
.dashboard-search-results ul {
max-height: 600px;
overflow-y: auto;
padding:0;
webkit-box-shadow: 0 0 4px rgba(0,0,0,0.15);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.15);
box-shadow: 0 0 4px rgba(0,0,0,0.15);
background-color: #fff;
border-radius: 3px;
}
.dashboard-search-results ul li {
list-style:none;
border-bottom: 1px solid #F3F3F3;
}
.dashboard-search-results ul li:last-child {
border:none;
}
.dashboard-search-results ul li a {
color:#666;
padding: 10px 25px;
display:block;
text-decoration:none;
}
.dashboard-search-results ul li a:hover {
background-color:#f5f5f5;
}
.dashboard-search-results ul li:first-child a:hover {
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.dashboard-search-results ul li:last-child a:hover {
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
.right-sidebar {
width: 300px;
background-color: #FFFFFF;
border-left: 1px solid #ccc;
height: calc(100% - 140px);
position: absolute;
top: 98px;
right: 0px;
overflow-y: auto;
}
.right-sidebar-box {
border-bottom: 1px solid #D0D0D0;
}
.right-sidebar-title {
border-bottom: 1px solid #D0D0D0;
padding: 10px;
background-color: #F3F3F3;
}
.right-sidebar-title h3 {
float: left;
margin: 0;
font-size: 16px;
color: #666;
font-weight: bold;
font-family: 'robotobold';
text-transform: uppercase;
line-height:normal;
}
.right-sidebar-title span a {
float: right;
color: #A61229;
text-decoration:none;
}
.right-sidebar-message-block {
border-bottom: 1px solid #F3F3F3;
}
.right-sidebar-message-block:last-child {
border-bottom:none;
}
.right-sidebar-message-block a {
padding: 10px 15px;
display: block;
color: #555;
}
.right-sidebar-message-block a:hover{
background-color:#f5f5f5;
}
.right-sidebar-message-block a img {
width: 30px;
height: 30px;
border-radius: 100%;
float: left;
}
.right-sidebar-message-content {
float: left;
margin-left: 15px;
position:relative;
width: calc(100% - 50px);
}
.right-sidebar-message-content div:nth-child(1) {
width: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: 'robotomedium';
font-size: 15px;
margin-top: -5px;
}
.right-sidebar-message-content div:nth-child(2) {
width: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-top: -5px;
}
.right-sidebar-message-content div:nth-child(3) {
color: #8C8C8C;
position: absolute;
right: 0;
top: 5px;
}
.right-sidebar-task-block a {
padding: 10px 25px;
display: block;
color: #555;
text-decoration:none;
}
.right-sidebar-task-block a:hover {
background-color:#f5f5f5;
}
.right-sidebar-task-block .task-type {
padding: 5px 10px;
font-size: 15px;
font-family: 'robotomedium';
color: #666;
}
.right-sidebar-task-block .progress {
margin-top: 5px;
margin-bottom: 0;
}
.right-sidebar-task-block .progress .progress-bar {
background-color: #A61229;
}
.right-sidebar-announcement-block a,
.right-sidebar-last-action-block a {
width: 100%;
display: block;
padding: 7px 15px;
color:#555;
text-decoration:none;
border-bottom: 1px solid #f3f3f3;
}
.right-sidebar-announcement-block a:hover,
.right-sidebar-last-action-block a:hover {
background-color:#f5f5f5;
}
/* END OF DASHBOARD */
......@@ -854,7 +1227,6 @@ table.dataTable thead .sorting:after {
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.1);
box-shadow: 0 0 3px rgba(0,0,0,0.1);
background-color:#fff;
position:relative;
}
......@@ -1104,6 +1476,10 @@ table.dataTable thead .sorting:after {
color: #A7A7A7;
border-bottom: 1px solid #ccc;
}
.sidebar-collapse-button {
display:none;
}
}
......
app/components/dashboard/dashboard.html
View file @ fece6430
<div ng-app="ulakbus.dashboard" class="dashboard">
<div class="starter-template">
<!--
<div class="row">
<div class="major-buttons">
<div class="col-md-4">
......@@ -17,6 +18,226 @@
</div>
</div>
</div>
-->
<div class="dashboard-main-search clearfix">
<div class="dashboard-student-search">
<center>
<h3>ÖĞRENCİ</h3>
<input type="text" placeholder="Öğrenci ara"><span class="fa fa-search"></span>
</center>
<div class="dashboard-search-results">
<ul>
<li><a href="#">Sample Student 1</a></li>
<li><a href="#">Sample Student 2</a></li>
<li><a href="#">Sample Student 3</a></li>
<li><a href="#">Sample Student 4</a></li>
<li><a href="#">Sample Student 5</a></li>
<li><a href="#">Sample Student 6</a></li>
<li><a href="#">Sample Student 7</a></li>
<li><a href="#">Sample Student 8</a></li>
</ul>
</div>
<!-- end of dashboard-student-search-results -->
</div>
<!-- end of dashboard-student-search -->
<div class="dashboard-personnel-search">
<center>
<h3>PERSONEL</h3>
<input type="text" placeholder="Personel ara"><span class="fa fa-search"></span>
</center>
<div class="dashboard-search-results">
<ul>
<li><a href="#">Sample Personnel 1</a></li>
<li><a href="#">Sample Personnel 2</a></li>
<li><a href="#">Sample Personnel 3</a></li>
<li><a href="#">Sample Personnel 4</a></li>
<li><a href="#">Sample Personnel 5</a></li>
<li><a href="#">Sample Personnel 6</a></li>
<li><a href="#">Sample Personnel 7</a></li>
<li><a href="#">Sample Personnel 8</a></li>
</ul>
</div>
<!-- end of dashboard-personnel-search-results -->
</div>
<!-- end of dashboard-personnel-search -->
</div>
<!-- end of dashboard-main-search -->
<div class="right-sidebar">
<div class="right-sidebar-box">
<div class="right-sidebar-messages">
<div class="right-sidebar-title clearfix">
<h3>Mesajlar</h3>
<span><a href="#">Tüm Mesajlar</a></span>
</div>
<!-- end of right-sidebar-title -->
<div class="right-sidebar-message-block">
<a class="clearfix" href="#">
<img src="../../../img/sample-profile-pic.jpg">
<div class="right-sidebar-message-content">
<div>Name Surname</div>
<div>Subject of the Message</div>
<div>16:05</div>
</div>
<!-- end of right-sidebar-message-content -->
</a>
</div>
<!-- end of right-sidebar-message-block -->
<div class="right-sidebar-message-block">
<a class="clearfix" href="#">
<img src="../../../img/sample-profile-pic.jpg">
<div class="right-sidebar-message-content">
<div>Name Surname</div>
<div>Subject of the Message</div>
<div>16:05</div>
</div>
<!-- end of right-sidebar-message-content -->
</a>
</div>
<!-- end of right-sidebar-message-block -->
<div class="right-sidebar-message-block">
<a class="clearfix" href="#">
<img src="../../../img/sample-profile-pic.jpg">
<div class="right-sidebar-message-content">
<div>Name Surname</div>
<div>Subject of the Message</div>
<div>16:05</div>
</div>
<!-- end of right-sidebar-message-content -->
</a>
</div>
<!-- end of right-sidebar-message-block -->
<div class="right-sidebar-message-block">
<a class="clearfix" href="#">
<img src="../../../img/sample-profile-pic.jpg">
<div class="right-sidebar-message-content">
<div>Name Surname</div>
<div>Subject of the Message</div>
<div>16:05</div>
</div>
<!-- end of right-sidebar-message-content -->
</a>
</div>
<!-- end of right-sidebar-message-block -->
<div class="right-sidebar-message-block">
<a class="clearfix" href="#">
<img src="../../../img/sample-profile-pic.jpg">
<div class="right-sidebar-message-content">
<div>Name Surname</div>
<div>Subject of the Message</div>
<div>16:05</div>
</div>
<!-- end of right-sidebar-message-content -->
</a>
</div>
<!-- end of right-sidebar-message-block -->
</div>
<!-- end of right-sidebar-messages -->
</div>
<!-- end of right-sidebar-box -->
<div class="right-sidebar-box">
<div class="right-sidebar-tasks">
<div class="right-sidebar-title clearfix">
<h3>Görevler</h3>
<span><a href="#">Tüm Görevler</a></span>
</div>
<!-- end of right-sidebar-title -->
<div class="right-sidebar-task-block">
<div class="task-type">Devam Eden Görevler</div>
<a href="#">
<div class="task-title">Öğrenci Kayıt</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width:25%;">
25%
</div>
</div>
<!-- end of progress -->
</a>
<a href="#">
<div class="task-title">Personel Atama</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<!-- end of progress -->
</a>
</div>
<!-- end of right-sidebar-task-block -->
<div class="right-sidebar-task-block">
<div class="task-type">Onay Bekleyen Görevler</div>
<a href="#">
<div class="task-title">Personel Terfi</div>
</a>
<a href="#">
<div class="task-title">Ders Seçimi Onay</div>
</a>
</div>
<!-- end of right-sidebar-task-block -->
</div>
<!-- end of right-sidebar-tasks -->
</div>
<!-- end of right-sidebar-box -->
<div class="right-sidebar-box">
<div class="right-sidebar-announcements">
<div class="right-sidebar-title clearfix">
<h3>Duyurular</h3>
<span><a href="#">Tüm Duyurular</a></span>
</div>
<!-- end of right-sidebar-title -->
<div class="right-sidebar-announcement-block">
<a href="#">Birinci dönem bitimine 10 gün kaldı.</a>
<a href="#">Ders seçimi işlemleri xx tarihinde başlayacaktır.</a>
</div>
<!-- end of right-sidebar-status-block -->
</div>
<!-- end of right-sidebar-status -->
</div>
<!-- end of right-sidebar-box -->
<div class="right-sidebar-box">
<div class="right-sidebar-last-actions">
<div class="right-sidebar-title clearfix">
<h3>Son İşlemler</h3>
<span><a href="#">Tüm İşlemler</a></span>
</div>
<!-- end of right-sidebar-title -->
<div class="right-sidebar-last-action-block">
<a href="#">Birinci dönem bitimine 10 gün kaldı.</a>
<a href="#">Ders seçimi işlemleri xx tarihinde başlayacaktır.</a>
</div>
<!-- end of right-sidebar-status-block -->
</div>
<!-- end of right-sidebar-status -->
</div>
<!-- end of right-sidebar-box -->
</div>
<!-- end of right-sidebar -->
</div>
</div>
\ No newline at end of file
app/shared/templates/directives/sidebar.html
View file @ fece6430
......@@ -21,6 +21,49 @@
</ul>
</div>
<!-- /.sidebar-collapse -->
<!-- sidebar-person-info -->
<div class="sidebar-person-info">
<button class="btn btn-primary close-sidebar-person-info">Profili Kapat</button>
<div class="identity">
<div class="identity-header clearfix">
<img src="../../../img/sample-profile-pic.jpg">
<div class="pull-left">
<p class="identity-name">Erkan</p>
<p class="identity-surname">Öğümsöğütlü</p>
</div>
</div>
<!-- end of identity-header -->
<div class="identity-info">
<div class="clearfix">
<span class="fa fa-phone"></span> <div>539 241 65 08</div>
</div>
<div class="clearfix">
<span class="fa fa-envelope"></span>
<div>erkanogum@gmail.com</div>
</div>
<div class="clearfix">
<span class="fa fa-home"></span>
<div>İşçi Blokları Mah. 1524. sokak B Blok 6. Kat A Kanat 27 numara</div>
</div>
</div>
</div>
<!-- end of identity -->
<div class="person-actions">
<ul>
<li><a href="#"><span class="fa fa-trash"></span> Action 1</a></li>
<li><a href="#"><span class="fa fa-trash"></span> Action 2</a></li>
<li><a href="#"><span class="fa fa-trash"></span> Action 3</a></li>
<li><a href="#"><span class="fa fa-trash"></span> Action 4</a></li>
<li><a href="#"><span class="fa fa-trash"></span> Action 5</a></li>
</ul>
</div>
<!-- end of person-actions -->
</div>
<!-- end of sidebar-person-info -->
<footer>
<span>v <app-version></app-version> &copy; ZetaOps</span>
</footer>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment