acutedeveloper/waves-admin-layout

Waves Admin Panel

Responsive Approach

Header

• Logo to reduce to a smaller icon only mark.
• Button to appear to reveal hidden sidebar.
• Header dropdown menu button to hide text leaving text only.

Sidebar

• Sidebar to disappear below large breakpoints.

Footer

Progressive collapsing approach. Group the columns into two halfs to allow them to stack at a medium breakpoint, then stack again on smaller breakpoints.

Interactive Components

• Header Dropdown menu
• Menu Header Notification icon
• Page Charts
• Sidebar when hidden, to be revealed by icon that will appear in the header. To use a slideover reveal effect.
• Footer list of links, on mobile reveal with accordion function

Progress Log

Added nunjucks to the project

---

20/03/19 LT Hitting Final Pieces

I have added in Chart JS to the project. Have added in a decent table layout that works across screens. Footer layout is better, however can do with some tweaking.

I have gotten the project to a point where it is ready for SassWind to be added for class extraction.

---

08/03/19 1hr Yo Yo Yo!

Basically I re-did the project code base using Yeoman to help flesh out the project. I have created template files for those common components. There are macros for generating nested HTML grid layouts. The process was definatly smoother as opposed to manually creating the code or copying and pasting.

---

07/03/19 1hr Locking in Nunjucks

I have locked in on a process with nunjucks to create nested grids using macros.

---

06/03/19 2hrs creating a layout with nunjucks

I spent a couple of hours trying to get a process together which would output the layout I desired. It has been quite a slow process and I need to get my head into a pattern with nunchucks that would enable a nested layout to be created.

I can see straight away that the necessity of pre-built components, will really help speed up the process.

05/03/19 30mins Finishing mapping layout

cleared up issue with the footer structure to ensure it works responsively

I used a quick layout in Affinity designer to visualise my approach together.

04/03/19 Mapping out layout

I started to map the structure of the layout. This process helped me to quickly identify a couple of areas that needed attention.