Added .env file that contains all environment variables being loaded at project start.
Added sass development configuraton. Watcher recompiles scss files but I still need to do browser refreshed manually, so there's a room for improvement here.
Used inuitcss for styling architecture backbone (ITCSS). sass-mq used or responsive breakpoints.
Html markup for main screen.
I've used BEM to organize my style classes.
I've used grid to layout the 4 main sections, and flexbox for inner placements (since the child components were just 1d layout - only rows or only columns)
Themes - popup and apply controls. Theme is being saved between reloads in localStorage.
package-lock.json - if you're wondering why changes look massive in terms of lines code added - this is why. It was later removed.
Users notification messages - My first try was with notifyjs but it's not suitable for custom styling and there's no way to remove default styles it creates as inline style tags. I've end up using Toastr. Much prettier!
Added svg-injector library. removed in the process, in favor of using svgs as background image.
I couldn't made screen be the same size as chat container ¯_(ツ)_/¯
How do I make song name be on 1 row only. I can set it as title so the full name pops up on hover, but the first part confuses me. - I've tried truncating with ellipsis (https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/) but it requires fixed width (in px or vw) and I can only work with percentages if I want responsiveness. I've tried with calc(100% - some margin) but it still uses the space of the overflowed text for some reason and it looks pretty awful (e.g. doesn't work). As a compromise I've left a fixed row height. with overflow: hidden.
Make page fits into regular screen height with no scroll (almost there now, but I'n not sure if it will look OK, maybe we should discuss that)
Logo color fix - logo in 4 variants will do the trick
:man_cartwheeling: Changes:
Added svg-injector library.removed in the process, in favor of using svgs as background image.Notes for Nadezhda (resolved in https://github.com/Bratanov/community-driven-radio/pull/43):
calc(100% - some margin)but it still uses the space of the overflowed text for some reason and it looks pretty awful (e.g. doesn't work). As a compromise I've left a fixed row height. with overflow: hidden.Make page fits into regular screen height with no scroll(almost there now, but I'n not sure if it will look OK, maybe we should discuss that)