Optimisations d'UI pre-p0ka-et-Hugo

This commit is contained in:
Boris 2022-11-18 00:42:33 +01:00
parent 57360f9c85
commit d5980664c3
13 changed files with 282 additions and 39 deletions

View File

@ -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');

View File

@ -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)

View File

@ -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>
';
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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%;
}

View File

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

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