catalog: 3 tags shown in list view, up to 6 digits for available.

README.md

@@ -8,7 +8,12 @@ Required dependencies.
  * PHP >= 7.0
  * Node.js >= 8.0
 
-Launch command line client.
+Launch application for development.
+```
+$ npm run dev 
+```
+
+Run server side method from command line.
 ```
 $ php hedera-web.php -m method_path 
 ```

debian/changelog

@@ -1,4 +1,4 @@
-hedera-web (1.406.15) stable; urgency=low
+hedera-web (1.406.16) stable; urgency=low
 
   * Initial Release.
 

forms/ecomerce/catalog/style.css

@@ -159,16 +159,6 @@
 	font-weight: bold;
 	color: red;
 }
-.item-info .from
-{
-	font-size: .8em;
-	font-style: italic;
-}
-.item-info .price
-{
-	color: green;
-	font-size: 1.1em;
-}
 .item-info > h2
 {
 	padding: 0;
@@ -196,11 +186,6 @@
 	padding-bottom: .2em;
 	font-size: 1em;
 }
-.item-info > .aval-price
-{
-	position: absolute;
-	bottom: 0;
-}
 .item-info > .htk-button
 {
 	margin: -0.3em;
@@ -210,6 +195,20 @@
 {
 	vertical-align: middle;
 }
+.item-info .available-price
+{
+	white-space: nowrap;
+}
+.item-info .from
+{
+	font-size: .8em;
+	font-style: italic;
+}
+.item-info .price
+{
+	color: green;
+	font-size: 1.1em;
+}
 .tags
 {
 	font-size: .8em;
@@ -217,10 +216,10 @@
 	color: #333;
 	margin: 0;
 	width: auto;
+	border-collapse: collapse;
 }
 .tags td:first-child {
 	color: #999;
-	padding-right: .6em;
 }
 
 /* List view */
@@ -260,7 +259,7 @@
 	right: 0;
 	top: 0;
 	bottom: 0;
-	margin: .9em;
+	margin: .8em;
 	margin-left: 0;
 }
 .list-view .item-info > h2
@@ -272,19 +271,47 @@
 {
 	display: none;
 }
-.list-view .item-info > .aval-price
-{
-	right: .3em;
-}
 .list-view .item-info > .htk-button
 {
 	float: right;
 }
-.list-view .item-info > .info-button
+.list-view .item-info .extra
 {
-	margin-right: 0;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	margin-top: .3em;
 }
-.list-view .item-info .tags .extra
+.list-view .item-info .available-price
+{
+	float: right;
+	right: .3em;
+}
+.list-view .item-info .tags
+{
+	display: block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	margin-top: .3em;
+}
+.list-view .item-info .tags
+{
+	display: block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.list-view .item-info .tags > tr
+{
+	display: inline-block;
+}
+.list-view .item-info .tags td
+{
+	display: inline-block;
+	padding-right: .3em
+}
+.list-view .item-info .tags td:first-child
 {
 	display: none;
 }
@@ -325,25 +352,31 @@
 	bottom: 0;
 	margin: .6em;
 }
-.grid-view .item-info > .aval-price
-{
-	right: 2.8em;
-}
 .grid-view .item-info .add-button
 {
 	position: absolute;
 	bottom: 0;
 	right: 0;
 }
-.grid-view .item-info > .info-button
+.grid-view .item-info .available-price
 {
-	float: right;
+	position: absolute;
+	bottom: 0;
+	right: 2em;
+}
+.grid-view .item-info .available
+{
+	display: inline-block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	max-width: 4em;
+	vertical-align: bottom;
 }
 .grid-view .item-info .tags
 {
 	position: absolute;
 	top: 5.2em;
-	border-collapse: collapse;
 }
 .grid-view .item-info .tags td {
 	overflow: hidden;
@@ -353,6 +386,9 @@
 	width: 6em;
 	line-height: 1.1em;
 }
+.grid-view .item-info .tags td:first-child {
+	color: #999;
+}
 
 /* Card */
 

forms/ecomerce/catalog/ui.xml

@@ -128,28 +128,32 @@
 				<p class="sub-name">
 					<htk-text form="item" column="subName"/>
 				</p>
-				<table class="tags">
+				<div class="extra">
-					<tr>
+					<div class="available-price">
-						<td><htk-text form="item" column="tag5"/></td>
+						<span class="available">
-						<td><htk-text form="item" column="value5"/></td>
+							<htk-text form="item" column="available"/>
-					</tr>
+						</span> 
-					<tr class="extra">
+						<span class="from">
-						<td><htk-text form="item" column="tag6"/></td>
+							<t>from</t>
-						<td><htk-text form="item" column="value6"/></td>
+						</span> 
-					</tr>
+						<span class="price">
-					<tr class="extra">
+							<htk-text form="item" column="price" format="%.2d€"/>
-						<td><htk-text form="item" column="tag7"/></td>
+						</span>
-						<td><htk-text form="item" column="value7"/></td>
+					</div>
-					</tr>
+					<table class="tags">
-				</table>
+						<tr>
-				<div class="aval-price">
+							<td><htk-text form="item" column="tag5"/></td>
-					<htk-text form="item" column="available"/> 
+							<td><htk-text form="item" column="value5"/></td>
-					<span class="from">
+						</tr>
-						<t>from</t>
+						<tr>
-					</span> 
+							<td><htk-text form="item" column="tag6"/></td>
-					<span class="price">
+							<td><htk-text form="item" column="value6"/></td>
-						<htk-text form="item" column="price" format="%.2d€"/>
+						</tr>
-					</span>
+						<tr>
+							<td><htk-text form="item" column="tag7"/></td>
+							<td><htk-text form="item" column="value7"/></td>
+						</tr>
+					</table>
 				</div>
 			</div>
 		</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hedera-web",
-  "version": "1.406.15",
+  "version": "1.406.16",
   "description": "Verdnatura web page",
   "license": "GPL-3.0",
   "repository": {