agendash2 - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

package.json

 {
   "name": "agendash2",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A modern dashboard for Agenda.js with Pagination and Search capabilities",
@@ -5,0 +5,0 @@ "main": "app.js",

public/app/js/main.js

@@ -28,4 +28,15 @@ const app = Vue.component('app', {
     loading: false,
+    hideSlide: true,
   }),
   methods: {
+    openNav() {
+      document.getElementById("mySidebar").style.width = "100%";
+      document.getElementById("main").style.marginLeft = "100%";
+      this.hideSlide = false
+    },
+    closeNav() {
+      document.getElementById("mySidebar").style.width = "0";
+      document.getElementById("main").style.marginLeft = "0";
+      this.hideSlide = true
+    },
     showJobDetail(data){
@@ -146,6 +157,26 @@ this.jobData = data;
     <div class="container-fluid">
-      <div class="row">
+      <div class="">
         <div class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
-          <div class="col-3">
-            <a class="navbar-brand col-sm-3 col-md-2 mr-0 tittle"> Agendash 2</a>
+          <div class="d-flex">
+            <div>
+              <a class="navbar-brand col-sm-10 col-md-10 mr-0 tittle"> Agendash 2</a>
+            </div>
+            <div class='d-md-none w-50'>
+              <div id="mySidebar" class="sidebar-collapse">
+                <a href="javascript:void(0)" class="closebtn" @click="closeNav()">&times;</a>
+                <div v-if="hideSlide === false" class="bg-light overflow-auto">
+                  <sidebar
+                    v-on:search-sidebar="searchForm"
+                    v-on:new-job="newJob"
+                    :overview="overview"
+                    :pagesize="pagesize"
+                    :loading="loading"
+                    >
+                  </sidebar>
+                </div>
+              </div>
+              <div class="slidebar-container-button" id="main">
+                <button class="openbtn" @click="openNav()">&#9776;</button>
+              </div>
+            </div>
           </div>
@@ -155,3 +186,3 @@ </div>
       <div class="row pt-5">
-          <div class="col-md-2 d-none d-md-block bg-light overflow-auto">
+          <div v-if="hideSlide === true" class="col-md-2 d-none d-md-block bg-light overflow-auto">
             <sidebar
@@ -158,0 +189,0 @@ v-on:search-sidebar="searchForm"

README.md

@@ -17,3 +17,3 @@ # Agendash 2
 - Pagination (Original version had limitiation to 200 results only)
-
+- Responsive UI
 ---
@@ -41,2 +41,12 @@
 
+#### Responsive UI
+
+![Mobile UI small devices](mobile-ui-sm.png)
+
+
+
+![Mobile UI extra small devices](mobile-ui-xs.png)
+
+---
+
 # Motivation
@@ -54,2 +64,3 @@
 - [x] Polish backend so it is more efficient (MongoDB Aggregation queries were rewritten and optimized)
+- [x] Mobile/Responsive UI
 - [ ] Get more test coverage
@@ -56,0 +67,0 @@ - [ ] Add middlewares for KOA, fastify, and other express-like libraries

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

568259

increased by21.01%

Number of package files

44

increased by4.76%

Lines of code

1696

increased by4.5%

Number of lines in readme file

150

increased by7.91%

No dependency changes