Skip to content

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

Merge branch 'Student-Dashboard-UI-Improvement' into develop

parents c04385ca 30d0356b
Hide whitespace changes
Inline Side-by-side
Showing with 473 additions and 1 deletion
app/app.css
View file @ 6fea70a1
......@@ -18,6 +18,13 @@ body {
background-color:#999;
}
.tooltip {
font-family:'robotolight';
font-size:13px;
letter-spacing:0.3px;
padding:15px;
}
.badge {
border-radius: 100%;
width: 22px;
......@@ -1570,6 +1577,225 @@ table.dataTable thead .sorting:after {
/* END OF SIDEBAR COLLAPSE */
/* STUDENT DASHBOARD */
.student-dashboard a:hover {
text-decoration:none;
background-color:#f9f9f9;
}
.student-dashboard .panel-body ul,
.student-dashboard .panel-body {
padding:0;
margin:0;
}
.student-dashboard .panel-body ul li {
list-style: none;
border-bottom: 1px solid #f5f5f5;
font-size:16px;
}
.student-dashboard .panel-body ul li a {
padding:25px;
display:block;
color:#333;
}
.student-dashboard .panel-body ul li:last-child {
border:none;
}
.student-course-list .panel-body,
.student-assignment-list .panel-body {
height:437px;
overflow-y:auto;
}
.student-course-list .panel-body ul li span {
margin-right:15px;
}
.student-assignment-list .assignment-status {
width:35px;
float:left;
}
.student-assignment-list .assignment-status .assignment-circle {
width:10px;
height:10px;
border-radius:100%;
margin-top: 7px;
margin-left: 3px;
}
.student-assignment-list .urgent-assignment .assignment-circle {
background-color:#D4244B;
}
.student-assignment-list .urgent-assignment .assignment-due-date {
color:#D4244B;
}
.student-assignment-list .approaching-assignment .assignment-circle {
background-color:#F7941E;
}
.student-assignment-list .approaching-assignment .assignment-due-date {
color:#F7941E;
}
.student-assignment-list .non-urgent-assignment .assignment-circle {
background-color:#01AEEE;
}
.student-assignment-list .non-urgent-assignment .assignment-due-date {
color:#01AEEE;
}
.student-assignment-list .assignment-title {
width:calc(100% - 100px);
float:left;
}
.student-assignment-list .assignment-title {
font-family:'robotomedium';
}
.student-assignment-list .assignment-title div:nth-child(1) {
font-family:'robotomedium';
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 15px;
}
.student-assignment-list .assignment-title div:nth-child(2) {
font-size:15px;
font-family:'robotolight';
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 15px;
}
.student-assignment-list .assignment-due-date {
width:65px;
float:left;
font-family:'robotolight';
position:relative;
}
.student-assignment-list .assignment-due-date div:nth-child(1) {
width:65px;
font-size:22px;
position:absolute;
text-align:center;
}
.student-assignment-list .assignment-due-date div:nth-child(2) {
width:65px;
font-size:13px;
position:absolute;
margin-top:25px;
text-align:center;
}
.student-assignment-list .last-assignment .assignment-status div {
width:3px;
height:47px;
background-color: #00A650;
margin-left: 6px;
}
.student-assignment-list .last-assignment .panel-title {
background-color: #fff;
border-color: #F2F2F2;
font-family: 'robotolight';
color: rgb(95, 95, 95);
padding: 12px 0 0;
font-size: 18px;
}
.student-assignment-list .last-assignment .assignment-due-date i {
color:#01A550;
margin-top: 16px;
}
.student-announcement-list .announcement-date {
float:left;
font-family:'robotolight';
margin-right:25px;
width:30px;
}
.student-announcement-list .announcement-text {
float:left;
width:calc(100% - 55px);
margin-top:3px;
}
.student-announcement-list .announcement-date div:first-child {
font-size: 22px;
text-align: center;
}
.student-announcement-list .announcement-date div:last-child {
font-size: 13px;
text-align: center;
}
.student-message-list .profile-pic {
width: 65px;
display: block;
margin-right: 20px;
float: left;
}
.student-message-list .profile-pic img {
width: 100%;
border-radius: 100%;
}
.student-message-list .message-content {
width: calc(100% - 200px);
float: left;
}
.student-message-list .message-content div:first-child {
margin-top:7px;
font-family:'robotomedium';
font-size:18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.student-message-list .message-content div:last-child {
margin-top: 5px;
color: #848484;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.student-message-list .message-time {
width: 100px;
float: right;
text-align:right;
padding-top: 21px;
color: #B3B3B3;
font-size: 14px;
}
/* END OF STUDENT DASHBOARD */
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
......
app/components/dashboard/dashboard.html
View file @ 6fea70a1
<div ng-app="ulakbus.dashboard" class="dashboard">
<div ng-app="ulakbus.dashboard" class="dashboard student-dashboard">
<div class="starter-template">
<!-- STUDENT DASHBOARD -->
<div class="row">
<!-- STUDENT COURSES -->
<div class="col-lg-6 col-md-12 student-course-list">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Dersler</div>
</div>
<div class="panel-body">
<ul>
<li><a href="#"><span>181</span> Basic Physics</a></li>
<li><a href="#"><span>421</span> Research and Development</a></li>
<li><a href="#"><span>435</span> Project Management and Development</a></li>
<li><a href="#"><span>207</span> Design and Use of Instructional Material</a></li>
<li><a href="#"><span>323</span> Multimedia Design and Development</a></li>
<li><a href="#"><span>475</span> Climate Change Education for Sustainability</a></li>
</ul>
</div>
</div>
</div>
<!-- END OF STUDENT COURSES -->
<!-- STUDENT ASSIGNMENTS -->
<div class="col-lg-6 col-md-12 student-assignment-list">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Görevler</div>
</div>
<div class="panel-body">
<ul>
<li class="urgent-assignment">
<a href="#" class="clearfix">
<span class="assignment-status">
<div class="assignment-circle" uib-tooltip="Acil"></div>
</span>
<span class="assignment-title">
<div>Needs Assessment Document</div>
<div>435 - Project Management and Development</div>
</span>
<span class="assignment-due-date">
<div>18</div>
<div>ŞUB</div>
</span>
</a>
</li>
<!-- end of urgent-assignment -->
<li class="approaching-assignment">
<a href="#" class="clearfix">
<span class="assignment-status">
<div class="assignment-circle" uib-tooltip="Yaklaşıyor"></div>
</span>
<span class="assignment-title">
<div>Storyboard Design</div>
<div>435 - Project Management and Development</div>
</span>
<span class="assignment-due-date">
<div>27</div>
<div>ŞUB</div>
</span>
</a>
</li>
<!-- end of approaching-assignment -->
<li class="non-urgent-assignment">
<a href="#" class="clearfix">
<span class="assignment-status">
<div class="assignment-circle" uib-tooltip="Acil olmayan"></div>
</span>
<span class="assignment-title">
<div>Design Report</div>
<div>435 - Project Management and Development</div>
</span>
<span class="assignment-due-date">
<div>05</div>
<div>MAR</div>
</span>
</a>
</li>
<!-- end of non-urgent-assignment -->
<li class="last-assignment">
<div class="panel-heading">
<div class="panel-title">Tamamlanan Son Görevler</div>
</div>
<a href="#" class="clearfix">
<span class="assignment-status">
<div></div>
</span>
<span class="assignment-title">
<div>Design Report</div>
<div>435 - Project Management and Development</div>
</span>
<span class="assignment-due-date">
<div><i class="fa fa-check"></i></div>
</span>
</a>
</li>
<!-- end of last-assignment -->
</ul>
</div>
</div>
</div>
<!-- END OF STUDENT ASSIGNMENTS -->
</div>
<div class="row">
<!-- STUDENT ANNOUNCEMENTS -->
<div class="col-lg-6 col-md-12 student-announcement-list">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Duyurular</div>
</div>
<div class="panel-body">
<ul>
<li>
<a href="#" class="clearfix">
<span class="announcement-date">
<div>05</div>
<div>MAR</div>
</span>
<span class="announcement-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non molestie est. Phasellus suscipit ut quam pulvinar tincidunt. Etiam accumsan vel turpis vitae vehicula. Quisque vel est nisl. In massa sapien, congue at dapibus sed, maximus eu urna.
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<span class="announcement-date">
<div>24</div>
<div>MAR</div>
</span>
<span class="announcement-text">
Donec nec purus et nunc imperdiet vulputate quis vel turpis. Suspendisse nec bibendum odio. Praesent et enim blandit, varius diam
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<span class="announcement-date">
<div>11</div>
<div>NİS</div>
</span>
<span class="announcement-text">
Etiam eget libero sapien. Nulla vitae ultricies quam. Aliquam gravida ligula eu leo ullamcorper tristique. Donec accumsan nec odio non viverra.
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<span class="announcement-date">
<div>19</div>
<div>MAY</div>
</span>
<span class="announcement-text">
Maecenas fermentum, metus sed feugiat lacinia, massa sem facilisis erat, eget sollicitudin ante ipsum id dolor. Curabitur id odio eleifend, lobortis ipsum id, lacinia lacus. Morbi ac rutrum nisl, id auctor purus. Fusce vulputate elit sed massa pellentesque convallis.
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END OF STUDENT ANNOUNCEMENTS -->
<!-- STUDENT MESSAGES -->
<div class="col-lg-6 col-md-12 student-message-list">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Görevler</div>
</div>
<div class="panel-body">
<ul>
<li>
<a href="#" class="clearfix">
<span class="profile-pic">
<img src="../../img/gokhan.jpg">
</span>
<span class="message-content">
<div>Gökhan Boranalp</div>
<div>Lorem ipsum dolor sit amet.</div>
</span>
<span class="message-time">
14:40
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<span class="profile-pic">
<img src="../../img/evren.jpg">
</span>
<span class="message-content">
<div>Evren Kutar</div>
<div>Donec nec purus et nunc imperdiet vulputate quis vel turpis. Suspendisse nec bibendum odio. Praesent et enim blandit, varius diam in.</div>
</span>
<span class="message-time">
12:36
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<span class="profile-pic">
<img src="../../img/erkan.jpg">
</span>
<span class="message-content">
<div>Erkan Öğümsöğütlü</div>
<div>Duis mi sem, euismod ut dui eget, egestas tincidunt ex. Aliquam id iaculis risus.</div>
</span>
<span class="message-time">
Yesterday
</span>
</a>
</li>
<li>
<a href="#" class="clearfix">
<span class="profile-pic">
<img src="../../img/sample-profile-pic.jpg">
</span>
<span class="message-content">
<div>Teddy Joyner</div>
<div>Nulla vitae ultricies quam.</div>
</span>
<span class="message-time">
16.02.2016
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END OF STUDENT MESSAGES -->
</div>
<!-- END OF STUDENT DASHBOARD -->
<div class="dashboard-main-search clearfix">
......
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