Robware/View/Gallery/manage.view

@Title{Gallery}@
@CSS{
	#main-header{
		box-shadow:none !important;
	}

	#tabs{
		background:#f44336;
		margin:-20px;
		margin-bottom:10px;
		position:fixed;
		width:100%;
		box-shadow: 0px 4px 5px -2px rgba(50, 50, 50, 0.8);
	}

	#tabs a{
		display:inline-block;
		color:#ffcdd2;
		padding:15px 30px;
		text-decoration:none;
		text-transform: uppercase;
	}
	
	#tabs a.active{
		color:#fff;
		border-bottom:3px solid #fff;
	}
	
	.image{
		width:25%;
		display:inline-block;
		vertical-align:top;
		text-align:center;
	}
	
	.image>div{
		margin:5px;
		padding:5px;
		background:#e0e0e0;
	}
}@
@CSSSmall{
	@media(orientation:portrait){
		#albums td:nth-child(3), #albums th:nth-child(3){
			display:none;
		}
	}
	#albums td:first-child, #albums th:first-child{
		display:none;
	}
	
	table{
		width:100%;
	}
	
	#albums td:last-child, #albums th:last-child, #albums td:nth-child(3), #albums th:nth-child(3){
		width:1px;
	}
}@
@ButtonsRight{
	<button onclick="Navigate('/gallery/createalbum/')" title="Create Album">
		<img src="/images/add_album.svg" alt="Add Album" />
	</button>
}@
@JavaScript{
	$(function(){
		$("#tabs>a").click(function(){
			$("#tabs-content>*").hide();
			$($(this).attr("href")).show();
			$("#tabs>a").removeClass("active");
			$(this).addClass("active");
			
			return false;
		});
		
		$("#tabs a.active").click();
	});
}@
@Body{
<div id="tabs">
	<a class="active" href="#images">Images</a><a href="#albums">Albums</a>
</div>
<div id="tabs-content" style="margin-top:55px">
	<div id="images">
		<?php if (isset($errors) && count($errors)>0) {
			echo '<div class="errors">The following errors occured with the image submission:<ul>';
			foreach ($errors as $error)
				echo '<li>',$error,'</li>';
			echo '</ul>Please rectify them and try again.</div>';
		} ?>
		<h3>New Image</h3>
		<form action="/gallery/upload/" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td><label for="imageTitle">Image title:</label></td>
					<td><input type="text" name="imageTitle" id="imageTitle" /></td>
				</tr>
				<tr>
					<td><label for="imageDesc">Image description</label></td>
					<td><textarea name="imageDesc" id="imageDesc"></textarea></td>
				</tr>
				<tr>
					<td><label for="imageFile">Select image:</label></td>
					<td><input type="file" name="imageFile" id="imageFile"></td>
				</tr>
				<tr>
					<td colspan="2" align="right">
						<button type="submit" title="Upload" name="imageUpload">
							<img src="/images/send.svg" alt="Upload" />
						</button>
					</td>
				</tr>
			</table>
		</form>
		<div>
			<?php
			foreach ($images as $image)
				echo '<div class="image">',
						'<div>',
							'<img src="/',$image->/*Thumbnail*/Path,'" alt="',$image->ImageTitle,'" />',
							'<span>',$image->ImageTitle,'</span>',
						'</div>',
					'</div>';
			?>
		</div>
	</div>
	<div id="albums">
		<form action="" method="post" id="manageForm">
			<input type="hidden" name="formSubmitted" value="yes" />
			<table>
				<tr>
					<th>ID</th>
					<th>Title</th>
					<th>Timestamp</th>
					<th>Actions</th>
				</tr>
				<?php foreach ($albums as $album){?>
				<tr>
					<td><?=$album->AlbumId?></td>
					<td><a href="/gallery/view/<?=$album->AlbumUrl?>"><?=$album->AlbumTitle?></a></td>
					<td><?=$album->AlbumTimestamp?></td>
					<td>
						<button value="<?=$album->AlbumId?>" name="delete" title="Delete">
							<img src="/images/delete.svg" alt="Delete" />
						</button>
						<button value="/blog/edit/<?=$album->AlbumId?>" name="edit" title="Edit" class="jsNav">
							<img src="/images/edit.svg" alt="Edit" />
						</button>
					</td>
				</tr>
				<?php } ?>
			</table>
		</form>
	</div>
</div>
}@