[CSS][BUG] - Shaarli.fr

#13003

Sur mobile : http://lehollandaisvolant.net/img/4c/shaarli-mobile-bug.png

Parfois le texte est coupé. Pour les favicons sur le côté gauche, je ne sais pas si la coupure est esthétique ou accidentelle

Vu que le code source est assez bordélique, voilà une capture pour montrer d’où ça vient : http://lehollandaisvolant.net/img/d7/shaarli-mobile-bug-2.png

C’est à cause du « overflow: hidden » sur deux éléments.
J’imagine que tu as mis ça pour le « afficher la discussion », mais vu que cette fonction ne touche qu’à la hauteur de l’élément, tu devrais utiliser « overflow-y: hidden; »

(MDN marque ce code comme expérimental, mais dans les faits il est supporté depuis IE-5)

Shaarli : Add link sans bookmarklet = problème d'encodage des titres - GuiGui's Show - Liens

#12900

J'ai eu à faire à ce genre de soucis aussi.

Perso je parse les headers http à la recherche d'un encodage, sinon cherche dans la page. Si je trouve l'encodage, je l'utilise pour décoder la page et récupérer le title.
Si pas d'encodage, je prends UTF-8 en fallback.

Pour les caractères dangereux, un htmlspecialchars() suffit : il ne touche pas aux entités HTML.

Tant que j'y suis, faites aussi gaffe à :
- certaines pages sont irrécupérables s'il n'y a pas de referer voire d'autres en-têtes.
- certaines pages sont compressées avec GZip, sans que ce soit indiqué dans les en-têtes (cf http://lehollandaisvolant.net/?mode=links&id=20150713125503 ).

Tout ceci me permet d'avoir un comportement qui traite la (quasi)-totalité des cas (et encore je mets "quasi" ici parce que je sais que je tomberai tôt ou tard sur un cas bizarre, actuellement je n'ai aucun problème.

Shaarli.fr

#12877

Normal que le fichier « index2.php » soit public et accessible ?
Ça semble renvoyer le résultat d’un var_dump de la liste des posts de la page.

J’ai trouvé cette page en cherchant dans Google, elle est donc référencée et liée depuis quelque part.

BTW, si c’est pour l’export de données, utilisez plutôt JSON.
Et si c’est juste pour visualiser les données en mémoire dans PHP, ajoutez un « echo "<pre>"; » devant le var_dump : c’est plus joli (je fais ça aussi ^_^) :p.

Option anonyme - Shaarlo

#12843

L’avantage d’avoir le nom (ou au moins un ID de compte), c’est de pouvoir répondre au post, discuter et suivre une conversation. À ce fin, tu peux aussi utiliser un truc genre Vizash dans l’icône, simplement pour reconnaître quel anonyme dit quoi dans une discussion.

http://www.shaarli.fr/shaarli/?TXZ3CQ

Shaarli.fr

#12707

Le nombre en bas à droite d’un shaarlink, c’est le nombre de clics ?
Ce n’est pas indiqué explicitement.

Pourquoi ne pas utilisé une image de fond sur le chiffre, genre un petit curseur de souris, pour modéliser le "clic", ou alors faire un peu comme les boutons FB ou Twitter : un logo shaarli avec le nombre juste en dessous (hé, on est en train de produire un vrai rézososio là !).

Je pense qu’on peut trouver mieux que le curseur de souris en fond, mais faudrait qu’on sache ce que ça veut dire^^.
N’hésitez pas à mettre des attributs « title » partout non plus : ils sont invisibles, sauf quand la souris passe par dessus (après, « title » n’est pas le top sur mobile, mais ça sera toujours ça pour desktop).


Parlant de mobile, je vois ceci : http://lehollandaisvolant.net/img/94/Screenshot_2015-07-07-10-08-21.png

Je vois plusieurs problèmes :

▶▶ les liens en haut sont trop serrés à droite. Solution : utiliser "flex" pour les distribuer sur toute la largeur.
Dans le thème mobile (dans le @media (max-width: 600px)), ajouter ça :

.menu ul.show-for-small-only { display: flex; float: none; }
.menu ul li { flex: 1 1 auto; text-align: center; }


(1 1 auto : le premier 1 pour dire que chaque "li" a un poids de 1 dans la réduction de taille (un bloc avec 2 serait doublement réduit) lors du redimentionnement flexible ; le seconde 1 c’est la même chose pour l’agrandissement ; le dernier "auto" c’est pour dire que le bloc n’a pas de taille fixe (en px) minimal. Mettre « 100px » aurait permit un agrandissement/rétrécissement flexible dans la limite inférieure de 100px.)

(aussi je vois dans le code qu’il y a 3 fois le HTML : une fois pour mobile, une fois pour desktop, une fois pour grand-desktop. C’est assez moyen comme pratique. Il faut mieux limiter le HTML et le rendre adaptable. En faisant ça, on se force à le simplifier (en nombre d’éléments HTML)).

Résultat pour le menu en haut : capture.

▶▶ Les boutons "top du jour" "top hebdo" sont trop petits.
Solution : ajouter un padding sur les liens. Ça va agrandir les liens ET l’espace cliquable (ou touch-able) en même temps. J’augmente aussi la taille de pixel, un peu (même s’il faudrait tout mettre les font-size en "em" ou "%", pour faire les choses bien).

.row .button.microscopic { padding: 1.3 em; font-size: 12px; }


Ces boutons sont maintenant juste un peu plus gros. Je choisis ces valeurs dans l’éditeur de code sur Firefox Desktop. Il le peut qu’ils soient à ajuster lors d’un essaie réel sur mobile.

▶▶ Le champ de recherche est large et fin. Trop fin sûrement.
Regardes le champ de recherche (en mobile) sur la page de Google, DuckDuckGo ou même la barre d’url sur les navigateurs mobiles : ils ont une taille adaptée au tacile.

Ici pareil, un simple padding fait l’affaire.
On centre avec "margin: 0 auto", On remet "height:auto" (sinon le padding bug) et je met aussi la largeur à 90%, question d’esthétique) :

