se-hub/templates/views/tasks.html

<md-content layout-padding>
	<h1>
		<i class="fa fa-clipboard"></i> Tasks
	</h1>
	<div ng-if='loading'>
		
	</div>

	<div ng-if='!loading'>
		<md-content layout-padding>
			<md-tabs md-dynamic-height md-border-bottom>
		      <md-tab label="Class Name">
		        <md-content class="md-padding">
		          <h1 class="md-display-2">Class Name Tasks</h1>
		          
		          <div>
						<div layout='row' layout-align="center center">
							<div class="spacer"></div>
							<div>
								<h2>Personal</h2>
							</div>
							<div class="spacer"></div>
							<div>
								<h2>Project</h2>
							</div>
							<div class="spacer"></div>
						</div>


			          	<div layout='row' style="width: 100%">
			          		<div layout='row' style="width: 100%">
			          			<div class='Personal' layout='row' flex='50'>
			          				<div>
										<h3>Task Name</h3>
									</div>
									<div class='spacer'></div>
									<div>
										 <h3>
										 	Submitters
										 </h3>
									 </div>
			          			</div>
			          			<div style='padding: 0px 5px 0px 5px; margin-top: auto; margin-bottom: auto'>
			          				|
			          			</div>
			          			<div class='Project' layout='row' flex='50'>
			          				<div>
										<h3>Task Name</h3>
									</div>
									<div class='spacer'></div>
									<div>
										 <h3>
										 	Submitters
										 </h3>
									 </div>
			          			</div>
			          		</div>
		          		
			          	</div>

			          	<div layout='row' style='width:100%'>
							<div layout='row' style='width:100%'>
								<div class="Personal" style='width:100%'>
									<md-button style='width: 100%' layout='row'>
											<div>
												Personal Task name
											</div>
											<div class='spacer'></div>
											<div> 3 / 70 </div>
										</div>
									</md-button>
								</div>
								<div style='padding: 0px 5px 0px 5px; margin-top: auto; margin-bottom: auto'>
			          				|
			          			</div>
								<div class="Project" style='width:100%' >
									<md-button style='width: 100%' layout='row'>
											<div>
												Project Task name
											</div>
											<div class='spacer'></div>
											<div> 3 / 70 </div>
										</div>
									</md-button>
								</div>
							</div>
						</div>
					
		          	
		          </div>

		        </md-content>
		      </md-tab>
	      </md-tabs>
		</md-content>
	</div>
</md-content>