Fix schedule widget layout by removing table structure

This commit is contained in:
drigato 2015-06-09 10:30:47 -04:00
parent 87920c1fc1
commit d181a931b8
3 changed files with 126 additions and 65 deletions

View file

@ -71,17 +71,6 @@ body {
max-height: 300px;
}
.schedule_content table {
opacity: 0;
/*transition: all 1s ease;*/
}
.schedule.current .schedule_content table {
opacity: 1;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.schedule_item {
display: none;
font-size: 17px;
@ -94,27 +83,26 @@ body {
display: block;
}
.schedule_item .time_grid {
.schedule_item .row {
padding-top: 10px;
padding-bottom: 10px;
}
.schedule_item div.time_grid {
/*padding-right: 10px;*/
width: 20%;
font-weight: 300;
color: #AAAAAA;
display: inline-block;
}
.schedule_item .time_grid div {
width: 120px;
}
.schedule_item .name_grid {
padding-left: 30px;
}
.schedule_item .name_grid div {
.schedule_item div.name_grid {
overflow: hidden;
text-overflow: ellipsis;
}
.schedule_item h4 {
margin: 10px 0px;
font-weight: 400;
padding-left: 10px;
width: 77%;
display:inline-block;
vertical-align: middle;
}
@media (max-width: 730px) {
@ -134,3 +122,50 @@ body {
}
}
@media (max-width: 630px) {
.schedule_item div.time_grid {
width: 25%;
}
.schedule_item div.name_grid {
width: 72%;
}
}
@media (max-width: 530px) {
.schedule_item {
padding: 10px 20px;
font-size: 14px;
}
.schedule_item div.time_grid {
width: 30%;
}
.schedule_item div.name_grid {
width: 67%;
}
}
@media (max-width: 500px) {
.schedule_item div.time_grid {
width: 35%;
}
.schedule_item div.name_grid {
width: 62%;
}
}
@media (max-width: 400px) {
.schedule_item div.time_grid {
width: 40%;
}
.schedule_item div.name_grid {
width: 50%;
}
}