search

jdtrat / shinysurveys

Develop and deploy surveys in Shiny/R.
https://shinysurveys.jdtrat.com/
Other
97 stars 26 forks source link

Maya's CSS #15

Closed MayaGans closed 3 years ago

MayaGans commented 3 years ago

Feel free to totally ignore or just reference this one since I made some controversial changes, but the styling of the surveys on smaller to bigger browser windows led me to playing with css flexbox (which has pretty good cross browser coverage: https://caniuse.com/flexbox) and css grid (https://caniuse.com/?search=grid)

As you'll see in the images below I added a bunch of custom divs instead of using shiny's bootstrap layout so we can have the select dropdown be even with the trash and require checkbox. I made all my edits in a css file and not scss and would be happy to talk through all the changes I made! I also used an @media to change the grid when the input is on smaller browsers.

Lastly you'll noticed I went ahead and generalized the JS script --- essentially in surveyInput.R I changed all your static ids into paste0(inputId, "_STATICID") and then in JS I do the same by getting the ID of the inputput binding using el.id .....does that make sense?

Screen Shot 2021-03-06 at 10 25 34 AM Screen Shot 2021-03-06 at 10 38 55 AM

Let me know what you think!

MayaGans commented 3 years ago

This attempts at closing #13 but can definitely be cleaned up..... its a start!