accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-23 11:29:03 +00:00
Code Issues Releases Activity

fix: Scrollbar styling in Report container

Browse Source
This commit is contained in:
Faris Ansari 2019-12-16 17:08:22 +05:30
parent 162b5e983f
commit 168aa607fb
1 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/Report.vue
View File

@ -7,7 +7,11 @@
</template> </template>
</PageHeader> </PageHeader>
<div class="mt-6 flex text-base px-8" v-if="report.filterFields"> <div class="mt-6 flex text-base px-8" v-if="report.filterFields">
<div class="ml-3 first:ml-0 w-32" v-for="df in report.filterFields"> <div
class="ml-3 first:ml-0 w-32"
v-for="df in report.filterFields"
:key="df.fieldname"
>
<FormControl <FormControl
size="small" size="small"
:background="true" :background="true"
@ -37,7 +41,7 @@
</Row> </Row>
</div> </div>
<WithScroll @scroll="onBodyScroll"> <WithScroll @scroll="onBodyScroll">
<div class="flex-1 overflow-auto" style="height: calc(100vh - 12rem)"> <div class="flex-1 overflow-auto report-scroll-container">
<Row <Row
v-show="row.isShown" v-show="row.isShown"
v-for="(row, i) in rows" v-for="(row, i) in rows"
@ -81,7 +85,6 @@ import Row from '@/components/Row';
import WithScroll from '@/components/WithScroll'; import WithScroll from '@/components/WithScroll';
import FormControl from '@/components/Controls/FormControl'; import FormControl from '@/components/Controls/FormControl';
import reportViewConfig from '@/../reports/view'; import reportViewConfig from '@/../reports/view';
import throttle from 'lodash/throttle';
export default { export default {
name: 'Report', name: 'Report',
@ -131,7 +134,7 @@ export default {
args: this.filters args: this.filters
}); });
let rows, columns; let rows;
if (data.rows) { if (data.rows) {
rows = data.rows; rows = data.rows;
} else { } else {
@ -266,7 +269,7 @@ export default {
label: `Test ${i + 1}` label: `Test ${i + 1}`
}; };
}); });
let rows = Array.from(new Array(14)).map((v, i) => { let rows = Array.from(new Array(14)).map(() => {
return columns.reduce((obj, col) => { return columns.reduce((obj, col) => {
obj[col.fieldname] = 'Test Data ' + col.fieldname; obj[col.fieldname] = 'Test Data ' + col.fieldname;
obj.isShown = true; obj.isShown = true;
@ -301,3 +304,22 @@ export default {
} }
}; };
</script> </script>
<style>
.report-scroll-container {
height: calc(100vh - 12rem);
}
.report-scroll-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.report-scroll-container::-webkit-scrollbar-thumb {
background-color: theme('colors.gray.200');
}
.report-scroll-container::-webkit-scrollbar-thumb:hover {
background-color: theme('colors.gray.300');
}
.report-scroll-container::-webkit-scrollbar-track {
background-color: white;
}
</style>