listview for studydocs

src/views/studydocs/studydocList.js

@@ -21,63 +21,71 @@ export default class studydocList {
     if (!isLoggedIn()) return m(Error401);
 
     return m('div#studydoc-list', [
-      m(
-        'form',
-        {
-          onsubmit: e => {
-            e.preventDefault();
-            const query = {
-              $or: [
-                { title: { $regex: `^(?i).*${this.search}.*` } },
-                { lecture: { $regex: `^(?i).*${this.search}.*` } },
-                { professor: { $regex: `^(?i).*${this.search}.*` } },
-                { author: { $regex: `^(?i).*${this.search}.*` } },
-              ],
-            };
-            studydocs.load(query);
-          },
-        },
-        [
-          m(
-            'input',
+      m('div.filter',[
+          m('form',
             {
-              type: 'text',
-              oninput: m.withAttr('value', value => {
-                this.search = value;
-              }),
+              onsubmit: e => {
+                e.preventDefault();
+                const query = {
+                  $or: [
+                    { title: { $regex: `^(?i).*${this.search}.*` } },
+                    { lecture: { $regex: `^(?i).*${this.search}.*` } },
+                    { professor: { $regex: `^(?i).*${this.search}.*` } },
+                    { author: { $regex: `^(?i).*${this.search}.*` } },
+                  ],
+                };
+                studydocs.load(query);
+              },
             },
-            ''
+            [
+              m(
+                'input',
+                {
+                  type: 'text',
+                  oninput: m.withAttr('value', value => {
+                    this.search = value;
+                  }),
+                },
+                ''
+              ),
+              m(Button, { label: 'Search' }),
+            ]
           ),
-          m(Button, { label: 'Search' }),
+          m(Button, {
+            label: 'Add new',
+            events: { onclick: () => m.route.set('/studydocuments/new') },
+          }),
         ]
       ),
-      m(Button, {
-        label: 'Add new',
-        events: { onclick: () => m.route.set('/studydocuments/new') },
-      }),
-      m('table', [
-        m('thead', m('tr', tableHeadings.map(header => m('th', header)))),
-        m(
-          'tbody',
-          studydocs
-            .getList()
-            .map(doc =>
-              m('tr', [
-                m('td', doc.title),
-                m('td', doc.lecture),
-                m('td', doc.professor),
-                m('td', doc.semester),
-                m('td', doc.author),
-                m(
-                  'td',
-                  doc.files.map(item =>
-                    m('a', { href: `${apiUrl}${item.file}`, target: '_blank' }, item.name)
-                  )
-                ),
-              ])
-            )
-        ),
+      m( 'div.content',[
+        m('table', [
+          m('thead', m('tr', tableHeadings.map(header => m('th', header)))),
+          m(
+            'tbody',
+            studydocs
+              .getList()
+              .map(doc =>
+                m('tr', [
+                  m('td', doc.title),
+                  m('td', doc.lecture),
+                  m('td', doc.professor),
+                  m('td', doc.semester),
+                  m('td', doc.author),
+                  m(
+                    'td',
+                    doc.files.map(item =>
+                      m('a', { href: `${apiUrl}${item.file}`, target: '_blank' }, item.name)
+                    )
+                  ),
+                ])
+              )
+          ),
+        ]),
       ]),
+      m('div.details',[
+        m('table',[m('p',['Details that rock!'])
+        ])
+      ])
     ]);
   }
 }

src/views/styles/listview.less

 .listview {
-    
-}
\ No newline at end of file
+  display: grid;
+  grid-template-columns: auto auto auto;
+      .filter{
+
+      }
+      .content{
+
+      }
+      .details{
+
+      }
+}