Last active
August 29, 2015 14:04
-
-
Save wgminer/855e70d4d212f3a2d33e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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