Wikini

AdaptationAuClientDeLaFenetreDEditionWikiNi

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-54-90-115-122.compute-1.amazonaws.com

Adaptation de la fenêtre d'édition au client


Permettre d'avoir une fenêtre d'édition plus ou moins grande en fonction de la résolution de son écran.

Solution 1

Je vois que personne n'a jamais réagi sur cette proposition... en dehors des masos qui utilisent lynx ;-) vous avez tous des écrans 15 pouces ???
Pour ma part je trouve de plus en plus agaçant d'avoir à éditer une page dans une fenêtre qui utilise moins de la moitié de mon écran (je suis en 1280x1024)...

Je pense qu'on peut traiter le problème de deux manières :

Code HTML de la page expurgé des éléments non nécessaires.
<div class="page">
<form action="http://www.wikini.net/wakka.php?wiki=AdaptationAuClientDeLaFenetreDEditionWikiNi/edit" method="post">
<input type="hidden" name="wiki" value="AdaptationAuClientDeLaFenetreDEditionWikiNi/edit" />
<input type="hidden" name="previous" value="3370" />
<textarea onKeyDown="fKeyDown()" name="body" cols="60" rows="40" wrap="soft" class="edit">
XXXXXXXXXXXXXXXXXXXXXXXX
YYYYYYYYYYYYYYYYYYYYYYYY
ZZZZZZZZZZZZZZZZZZZZZZZZ
</textarea><br />

<input name="submit" type="submit" value="Sauver" accesskey="s" />
<input name="submit" type="submit" value="Aper&ccedil;u" accesskey="p" />
<input type="button" value="Annulation" onClick="document.location='http://www.wikini.net/wakka.php?wiki=AdaptationAuClientDeLaFenetreDEditionWikiNi';" />
</form>
<hr class="hr_clear" />
</div>


Code CSS à modifier :

.page { background-color: #FFFFFF; padding: 10px; border: 1px inset; border-bottom: none; }
.edit { width: 100%; height: 400px; }


Code CSS remplaçant le précédent :

.page { width: 99%; }
html>body .page { width: auto; }
.edit { width: 100%; height: auto; }


-- CharlesNepote




Solution 2 ?

Ah mais je ne l'avais pas vue cette page !!! Voilà mes réflexions sur le sujet, que je transfère de ma page.

L'idéal serait en effet que la taille de cette zone s'ajuste à la fenêtre du navigateur, aussi bien en horizontal qu'en vertical (au boulot je suis en 1280x1024, alors je me sens concerné !). Pour le moment elle est codée en dur à l'aide d'attributs rows et cols. J'ai regardé côté CSS ce qu'on peut faire, il y a théoriquement moyen d'obtenir une taille ajustée dans les 2 directions. Une fois les attributs supprimés, on peut ajouter dans le CSS :

textarea.edit {
}

En pratique ça fonctionne pour width, mais pas pour height. Un petit tour au W3C donne la réponse : il faut que l'élément parent ait aussi un height pour que celui de l'enfant soit pris en compte. Il suffit donc de mettre un height au tag form. Cependant ceci n'est actuellement pas possible car aucun form n'a d'identifiant, donc je ne vous raconte pas la mise en page si on fait ça... Il faudrait donc mettre un identifiant au form d'édition et on obtiendrait dans le Html :

<form id="edit" action="..." method="post">
<input type="hidden" name="wiki" value="..." />
<input type="hidden" name="previous" value="..." />
<textarea onkeydown="fKeyDown()" name="body" wrap="soft">
...
</textarea><br />
<input id="sauver" name="submit" type="submit" value="Sauver" accesskey="s" />
<input id="apercu" name="submit" type="submit" value="Aperçu" accesskey="p" />
<input id="annuler" type="button" value="Annulation" onclick="document.location='...';" />
</form>

et pour les CSS :

form#edit {
}
form#edit textarea {
}

Remarques :

Le bilan :
Bien sûr les volontaires pour tester sont les bienvenus !

-- JmPhilippe
Il me semble qu'on a dit quelque part que tout formulaire devrait inclure un bloc div en XHTML1.0 strict. Si je ne me trompe on aimerait bien pouvoir passer WikiNi sous cette forme, donc ce serait peut-être mieux d'envisager cela tout de suite... Ah oui, c'est ici qu'on en parle : WikiNiEnHTMLStrict -- LordFarquaad

Exact ! En fait le code que j'ai mis est tiré des essais que j'ai fait sur ma version, donc sans <div> supplémentaire (je ne travaille pas avec la version CVS ;-) ). S'il ya des volontaires qui ont ce div en plus, je leur laisse pour le moment le soin d'essayer un code à peine différent :

<form id="edit" action="..." method="post">
<div>
</div>
</form>

et pour les CSS :

form#edit {
}
form#edit div,
form#edit textarea {
}

-- JmPhilippe

Solution 3


Hauteur auto adaptative IE/Firefox :

Exemple de code :

<SCRIPT LANGUAGE="JavaScript">
function expandTextArea(textarealabel, e){
}
</SCRIPT>

<FORM NAME="formu" ACTION="./" METHOD=POST>
<TEXTAREA STYLE="width:99%;overflow:visible" NAME="content" ONKEYDOWN="expandTextArea(this, event);"> ..... </TEXTAREA>
</FORM>

<SCRIPT>
</SCRIPT>



Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]