diff --git a/devdocs/specs/core-ui-design.txt b/devdocs/specs/core-ui-design.txt index 660215f3..bd1f992b 100644 --- a/devdocs/specs/core-ui-design.txt +++ b/devdocs/specs/core-ui-design.txt @@ -250,3 +250,39 @@ Fixed widgets UI Made up of the customizable and fixed widgets then subbed in place, so a list widget is generic but then is put into an outer component where it has custom elements and list specific api stuff added - icon, api, lt etc + +WIDGET HIEARCHY + +AYWIDGET (OUTER WRAPPER) + HOSTS ONE OF THESE: + List + Report + Graph + Calendar + CRUD editor + +AYWIDGET abilities: + - Can have a name / title and be customized + - Can be positioned in order + - Can be fullscreen or several set smaller sizes + - Can be moved to home page + + +BREAKPOINTS +=-=-=-=-=-= + +Plan: Layout and design each component for the smallest screen size first, then add more elements to each one as the size increases. + - NAV For example a menu can be fully shown as icons in a larger size but might be behind another click in smaller + - Functionality: figure out what the minimum most important things to show at small size then add more "optional" stuff as it increases + - Grid: show the Name column first and selector, then add the most relevant columns in order of relevancy + - 1-Name, 2-Tags?, 3- etc + - graph: mini graph at smallest size with controls hidden for modifying it, then more controls and larger graph at larger sizes + - Crud: all is needed, but responsive layout so long vertical column in sm and increasing columns by similar group of items in larger + - Menu controls maybe buried if not super needed in sm but all visible in large increasingly by usage + +Can I make one component for each type that is responsive or do I need to make a separate component for each breakpoint I will support? + - One component pros: less code to maintain theoretically, cons: maybe less well designed for that size + +todo: need to determine what breakpoints I'm going to support specifically + - todo: What are the most common device sizes I'll be dealing with? + - todo: once I have decided common device sizes then can figure out breakpoint plan diff --git a/devdocs/todo.txt b/devdocs/todo.txt index 92f40336..d5861557 100644 --- a/devdocs/todo.txt +++ b/devdocs/todo.txt @@ -5,6 +5,12 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi ## IMMEDIATE ITEMS - Figure out layout that works at different sizes with ui "widget" components so that they are larger on big screen, smaller on smaller screen and flow properly + - Going to have to do that while making actual real widgets for testing and trying out... + +todo: need to determine what breakpoints I'm going to support specifically + - todo: What are the most common device sizes I'll be dealing with? + - todo: once I have decided common device sizes then can figure out breakpoint plan + - Widget list component that works with real data - https://vuetifyjs.com/en/components/data-tables#example-server - Displays as a smaller item with maybe a count of widgets only that is expandable into a list of widgets