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