Stile brand e larghezza barra

[DDDamage]

Ci sono diverse modifiche per rendere la barra di ricerca graficamente corretta. Questi miglioramenti sono pensati per inserire l'autocompletamento delle ricerche tramite tag.

1) Larghezza della barra diricerca: la casella di input testo deve occupare tutto lo spazio rimanente a dx del marchio (all'interno di quella sezione della navbar)

2) Brand e casella di input devono essere sempre sulla stessa linea.

3) Animazione cursore: http://www.workvsplay.com/code/dos/main.aspx La barra di ricerca deve comportarsi esattamente come questo esempio, con la scritta "foowd" invece che "C:\"

4) Essere automaticamente selezionata quando si arriva sulla pagina (autofocus?), e possibilmente rimanere sempre attiva senza doverci cliccare sopra, in modo che quando si scrive con la tastiera si scriva direttamente nella barra

[SimoSca]

@DDDamage Il punto (3) come adesso va bene o vuoi che lampeggi con una frequenza diversa?

[SimoSca]

@DDDamage Ho praticamente terminato il punto (4): per il momento basta che rimanga sempre tutto in focus, senza implementare ricerche o simili?

Per il momento funziona solo nel wall; inoltre ha un effetto ritardato, ma appena mi confermi che cosi' va bene provvedo a correggere il codice e caricarlo.

[DDDamage]

Va bene così o anche un filo più veloce.

L'ideale è che:

• l'underscore sovrasti l'area di input
• l'underscore si posizioni davanti al testo inserito
• l'inserimento del testo porti all'autocompletamento con i tag in db. Quindi digitato un qualsiasi tasto compare (insieme al primo tag suggerito) un underscore non lampeggiante tra "foowd" e il primo carattere digitato es:

EDIT: il risultato potrebbe variare nei colori dei caratteri

[DDDamage]

Riguardo al punto 4) (si sono sovrapposte le ultime due risposte

• per il momento va bene il focus
• la ricerca via tag va implementata quando possibile, altrimenti la barra di persè nn porta a molto
• dovrebbe essere attiva in tutte le pagine
• l'effetto ritardato, se non necessario, si può eliminare

[SimoSca]

Per il posizionamento del campo di ricerca, fammi capire se ho intuito l'effetto che vorresti:

in sostanza dovrebbe figurare tutto come una singola stringa attaccata, alla fine della quale l'ultimo underscore deve lampeggiare, me lo confermi?

Mio parere da utente: vedere tutto il testo di ricerca dello stesso colore a me non fa impazzire... magari le scritte si potrebbero alternare in colore. Inoltre, sempre da utente, in genere i campi di ricerca preferisco averli con un colore di background differente, altrimenti non mi viene spontaneo pensare che quella sia una zona in cui inserire del testo per la ricerca.

[DDDamage]

Riguardo all'effetto ricercato, è esattamente quello che cerco.

Riguardo al colore dei tag: BRAVO! ..è esattamente il risultato che vorremmo ottenere e una proposta che mi era piaciuta tra quelle di teo. Da una delle prime bozze: Eventualmente per la palette da utilizzare trovo il modo di fornirti una palette dei colori da alternare

EDIT: il colore è unico per il tag. A differenza dell'immagine, il colore di "_" è uguale alla parola successiva, non precedente

[DDDamage]

Se possibile: digitando spazio, virgola o qualsiasi altro segno di punteggiatura ti aggiunge un "_" e passa all'inserimento del tag successivo

[SimoSca]

gli spazi in sostanza non devono esistere ed essere sostituiti da underscore?

[DDDamage]

sì

[SimoSca]

Risolta, anche con molta soddifazione devo dire... quello che ho ottenuto e' un effetto che a me piace, e che penso possa piacere anche a te... una volta implementata la funzione di ricerca per com'e' fatto adesso, sarebbe possibile evidenziare col medesimo colore anche i tags combacianti presenti sotto ai prodotti... che ne pensi? Li potremmo ad esempio mettere in un background per farli risaltare.

[DDDamage]

Si può fare con quelli nella ricerca colorati, gli altri di colore standard.

Avvisami quando hai caricato il codice che guardo

[SimoSca]

Fatto!

Ho aggiunto un extra, che allo stato attuale non funzia, ma lo sto lasciando giusto per darti l'idea:

quando digiti qualcosa sulla barra scompaiono i post e vengono visualizzati solo quelli con dei tags corrispondenti a quelli cercati. Se cancelli tutto dalla barra, allora ritorna la visualizzazione completa di tutti i post.

Allo stato attuale come puoi vedere si realizza l'effetto apparizione/scomparsa dei singoli, ma non avviene un riallineamento automatico... questa tra le tante e' solo una piccolezza che ti ho lasciato a titolo di proposta, ma domani provvedo a rimuoverla in quanto attualmente non semplice da risolvere.

[DDDamage]

La questione colori va rimandata al futuro, riguarda la issue #200 ed è relativa alla funzione dei tag. Prima di tutto andrebbe inserito l'autocompletamento nella barra di ricerca. Poi sulla base su come si vuole impostare la #200 vediamo. Credo sia una questione relativa alla mia affermazione

EDIT: il risultato potrebbe variare nei colori dei caratteri

Intendevo un'altra cosa e sono stato frainteso.

Quindi, per fare ordine, riprendo i punti iniziali di questa issue:

• 1) e 2) I problemi relativi alla larghezza della sezione di ricerca della navbar:
• 3) è ok, magari riduci il tempo dell'animazione a 0.6s o 0.7s, 2s è troppo (EDIT)
• 4) va bene, ma manca un dettaglio per rendere la cosa più chiara, vale a dire modificare quell'area in modo che il cursore divendi la barretta verticale, in un modo simile:

.foowd-brand { cursor: text; }

EDIT: la barra deve essere automaticamente selezionata all'ingresso nella pagina, nel senso che arrivato nella pagina posso direttamente digitare nella ricerca

PS: la questione colori è rimandata alla issue #200, che riguarda miglioramenti futuri senza una data di riferimento, possono essere implementati anche con il sito online. Quindi per ora il colore del testo lascialo nero.

[SimoSca]

Questa si puo; considerare chiusa?

[DDDamage]

Su schermo ridotto va ancora a capo su due righe e la larghezza è metà della sezione della navbar:

La verità è che nessuno da pc guarderà il sito su uno schermo così ridotto. E da cellulare o tablet la barra di ricerca non è ancora supportata. Conviene guardare riprendere questa issue assieme ad altri aspetti di compatibilità.

[SimoSca]

Ho appena sistemato questa issue. @DDDamage : se anche sul tuo device non crea problemi, direi di chiuderla.