I know you hate these things, it's tedious and annoying, I feel you. But I thought just maybe, if you are feeling the urge one morning it could be of some help on how to do it.
In general I'm thinking it this way:
- show the companies as individual cards, displaying things only that is needed to get a good understanding of it in one quick look
- clicking a card would open a popup covering like 80% (so you can still see it's that card's popup which would be in the background at this point
- set everything from this popup, clicking outside of it, pressing the escape or clicking it's close button(s) would close it
- every action is ajaxed, making any change would get automatically applied when the card closes for any reason (closing browser, closing the popup in a normal way, etc.)
- the changes would be instantly reflected on the card, but data exchange only happens at opening/closing
All the page is in flex, which makes it easy to optimize it for different screen sizes, everything in css so scripting can't cause problems.
These are some pens that I'd find useful to build something like this
-
For example, look at this design. It's insane how advanced effects and look you can create with such a small code. I'd love to see our cards "alive" like this, I'm talking about the fact that when you hover, the animations are fantastic
https://codepen.io/william-goldsworthy/pen/JzVajj -
Or this one for simplicity, interesting idea how you can use color gradient and simple non-intrusive css animations
https://codepen.io/prasad-d/pen/dEeYea -
This one is to make it responsive (so you wouldn't have to experiment with it, you set these sizing rules for the cards, and they will become readable and usable on every screen size)
https://codepen.io/sammyteahan/pen/eRmbVR
- 1
Report Suggestion
Recommended Comments
There are no comments to display.
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now