Fylo-data-storage-component HTML/CSS

Community feedback

• 

  Anna Leigh•5,135

  @brasspetals

  Posted almost 5 years ago

  Hi Artem!

  I spent hours trying to get both a progress and meter bar to style correctly. Right now, I simply do not think it is possible to style either perfectly and also have that style be cross-browser compatible. I asked about it in my own solution and got no answers. The only way I've found to create that bar and have it actually follow the design (white dot and all) is just using divs. Hopefully in the future, styling for progress elements will be better supported. Huge kudos for trying.

  I'm also seconding Em's comments on the background. There's an alternate background specifically for mobile, which you can switch to with a media query.

  Overall though, good job! 👏

  31
• 

  

  Emmilie Estabillo•5,600

  @emestabillo

  Posted almost 5 years ago

  Hey Artem, great job! Interesting styling of the progress bar, putting it on the value attribute. I would double check the colors on the style guide though, it looks a little off. Note: The screenshot didn't seem to take it. I also tested on Firefox and it's the result is the same blue bar.

  For your background, you are using the desktop version for mobile screens. You can probably remove background positioning after adjusting this. Also, you can simply put the background in body instead of creating another div. Not sure what you meant about testing in mobile, but it's mostly the same by using dev tools and either adjusting your screen width or using the toggle device toolbar. Hope this helps!

  34
• 

  Roman Filenko•3,335

  @rfilenko

  Posted almost 5 years ago

  Hi Artem, great work on this one. As for screenshot - it probably because puppeteer (would guess in this case) creates screenshot before yor styles kickoff. Have a few notes though:

  • tags could be more semantic;
  • progressbar is rather hard to style, add vendor prefixes to make it crossbrowser;
  • some strange values like height: 201px; width: 918px; margin-bottom: 34.2px; - a bit lack of consistency here, but you probably used all values from sketch file;

  Cheers, Roman

  21
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted almost 5 years ago

  Wow! You have so much good feedback already, Artem! 😄

  • Perhaps turning the option icons into actual links and giving them a hover state might be a nice extra touch. Just a suggestion!

  I'll just say good work and keep coding (and happy coding, too, of course)! 😉

  10