Skip to content

Instantly share code, notes, and snippets.

@wgminer
Created July 1, 2014 15:27
Show Gist options
  • Save wgminer/7d775206e5dc5d66e4e0 to your computer and use it in GitHub Desktop.
Save wgminer/7d775206e5dc5d66e4e0 to your computer and use it in GitHub Desktop.
Timetable Styling
<div id="timetable" timetable="">
<div class="title">
<h2>{{ mainCtrl.name }}</h2>
<button ng-click="<!-- create new function -->" class="button small green">Create New</button>
<button ng-click="<!-- enter room now function -->" class="button small">Enter a Room Now</button>
</div>
<div class="date-bar">
<!-- these buttons should activate/deactivate based on position -->
<button class="first" ng-class="{'inactive': <!-- need var here -->}" ng-click="mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -7)"><i class="fa fa-angle-double-left"></i></button>
<button class="prev" ng-class="{'inactive': <!-- need var here -->}" ng-click="mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, -1)"><i class="fa fa-angle-left"></i></button>
<button class="reset" ng-click="mainCtrl.resetDisplayDate()">{{ <!-- current .date-bar date --> }}</button>
<button class="next" ng-class="{'inactive': <!-- need var here -->}" ng-click="mainCtrl.changeDisplayedDate(mainCtrl.displayed_date, 1)"><i class="fa fa-angle-right"></i></button>
<button class="last" ng-class="{'inactive': <!-- need var here -->}" 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="<!-- need link to host profile -->">{{ occurrence.host }}</a>,
<span ng-switch="occurrence.access">
<a ng-href="<!-- need link to section -->" ng-switch-when="My Section Only">{{ occurrence.section_name }}</a>
<a ng-href="<!-- need link to enrolled section -->" ng-switch-when="All Course Sections">{{ occurrence.enrolled_section }}</a>
<a ng-href="<!-- need link to group -->" ng-switch-when="The Group">{{ occurrence.group_name }}</a>
</span>
</div>
<button ng-show="mainCtrl.time_until(occurrence.start_datetime)" class="button large red" ng-click="mainCtrl.joinMeetingService(occurrence.id)">
<i class="fa fa-clock-o"></i>
<span ng-show="mainCtrl.time_until(occurrence.start_datetime)">
<timer countdown="mainCtrl.time_until(occurrence.start_datetime)" max-time-unit="'hour'" interval="1000" class="ng-isolate-scope ng-binding"><span class="ng-scope ng-binding">0:00</span></timer>
</span>
<span class="join-now">Join Now</span>
</button>
<div class="details" ng-show="showDetails">
<p>{{ occurrence.details }}</p>
<label>Invited:</label>
<a ng-if="occurrence.access" ng-href="<!-- need link to access group -->">{{ occurrence.access }}</a>
<a ng-if="occurrence.participants" ng-repeat="participant in occurrence.participants" href="<!-- need link to ">{{ participant.participant }}</a>
</div>
<div class="actions" ng-show="<!-- need to know when to show these -->">
<button ng-click="<!-- need edit function -->" class="button normal blue">Edit</button>
<button ng-click="<!-- need duplicate function -->" class="button normal">Duplicate</button>
</div>
</div>
</div>
</div>
// START design scaffolding
// Ignore these when implementing...
@import "../../bower_components/font-awesome/less/font-awesome.less";
@fa-font-path: "../fonts";
@import "input-forms.less";
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
font-weight: 400;
background-color: #f5f5f5;
}
.wrap {
margin: 0 auto;
width: 313px;
padding: 20px;
}
// END design scaffolding
// START timetable styles
@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: 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;
}
}
}
}
}
// END timetable styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment