Optimisations d'UI pre-p0ka-et-Hugo

farfetched.php

@@ -7,17 +7,24 @@ $gchange = new Gchange();
 
 $javascripts['header'][] = 'lib/js/farfetched.js';
 
+$bodyIds = 'farfetched';
 include_once('header.php');
 
 ?>
 
-<h2>Envoi possible</h2>
-<ul id="shippable">
-</ul>
+<section id="shippable">
+
+	<h2>Envoi possible</h2>
+	<ul id="shippable-offers" class="offers-list">
+	</ul>
+</section>
+
+<section id="immaterial">
+	<h2>Offres immatérielles</h2>
+	<ul id="immaterial-offers" class="offers-list">
+	</ul>
+</section>
 
-<h2>Offres immatérielles</h2>
-<ul id="immaterial">
-</ul>
 <?php
 
 include_once('footer.php');

lib/js/farfetched.js

@@ -4,6 +4,7 @@ const nodes = {
 	]
 }
 
+let gameId = 'spationaute'
 
 async function fetchShippable (n) {
 
@@ -17,6 +18,8 @@ async function fetchShippable (n) {
 			  'title'
 			, 'description'
 			, 'id'
+			, 'picturesCount'
+			, 'pictures'
 		]
 		, query: {
 			bool: {
@@ -63,24 +66,6 @@ async function fetchShippable (n) {
 
 }
 
-function displayShippable (records) {
-
-	let shippableElt = document.getElementById('shippable');
-
-	for (record of records) {
-
-		offerLi = document.createElement('li')
-
-		offerLink = document.createElement('a')
-
-		offerLink.innerHTML = record._source.title
-		offerLink.href = 'https://www.gchange.fr/#/app/market/view/' + record._id + '/'
-
-		offerLi.append(offerLink)
-		shippableElt.append(offerLi)
-	}
-}
-
 
 async function fetchImmaterial (n) {
 
@@ -94,6 +79,8 @@ async function fetchImmaterial (n) {
 			  'title'
 			, 'description'
 			, 'id'
+			, 'picturesCount'
+			, 'pictures'
 		]
 		, query: {
 			nested: {
@@ -137,7 +124,7 @@ async function fetchImmaterial (n) {
 	if (r.ok === true) {
 
 		var obj = r.json()
-		storeAtFreds(obj)
+		// storeAtFreds(obj)
 		return obj
 	}
 
@@ -229,9 +216,9 @@ function storeAtFreds (json) {
 	// JSON.stringify(json)
 }
 
-function displayImmaterial (records) {
+function displayShippable (records) {
 
-	let shippableElt = document.getElementById('immaterial');
+	let offersElt = document.getElementById('shippable-offers');
 
 	for (record of records) {
 
@@ -239,15 +226,69 @@ function displayImmaterial (records) {
 
 		offerLink = document.createElement('a')
 
-		offerLink.innerHTML = record._source.title
+		offerSpan = document.createElement('span')
+
+		offerImg = document.createElement('img')
+
+		if (record._source.picturesCount > 0) {
+			
+			offerImg.src = 'data:' + (record._source.pictures[0].file._content_type) + ';base64,' + (record._source.pictures[0].file._content)
+		
+		} else {
+
+			offerImg.src = 'themes/' + gameId + '/default-shippable.256.png'
+		}
+
+		offerImg.alt = record._source.title
+		offerImg.title = record._source.title
+
+		// offerLink.innerHTML = record._source.title
 		offerLink.href = 'https://www.gchange.fr/#/app/market/view/' + record._id + '/'
 
+		offerSpan.append(offerImg)
+		offerLink.append(offerSpan)
 		offerLi.append(offerLink)
-		shippableElt.append(offerLi)
+		offersElt.append(offerLi)
 	}
 }
 
-fetchImmaterial(30)
+function displayImmaterial (records) {
+
+	let offersElt = document.getElementById('immaterial-offers');
+
+	for (record of records) {
+
+		offerLi = document.createElement('li')
+
+		offerLink = document.createElement('a')
+
+		offerSpan = document.createElement('span')
+
+		offerImg = document.createElement('img')
+
+		if (record._source.picturesCount > 0) {
+			
+			offerImg.src = 'data:' + (record._source.pictures[0].file._content_type) + ';base64,' + (record._source.pictures[0].file._content)
+		
+		} else {
+
+			offerImg.src = 'themes/' + gameId + '/default-immaterial.256.png'
+		}
+
+		offerImg.alt = record._source.title
+		offerImg.title = record._source.title
+
+		// offerLink.innerHTML = record._source.title
+		offerLink.href = 'https://www.gchange.fr/#/app/market/view/' + record._id + '/'
+
+		offerSpan.append(offerImg)
+		offerLink.append(offerSpan)
+		offerLi.append(offerLink)
+		offersElt.append(offerLi)
+	}
+}
+
+fetchImmaterial(18)
 	.then(records => {
 		
 		displayImmaterial(records.hits.hits)
@@ -259,7 +300,7 @@ fetchImmaterial(30)
 			console.error(error)
 	})
 
-fetchShippable(30)
+fetchShippable(18)
 	.then(records => {
 		
 		displayShippable(records.hits.hits)

messenger.php

@@ -7,6 +7,8 @@ require_once('lib/Gchange.class.php');
 require_once('lib/Jaklis.class.php');
 require_once('lib/ErrorsHandler.class.php');
 
+$javascripts['header'][] = 'lib/js/messenger.js';
+
 $gchange = new Gchange();
 $messenger = new Messenger($gchange);
 $fred = new Fred();
@@ -153,7 +155,9 @@ if (isset($_GET['penpal'])) {
 
 		<input type="hidden" name="title" value="'. htmlspecialchars($displayedConv->getConvTitle()) .'" />
 
-		<input type="submit" value="'. 'Envoyer' .'" />
+		<p class="submit-button-wrapper">
+			<input type="submit" value="'. 'Envoyer' .'" />
+		</p>
 	</form>
 	';
 }

themes/spationaute/css/dashboard.deco.css

@@ -47,4 +47,10 @@
 
 	background-image: url('../img/dashboard-minelife.png');
 	background-size: cover;
+}
+
+#dashboard-tiddlywiki {
+
+	background-image: url('../img/dashboard-tiddlywiki.png');
+	background-size: cover;
 }

themes/spationaute/css/dashboard.layout.css

@@ -1,7 +1,15 @@
+body#home header {
+
+	font-size: 2rem;
+	text-align: center;
+	margin-top: 2rem;
+	margin-bottom: 3rem;
+}
+
 body#home nav {
 
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	height: 100vh;
 }
 
@@ -16,6 +24,13 @@ body#home nav ul {
 	flex-wrap: wrap;
 }
 
+body#home nav ul > * {
+
+	margin-bottom: 3rem;
+	margin-left: 5vw;
+	margin-right: 5vw;
+}
+
 #dashboard-map {
 
 	border-radius: 12.5vw;
@@ -24,7 +39,8 @@ body#home nav ul {
 #dashboard-map a span, 
 #dashboard-messenger a span, 
 #dashboard-farfetched a span, 
-#dashboard-minelife a span {
+#dashboard-minelife a span , 
+#dashboard-tiddlywiki a span {
 
 	display: none;
 }
@@ -32,10 +48,11 @@ body#home nav ul {
 #dashboard-map a, 
 #dashboard-messenger a, 
 #dashboard-farfetched a, 
-#dashboard-minelife a {
+#dashboard-minelife a , 
+#dashboard-tiddlywiki a {
 
-	width:  20vw;
-	height:  20vw;
+	width:  15vw;
+	height:  15vw;
 	display: block;
 
 }

themes/spationaute/css/deco.css

@@ -341,6 +341,10 @@ body#sonar {
 	color: hsl(132.2, 59.8%, 75.2%);
 }
 
+#messenger-page #conversations-list {
+
+	background-color: hsl(0, 27.8%, 12.1%);
+}
 
 #messenger-page #conversations-list .conversation time {
 
@@ -368,4 +372,21 @@ body#sonar {
 #messenger-page #conversations-list .conversation:hover {
 
 	background-color: hsl(0, 27.8%, 24.2%);
-}
+}
+
+#messenger-page #conversation form, 
+#messenger-page #conversation textarea {
+
+	background-color: hsl(0, 50.8%, 95.1%);
+}
+
+#messenger-page #conversation textarea, 
+#messenger-page #conversation .submit-button-wrapper input {
+
+	font-size: 1.5rem;
+}
+
+#messenger-page #conversation .submit-button-wrapper input {
+
+	background-color: transparent;
+}

themes/spationaute/css/farfetched.layout.css

@@ -0,0 +1,75 @@
+body#farfetched main  {
+
+	display: flex;
+	justify-content: space-evenly;
+	margin-top: 1.5rem;
+}
+
+
+body#farfetched main > section h2 {
+
+	text-align: center;
+	background-color: white;
+	color: black;
+	margin-top: 0;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
+body#farfetched main > section {
+
+	width: 48%;
+	/*overflow: hidden;*/
+	border: 0.125rem;
+
+	border-style: solid;
+	border-color: white;
+}
+
+body#farfetched main > section ul {
+
+	list-style: none;
+	margin:  0;
+	padding: 0;
+}
+
+body#farfetched main > section ul li {
+
+	margin:  0;
+	padding: 0;
+}
+
+body#farfetched main > section .offers-list {
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+
+
+body#farfetched main > section .offers-list > * {
+
+	margin: 0.5rem;
+
+}
+
+body#farfetched main > section .offers-list a {
+
+	display: block;
+	width: 5rem;
+	height:  5rem;
+
+	overflow: hidden;
+}
+
+body#farfetched main > section .offers-list a span {
+
+	display: block;
+	
+	overflow: visible;
+}
+
+body#farfetched main > section .offers-list a span img {
+
+	width: 100%;
+}

themes/spationaute/css/layout.css

@@ -223,15 +223,21 @@ main {
 
 
 
+
+#messenger-page > footer {
+	display: none;
+}
+
 #messenger-page main {
 
   display: flex;
+  height: 100vh;
 }
 
 #messenger-page #conversations-list {
 
   width: 33.333vw;
-  height:  100vh;
+  height:  100%;
   overflow-y: auto;
 }
 
@@ -286,6 +292,8 @@ main {
 	position:  absolute;
 	top: 0;
 	right: 0;
+	padding-right: 0.5rem;
+	padding-top: 0.5rem;
 }
 
 
@@ -293,6 +301,8 @@ main {
 
 #messenger-page #conversation {
 
+	height: 100vh;
+	overflow-y: auto;
   width: 66.666vw;
 }
 
@@ -345,6 +355,61 @@ main {
 	text-align: right;
 }
 
+#messenger-page #conversation {
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+#messenger-page #conversation #msgList {
+
+	overflow-y: auto;
+	flex-grow: 1;
+}
+
+#messenger-page #conversation form {
+
+	align-self: flex-end;
+
+	display: flex;
+	width: 100%;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
+
+#messenger-page #conversation label {
+
+	display: none;
+}
+
+#messenger-page #conversation textarea {
+
+	flex-basis: 100%;
+	flex-grow: 1;
+	margin-left: 1rem;
+	margin-right: 1rem;
+	border: 0;
+}
+
+#messenger-page #conversation textarea:focus {
+
+	outline: 0;
+}
+
+#messenger-page #conversation .submit-button-wrapper {
+
+	margin-left: 1rem;
+	margin-right: 1rem;
+	display: flex;
+	align-items: center;
+}
+
+#messenger-page #conversation .submit-button-wrapper input {
+
+	border: 0;
+}
+
 
 
 

themes/spationaute/js/messenger/messenger.js

@@ -0,0 +1,7 @@
+
+/*
+
+var form = document.querySelector('#messenger-page #conversation > form');
+
+form.addEventListener
+*/