search

jsilveira / warro-dance-party

3 stars 4 forks source link

[UX] No bloquear la UI para pedir nombre de usuario #6

Closed mrezk closed 4 years ago

mrezk commented 4 years ago

Hay varias formas de resolver esto, para salir del apuro pondría el dialog sobre el chat.

heyimjuani commented 4 years ago

Asi es como lo habia armado yo. Paso screens.

image Al escribir aparece el call to action.

image Cuando se envía el nombre aparece el campo de comments normal.

image

Todo esto está en mi zip, el que subi a dropbox, disponible aca: https://www.dropbox.com/s/09w0z8dteaee0ck/radio%203-4%2020-19.zip?dl=0

El html se ve asi, en el index.html, linea 242. Lo que importa es la "enter-name"

<div class="send-msg-bar">
        <div id="send-message">
          <input type="text" class="form-control" value="" placeholder="Ingresa un mensaje…">
          <button class="btn btn-primary btn-send ml-2"><i aria-hidden="true" class="material-icons">chevron_right</i></button>
          <button class="btn btn-primary btn-react ml-2">🤜</button>
        </div>
        <div id="enter-name">
          <input type="text" class="form-control" value="" placeholder="Decinos quien sos para poder chatear">
          <button class="btn btn-primary btn-send ml-2"><i aria-hidden="true" class="material-icons">chevron_right</i></button>
        </div>
      </div>

En el css esta todo lo necesario para que los comportamientos de ambos inputs sean los esperados.

jsilveira commented 4 years ago

Esto está parcialmente solucionado en el último commit. No implementé la versión sofisticada de @heyimjuani pero aunque sea ya no se bloquea el play ni la UI principal.