Last active
August 29, 2015 14:03
-
-
Save wgminer/ed6f3f523c8c7921da9d 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> | |
<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> |
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 { | |
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