Le plus basique des responsive

Bonjour,

J’ai récemment mis en place une instance transfer.sh sur mon propre serveur, avec un frontal personnalisé, dont le code se trouve sur le repo suivant : https://git.breizh.pm/transfersh/

Voici une image d’exemple : https://transfer.breizh.pm/iRYJP/f40d6165e4005156.png

Mon problème est le suivant : j’aimerais mieux organiser la page afin de profiter au mieux de l’espace horizontal quand c’est possible (et revenir à une organisation verticale sinon), notamment pour les liens, la taille et le type, et si possible remonter le code QR au-dessus de l’aperçu (sans qu’il prenne une place trop importante, l’aperçu est pour moi plus important que le code QR).

La contrainte étant de ne pas utiliser de media-queries ou de valeurs fixées en pixels pour les contenus, parce que d’expérience ça pose souvent problème sur des cas particuliers où on est entre deux résolutions ou que le type mime ou le nom d’un fichier est beaucoup plus long que la moyenne.

J’ai tenté à coup de grid-auto-flow, en 2×2 il prend toute la largeur écartant énormément et inutilement les informations horizontalement. Avoir un espace (fixé cette fois, ce n’est pas un contenu) entre les colonnes est très bien, mais je préfère que ce soit les marges latérales qui grandissent plutôt que cet espace. Et impossible de se baser sur le contenu, soit il prend des valeurs fixes, soit toute la place.

Je n’ai pas tenté le flex pour l’instant, ne connaissant pas (en vrai j’y connais pas grand-chose à CSS en général). Est-ce une meilleure solution selon vous ? Avez-vous des exemples dont je puisse m’inspirer ? Ou d’autres pistes ?

Merci.

Hello,

J’ai un peu de mal à visualiser ce que tu as en tête. Tu aurais un rendu de ce que tu veux faire ?

N’hésite pas à passer par un logiciel de conception comme Adobe XD ou Figma pour bosser sur le design avant de coder. Ça m’a grandement aidé pour mon site¹, alors que j’avais jamais réussi à pondre un design correct en 10 ans avant

P.S. : Je ne sais pas si c’est voulu, mais actuellement tu charges l’image en plein résolution, quel que soit l’affichage, ça pourrait être optimisé avec <picture> par exemple si tu veux fournir des versions plus petites.

Je tâcherais de faire une visu dans la semaine, en vrai je me fiche un peu du rendu final, en l’état actuel ça me va déjà pas mal, mais j’aimerais faire un truc un peu plus léché (mais tout de même minimaliste, faut que ça charge vite et que ça soit simple et clair) pour les utilisateurs « lambda » (mon public n’est pas vraiment lambda mais bon).

Je charge effectivement l’image en pleine résolution, je n’ai pas la main là-dessus, c’est le fonctionnement de transfer.sh. Je change juste l’apparence frontale pour correspondre à mes autres services (simple, clair, léger, et avec cette palette (une version « thème clair » sera ajoutée un jour, mais c’est moins urgent ^^’)).

Tu pourrais éventuellement mettre ton image en plein page (à voir si tu la laisses dépasser ou non), en superposer tes infos par-dessus. Ça mettrait le focus sur l’image, tout en gardant les infos accessibles.

Tu peux par exemple utiliser un fond semi-transparent dégradé (comme sur la home de ZdS pour le bandeau À la Une) pour t’assurer que le texte soit lisible.

Idée fort intéressante, mais je ne pense pas le faire. Notons que le partage ne concerne pas que les images, il gère aussi les aperçus audio, vidéo, plain text et markdown (et tout le reste, sans aperçu). J’aimerais avoir un design commun assez simple : les infos au-dessus, l’aperçu en bonus en-dessous, mais quand même assez visible. Finalement mon message précédent était en partie faux, je me fiche pas vraiment du rendu. Mais disons que ce qui compte surtout, c’est une interface simple, claire et légère (sinon j’aurais laissé le frontal par défaut de transfer.sh ^^).

Par exemple j’ai bien l’UI de Linx : https://linx.breizh.pm/rfil756u.jpg (que je remplace par transfer.sh pour pouvoir le personnaliser, et quelques raisons techniques). Ou même l’original de transfer.sh mais qui est bien trop lourde et difficile à réutiliser partiellement (c’est pourquoi je repars de zéro) : https://transfer.sh/yx7NF/396396-blackangel.jpg

Mais je trouve que celle de transfer.sh perds trop de place verticalement en empilant le tout (j’avais fait ça aussi au début), et le QR code est pas si important, je trouve l’aperçu plus utile.

Comme indiqué précédemment, je ferais un visuel quand j’aurais le temps. L’idée globale c’est juste d’avoir les infos et les liens en lignes au lieu d’une seule colonne, éventuellement le QR code à côté, et de repasser au format vertical quand il n’y a pas la place, mais si possible sans devoir indiquer explicitement des tailles fixées qui risquent de poser des problèmes (j’en ai déjà d’ailleurs, sur l’aperçu markdown / texte brut, y’a parfois du texte qui déborde du cadre).

En gros une sorte d’auto-wrap de blocs, au lieu d’un auto-wrap de texte.

Ah très bien ça le flex, c’est presque parfait, j’essayais de faire ça mais avec grid, sans succès, par contre l’écartement impossible à limiter m’ennuie toujours…

Je l’ai mis en place tel quel pour le moment.

Tu cherches à espacer quoi et comment ?

flex-gap est en train d’arriver, si c’est ce que tu cherches.

J’aimerais que les deux liens de téléchargement, ainsi que la taille et le type MIME ne s’écartent pas autant sur grand écran. Je trouve ça étrange à voir. M’enfin j’ai l’impression que ça commence à être tordu comme demande. Je pense que c’est pas faisable avec les contraintes que j’ai énoncées dans le premier post.

Je vais laisser tomber cette piste et revenir sur un truc plus basique je pense. J’ai déjà passé bien plus de temps que prévu juste sur le CSS (même le JS m’a donné moins de fil à retordre ><).

Je ne voulais pas mettre de taille fixe pour m’adapter aux polices et au type mime, mai c’est vrai qu’à coup de max-width et d’em ça doit pouvoir être pas trop dégueu.

Exactement ! Tant que tu utilises les bons outils y’a moyen de faire ça bien

Bon j’ai un truc pas trop mal, y compris pour ce genre de cas. Je suis juste pas convaincu de la structure, la bordure horizontale fait double au milieu. Je vois pas trop comment gérer ça en gardant le comportement actuel. Et idéalement aligner le texte verticalement (pour la taille quand le type mime est sur plusieurs lignes).

Finalement le pleine largeur ne me dérange plus, avec les bordure et les liens qui prennent toute la case ça passe pas mal du tout.

Pour la bordure tu peux utiliser une media-query pour la supprimer d’un côté (ou la passer à 0.5px).

@media (min-width: 25rem) { /* Valeur à adapter à ton besoin */
  .duo :first-child {
      border-right-width: 0.5px;
  }
  .duo :last-child {
      border-left-width: 0.5px;
  }
  .duo + .duo :is(a, span) {
      border-top-width: 0.5px;
  }
}

Note : la notation :is() est récente et peut nécessiter un préfixe sur certains navigateurs