[TYPO3-UG Italy] t3+TWITTER BOOTSTRAP 2.x/3.0, VISUALIZZAZIONE SMALL

[Alessandro Tuveri]

Salve
con T3+twitter bootstrap ho verificato (perdendo diverso tempo), alcune differenze non da poco, mi riferisco alla visualizzione definita "small devices"; NON e' una cosa da sottovalutare in quanto l'effetto grafico del sito risulta veramente inadeguato per un tablet.

Small devices, secondo il documento che lo descrive:

getbootstrap.com/css/

*vivamente* si consiglia la lettura  con BOOTSTRAP 3.x se ci si vuol cimentare in siti fatti con bootstrap; tutti gli stili sono descritti con gli esempi.

Bene, per comprendere il "problema" e' necessario collegarsi ai siti qui sotto indicati cosi' da capire meglio; il collegamento si puo' fare da Mozilla Firefox oppure con un tablet (io ho un Samsung) usandolo in modalita' di visualizzazione verticale.

Premetto che i problemi derivano dalla nuova versione bootstrap piu' che da TYPO3 CMS.

Medesima pagina di TYPO3:

http://www.specialista-web.it/swebv6/examples
vedrete la pagina generata con la versione 6.1.5 di TYPO3 CMS, dotata di bootstrap 2.x di twitter

http://bootstrap.typo3cms.demo.typo3.org/examples/
questa pagina invece e' stata generata da TYPO3 CMS v. 6.1.7, stili di pagina con bootstrap 3.0 di TWITTER.

Finche' le due pagine sono consultante con un  PC desktop o tablet in orizzontale tutto ok,  MA ... (!)
se viste invece:

con Mozilla (premere Ctrl R per passare in visualizzazione responsiva quindi settare la visualizzazione tra 768 e 990px....

oppure con il tablet in verticale....

(@#!grrrrrrrrrrrrrrrr) si vedra' in pratica il bocco a destra del menu, nel secondo caso (twitter bootstrap 3) scivolare verso il basso, con uno spazio enorme inutilizzato per i contenuti che, seguendo l'esempio della prima pagina (twitter bootstrap 2) invece viene correttamente riempiti.

Per "sistemare" la cosa, poi qualcuno piu' esperto mi dira se va  o meno bene oppure passo in github per contattare i responsabili del bootstrap, e' sufficiente:

* modificare gli stili dei modelli nella cartella Partials/Layout; dove si trova:
  col-md-x (dove x e' la colonna) basta aggiungere il corrispondente col-sm-x
  esempio: trovato lo stile col-md-2 si aggiunge al DIV anche col-sm-2 e cosi'
  via. (risultato: <div class="col-md-2 col-sm-2">

* modificare lo stile di classe 
   .container
   infatti viene ridimensionato a seconda del breakpoint e toglie ulteriore spazio.
   Volendo, sotto 990px tramite  firebug e' sufficiente, durante la visualizzazione
   responsiva, scegliere un container e modificarlo al 100% di larghezza (per
   il problema qui sotto descritto....).

Eccolo:  non e' chiaro come "cavolo" ragionano gli sviluppatori di twitter bootstrap perche' sotto una certa dimensione (990px) gli stili lasciano a destra e a sinistra del blocco centrale un bel po' di spazio totalmente INUTILIZZATO (!), alla faccia della responsivita' e della necessita' di occupare lo schero (!!!!!).

Ora, pur modificando gli stili dei partials di TYPO3, resta un problema, legato  alla generazione dei contenuti di Bootstrap da BACKEND, dove in fase di creazione delle colonne vengono scegli solo gli stili col-md-* -- basterebbe forse modificare il valore associato, ovvero scegliendo dal menu a tendina i.e. col-md-6 passo a T3 il valore 'col-md-6 col-sm-6' e il gioco e' fatto.

Sebbene auspicabile la modifica avrebbe ripercussioni sui modelli di boostrap_content (cartella: Templates, nome del file Row.html).
per il BE (ho segnato qualche giorno fa la soluzione al problema delle percentuali malfunzionanti).

In alternativa a tutto questo: aggiungere in un foglio di stile personalizzato usato in aggiunta a quelli di default, definendo tutti gli stili col-md-* con le specifiche ottenuta da col-sm-* (quindi: larghezze, floating, ecc. anche questo e' noioso e seccante...).

A mio parere la visualizzazione intermedia con i problemi descritti piu' sopra non e' accettabile come risultato su tablet.

Attendo commenti prima di contattare gli sviluppatori di TYPO3.

grazie a chi rispondera'

ALEX