View/Blog/create.view

@@ -1,11 +1,18 @@
 @Title{Blog}@
 @JavaScript{
+var buttonsPosOffset;
+
+function setTextAreaHeight(){
+	$("textarea").height(window.innerHeight-$("h3:first-child").offset().top-buttonsPosOffset-50);
+	//console.log(window.innerHeight-$("h3:first-child").offset().top-buttonsPosOffset-30);
+}
 $(function(){
-	var top=$("textarea").offset().top;
-	var height=$(document).height();
-	var marginOffset=$("#content").css("margin-bottom").replace("px","");
-	$("textarea").height(height-top-marginOffset);
+	buttonsPosOffset=window.innerHeight-$("#buttons").offset().top;
+	//console.log(buttonsPosOffset);
+	setTextAreaHeight();
 });
+
+$(window).resize(setTextAreaHeight);
 }@
 @ButtonsRight{
 	<button onclick="window.location.href='/blog/manage'" title="Manage">

View/Blog/manage.view

@@ -1,8 +1,21 @@
 @Title{Blog}@
-@ButtonsRight{
-	<button onclick="window.location.href='/blog/create'" title="Create">
-		<img src="/images/add.svg" alt="Add" />
-	</button>
+@CSS{
+	td:last-child{
+		white-space:nowrap;
+	}
+}@
+@CSSSMall{
+	td:first-child, td:nth-child(3),th:first-child, th:nth-child(3){
+		display:none;
+	}
+	
+	table{
+		width:100%;
+	}
+	
+	td:last-child,th:last-child{
+		width:1px;
+	}
 }@
 @JavaScript{
 	$(function(){
@@ -12,20 +25,25 @@
 		});
 	});
 }@
+@ButtonsRight{
+	<button onclick="window.location.href='/blog/create'" title="Create">
+		<img src="/images/add.svg" alt="Add" />
+	</button>
+}@
 @Body{
 <form action="" method="post" id="manageForm">
 	<input type="hidden" name="formSubmitted" value="yes" />
 	<table>
 		<tr>
-			<td>ID</td>
-			<td>Title</td>
-			<td>Timestamp</td>
-			<td>Actions</td>
+			<th>ID</th>
+			<th>Title</th>
+			<th>Timestamp</th>
+			<th>Actions</th>
 		</tr>
 		<?php foreach ($posts as $post){?>
 		<tr>
 			<td><?=$post->PostId?></td>
-			<td><?=$post->PostTitle?></td>
+			<td><a href="/blog/view/<?=$post->PostUrl?>"><?=$post->PostTitle?></a></td>
 			<td><?=$post->PostTimestamp?></td>
 			<td>
 				<button value="<?=$post->PostId?>" name="delete" title="Delete">
@@ -39,7 +57,7 @@
 						<img src="/images/send.svg" alt="Publish" />
 					</button>
 				<?php } else {?>
-					<img src="/images/done.svg" alt="Done" />
+					<img src="/images/done.svg" alt="Done" title="Published" />
 				<?php } ?>
 			</td>
 		</tr>

javascript.js

@@ -50,7 +50,7 @@ $(function(){
 		return false;
 	});
 	
-	$("#content").css("margin-bottom",$("#buttons").height());
+	$("#content").css("margin-bottom",window.innerHeight-$("#buttons").offset().top);
 	
 	$("#cookiePopup button").click(function(){
 		$("#cookiePopup").fadeOut();

nbproject/project.properties

@@ -9,6 +9,7 @@ auxiliary.org-netbeans-modules-php-phpunit.phpUnit_2e_enabled=false
 auxiliary.org-netbeans-modules-php-phpunit.phpUnit_2e_path=
 auxiliary.org-netbeans-modules-php-phpunit.test_2e_groups_2e_ask=false
 auxiliary.org-netbeans-modules-php-phpunit.test_2e_run_2e_all=false
+browser.reload.on.save=true
 include.path=${php.global.include.path}
 php.version=PHP_54
 project.license=default

style-med.css

@@ -10,4 +10,8 @@
 	cursor: pointer;
 	display: inline-block;
 	max-height: 100%;
+}
+
+#buttons{
+	left:0;
 }

style.css

@@ -73,6 +73,19 @@ p:first-child{
 	margin-top: 0;
 }
 
+table{
+	border-collapse: collapse;
+}
+
+th{
+	text-align: left;
+}
+
+td, th{
+	padding:0 10px 5px 0;
+	vertical-align: top;
+}
+
 #menu{
 	background:#fafafa;
 	width:280px;

template.php

@@ -26,6 +26,12 @@ function FormatURI(URI $uri, $base=""){
 		<style type="text/css">
 			{@CSS}
 		</style>
+		<style media="(max-width:1023px)">
+			{@CSSMed}
+		</style>
+		<style media="(max-width:680px)">
+			{@CSSSMall}
+		</style>
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
 		<script src="/javascript.js"></script>