Timetable Styling

timetable.html

<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>

timetable.less

// 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