Petite refonte graphique ;)
Opened this issue · 14 comments
Bonsoir, j'ai effectuer une petite refonte graphique de certain élements bootstrap et ajouter un peu d'animation et picto (font awesome) (tout n'est pas bon a prendre) si vous voulez je peux vous fournir les fichiers modifiées ;)
Voici :
J'aime bien les cards pour mettre en valeur les messages.
Le header est peut-être un peu lourd.
Bon début sur le détail des tarifs ! Je sais pas trop comment faire ressortir le prix sans donner l'impression d'être un site racoleur.
Idéalement, j'aurai bien aimé faire la même visu pour le détail mensuel / journalier que le site d'EDF. Mais je manque de temps pour me pencher sur D3.js.
En tout cas merci pour la proposition, si tu veux merger, j'ai ouvert une branche "design". Ca permettra peut-être à d'autres personnes de travailler dessus (en tout cas, je regarderai plus en détail ^^)
Merci pour tes retours, je vais essayer de prendre et appliquer tes remarques et revoir ce qui te gène 😉
Je te ferai un retour quand c'est ok
👍
@JC144 Salut,
bon j'ai un peu potassé le truc hier soir et cette nuit (oui moi aussi la nuit je m'ennuie ;) )
Alors je suis plus front-end (html5, css, bootstrap, tailwind, jquery...) que back...
donc les push, pull, et compagnie je maitrise pas trop... désolé
(je bosse sur des site Wordpress et Prestashop en général....bref)
Donc du coup j'ai mis le résultat sur un de mes serveurs : http://simular-trix.sc4ewky9332.universe.wf/index.html
j'attend tes retours !
et si tu veux ajouter qu'une partie de mes modif. c'est toi le chef ;)
a plus
Pas de soucis, Git reste un filet intéressant pour suivre les modifications et revenir en arrière en cas d'erreurs.
J'ai intégré les modifications et fait quelques retouches sur https://github.com/JC144/EDF_Simulateur_Prix/tree/design
J'aime beaucoup la page d'accueil, l'information est super bien hiérarchisée.
Sur l'écran des paramètres, il faut encore que je retravaille l'accordéon des explications.
Le dernier écran est sobre, j'aime ! Il y a peut-être quelque chose à faire sur les marges dans le détail.
J'ai récupéré que le fichier index depuis ton serveur, tu avais modifié d'autres fichiers ?
Oui Git évite de passer du temps a vérifier les différence entre les fichiers ....j'ai deja utilisé mais je t'avoue avoir un peu oublié tout ca...bref
oui j'ai modifier aussi le main.js (pour génerer les éléments badge, /mois... dans le tableau)
Apres aussi j'ai des idées...mais je maitrise pas le JS comme toi ;)
faut que je me remets au git
Hésites pas à partager des idées, on peut en discuter et voir comment les intégrer s'il y a une valeur ajoutée.
J'ai fini de faire quelques modifs sur la branche design. Il y a encore quelques points améliorables je pense, mais autant le code ça me fait pas peur, autant le design, c'est pas mon skill premier.
Moi c'est le contraire je suis pas trop javascript pure....,
mais niveau design ça peux aller :p
Alors au niveau des idées :
-
Avoir dans la partie résultat, la ou j'ai mis :
" Consommation totale pour cette période : XXXXkWh"
ça serai pas mal d'afficher le nombre de mois de la plage choisi....
ex: "Consommation totale pour les Xmois : XXXXkWh"
je sais que cette variable est dispo plus bas au niveau du calcule du "cout part mois"
mais j'ai pas réussi a faire remonter l'info hors du tableau. -
Cela serai bien aussi que les "badges ou ligne (tr)" du résultats (dans le tableau)
soit coloré en fonction de leurs positions dans ce tableau,
(ex: en haut "les plus intéressant" en vert, au milieu orange et en bas rouge) -
J'ai eu aussi l'idée d'intégré peut-être le coût moyen du Kwh (prix Total / Kwh Total ) pour chaque offres.
-
Dans la même idée d'avoir la différence en pourcentage entre chaque offre...!
-
De collapse les détails mois par mois ou de les avoir dans un tabs.
-
De pouvoir revenir sur les réglages (avec un bouton retour).
-
D'avoir des donner de demo (avec possibilité de mettre une conso moyen part saison)
pour ceux qui veulent se faire une idée sans avoir a importé les données Linky -
D'avoir (les logos + texte de l'abonnement) des fournisseurs dans le tableau en première colonne plutôt que juste le texte...
Faudrai trouver un nom pour ton simulateur....! :)
Je m'arrête la pour aujourd'hui, sinon on va partir sur une usine ;p (et j'imagine que c'est ce que tu veux pas)
Bon We
Hello !
Super boulot à vous deux, merci. J’avais débuté un projet en python pour faire ça début 2023 mais pas abouti par manque de temps…
@10tribu ton optimisation donne accès au détail par jour et ça c’est cool pour voir l’impact réel des jours rouges sur la facture.
En optimisation graphique, j’ajouterai ça :
- afficher les couleurs des jours sur le détail du tarif tempo.
- possibilité de filtrer par fournisseur pour trouver le meilleur contrat chez un fournisseur spécifique.
Bon week-end !
Hello @JC144 j'ai remis git en place et mis le repo sur mon ordi. :)
j'ai commit un changement ...je sais pas si cela a bien marché :/ (je suis un peu rouillé...)
tu me dira !
@10tribu, ça a l'air bon, je vais pas avoir le temps de regarder ce week-end, mais je m'y mets lundi !
Avoir dans la partie résultat, la ou j'ai mis : " Consommation totale pour cette période : XXXXkWh", ça serai pas mal d'afficher le nombre de mois de la plage choisi....
Easy win, je peux regarder ça, ça peut être pertinent en effet.
De collapse les détails mois par mois ou de les avoir dans un tabs.
Complètement d'accord, ça recoupe avec la réponse que je fais à Flavien un peu plus bas. Je pense qu'une visu comme celle d'EDF en barre, serait plus parlante.
De pouvoir revenir sur les réglages (avec un bouton retour).
Je suis un pro pour faire des Single Page Application qui vont que dans un sens 🙈
J'essaierai de regarder.
D'avoir des donner de demo (avec possibilité de mettre une conso moyen part saison)
pour ceux qui veulent se faire une idée sans avoir a importé les données Linky
ça devrait arriver avec le gros chantier des tests
D'avoir (les logos + texte de l'abonnement) des fournisseurs dans le tableau en première colonne plutôt que juste le texte...
Et l'URL... Pour faciliter la prise de l'abonnement mais aussi la modification des tarifs.
afficher les couleurs des jours sur le détail du tarif tempo.
Je n'aurai sûrement jamais le temps de m'y pencher dessus, mais j'aimerai bien une visu façon EDF en barre avec les différentes heures creuses et couleurs de jours. Je pense que d3.js pourrait permettre de faire un truc sympa mais là c'est le temps qui manque...
possibilité de filtrer par fournisseur pour trouver le meilleur contrat chez un fournisseur spécifique.
Pas bête en effet.
J'aimerai bien commencer à gérer le calcul de manière asynchrone, et générer le HTML à la volée, le calcul commence à prendre du temps.
Je vais voir comment formuler toutes ces idées, ça facilitera la collaboration aussi ! Merci pour vos retours :)
pour compléter l'idée de filtrer les fournisseurs ...de @FlavienJP
on pourrez aussi définir son fournisseur actuel,
afin de le mettre en exergue dans le tableau (couleur de la tr par exemple) et peut etre le mettre en comparaison direct avec les meilleurs tarifs.
Salut @JC144
j'ai pas pu t'aider plus de mon coté... j'ai pas mal de taf en ce moment :/
mais j'ai pensé à ça niveau visuel sur le fait de filtrer les abonnements à afficher :
Niveau code il suffit d'ajouter cette partie :
<div class="d-flex flex-fill justify-content-evenly mt-3 mb-3"> <input type="radio" class="btn-check" name="options-outlined" id="compare-all" autocomplete="off" checked> <label class="btn btn-outline-success rounded-pill" for="compare-all">Comparer toutes les offres</label> <input type="radio" class="btn-check" name="options-outlined" id="compare-my" autocomplete="off"> <label class="btn btn-outline-info rounded-pill" for="compare-my">Abonnement actuel Vs le moins cher</label> </div>
Apres le plus gros a faire c'est de rajouter en js :p
de quoi faire le choix de son abonnement actuel en amont sur la page précédente.
Merci pour le retour, grosse semaine ici aussi 😉
J'essaye de regarder ça demain après la maj des tarifs