Added legend to calendar

This commit is contained in:
Mark McDowall 2013-07-08 00:17:01 -07:00
parent b420592553
commit 1727a25260
2 changed files with 86 additions and 45 deletions

View File

@ -5,5 +5,13 @@
</div> </div>
<div class=span9> <div class=span9>
<div id="x-calendar" class="calendar"/> <div id="x-calendar" class="calendar"/>
<div class="legend">
<ul class='legend-labels'>
<li><span class="primary" title="Episode hasn't aired yet"></span>Unaired</li>
<li><span class="warning" title="Episode is currently airing"></span>On Air</li>
<li><span class="danger" title="Epsiode file has not been found"></span>Missing</li>
<li><span class="success" title="Episode was downloaded and sorted"></span>Downloaded</li>
</ul>
</div>
</div> </div>
</div> </div>

View File

@ -19,44 +19,10 @@
.clickable; .clickable;
} }
.primary {
border-color : #007ccd;
background-color : #007ccd;
}
.info {
border-color : #14b8d4;
background-color : #14b8d4;
}
.inverse {
border-color : #333333;
background-color : #333333;
}
.warning {
border-color : #ffa93c;
background-color : #ffa93c;
}
.danger {
border-color : #ea494a;
background-color : #ea494a;
}
th { th {
background-color : #eeeeee; background-color : #eeeeee;
} }
.purple {
border-color : #7932ea;
background-color : #7932ea;
}
.success {
border-color : #4cb158;
background-color : #4cb158;
}
h2 { h2 {
font-size : 17.5px; font-size : 17.5px;
} }
@ -101,37 +67,104 @@
} }
} }
.primary {
border-color : @btnPrimaryBackground;
}
.info {
border-color : @btnInfoBackground;
}
.inverse {
border-color : @btnInverseBackground;
}
.warning {
border-color : @btnWarningBackground;
}
.danger {
border-color : @btnDangerBackground;
}
.success {
border-color : @btnSuccessBackground;;
}
.purple {
border-color : #7932ea;
}
.episode-title { .episode-title {
.btn-link; .btn-link;
color: @linkColor; color: @linkColor;
margin-top: 1px; margin-top: 1px;
} }
}
.legend {
margin: 5px;
ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: none;
}
}
}
}
.calendar, .legend {
.primary { .primary {
border-color : #007ccd; border-color : @btnPrimaryBackground;
background-color : @btnPrimaryBackground;
} }
.info { .info {
border-color : #14b8d4; border-color : @btnInfoBackground;
background-color : @btnInfoBackground;
} }
.inverse { .inverse {
border-color : #333333; border-color : @btnInverseBackground;
background-color : @btnInverseBackground;
} }
.warning { .warning {
border-color : #ffa93c; border-color : @btnWarningBackground;
background-color : @btnWarningBackground;
} }
.danger { .danger {
border-color : #ea494a; border-color : @btnDangerBackground;
} background-color : @btnDangerBackground;
.purple {
border-color : #7932ea;
} }
.success { .success {
border-color : #4cb158; border-color : @btnSuccessBackground;
background-color : @btnSuccessBackground;
} }
}
.purple {
border-color : #7932ea;
background-color : #7932ea;
}
}