Page layout about podman-desktop

[ekidneyrh]

@feloy I briefly looked around the app and all the pages follow the same structure just +/- some elements

• Breadcrumb
• Icon + Header + buttons
• Subtitle (can be text or link)
• Search bar
• Tabs
• Content (table, list)

I probably shouldn't have assigned this to myself, as I can't do more in terms of the code. Would it be beneficial to have me make a diagram for this? Maybe include the colours on it too? WDYT

[deboer-tim]

I know there are some differences between the main nav page and form page header layout, it would probably help to understand how the uber page should be laid out in terms of flex box, e.g. if there are cases where we have no breadcrumb but an X how the header changes. The Container Details page is one of the more complicated ones where I'm not sure the layout is great at different sizes.

But yes, otherwise I think we should assign for implementation.

[feloy]

@feloy I briefly looked around the app and all the pages follow the same structure just +/- some elements

• Breadcrumb
• Icon + Header + buttons
• Subtitle (can be text or link)
• Search bar
• Tabs
• Content (table, list)

I probably shouldn't have assigned this to myself, as I can't do more in terms of the code. Would it be beneficial to have me make a diagram for this? Maybe include the colours on it too? WDYT

@ekidneyrh, yes some mockups would be helpful IMO, representing the page with the different options set or not (the page with or without breadcrumb, the page with or without icon, etc). And also which colors would be different based on the context (content / inverted content / details / ...)

[ekidneyrh]

@ekidneyrh, yes some mockups would be helpful IMO, representing the page with the different options set or not (the page with or without breadcrumb, the page with or without icon, etc). And also which colors would be different based on the context (content / inverted content / details / ...)

Okay great I'll get working on it :)

[ekidneyrh]

I started on the header section of each page first, as there's a lot there.

For the colours, I have mapped out all the different components that can be present on a page's header:

Header_layout.pdf

Here's all the variations of the header throughout the app. Every component should stay the same size no matter what variation is used. We can also discuss at some point finding ways of reducing the amount of variation.