style: Structure results page

[Valimp]

What

Structure the page of results

• Results grid
• Navbar
• Facets
• Graphs

[teolemon]

@Valimp can you add a quick screenshot ?

[Valimp]

Next step, add a sidebar to display graphs

[Valimp]

Give space for graphs when there are displayed

Results take all page when no graphs

[Valimp]

TODO: Connect this component with graphs

[Valimp]

@Kout95 Can you give your opinion please?

[Kout95]

I do some changes :

• Replace flex by grid to take full height in sidebar
• Add background to sidebar
• Add white-panel on sidebar item
• Rename graph by chart to homogenize code
• Center pagination, modify css to always keep the position of arrow buttons
• Replace auto-fill by auto-fit to not expanded card when you have few results
• Edit event to open or close chart sidebar to enum
• Add event to expande chart sidebar

Result :

[Kout95]

[alexgarel]

Some remarks @Kout95:

• I'm not keen on the gray background as it makes things look a bit dull. I think it's better to leave a transparent background (but this is a choice for our page). Maybe a thin border for panels is ok. Of course those are choice in off.html styles.
• When I reveal the graph panel, graph are not displayed. Maybe we have to send some signal to ask a re-render ?

[Kout95]

Last edit :

[Kout95]

Some remarks @Kout95:

• I'm not keen on the gray background as it makes things look a bit dull. I think it's better to leave a transparent background (but this is a choice for our page). Maybe a thin border for panels is ok. Of course those are choice in off.html styles.
• When I reveal the graph panel, graph are not displayed. Maybe we have to send some signal to ask a re-render ?

• I change to nav color, do you prefer?
• I fix the bug with charts
• I use lit context to better share variable
• I create searchalicious-app to easily share variable with lit context

[Kout95]

Create layout dir to contain :

• search-layout-page.ts
• search-panel-manager.ts