Styled the 'New Post' page.

www-admin/blog/add/index.php

@@ -28,34 +28,48 @@
 		<?php include('../../toolbar.php'); ?>
 		<div id='content'>
 			<div class="section">
-				<h3>Nuevo post</h3>
+				<h3 class="section_title">Nuevo post</h3>
 				<form action="add.php" maxlength="120" method="post" enctype="multipart/form-data" onsubmit="return validate_post();">
-					<div class="entry blog_add_language">
-						<h4>Castellano (obligatorio)</h4>
-						<input type="text" id="title_es" name="title_es" placeholder="Titulo"/><br/><br/>
-						<textarea name="text_es" id="text_es" placeholder="Texto"></textarea>
-						<script>
-							CKEDITOR.replace('text_es');
-						</script>
-					</div>
-					<div class="entry blog_add_language">
-						<h4>Euskera (opcional)</h4>
-						<input type="text" name="title_eu" id="title_eu" placeholder="Titulo"><br/><br/>
-						<textarea name="text_eu" id="text_eu" placeholder="Texto"></textarea>
-						<script>
-							CKEDITOR.replace('text_eu');
-						</script>
-					</div>
-					<div class="entry blog_add_language">
-						<h4>Ingles (opcional)</h4>
-						<input type="text" name="title_en" id="title_en" placeholder="Titulo"><br><br/>
-						<textarea name="text_en" id="text_en" placeholder="Texto"></textarea>
-						<script>
-							CKEDITOR.replace('text_en');
-						</script>
-					</div>
+					<div class="entry">
+						<div id="lang_tabs">
+							<table>
+								<tr>
+									<td class="pointer lang_tabs_active" id="lang_tab_es" onclick="showLanguage('es');">
+										Castellano
+									</td>
+									<td class="pointer" id="lang_tab_eu" onclick="showLanguage('eu');">
+										Euskera
+									</td>
+									<td class="pointer" id="lang_tab_en" onclick="showLanguage('en');">
+										Ingl&eacute;s
+									</td>
+								</tr>
+							</table>
+						</div>
+						<div id="content_lang_es" class="blog_add_language">
+							<input type="text" id="title_es" name="title_es" placeholder="Titulo"/><br/><br/>
+							<textarea name="text_es" id="text_es" placeholder="Texto"></textarea>
+							<script>
+								CKEDITOR.replace('text_es');
+							</script>
+						</div>
+						<div id="content_lang_eu" class="blog_add_language" style="display:none;">
+							<input type="text" name="title_eu" id="title_eu" placeholder="Titulu"><br/><br/>
+							<textarea name="text_eu" id="text_eu" placeholder="Textua"></textarea>
+							<script>
+								CKEDITOR.replace('text_eu');
+							</script>
+						</div>
+						<div id="content_lang_en" class="blog_add_language" style="display:none;">
+							<input type="text" name="title_en" id="title_en" placeholder="Titlu"><br><br/>
+							<textarea name="text_en" id="text_en" placeholder="Content"></textarea>
+							<script>
+								CKEDITOR.replace('text_en');
+							</script>
+						</div>
+					</div> <!--Entry-->
 					<div class="entry" id="images">
-						<h4>Imagenes</h4>
+						<h4>Im&aacute;genes</h4>
 						<ul>
 							<li>
 								Principal (Aparecera sobre el texto y en las previsualizaciones)<br/>
@@ -87,8 +101,11 @@
 						<label><input type="checkbox" name="comments" checked/>Permitir comentarios</label><br/><br/>
 						<label><input type="checkbox" name="admin"/>Publicar como Gasteizko Margolariak en lugar de mi nombre</label>
 						<br/><br/><br/><br/>
-						<input type="button" value="Previsualizar" onClick="alert(validate_post());"/> <!--TODO-->
-						<input type="submit" value="Publicar"/>
+						<div id="add_button_container">
+							<input type="button" value="Previsualizar" onClick="alert(validate_post());"/> <!--TODO-->
+							<br/>
+							<input type="submit" value="Publicar"/>
+						</div>
 					</div>
 				</form>
 			</div>

www-admin/css/blog.css

@@ -1,27 +1,11 @@
 /* /blog/add/index.php */
 
-div.blog_add_language{
-	width:			31%;
-	display:		inline-block;
-	vertical-align:	top;
-}
-
-div#images{
-	display:		inline-block;
-	vertical-align:	top;
-	width:			60%;
-}
-
-div#settings{
-	display:		inline-block;
-	vertical-align:	top;
-	width:			35%;
-}
-
+/* Post title */
 input[type=text]{
 	width:	100%;
 }
 
+/* Post text */ 
 textarea{
 	width:	100%;
 	height:	20em;
@@ -41,7 +25,18 @@ img.image_upload_preview{
 	height:		5em;
 }
 
-/* /blog/inex.php */
+/* Buttons */
+div#add_button_container{
+	text-align:	center;
+}
+
+div#add_button_container input{
+	width:	30%;
+	margin:	0.5em auto 0.5em auto;	
+}
+
+
+/* /blog/index.php */
 
 table#blog_post_list{
 	border-collapse: collapse;

www-admin/css/ui.css

@@ -289,3 +289,30 @@ table.translation_table th{
 table.translation_table td{
 	border:	1px solid #000000;
 }
+
+
+/******************************************
+* Language selectors                      *
+******************************************/
+
+div#lang_tabs{
+	margin-top:	2em;
+	margin-bottom:	2em;
+}
+
+div#lang_tabs table{
+	width:	100%;
+}
+
+div#lang_tabs td{
+	color:		#555555;
+	font-weight:	bold;
+	width:		33%;
+	border:		0.1em solid black;
+	margin:		0;
+}
+
+div#lang_tabs td.lang_tabs_active{
+	color:		#0078ff;
+	border-bottom:	0.1em solid #ffffff;
+}

www-admin/script/ui.js

@@ -14,4 +14,34 @@ function showToolbar(toolbar, from){
 		document.getElementById('toolbar_' + toolbar).style.display = 'block';
 		from.style.backgroundColor = '#333333';
 	}
-}
+}
+
+
+function showLanguage(lang){
+	switch (lang){
+		case 'es':
+			document.getElementById('content_lang_es').style.display = 'block';
+			document.getElementById('content_lang_eu').style.display = 'none';
+			document.getElementById('content_lang_en').style.display = 'none';
+			document.getElementById('lang_tab_es').classList.add("lang_tabs_active");
+			document.getElementById('lang_tab_eu').classList.remove("lang_tabs_active");
+			document.getElementById('lang_tab_en').classList.remove("lang_tabs_active");
+			break;
+		case 'eu':
+                        document.getElementById('content_lang_es').style.display = 'none';
+                        document.getElementById('content_lang_eu').style.display = 'block';
+                        document.getElementById('content_lang_en').style.display = 'none';
+                        document.getElementById('lang_tab_es').classList.remove("lang_tabs_active");
+                        document.getElementById('lang_tab_eu').classList.add("lang_tabs_active");
+                        document.getElementById('lang_tab_en').classList.remove("lang_tabs_active");
+                        break;
+		case 'en':
+                        document.getElementById('content_lang_es').style.display = 'none';
+                        document.getElementById('content_lang_eu').style.display = 'none';
+                        document.getElementById('content_lang_en').style.display = 'block';
+                        document.getElementById('lang_tab_es').classList.remove("lang_tabs_active");
+                        document.getElementById('lang_tab_eu').classList.remove("lang_tabs_active");
+                        document.getElementById('lang_tab_en').classList.add("lang_tabs_active");
+	}
+}
+