Skip to content

Commit

Permalink
start to use bootstrap in schedule tags. remove old code #100 #128
Browse files Browse the repository at this point in the history 
* initial refactor to use bootstrap
* removed old legacy javascript in templates
* day tables refactor to use bootstrap and avoid px calculation
  • Loading branch information
@llazzaro
llazzaro committed Jul 16, 2015
1 parent c871fea commit e181737
Show file tree
Hide file tree
Showing 16 changed files with 196 additions and 577 deletions.
340 changes: 65 additions & 275 deletions schedule/static/schedule.css
View file
Original file line number Diff line number Diff line change
@@ -1,303 +1,93 @@
/**** DAILY VIEW ****/

div.slot_column {
top:0px;
left:0px;
border:1px solid black;
border-right:none;
}

div.slot {
position:absolute;
left:0px;
border-bottom:1px dotted grey;
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

div.occ_column {
position:absolute;
border:1px solid black;
top:0px;
h1, h2, h3, h4, h5, h6 {
text-align: center;
}

div.occ {
position:absolute;
border:1px solid red;
background-color:#eee;
cursor:pointer;
overflow:hidden;
a {
color: #000;
}

div.occ a:hover {
background-color:gray;
table, th, td {
border-left: 1px solid #dddddd;;
}

div.occ_column div.cancelled {
background-color:#FFF;
border:1px solid black;
color:gray;
.btn-primary a strong{
color: #FFF;
}

div.occ_column div.cancelled .actions {
display:none;
}

td.daynumber div.daycell .cancelled {
background-color:inherit;
color:gray;
}

td.daynumber div.daycell .eventcell0 {
border-right:none;
margin-right:-1px;
.btn-primary.gradient {
background: -moz-linear-gradient(top, #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #33a6cc 50%,#0099cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}

td.daynumber div.daycell .eventcell1 {
}

td.daynumber div.daycell .eventcell2 {
border-right:none;
margin-right:-1px;
border-left:none;
margin-left:-1px;
.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
background: -moz-linear-gradient(top, #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #66b2cc 50%,#33a6cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}

td.daynumber div.daycell .eventcell3 {
border-left:none;
margin-left:-1px;
.btn-primary.gradient:active, .btn-primary.gradient.active {
background: -moz-linear-gradient(top, #267c99 50%, #007299 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #267c99 50%,#007299 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #267c99 50%,#007299 50%); /* IE10+ */
background: linear-gradient(to bottom, #267c99 50%,#007299 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}

div.type0 {
border-bottom:4px dotted gray;
.btn-custom {
background-color: #e6e6e6;
border: 1px solid #cccccc;
}

div.type3 {
border-top:4px dotted gray;
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
background-color: #d9d9d9;
border-color: #cdcdcd;
}

div.type2 {
border-top:4px dotted gray;
border-bottom:4px dotted gray;
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
background-color: #e6e6e6;
border-color: #e6e6e6;
}

/**** EVENT DETAIL DIALOG ****/

div.detail tr {vertical-align:top;}

div.detail td.left {font-weight:bold;}

div.event_options div.title {
float:left;
}

div.event_options div.buttons {
float:right;
}

div.occ span.actions {display:block;float:right;padding-right:3px;}
div.occ span.actions span.edit {padding-right:3px;}

/**** MONTH TABLE ****/

table.calendar {
border-collapse: separate;
border-spacing: 2px;
border:2px solid #f0f0f0;
}

.dateheader {
height: 30px;
text-align: center
}

.daysofweek {
height: 20px;
text-align: center
}

table.calendar td {
text-align:left;
margin: 2px;
padding: 1px;
}

table.calendar td.daynumber {
font-size: 8pt;
vertical-align: top
}

table.calendar td.noday {
background-color: #eef
}

table.calendar td.free {
background-color: #c5dbff
}

table.calendar td.busy {
background-color: #ffcece
}

table.calendar td.small {
width: 28px;
height: 20px;
text-align: center
}

td.daynumber { height:50px;}

td.daynumber div.header {
margin-bottom:2px;
padding-bottom:1px;
padding-top:1px;
text-align:right;
}

td.daynumber div.header a {
padding:1px 5px 1px 90px;
}

td.small div.header a {
padding:0;
}

td.daynumber div.eventcell {
background:#f0f0f0;
border:1px dotted grey;
clear:both;
cursor:pointer;
margin:0 1px 3px 1px;
overflow:auto;
}

td.daynumber div.starttime {
float:left;
width:40px;
}

td.daynumber div.eventdesc {
float:left;
height:1em;
overflow:hidden;
width:75px;
}

/**** WEEK VIEW ****/

div#week {
margin-top:10px;
overflow:auto;
position:relative;
}

div#week div.weekdayheader {
background:#D0D0D0 none repeat scroll 0 0;
border:1px solid black;
display:block;
display:block;
font-size:14px;
font-weight:bold;
padding-left:5px;
}

div#week div.weekdaytable {position:relative;}

div#week div.weekday {
float:left;
width:150px;
}

div#week div.weekday1 {
width:230px;
}

div#week div.slot {
font-size:14px;
}

div.weekday span.time {
display:none;
}

div.weekday1 span.time {
display:inline;
}

#week div.occ span.title {font-size:12px;}

/**** FORMS AND WIDGETS ****/

div.time-picker {
position: absolute;
height: 200px;
width:80px; /* needed for IE */
overflow: auto;
background: #fff;
border: 1px solid #000;
z-index: 99;
}

div.time-picker-12hours {
width:6em; /* needed for IE */
}

div.time-picker ul {
list-style-type: none;
margin: 0;
padding: 0;
}

div.time-picker li {
padding: 1px;
cursor: pointer;
}

div.time-picker li.selected {
background: #316AC5;
color: #fff;
}

#id_start_1, #id_end_1 { width:80px;}

/**** GENERAL SETTINGS ****/

#demo {
border-color:#e0e0e0;
border-style:solid;
border-width: 0 3px 3px 0;
float:left;
padding-right:5px;
}

body, td {font-family:sans-serif;}

.error {
border:1px solid red;
}

#messages {
position:absolute;
top:50px;
}

div.calendarname {
border-color:#e0e0e0;
border-style:solid;
border-width: 0 0px 3px 3px;
font-weight:bold;
padding-left:5px;
position:absolute;
right:10px;
top:10px;
}

div.navigation {
text-align:center;
.row-centered {
text-align:center;
}

div.navigation a {
padding:0 20px;
.modal-content {
color: #000;
}

div.tablewrapper {
text-align:center;
.center {
float: none;
margin-left: auto;
margin-right: auto;
}

0 comments on commit e181737

Please sign in to comment.