Skip to content

Instantly share code, notes, and snippets.

@wgminer
Last active August 29, 2015 14:03
Show Gist options
  • Save wgminer/ed6f3f523c8c7921da9d to your computer and use it in GitHub Desktop.
Save wgminer/ed6f3f523c8c7921da9d to your computer and use it in GitHub Desktop.
<div id="timetable>
<div class='title'>
<h2>{{ mainCtrl.name }}</h2>
<button class='button small green'>Create New</button>
<button class='button small'>Enter My Room Now</button>
</div>
<div class='date-bar'>
<button class='first' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -7)'>
<i class='fa fa-angle-double-left'></i>
</button>
<button class='prev' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -1)'>
<i class='fa fa-angle-left'></i>
</button>
<button class='reset' ng-click='mainCtrl.resetDisplayDate()'>{{ mainCtrl.displayDate() }}</button>
<button class='next' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 1)'>
<i class='fa fa-angle-right'></i>
</button>
<button class='last' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 7)'>
<i class='fa fa-angle-double-right'></i>
</button>
</div>
<div class='occurrence' ng-repeat='occurrence in mainCtrl.meetings.meetings.occurrences'>
<div class='meeting-time'> {{ occurrence.start_time }}<br><span>{{ occurrence.am_pm }}</span></div>
<div class='meeting-body'>
<h3><a ng-click='showDetails = ! showDetails'>{{ occurrence.type }}: {{ occurrence.name }}</a></h3>
<div class='hosts'>
<span class='host'>Host:</span>
<a ng-href='#'>{{ occurrence.host }}</a>
<span ng-switch='occurrence.access'>
<a ng-href='#' ng-switch-when='My Section Only'>{{ occurrence.section_name }}</a>
<a ng-href='#' ng-switch-when='All Course Sections'>{{ occurrence.enrolled_section }}</a>
<a ng-href='#' ng-switch-when='The Group'>{{ occurrence.group_name }}</a>
</span>
</div>
<button ng-if='mainCtrl.show_join_button(occurrence.start_datetime, occurrence.duration)' class='button large red' ng-click='mainCtrl.joinMeetingService(occurrence.id)'>
<i class='fa fa-clock-o'></i>
<timer countdown='mainCtrl.time_until(occurrence.start_datetime)' max-time-unit='hour' interval='1000'>
<span>{{hours}}:{{mminutes}}
</span>
</timer>
<span class='join-now'>Join Now</span>
</button>
<div ng-if="occurrence.recording">
<button class='button large red'ng-click="mainCtrl.launchRecording(occurrence.recording.url)">Watch Recording</button>
</div>
<div class='details' ng-if='showDetails'>
<p>{{ occurrence.details }}</p>
<label>Invited:</label>
<a ng-href='#' ng-if='occurrence.access'>{{ occurrence.access }}</a>
<a ng-href='#' ng-if='occurrence.participants' ng-repeate='participant in occurrence.participants'>
{{ participant.parcitipant }}
</a>
</div>
<div class='action' ng-show'false'>
<button class="button normal blue">Edit</button>
<button class="button normal">Duplicate</button>
</div>
</div>
</div>
</div>
@import "../../libs/font-awesome/less/font-awesome.less";
@fa-font-path: "fonts";
@blue: #569ed4;
.button.blue {
background-color: @blue;
border-color: darken(@blue, 10%);
box-shadow: inset 0 0 5px 10px @blue, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 5px 10px @blue, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 5px 10px @blue, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
color: #fff;
margin-left: 35px;
}
.border-radius(@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#timetable {
font-size: 14px;
font-weight: 400;
a {
color: @blue;
cursor: pointer;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.title {
overflow: hidden;
h2 {
font-weight: 700px;
font-size: 14px;
margin: 0;
float: left;
display: block;
margin-right: 10px;
}
.button {
float: left;
margin: 0;
&.green {
margin-right: 5px;
}
}
}
.date-bar {
position: relative;
padding: 0 60px;
margin-top: 20px;
button {
cursor: pointer;
border: 0;
margin: 0;
background-color: #ccc;
line-height: 20px;
position: absolute;
width: 30px;
top: 0;
text-align: center;
font-size: 16px;
outline: none;
&:active {
opacity: .8;
outline: none;
}
}
.first {
.border-radius(3px 0 0 3px);
left: 0;
border-right: 1px solid #fff;
}
.prev {
left: 30px;
}
.next {
right: 30px;
}
.last {
.border-radius(0 3px 3px 0);
border-left: 1px solid #fff;
right: 0;
}
.reset {
text-transform: uppercase;
font-size: 12px;
background-color: #eee;
position: static;
width: 100%;
}
.inactive {
opacity: .5;
cursor: default;
}
}
.occurrence {
padding-left: 60px;
position: relative;
margin-top: 20px;
}
.meeting-time {
position: absolute;
left: 0;
top: 0;
font-size: 20px;
font-weight: 700;
line-height: 1;
span {
text-transform: uppercase;
font-size: 12px;
}
}
.meeting-body {
h3 {
font-size: 14px;
font-weight: 700;
margin: 0 0 5px;
}
.hosts {
font-size: 11px;
margin-bottom: 15px;
.host {
color: #333;
font-weight: 700;
}
}
.red {
color: #fff;
box-shadow: none;
font-size: 14px;
background-color: #cc0000;
padding: 10px 20px;
display: block;
width: 100%;
.join-now {
font-weight: 700;
}
}
.details {
p {
margin: 0 0 20px;
line-height: 1.4;
}
ul {
list-style: n
}
label {
font-weight: 700;
display: block;
}
.access {
font-weight: 700;
}
a {
display: block;
line-height: 1.4;
}
}
.actions {
margin-top: 20px;
.button {
margin: 0;
&:first-child {
margin-right: 5px;
}
}
}
}
}
// Buttons from input-form.less
.button {
background-color: #ebebeb;
border: solid 1px #c5c5c5;
margin-right: 25px;
background-clip: padding-box;
-mox-background-clip: padding-box;
-webkit-background-clip: padding-box;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
color: #333;
cursor: pointer;
display: inline-block;
letter-spacing: 0.3px;
outline: none;
text-decoration: none;
}
.button.small {
background-clip: padding-box;
-mox-background-clip: padding-box;
-webkit-background-clip: padding-box;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 10px;
font-weight: 500;
padding: 3px 8px 4px;
}
.button.normal {
font-size: 12px;
font-weight: 300;
padding: 7px 12px 6px;
}
.button.large {
background-clip: padding-box;
-mox-background-clip: padding-box;
-webkit-background-clip: padding-box;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 16px;
font-weight: 500;
padding: 10px 25px 9px;
}
.button.green {
background-color: #289F00;
border-color: #155300;
box-shadow: inset 0 0 5px 10px #259500, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 5px 10px #259500, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 5px 10px #259500, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
color: #fff;
margin-left: 35px;
}
.button.gray {
background-color: #ededed;
border-color: #c7c7c7;
box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 0 5px 10px #e6e6e6, 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
color: #333;
}
.button:active {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@x)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment