Skip to content

Instantly share code, notes, and snippets.

@wgminer
Last active August 29, 2015 14:04
Show Gist options
  • Save wgminer/855e70d4d212f3a2d33e to your computer and use it in GitHub Desktop.
Save wgminer/855e70d4d212f3a2d33e to your computer and use it in GitHub Desktop.
<div id='timetable'>
<div class='title'>
<h2>{{ mainCtrl.name }}</h2>
<div class="actions">
<a meeting-form ng-click="mainCtrl.openModal()">Create New</a>
<span>|</span>
<a>Enter My Room Now</a>
</div>
</div>
<div class='date-bar'>
<button class="today button normal" ng-click='mainCtrl.resetDisplayDate()'>Today</button>
<button class='first button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -7)'>
<i class='fa fa-angle-double-left'></i>
</button>
<button class='prev button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -1)'>
<i class='fa fa-angle-left'></i>
</button>
<button class='reset button normal'>{{ mainCtrl.displayDate() }}</button>
<button class='next button normal' ng-click='mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 1)'>
<i class='fa fa-angle-right'></i>
</button>
<button class='last button normal' 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 normal green' ng-click='mainCtrl.joinMeetingService(occurrence.live_session_id)'>
<i class='fa fa-clock-o'></i>
<timer countdown='mainCtrl.time_until(occurrence.start_datetime)' max-time-unit='hour' interval='1000'>
<span>{{mminutes}}
</span>
</timer>
<span class='join-now'>Join Now</span>
</button>
<div class="actions" ng-if="occurrence.recording">
<button class='button normal blue' ng-click="mainCtrl.launchRecording(occurrence.recording.url)">Watch</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-repeat='participant in occurrence.participants'>
{{ participant.parcitipant }}
</a>
</div>
<div class='actions' ng-show='false'>
<a>Edit</a>
<span>|</span>
<a>Duplicate</a>
</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 {
background-color: #fff;
padding: 20px;
a {
color: @blue;
cursor: pointer;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.title {
overflow: hidden;
h2 {
font-weight: 700;
font-size: 20px;
margin: 0;
float: left;
display: block;
margin-right: 10px;
width: 80px;
line-height: 26px;
}
.actions {
overflow: hidden;
float: right;
a, span {
float: left;
line-height: 26px;
}
span {
color: #999;
margin: 0 10px;
}
}
}
.date-bar {
position: relative;
padding: 0 60px 0 150px;
margin-top: 20px;
button {
margin: 0;
position: absolute;
width: 30px;
top: 0;
text-align: center;
}
.today {
width: 80px;
left: 0;
}
.first {
left: 90px;
}
.prev {
left: 120px;
}
.next {
right: 30px;
}
.last {
right: 0;
}
.reset {
position: static;
width: 100%;
}
.inactive {
opacity: .5;
cursor: default;
}
}
.occurrence {
padding-left: 90px;
position: relative;
margin-top: 20px;
}
.meeting-time {
position: absolute;
left: 0;
top: 0;
font-size: 24px;
font-weight: 700;
line-height: 1;
span {
text-transform: uppercase;
font-size: 12px;
}
}
.meeting-body {
h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 5px;
}
.hosts {
font-size: 14px;
margin-bottom: 15px;
.host {
color: #333;
font-weight: 700;
}
}
.green {
font-size: 16px;
display: block;
width: 100%;
margin: 0;
.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: 10px;
overflow: hidden;
a, span {
float: left;
line-height: 26px;
}
span {
color: #999;
margin: 0 10px;
}
}
}
}
// 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