#searchbar { margin: 0 auto; height: auto; padding: 15px; width: 90%; }


▶▶ Chaque bloc de liens est accolé à celui du dessus et celui du dessous. C’est bien pour gagner de la place, mais pour voir où l’un débute et l’autre fini, sachant qu’il y a une bordure sur les blocs, c’est pas facile.

Sur desktop, même en réduisant la largeur de l’affichage pour faire jouer le responsive-design, il semble y avoir un "linear-gradient". C’est bien, c’est ce que j’allais proposer, mais il n’est pas visible sur mobile, bizarrement.

Dans tous les cas, la bordure du dessous d’un bloc, et la bordure du dessus du bloc d’en dessous (on suit) se touchent et ça donne une double bordure de 2 px qui n’est pas jolie.

.article + .article { border-top: 0; }


Ainsi, tous les blocs, à commencer par le second bloc, n’auront pas de bordure en haut. La séparation sera assurée par la bordure du dessous du bloc au dessus.

Voici ce que ça donne avec un avant/après : capture.

▶▶ La ligne avec les tags et le nombre de clics se fait (sur mobile) sur deux lignes : le nombre de clics est passé en dessous. C’est pas esthétique.
Là aussi, ça peut être résolu avec flex.

Dans le code, pour le bloc avec les tags et le nb-clic, il y a un <div class=""> (la classe est vide!). Il faudrait y mettre quelque chose comme "article-footer".

À ce moment là, on mettrait :

#div-container-articles .article-footer { display: flex ; }
#div-container-articles .article-footer > div { float: none; }
#div-container-articles .article-footer > div.text-left { flex: 1 1 auto; } /* le bloc des tags est flexible entièrement */
#div-container-articles .article-footer > div.text-right { flex: 0 0 40px; } /* le bloc du nb-clic est fixe, non flexible. */


