Fixes

debian/changelog

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

forms/admin/items/style.css

@@ -1,6 +1,6 @@
 
 .items .item .photo {
-	border-radius: 50%;
+	border-radius: 10px;
 	height: 80px;
 	width: 80px;
 }

forms/admin/queries/style.css

@@ -1,14 +1,4 @@
-.queries {
+
-	padding: 1em;
-}
-.queries .box {
-	max-width: 600px;
-	margin: 0 auto;
-}
-.queries .form {
-	box-sizing: border-box;
-	padding: 2em;
-}
 .queries textarea {
 	display: block;
 	width: 100%;

forms/admin/queries/ui.xml

@@ -13,7 +13,7 @@
 		on-click="this.onCleanClick()"/>
 </div>
 <div id="form" class="queries">
-	<div class="box form">
+	<div class="box form vn-w-sm vn-pa-lg">
 		<div class="form-group">
 			<label><t>SQL query</t></label>
 			<textarea

forms/cms/about/style.css

@@ -24,8 +24,8 @@
 	}
 }*/
 .about .box {
-	margin-bottom: 1em;
+	margin-bottom: 16px;
-	padding: 2em;
+	padding: 32px;
 }
 .about h1 {
 	padding: 0;

forms/cms/home/ui.xml

@@ -14,8 +14,8 @@
 		<htk-repeater form-id="iter">
 			<db-model property="model">
 				<custom>
-					SELECT title, text, image, id FROM news
+					SELECT title, text, image, id
-						WHERE tag != 'course'
+						FROM news
 						ORDER BY priority, created DESC
 				</custom>
 			</db-model>

forms/ecomerce/catalog/catalog.js

@@ -100,8 +100,8 @@ Hedera.Catalog = new Class({
 	,realmRenderer: function(builder, form) {
 		var link = builder.$('link');
 		link.href = this.hash.make({
-			'form': this.hash.get('form'),
+			form: this.hash.get('form'),
-			'realm': form.get('id')
+			realm: form.get('id')
 		});
 	}
 	
@@ -192,22 +192,17 @@ Hedera.Catalog = new Class({
 		if (this.isGuest())
 			return;
 
-		this.hash.set({'form': 'ecomerce/basket'});
+		this.hash.set({form: 'ecomerce/basket'});
 	}
 	
 	,onConfigureClick: function() {
 		if (this.isGuest())
 			return;
 
-		this.hash.set({'form': 'ecomerce/checkout'});
+		this.hash.set({form: 'ecomerce/checkout'});
 	}
 
-	,repeaterFunc: function(res, form) {
+	,onAddItemClick: function(event, form) {
-		res.$('item-box').addEventListener('click',
-			this.onAddItemClick.bind(this, form));
-	}
-
-	,onAddItemClick: function(form, event) {
 		if (event.defaultPrevented) return;
 		event.preventDefault();
 		if (this.isGuest()) return;

forms/ecomerce/catalog/locale/ca.yml

@@ -35,6 +35,7 @@ Lower size: Mida més petita
 Higher size: Mida més gran
 '%.0d Units': '%.0d Unitats'
 for: per
+Zoom image: Ampliar imatge
 AddToBasket: Afegir article
 Add: Afegir
 Erase: Esborrar

forms/ecomerce/catalog/locale/en.yml

@@ -35,6 +35,7 @@ Lower size: Lower size
 Higher size: Higher size
 '%.0d Units': '%.0d Units'
 for: for
+Zoom image: Zoom image
 AddToBasket: Add to basket
 Add: Add
 Erase: Remove

forms/ecomerce/catalog/locale/es.yml

@@ -35,6 +35,7 @@ Higher size: Medida más grande
 Relevancy: Relevancia
 '%.0d Units': '%.0d Unidades'
 for: por
+Zoom image: Ampliar imagen
 AddToBasket: Añadir artículo
 Add: Añadir
 Erase: Borrar

forms/ecomerce/catalog/locale/fr.yml

@@ -35,6 +35,7 @@ Lower size: Taille le plus bas
 Higher size: Taille le plus élevé
 '%.0d Units': '%.0d Unités'
 for: pour
+Zoom image: Agrandir l'image
 AddToBasket: Ajouter article
 Add: Ajouter
 Erase: Effacer

forms/ecomerce/catalog/locale/pt.yml

@@ -35,6 +35,7 @@ Lower size: Tamanho menor
 Higher size: Tamanho maior
 '%.0d Units': '%.0d Unidades'
 por: para
+Zoom image: Mais zoom
 AddToBasket: Adicionar à Cesta
 Add: Adicionar
 Erase: Eliminar

forms/ecomerce/catalog/style.css

@@ -1,14 +1,7 @@
 .catalog {
-	padding: 0 !important;
 	margin-right: 18em;
 }
 
-/* Topbar */
-
-.catalog-actions > .htk-search-entry {
-	margin-right: .4em;
-}
-
 /* Right panel */
 
 .right-panel {
@@ -132,13 +125,17 @@
 /* Items */
 
 .item-box {
-	transition: background-color 200ms ease-in;
+	display: flex;
+	box-sizing: border-box;
 }
-.item-box:hover {
+.item-box > htk-image {
-	cursor: pointer;
+	flex: none;
-	background-color: #eee;
 }
-.item-info {
+.item-box > htk-image:hover {
+	background-color: transparent;
+}
+.item-box > .item-info {
+	flex: auto;
 	position: relative;
 }
 .item-info .second-category {
@@ -192,19 +189,19 @@
 	border-radius: .2em;
 	padding: .1em .3em;
 	border: .1em transparent solid;
-	background-color: white;
+	box-sizing: border-box;
 }
 .item-info .grouping {
-	width: 2em;
+	width: 38px;
 	background-color: #ddd;
 }
 .item-info .available {
-	width: 3.3em;
+	width: 65px;
 	border-color: #bbb;
 	color: #777;
 }
 .item-info .price {
-	width: 4em;
+	width: 75px;
 	border-color: #9cbc28;
 	color: #748c1e;
 }
@@ -221,40 +218,82 @@
 	padding-right: .5em;
 }
 
+/* Grid view */
+
+.grid-view > * {
+	display: flex;
+	gap: 16px;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+.grid-view .item-box {
+	border-radius: .6em;
+	box-shadow: .05em .05em .2em rgba(0, 0, 0, .1);
+	overflow: hidden;
+	background-color: white;
+
+	flex-direction: column;
+	width: 210px;
+	height: 375px;
+	overflow: hidden;
+}
+.grid-view .item-box:hover {
+	background-color: #efefef;
+}
+.grid-view .item-info {
+	margin: 10px;
+}
+.grid-view .item-box > .htk-image {
+	width: 210px;
+	height: 210px;
+}
+.grid-view .item-box > .item-info {
+	flex: auto;
+	overflow: hidden;
+}
+.grid-view .item-info .available-price {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+.grid-view .item-info .tags td {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: 6em;
+	width: 6em;
+	line-height: 1.1em;
+}
+
 /* List view */
 
 .list-view {
-	max-width: 420px;
+	border-radius: .6em;
+	box-shadow: .05em .05em .2em rgba(0, 0, 0, .1);
+	overflow: hidden;
+	background-color: white;
+
+	max-width: 544px;
 	margin: 0 auto;
-	padding: 1em;
 }
 .list-view .item-box {
-	display: block;
+	gap: 10px;
-	position: relative;
-	width: 100%;
 	margin: 0;
-	height: 5.5em;
+	padding: 10px;
+	height: 120px;
 	overflow: visible;
 	border-bottom: 1px solid #DDD;
 }
-.list-view .item-box > .htk-image {
+.list-view .item-box:last-child {
-	margin: 1em;
+	border-bottom: none;
-	width: 3.5em;
-	height: 3.5em;
-	float: left;
-	overflow: hidden;
 }
-.list-view .item-box > .htk-image > img {
+.list-view .item-box > .htk-image {
+	width: 100px;
+	height: 100px;
 	border-radius: 50%;
 }
 .list-view .item-info {
-	position: absolute;
+	overflow: hidden;
-	left: 5.5em;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	margin: .8em;
-	margin-left: 0;
 }
 .list-view .item-info > h2 {
 	font-size: 1em;
@@ -290,52 +329,6 @@
 	display: none;
 }
 
-/* Grid view */
-
-.grid-view {
-	padding: 1em;
-	padding-right: .2em;
-	padding-bottom: .4em;
-	text-align: center;
-}
-.grid-view .item-box {
-	text-align: left;
-	position: relative;
-	display: inline-block;
-	width: 24em;
-	margin: 0;
-	margin-right: .8em;
-	margin-bottom: .6em;
-	height: 11em;
-	overflow: hidden;
-}
-.grid-view .item-box > .htk-image {
-	width: 11em;
-	height: 100%;
-	float: left;
-}
-.grid-view .item-info {
-	position: absolute;
-	left: 11.4em;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	margin: .6em;
-}
-.grid-view .item-info .available-price {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-.grid-view .item-info .tags td {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	max-width: 6em;
-	width: 6em;
-	line-height: 1.1em;
-}
-
 /* Card */
 
 .card-popup {

forms/ecomerce/catalog/ui.xml

@@ -117,20 +117,21 @@
 		id="grid-view"
 		empty-message="_Choose filter from right menu"
 		form-id="item"
-		model="items-model"
+		model="items-model"	>
-		renderer="repeaterFunc">
 		<custom>
 		<div
 			id="item-box"
-			class="box item-box"
+			class="item-box clickable"
-			title="{{_('AddToBasket')}}">
+			title="{{_('AddToBasket')}}"
+			on-click="this.onAddItemClick($event, $.item)">
 			<htk-image
 				directory="catalog"
 				subdir="200x200"
 				form="item"
 				column="image"
 				stamp-column="updated"
-				full-dir="1600x900"/>
+				full-dir="1600x900"
+				title="_Zoom image"/>
 			<div class="item-info">
 				<h2>
 					{{item.item}}
@@ -160,7 +161,7 @@
 						{{item.available}}
 					</span> 
 					<span class="price" title="_GroupingPrice">
-						{{Vn.Value.format(item.price, 'x%.0d')}}
+						{{Vn.Value.format(item.price, '%.02d€')}}
 					</span>
 				</div>
 			</div>

forms/ecomerce/orders/style.css

@@ -1,13 +1,13 @@
 
 .balance {
-	margin-right: .5em;
+	margin-right: 8px;
 }
 .balance > * {
 	vertical-align: middle;
 }
 .balance > .amount {
 	color: white;
-	padding: 0.3em;
+	padding: .3em;
 }
 .balance > .info {
 	display: inline;
@@ -17,8 +17,8 @@
 }
 .balance > .negative {
 	background-color: #EF5350;
-	border-radius: 0.1em;
+	border-radius: .1em;
-	box-shadow: 0 0 0.4em #666;
+	box-shadow: 0 0 .4em #666;
 }
 .balance-popup {
 	width: 25em;

forms/ecomerce/orders/ui.xml

@@ -21,11 +21,10 @@
 				</db-form>
 			</htk-text>
 		</span> 
-		<img
+		<htk-icon
-			src="image/icon/dark/info.svg"
+			name="info"
 			title="_PaymentInfo"
-			class="info"
+			class="info"/>
-			alt="Info"/>
 	</div>
 	<htk-bar-button
 		id="pay-button"

forms/news/new/style.css

@@ -1,4 +1,33 @@
-
+.new .box {
+	position: relative;
+}
+.new .image-label {
+	position: absolute;
+	text-align: center;
+	width: 100%;
+	top: 30px;
+	opacity: .5;
+}
+.new .htk-image {
+	height: 100px;
+	overflow: hidden;
+	border-bottom: 1px solid #ddd;
+}
+.new .htk-image > button {
+	display: block;
+}
+.new .htk-image > img {
+	margin-top: -40%;
+	width: 100%;
+	height: initial;
+}
+.new .tag-priority {
+	display: flex;
+	gap: 16px;
+}
+.new .tag-priority > *{
+	flex: 1;
+}
 .new textarea {
 	min-height: 500px;
 }

forms/news/new/ui.xml

@@ -9,7 +9,7 @@
 			updatable="true"
 			on-operations-done="this.onOperationsDone()">
 			<custom>
-				SELECT id, title, text, tag, priority
+				SELECT id, title, text, tag, priority, image
 					FROM news WHERE id = #new
 			</custom>
 			<sql-batch property="batch">
@@ -35,12 +35,24 @@
 		on-click="this.onAcceptClick()"/>
 </div>
 <div id="form" class="new">
-	<div class="box form vn-w-sm vn-pa-lg">
+	<div class="box form vn-w-sm">
+		<h4 class="image-label"><t>Image</t></h4>
+		<htk-image
+			form="iter"
+			column="image"
+			class="photo"
+			directory="news"
+			subdir="full"
+			full-dir="full"
+			editable="true"
+			conn="conn"/>
+		<div class="vn-pa-lg">
 			<div class="form-group">
 				<label><t>Title</t></label>
 				<htk-entry form="iter" column="title"/>
 			</div>
-		<div class="form-group">
+			<div class="form-group tag-priority">
+				<div>
 					<label><t>Tag</t></label>
 					<htk-combo form="iter" column="tag">
 						<db-model property="model">
@@ -51,14 +63,16 @@
 						</db-model>
 					</htk-combo>
 				</div>
-		<div class="form-group">
+				<div>
 					<label><t>Priority</t></label>
 					<htk-entry form="iter" column="priority"/>
 				</div>
+			</div>
 			<div class="form-group">
 				<label><t>NewBody</t></label>
 				<textarea id="html-editor"/>
 			</div>
 		</div>
+	</div>
 </div>
 </vn>

forms/news/news/style.css

@@ -2,5 +2,5 @@
 .news .item .photo {
 	height: 80px;
 	width: 80px;
-	border-radius: 50%;
+	border-radius: 10px;
 }

js/hedera/gui.scss

@@ -68,17 +68,14 @@ $navbar-height: 64px;
 		}
 		& > .action-bar {
 			flex: none;
-			padding: 0;
-			margin: 0;
 			height: 100%;
 
 			& > div {
-				padding: 0;
-				margin: 0;
 				height: 100%;
 				display: flex;
 				align-items: center;
-				padding: 0 1em;
+				padding-right: $spacing-md;
+				padding-left: $spacing-sm;
 				gap: .5em;
 
 				& > * {

js/hedera/style.scss

@@ -114,6 +114,7 @@ select,
 }
 input[type=text],
 input[type=password],
+input[type=file],
 input[type=number],
 textarea,
 .input,
@@ -196,6 +197,12 @@ img.editable {
 	clear: both !important;
 }
 
+/* Clickable */
+
+.clickable {
+	@extend %clickable;
+}
+
 /* Box */
 
 .box {

js/htk/field/image.js

@@ -110,18 +110,18 @@ module.exports = new Class({
 			this.node.removeChild(this.editButton);
 			this.editButton = null;
 		}
-	
 		if (this._editable) {
 			var button = this.createElement('button');
 			button.addEventListener('click', this._onEditClick.bind(this));
 			button.title = _('UpdateImage');
 			this.node.appendChild(button);
 			
-			var icon = new Htk.Icon({icon: 'add-photo'});
+			var icon = new Htk.Icon({name: 'add_a_photo'});
 			button.appendChild(icon.node);
 
 			this.editButton = button;
 		}
+		console.log(this.editable);
 	}
 	
 	,_makeSrc: function(subdir) {
@@ -162,7 +162,8 @@ module.exports = new Class({
 	}
 
 	,_onClick: function(event) {
-		if (!this._fullDir || !this._value || this._error)
+		if (!this._fullDir || !this._value || this._error
+		|| event.defaultPrevented)
 			return;
 
 		event.preventDefault();
@@ -170,7 +171,8 @@ module.exports = new Class({
 	}
 	
 	,_onEditClick: function(event) {
-		event.stopPropagation();
+		if (event.defaultPrevented) return
+		event.preventDefault();
 
 		var editor = new Htk.ImageEditor({conn: this.conn});
 		editor.setData(this.value, this._directory);	

js/htk/style/components.scss

@@ -357,6 +357,7 @@ td.cell-image .htk-image {
 .htk-image {
 	position: relative;
 	overflow: hidden;
+	transition: opacity 250ms ease-out;
 
 	&.clickable:hover {
 		cursor: pointer;
@@ -371,17 +372,20 @@ td.cell-image .htk-image {
 		position: absolute;
 		top: 0;
 		left: 0;
-		margin: 0;
+		padding: 8px;
-		padding: .15em;
+		margin: 4px;
 		display: none;
+		background-color: rgba(255, 255, 255, .6);
+
+		&:hover {
+			background-color: rgba(255, 255, 255, .8);
+		}
 	}
 	&:hover > button {
 		display: block;
 	}
-	& > button > img {
+	& > button > .htk-icon {
 		display: block;
-		height: 1.2em;
-		height: 1.2em;
 	}
 }
 

js/htk/style/index.scss

@@ -5,3 +5,4 @@
 @import "./text";
 @import "./width";
 @import "./components";
+@import "./material-symbols";

js/htk/style/material-symbols.scss

@@ -0,0 +1,22 @@
+/* fallback */
+@font-face {
+	font-family: 'Material Symbols Rounded';
+	font-style: normal;
+	font-weight: 400;
+	src: url(./material-symbols.woff2) format('woff2');
+}
+.material-symbols-rounded {
+	font-family: 'Material Symbols Rounded';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-moz-font-feature-settings: 'liga';
+	-moz-osx-font-smoothing: grayscale;
+}

js/htk/widget.js

@@ -27,6 +27,18 @@ module.exports = new Class({
 			,get: function() {
 				return this._node.className;
 			}
+		},
+		/**
+		 * Title of the element.
+		 */
+		title: {
+			type: String
+			,set: function(x) {
+				this.node.title = x;
+			}
+			,get: function() {
+				return this.node.title;
+			}
 		}
 	}
 

package.json

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

pages/main/ui.php

@@ -15,7 +15,6 @@ $result = $db->query('SELECT name, content FROM metatag');
 		<link rel="icon" type="image/png" href="image/favicon/favicon.png"/>
 		<link rel="icon" type="image/svg+xml" href="image/icon.svg" sizes="any"/>
 		<link rel="manifest" href="<?=$dir?>/manifest.json"/>
-		<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"/>
 		<meta name="theme-color" content="#333333"/>
 		<meta name="content-language" content="<?=$lang?>"/>