search

dwyl / hapi-socketio-redis-chat-example

:speech_balloon: Real-time Chat using Hapi.js + Socket.io + Redis Pub/Sub (example with tests!!)
GNU General Public License v2.0
364 stars 73 forks source link

Using Tachyons to replicate 'Send' form #94

Closed ZooeyMiller closed 7 years ago

ZooeyMiller commented 7 years ago

We are trying to replicate the current UI using Elm and Tachyons (see #86), but are struggling with the form for sending a message.

Currently it uses flexbox to keep the button the same size but have the width of the input vary based on the width of the screen. We would like to not use flexbox so that the Elm/Tachyons example has wider browser compatibility. At first we looked at using % values on the button and the input to make them responsive and sat next to each other, but because using inline-block adds a small amount of space due to the font-size, this didn't work, as tachyons doesn't allow us to set font-size: 0 on the container.

We're now looking into calculating the window size with elm as a way to deal with this, opening this issue for if anyone has any input and to keep a record of how we solve it.

ZooeyMiller commented 7 years ago

We've use Window.resizes and Window.width in Elm to calculate the width of the window, we now need to calculate the width of the button so that we can calculate what the width of the input should be

ZooeyMiller commented 7 years ago

We've ended up giving the button a width in pixels so that it's easier to calculate the width of the input.