40px devraient suffire pour le nombre de clics. Je pense pas qu’on arrive à un nombre de clics à 30 chiffres. Sinon, il serait intéressant de commencer à mettre « 4k » ou « 3M » si le nombre de clics est de 4000 ou 3000000.

(en parlant de ça : le TOP hebdo/du jour : c’est en fonction du nombre de partage ou du nombre de clics ?

▶▶ Enfin, dernier point : la prévisualisation d’un lien (l’image sur la droite, là) est sympa sur desktop, mais sur mobile, il fait 40px sur 40px. Je ne sais pas si à ce niveau il est encore utile.
Je sais qu’on peut cliquer dessus pour la voir en grand (même sur mobile), mais le bouton pour le refermer est foireux : à chaque fois ça m’ouvre le lien plutôt que fermer la prévisualisation.
Peut-être ajouter un « z-index: +1; » sur la petite croix.

(il se peut qu’il y ait des soucis de priorité CSS. Je n’ai pas pu tester en réel.)

C’est à peu près tout.

Shaarli.fr

#12698

Les icônes sur Shaarli ont été redimensionnées dans les posts, mais comme les images sources ne sont toujours que de 16px, ça fait un effet pixelisé pas très joli (le favicon de Biniou est lui grand et s’affiche bien, d’autres probablement aussi, mais c’est loin d’être le cas partout).

Les favicon peuvent depuis un moment faire plus de 16px.
Perso j’ai utilisé cet outil : http://www.icoconverter.com/ pour refaire la mienne : http://lehollandaisvolant.net/favicon.ico (5,7 ko)

Les favicon peuvent aussi contenir plusieurs tailles d’icônes dans un seul fichier, mais là le fichier sera beaucoup plus lourd (>100 ko).

Gimp permet aussi d’exporter en .ico, et les fichiers semblent fonctionner (ce n’était pas le cas il y a un temps).

Notez que les navigateurs affichent le favicon au format ICO même quand il n’est pas explicitement indiqué dans le l’entête HTML de la page, il suffit que le fichier "favicon.ico" soit présent à la racine du site.

Quand on met la ligne HTML du favicon dans la page, on peut utiliser du PNG ou un autre format ou taille d’image (sauf IE <=10, qui ne détecte rien d’autre que le ICO pour l’icône).

Pour Shaarli (l’icône transparente & carrée) :
http://lehollandaisvolant.net/img/2b/logoShaarli.ico (70ko)
http://lehollandaisvolant.net/img/20/logoShaarli.png (5 ko)

Si le cache d’icône peut être mis à jour et prendre en compte les changements, l’affichage sera plus joli :)

https://www.shaarli.fr/index.php

Bon... - Shaarlo - Petits Liens Malfaisant

#12381

Un robot scrawler ?

Ça peut pas se faire avec Gogole, qui recherche "The personal, minimalist, super-fast, no-database delicious clone", parser les résultats et extraire les liens, forger les url des flux RSS et vérifier les liens qui ne sont pas dans la BDD de Shaarli.fr ?

Ou alors faut que la release de Shaarli informe (avec un lien installé d’office, en privé, comme le lien "exemple"), de l’existence de Shaarli.fr et puisse, s’il en a envie, soumettre son Shaarli au river. Faut voir ce qu’en pense Seb, après.

Certains n’ont peut-être même pas envie de figurer dans le river, aussi…

L’avantage de l’idée avec Gogole, c’est que Google n’indexe pas les sites avec un bon robots.txt, donc Shaarli.fr serait directement compatible avec les robots.txt : si un sharliste ne veut pas être indexé sur Shaarli.fr, il n’a qu’à utiliser un robots.txt.

http://www.petitetremalfaisant.eu/shaarli/?TKVRrw