Overlapping Rows and image previews - DevDiary #3

Last week happened a lot. I had a talk with David on Saturday, where we talked about a lot of features and changes to be implemented. The card design changed again, quite a lot.

Maybe you notice one of the hardest to achieve changes ever made: The rows can overlap in the height. Before this change, the Test0 e.V. card would be pushed back down, when expanding the Card where I am with a hat. Now it doesn't. I achieved that by having three columns on the upper-level grid system and in every one of these columns is another grid system with one row that wraps all the columns in one column so they are like an own feed and only push back the card under them. I have a function, that distributes the data on the three independent grid systems. The construction has a disadvantage though: It is harder to design to look good on all devices.
Another big change is the profile pictures in the upper right corner. Last but not least the three questions every organisation is asked are displayed uncollapsed and the individual answers can be collapsed and expanded individually.

One of the most helpful changes is probably the image preview. It shows the current image until a new image is uploaded. If there is no image at all, it will show the default image. I think I still have to work a bit on it. The profile image is too small on a big screen and it would be nice to have the profile image on the preview of the organisation image. For this to happen I need to tweak the sizes and work with per cent instead of "fixed" pixel-sized objects to achieve the same size relation between profile-image/logo and organisation image on the preview and on the Card view.

Sometimes there are things unclear. For these cases, there is a floating button now. First I thought about putting a question mark to every piece of misunderstandable text, but that just didn't look right. Far too much question marks on the page and it was almost impossible to achieve it on form field labels in Vuetify. This solution is not perfect, but it works. I also thought about showing the info text, when hovering over the items and maybe I will do it, but hover doesn't work on phones.

And that is how it looks when pressing the pink question mark button: An info textbox opens up and reveals all the information. I first thought (well it was actually the second plan after the many question marks didn't work out) about having like a speaking bubble, that plops out, but that works for now. Now that I think about it, I have a vision of chatbot-like tool, where they can tell, what they don't understand and then only this item is explained. Yes, I see it in front of me. It looks great, but I will push it back to another release because it will require some work and it clearly isn't part of the minimum viable product. You could ask, whether are the newest features are part of the minimum viable product? That is something I have to figure out with David, but I would say maybe. I should check, what can be pushed back for later. I think the features I implemented this week were necessary to implement before releasing. I guess I need three weeks like this and then we can finally start the alpha phase.
How are your projects progressing? I hope you have a great day and a lot of fun developing.