admin/raven
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2018-11-21 18:54:58 +00:00
parent c1eecaafd7
commit 3872101262
4 changed files with 32 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/ayanova/src/components/widgetlist.vue
View File

@@ -1,23 +1,23 @@
<template> <template>
<div> <v-flex xs12 md4>
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="desserts" :items="desserts"
:pagination.sync="pagination" :pagination.sync="pagination"
:total-items="totalDesserts" :total-items="totalDesserts"
:loading="loading" :loading="loading"
class="elevation-1" class="elevation-1"
> >
<template slot="items" slot-scope="props"> <template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td> <td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td> <td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td> <td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td> <td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td> <td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td> <td class="text-xs-right">{{ props.item.iron }}</td>
</template> </template>
</v-data-table> </v-data-table>
</div> </v-flex>
</template> </template>
@@ -64,6 +64,7 @@ export default {
methods: { methods: {
getDataFromApi() { getDataFromApi() {
this.loading = true; this.loading = true;
// eslint-disable-next-line
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const { sortBy, descending, page, rowsPerPage } = this.pagination; const { sortBy, descending, page, rowsPerPage } = this.pagination;
@@ -254,4 +255,4 @@ export default {
// "next": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3", // "next": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
// "last": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=34&pageSize=3" // "last": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=34&pageSize=3"
// } // }
// } // }

84
app/ayanova/src/views/inventory.vue
View File

@@ -4,6 +4,11 @@
<v-container grid-list-xl> <v-container grid-list-xl>
<v-layout row wrap="" align-center> <v-layout row wrap="" align-center>
<WidgetTop/> <WidgetTop/>
<WidgetList/>
<WarehouseTop/>
<POTop/>
<PartTop/>
<PartAssemblyTop/>
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
@@ -19,83 +24,6 @@
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-flex> </v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline">Fast development</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">build</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline text-xs-center">Completely Open Sourced</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline">Fast development</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline">Fast development</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="headline">Fast development</div>
</v-card-title>
<v-card-text>
Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
</v-card-text>
</v-card>
</v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
</v-flex> </v-flex>
@@ -112,6 +40,7 @@
<script> <script>
/* xeslint-disable */ /* xeslint-disable */
import WidgetTop from "../components/inventorywidgettop"; import WidgetTop from "../components/inventorywidgettop";
import WidgetList from "../components/widgetlist";
import WarehouseTop from "../components/inventorywarehousetop"; import WarehouseTop from "../components/inventorywarehousetop";
import POTop from "../components/inventorypotop"; import POTop from "../components/inventorypotop";
import PartTop from "../components/inventoryparttop"; import PartTop from "../components/inventoryparttop";
@@ -134,6 +63,7 @@ import lt from "../api/locale";
export default { export default {
components: { components: {
WidgetTop, WidgetTop,
WidgetList,
WarehouseTop, WarehouseTop,
POTop, POTop,
PartTop, PartTop,

6
devdocs/specs/core-ui-design.txt
View File

@@ -276,6 +276,8 @@ Plan: Layout and design each component for the smallest screen size first, then
- It makes no sense to target individual devices anymore. Instead, add breakpoints where your design breaks. - It makes no sense to target individual devices anymore. Instead, add breakpoints where your design breaks.
If you start with your design for the smallest device and start to drag your browser window wider, when do the lines become too long to read comfortably? If you start with your design for the smallest device and start to drag your browser window wider, when do the lines become too long to read comfortably?
When could you make better use of the screen? That is the point at which to add a Media Query and write some additional CSS. When could you make better use of the screen? That is the point at which to add a Media Query and write some additional CSS.
- So design with the tiny ones and minimalist, then drag out and see where can add more value with more stuff.
- Ideally at this point I'd like to see small and large only, medium specific design not necessary but testing obviously is (TIME TO MARKET!)
- NAV For example a menu can be fully shown as icons in a larger size but might be behind another click in smaller - 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 - 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 - Grid: show the Name column first and selector, then add the most relevant columns in order of relevancy
@@ -286,7 +288,3 @@ Plan: Layout and design each component for the smallest screen size first, then
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? 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 - 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

8
devdocs/todo.txt
View File

@@ -4,12 +4,8 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi
## IMMEDIATE ITEMS ## 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... - Make the following widgets for small screen, drag out size and see what can be done to benefit medium+ sizes, so two sizes for now
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 - Widget list component that works with real data
- https://vuetifyjs.com/en/components/data-tables#example-server - https://vuetifyjs.com/en/components/data-tables#example-server