schedule table improvements
This commit is contained in:
tmshv committed
1 parent
6861e365ce
commit
1c92ecfef1
4 files changed
+147
-208
No files matched your search
@@ -0,0 +1,121 @@
|
||||
$current-week-day-color: #4b8ff3;
|
||||
|
||||
.schedule-table {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-width: 50em;
|
||||
position: relative;
|
||||
|
||||
table {
|
||||
margin: 2em auto;
|
||||
border-spacing: 0;
|
||||
text-align: center;
|
||||
|
||||
thead {
|
||||
animation-duration: 0.3s;
|
||||
|
||||
th {
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.group {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #f0f2da;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: baseline;
|
||||
|
||||
&:not(.group) {
|
||||
width: 15%;
|
||||
padding: .75em 1em;
|
||||
}
|
||||
|
||||
&.group {
|
||||
width: 5%;
|
||||
|
||||
p.name {
|
||||
font-size: 1.25em;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead.fix {
|
||||
position: fixed;
|
||||
top: 41px;
|
||||
background-color: rgba(255, 255, 255, .95);
|
||||
z-index: 50;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.current {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $current-week-day-color;
|
||||
}
|
||||
|
||||
th {
|
||||
height: auto;
|
||||
|
||||
.day {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin: 0 0 .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody.fix:before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.lesson {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.teacher {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.current {
|
||||
border-left: 2px solid $current-week-day-color;
|
||||
border-right: 2px solid $current-week-day-color;
|
||||
}
|
||||
|
||||
.canceled:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 15%;
|
||||
background-image: url(lesson-canceled.svg);
|
||||
}
|
||||
}
|
||||
+3
-198
@@ -9,208 +9,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.schedule{
|
||||
.schedule {
|
||||
position: relative;
|
||||
margin: 30px auto 0 auto;
|
||||
padding-bottom: 50px;
|
||||
text-align: center;
|
||||
|
||||
& > p{
|
||||
& > p {
|
||||
margin: 0 0 1em;
|
||||
//text-align: right;
|
||||
}
|
||||
|
||||
.schedule-block{
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
table{
|
||||
position: relative;
|
||||
margin: 30px auto 0 auto;
|
||||
|
||||
border-spacing: 0px;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
td{
|
||||
position: relative;
|
||||
|
||||
&:not(.group){
|
||||
min-width: 150px;
|
||||
/* width: 15%;*/
|
||||
width: 150px;
|
||||
padding: 8px 10px 8px;
|
||||
|
||||
vertical-align:baseline;
|
||||
}
|
||||
|
||||
&.group{
|
||||
min-width: 60px;
|
||||
/* width: 5%;*/
|
||||
width: 60px;
|
||||
position: relative;
|
||||
vertical-align:baseline;
|
||||
|
||||
p.name{
|
||||
font-size: 1.4em;
|
||||
font-weight: 800;
|
||||
color: #242424;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead{
|
||||
animation-duration: 0.3s;
|
||||
|
||||
th{
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
height: 80px;
|
||||
padding: 10px 0 0;
|
||||
|
||||
&.weekend{
|
||||
color: #f52;
|
||||
}
|
||||
}
|
||||
|
||||
.date{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.group{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even){
|
||||
background-color: #f3f3fd;
|
||||
}
|
||||
|
||||
.lesson{
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.teacher{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a{
|
||||
color: black;
|
||||
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.current{
|
||||
border-left: 2px solid #4b8ff3;
|
||||
border-right: 2px solid #4b8ff3;
|
||||
|
||||
&.first{
|
||||
border-radius: 15px 15px 0 0;
|
||||
border-top: 2px solid #4b8ff3;
|
||||
}
|
||||
|
||||
&.last{
|
||||
border-radius: 0 0 15px 15px;
|
||||
border-bottom: 2px solid #4b8ff3;
|
||||
}
|
||||
}
|
||||
|
||||
.canceled:before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
width:70%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 15%;
|
||||
background-image: url(lesson-canceled.svg);
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
margin: 0 5px;
|
||||
|
||||
&.current{
|
||||
color: #68aeff;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
/* color: #555;*/
|
||||
/* padding: 5px 15px;*/
|
||||
/* border: 1px solid #4b8ff3;*/
|
||||
/* border-radius: 100px;*/
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
color: #3f9cea;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
thead.fix{
|
||||
position: fixed;
|
||||
top: 42px;
|
||||
background-color: rgba(255, 255, 255, 0.96);
|
||||
z-index: 50;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0 0 20px 20px;
|
||||
|
||||
.current{
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
color: #3f9cea;
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
th{
|
||||
height: auto;
|
||||
|
||||
:not(.group){
|
||||
min-width: 150px;
|
||||
/* width: 15%;*/
|
||||
width: 150px;
|
||||
padding: 8px 10px 8px;
|
||||
}
|
||||
|
||||
&.group{
|
||||
width: 63px;
|
||||
}
|
||||
|
||||
.day{
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.date{
|
||||
margin: 15px 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody.fix:before{
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-device-width: 400px){
|
||||
.schedule{
|
||||
thead.fix{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
var getDates = require('../../utils/date').getDates;
|
||||
|
||||
module.exports = angular.module('hudozka.schedule', [])
|
||||
.directive('schedule', function($compile){
|
||||
.directive('schedule', function ($compile) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
@@ -22,10 +22,12 @@ module.exports = angular.module('hudozka.schedule', [])
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('scheduleTable', function(){
|
||||
.directive('scheduleTable', function () {
|
||||
return {
|
||||
templateUrl: '/views/schedule/table.html',
|
||||
link: function(scope, element){
|
||||
link: function (scope, element) {
|
||||
//var this_element = element[0];
|
||||
|
||||
var now = new Date();
|
||||
var dates = getDates(now);
|
||||
|
||||
@@ -39,9 +41,23 @@ module.exports = angular.module('hudozka.schedule', [])
|
||||
|
||||
var $tbody = element.find('table tbody');
|
||||
var $thead = element.find('table thead');
|
||||
var $td_list = [];
|
||||
|
||||
var min;
|
||||
var max;
|
||||
$(window).scroll(function () {
|
||||
if ($(this).scrollTop() >= 220) {
|
||||
const scrollOffset = 150;
|
||||
if(!min) min = element.find('table tbody tr:first-child')[0].offsetTop + scrollOffset;
|
||||
if(!max) max = element.find('table tbody tr:last-child')[0].offsetTop + scrollOffset;
|
||||
|
||||
if(!$td_list.length) $td_list = element.find('table tbody tr:first-child td');
|
||||
$td_list.each(function (i) {
|
||||
var w = this.offsetWidth;
|
||||
$thead.find('th')[i].style.width = `${w}px`;
|
||||
});
|
||||
|
||||
var scroll = $(this).scrollTop();
|
||||
if (scroll >= min && scroll <= max) {
|
||||
$thead.addClass('fix animated fadeInDown');
|
||||
$tbody.addClass('fix');
|
||||
} else {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="schedule-block" ng-show="groups">
|
||||
<div class="schedule-table" ng-show="groups">
|
||||
<table>
|
||||
<thead class="">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="group">Гр.</th>
|
||||
<th ng-class="{current: isToday(0)}">
|
||||
@@ -35,21 +35,18 @@
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr ng-repeat="group in groups">
|
||||
<td class="group">
|
||||
<p class="name">{{group.name}}</p>
|
||||
|
||||
<p class="time">{{group.time}}</p>
|
||||
</td>
|
||||
|
||||
<td ng-repeat="day in group.days track by $index" ng-class="{current: isToday($index)}">
|
||||
<p class="lesson"><a href="">{{day.lesson}}</a></p>
|
||||
|
||||
<p class="teacher"><a href="">{{day.teacher}}</a></p>
|
||||
|
||||
<p class="time">{{day.time[0]}}</p>
|
||||
|
||||
<p class="time">{{day.time[1]}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in new issue
Block a user