Alpha 4

web/forms/cms/contact/style.css

@@ -7,10 +7,10 @@
 {
 	max-width: 40em;
 }
-.contact p
+.contact .body
 {
 	position: relative;
-	text-align: center;
+	text-align: left;
 	max-width: 25em;
 	margin: 1em auto;
 }
@@ -36,6 +36,10 @@
 	margin-top: 1em;
 	padding: 0.6em;
 }
+.contact .mandatory-message
+{
+	font-size: .9em;
+}
 
 /* Captcha */
 

web/forms/cms/contact/ui.xml

@@ -41,10 +41,10 @@
 					<input type="text" name="captcha"/>
 					<img alt="Captcha" id="captcha-img"/>
 				</div>
-				<p>
+				<p class="mandatory-message">
 					<t>AllFieldsMandatory</t>
 				</p>
-				<button class="flat">
+				<button class="thin">
 					<t>Send</t>
 				</button>
 			</form>

web/forms/cms/home/ui.xml

@@ -15,10 +15,10 @@
 			<div class="new">
 				<div class="top">
 					<h2><htk-text form="new" column="title"/></h2>
-					<p class="new-info">
+<!--				<p class="new-info">
 						<htk-text format="_%a, %e %b %Y" form="new" column="date_time"/>
 					</p>
-					<div class="new-text">
+-->					<div class="new-text">
 						<htk-html form="new" column="text"/>
 					</div>
 				</div>

web/forms/ecomerce/catalog/style.css

@@ -59,6 +59,11 @@
 
 /* Right panel */
 
+option.placeholder
+{
+	color: #999;
+}
+
 .right-panel
 {
 	position: absolute;
@@ -77,11 +82,11 @@
 .right-panel select,
 .right-panel button
 {
-	color: #333;
 	margin: 1em auto;
 	width: 12em;
+/*	color: #333;
 	background-color: #EEE;
-	border: 0;
+	border: 0;*/
 }
 
 button.basket

web/forms/ecomerce/catalog/ui.xml

@@ -172,7 +172,7 @@
 </div>
 <div id="right-panel" class="right-panel" on-click="onRightPanelClick">
 	<select>
-		<option value="">
+		<option value="" disabled="true" selected="true">
 			<t>Order by</t>
 		</option>
 		<option value="Article">
@@ -200,12 +200,12 @@
 			<t>Origin</t>
 		</option>
 	</select>
-	<vn-filter-button text="_Realm" column="reino">
-		<db-model>
+	<htk-combo placeholder="_Realm" on-click="onSelectClick">
+		<db-model property="model">
 			SELECT id, reino, color FROM vn2008.reinos
 				WHERE display != FALSE ORDER BY reino
 		</db-model>
-	</vn-filter-button>
+	</htk-combo>
 	<vn-filter-button text="_Subtype" column="Tipo">
 		<db-model>
 			CALL type_list (1)

web/js/hedera/login.css

@@ -108,11 +108,12 @@
 .vn-login input[type=text],
 .vn-login input[type=password]
 {
-	margin: 0.5em 0;
+	margin: .5em 0;
 	margin-bottom: 0.5em;
 	padding: 0 .5em;
 	width: 100%;
 	border: 1px solid #AAA;
+	height: 2.6em;
 }
 .vn-login td.entry
 {

web/js/htk/field/select.js

@@ -66,6 +66,24 @@ Htk.Select = new Class
 			{
 				return this._ready;
 			}
+		},
+		/**
+		 * Checks if the form data is ready.
+		 **/
+		placeholder:
+		{
+			type: String
+			,set: function (x)
+			{
+				this._placeholder = x;
+				
+				if (this._placeholderNode)
+					Vn.Node.setText (this._placeholderNode, x);
+			}
+			,get: function ()
+			{
+				return this._placeholder;
+			}
 		}
 	}
 	
@@ -107,12 +125,30 @@ Htk.Select = new Class
 	{
 		var option = document.createElement ('option');
 		option.value = value;
+		
+		if (text)
 			option.appendChild (document.createTextNode (text));
+
 		this.node.appendChild (option);
 	}
 	
+	,addPlaceholder: function (text)
+	{
+		var option = document.createElement ('option');
+		option.disabled = true;
+		option.selected = true;
+		option.value = null;
+		
+		if (text)
+			option.appendChild (document.createTextNode (text));
+
+		this.node.appendChild (option);
+		this._placeholderNode = option;
+	}
+	
 	,onModelChange: function ()
 	{
+		var placeholder = '';
 		var model = this._model;
 		this.signalEmit ('status-changed');
 	
@@ -123,7 +159,7 @@ Htk.Select = new Class
 			case Db.Model.Status.READY:
 			{
 				var data = model.data;
-				this.addOption (null, '');
+				this.addPlaceholder (this._placeholder);
 				
 				for (var i = 0; i < data.length; i++)
 					this.addOption (data[i][this.showColumnIndex], data[i][1]);
@@ -132,10 +168,12 @@ Htk.Select = new Class
 				break;
 			}
 			case Db.Model.Status.ERROR:
-				this.addOption (null, _('Error'));
+				placeholder = 'Error';
+				break;
 			case Db.Model.Status.LOADING:
-				this.addOption (null, _('Loading...'));
+				placeholder = 'Loading...';
 			default:
+				this.addPlaceholder (_(placeholder));
 				this.setRow (-1);
 		}
 	}

web/js/htk/style.css

@@ -436,77 +436,3 @@
 	opacity: .7;
 }
 
-/* Loader */
-/*
-.htk-loader
-{
-	margin: 0 auto;
-	width: 2em;
-	height: 2em;
-	text-indent: -9999em;
-	border-radius: 50%;
-	background: #FFF;
-	background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-	background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-	background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-	background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-	background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
-	position: relative;
-	-webkit-animation: load3 1.4s infinite linear;
-	animation: load3 1.4s infinite linear;
-	-webkit-transform: translateZ(0);
-	-ms-transform: translateZ(0);
-	transform: translateZ(0);
-}
-.htk-loader:before
-{
-	width: 50%;
-	height: 50%;
-	background: #FFF;
-	border-radius: 100% 0 0 0;
-	position: absolute;
-	top: 0;
-	left: 0;
-	content: '';
-}
-.htk-loader:after
-{
-	background: #009688;
-	width: 75%;
-	height: 75%;
-	border-radius: 50%;
-	content: '';
-	margin: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-}
-@-webkit-keyframes load3
-{
-	0%
-	{
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	100%
-	{
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
-	}
-}
-@keyframes load3
-{
-	0%
-	{
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-	100%
-	{
-		-webkit-transform: rotate(360deg);
-		transform: rotate(360deg);
-	}
-}
-*/