schedule table new layout based on flexbox
This commit is contained in:
tmshv committed
1 parent
aec409d589
commit
3f2ebd558f
4 files changed
+120
-153
No files matched your search
@@ -2,101 +2,20 @@
|
|||||||
|
|
||||||
$current-week-day-color: $blue-color;
|
$current-week-day-color: $blue-color;
|
||||||
|
|
||||||
|
|
||||||
|
$cell-width: 9em;
|
||||||
|
$group-cell-width: 4em;
|
||||||
|
$current-week-day-color: $blue-color;
|
||||||
|
$row-padding: $single-margin 0;
|
||||||
|
$current-day-column-border-thickness: 3px;
|
||||||
|
|
||||||
.schedule-table {
|
.schedule-table {
|
||||||
//margin: 0 auto;
|
margin-bottom: $double-margin;
|
||||||
//width: 100%;
|
|
||||||
min-width: 50em;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
table {
|
a{
|
||||||
//margin: 2em auto;
|
color: $dark-color;
|
||||||
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 {
|
.lesson {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -107,17 +26,73 @@ $current-week-day-color: $blue-color;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.current {
|
.current {
|
||||||
border-left: 2px solid $current-week-day-color;
|
border-left: $current-day-column-border-thickness solid $current-week-day-color;
|
||||||
border-right: 2px solid $current-week-day-color;
|
border-right: $current-day-column-border-thickness solid $current-week-day-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canceled:before {
|
&__head{
|
||||||
position: absolute;
|
display: flex;
|
||||||
content: "";
|
justify-content: space-between;
|
||||||
width: 70%;
|
|
||||||
height: 100%;
|
.date {
|
||||||
top: 0;
|
margin: .5em 0 0;
|
||||||
left: 15%;
|
font-size: 1.5em;
|
||||||
background-image: url(lesson-canceled.svg);
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div{
|
||||||
|
min-width: $cell-width;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .group{
|
||||||
|
min-width: $group-cell-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body-row{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
background-color: $schedule-row-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body-group{
|
||||||
|
min-width: $group-cell-width;
|
||||||
|
padding: $row-padding;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
p.name {
|
||||||
|
font-size: 1.25em;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__record{
|
||||||
|
min-width: $cell-width;
|
||||||
|
padding: $row-padding;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//.canceled:before {
|
||||||
|
// position: absolute;
|
||||||
|
// content: "";
|
||||||
|
// width: 70%;
|
||||||
|
// height: 100%;
|
||||||
|
// top: 0;
|
||||||
|
// left: 15%;
|
||||||
|
// background-image: url(lesson-canceled.svg);
|
||||||
|
//}
|
||||||
@@ -24,4 +24,4 @@
|
|||||||
@import "error-404";
|
@import "error-404";
|
||||||
|
|
||||||
@import "tape-viewer";
|
@import "tape-viewer";
|
||||||
@import "footer";
|
@import "footer";
|
||||||
@@ -25,6 +25,8 @@ $red-color: rgb(246, 27, 20);
|
|||||||
$link-color: $blue-color;
|
$link-color: $blue-color;
|
||||||
$inactive-link-color: $light-color;
|
$inactive-link-color: $light-color;
|
||||||
|
|
||||||
|
$schedule-row-color: hsl(210, 55%, 90%);
|
||||||
|
|
||||||
//SHADOW
|
//SHADOW
|
||||||
$white-shadow: 0 .1em 0.3em rgba(0, 0, 0, 0.2);
|
$white-shadow: 0 .1em 0.3em rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
|||||||
@@ -1,55 +1,45 @@
|
|||||||
<div class="schedule-table" ng-show="$ctrl.schedule">
|
<div class="schedule-table" ng-show="$ctrl.schedule">
|
||||||
<table>
|
<div class="schedule-table__head">
|
||||||
<thead>
|
<div class="group">Гр.</div>
|
||||||
<tr>
|
<div ng-class="{current: $ctrl.isToday(0)}">
|
||||||
<th class="group">Гр.</th>
|
<p class="day">Понедельник</p>
|
||||||
<th ng-class="{current: $ctrl.isToday(0)}">
|
<p class="date">{{$ctrl.weekDay(0)}}</p>
|
||||||
<p class="day">Понедельник</p>
|
</div>
|
||||||
|
<div ng-class="{current: $ctrl.isToday(1)}">
|
||||||
|
<p class="day">Вторник</p>
|
||||||
|
<p class="date">{{$ctrl.weekDay(1)}}</p>
|
||||||
|
</div>
|
||||||
|
<div ng-class="{current: $ctrl.isToday(2)}">
|
||||||
|
<p class="day">Среда</p>
|
||||||
|
<p class="date">{{$ctrl.weekDay(2)}}</p>
|
||||||
|
</div>
|
||||||
|
<div ng-class="{current: $ctrl.isToday(3)}">
|
||||||
|
<p class="day">Четверг</p>
|
||||||
|
<p class="date">{{$ctrl.weekDay(3)}}</p>
|
||||||
|
</div>
|
||||||
|
<div ng-class="{current: $ctrl.isToday(4)}">
|
||||||
|
<p class="day">Пятница</p>
|
||||||
|
<p class="date">{{$ctrl.weekDay(4)}}</p>
|
||||||
|
</div>
|
||||||
|
<div ng-class="{current: $ctrl.isToday(5)}">
|
||||||
|
<p class="day">Суббота</p>
|
||||||
|
<p class="date">{{$ctrl.weekDay(5)}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="date">{{$ctrl.weekDay(0)}}</p>
|
<div class="schedule-table__body">
|
||||||
</th>
|
<div class="schedule-table__body-row" ng-repeat="group in $ctrl.schedule">
|
||||||
<th ng-class="{current: $ctrl.isToday(1)}">
|
<div class="schedule-table__body-group">
|
||||||
<p class="day">Вторник</p>
|
<p class="name">{{group.name}}</p>
|
||||||
|
<p class="time">{{group.time}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p class="date">{{$ctrl.weekDay(1)}}</p>
|
<div class="schedule-table__record" ng-repeat="day in group.days track by $index" ng-class="{current: $ctrl.isToday($index)}">
|
||||||
</th>
|
<p class="lesson"><a href="">{{day.lesson}}</a></p>
|
||||||
<th ng-class="{current: $ctrl.isToday(2)}">
|
<p class="teacher"><a href="">{{day.teacher}}</a></p>
|
||||||
<p class="day">Среда</p>
|
<p class="time">{{day.time[0] | join: '—'}}</p>
|
||||||
|
<p class="time">{{day.time[1] | join: '—'}}</p>
|
||||||
<p class="date">{{$ctrl.weekDay(2)}}</p>
|
</div>
|
||||||
</th>
|
</div>
|
||||||
<th ng-class="{current: $ctrl.isToday(3)}">
|
</div>
|
||||||
<p class="day">Четверг</p>
|
|
||||||
|
|
||||||
<p class="date">{{$ctrl.weekDay(3)}}</p>
|
|
||||||
</th>
|
|
||||||
<th ng-class="{current: $ctrl.isToday(4)}">
|
|
||||||
<p class="day">Пятница</p>
|
|
||||||
|
|
||||||
<p class="date">{{$ctrl.weekDay(4)}}</p>
|
|
||||||
</th>
|
|
||||||
<th ng-class="{current: $ctrl.isToday(5)}">
|
|
||||||
<p class="day">Суббота</p>
|
|
||||||
|
|
||||||
<p class="date">{{$ctrl.weekDay(5)}}</p>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr ng-repeat="group in $ctrl.schedule">
|
|
||||||
<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: $ctrl.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] | join: '—'}}</p>
|
|
||||||
<p class="time">{{day.time[1] | join: '—'}}</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
Reference in new issue
Block a user