add the grid guides for demo page

kirillmurashov · Oct 13, 2022 · 317f75a · 317f75a
1 parent d44a711
commit 317f75a
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/demo/app.vue b/src/demo/app.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <div class="list" id="list">
+        <div class="list grid" id="list">
             <VueDragResize v-for="(rect, index) in rects"
                            :key="index"
                            :w="rect.width"
@@ -66,15 +66,21 @@
         background-color: white;
     }
 
+    /* grid of the main panel */
+    .list.grid{
+        background-image: linear-gradient(chocolate 1px,transparent 1px),linear-gradient(90deg,chocolate 1px,transparent 1px);
+        background-size: 50px 50px;
+    }
+
     .box-shaddow {
         box-shadow:  10px 10px 15px 0px rgba(125,125,125,1);
     }
 </style>
 
 <script>
     import VueDragResize from '../components/vue-drag-resize.vue';
-    import toolbar from './components/toolbar/toolbar.vue';
-    import './icons';
+import toolbar from './components/toolbar/toolbar.vue';
+import './icons';
 
     export default {
         name: 'app',
@@ -133,4 +139,4 @@
             }
         }
     }
-</script>
+</script>