From a15d6106d9b041fca8f6904ccb1151b5912de446 Mon Sep 17 00:00:00 2001 From: Tor-Einar Skog <tor-einar.skog@nibio.no> Date: Mon, 1 Feb 2021 13:50:46 +0100 Subject: [PATCH] First version with basic layout in place --- .gitignore | 2 + README.md | 25 +++++++++-- config.xml | 47 +++++++++++---------- index.html | 88 +++++++++++---------------------------- package-lock.json | 18 ++++++++ package.json | 14 ++++++- static/css/offcanvas.css | 26 +++++++++--- static/css/vipsobsapp.css | 24 +++++++++++ 8 files changed, 148 insertions(+), 96 deletions(-) create mode 100644 static/css/vipsobsapp.css diff --git a/.gitignore b/.gitignore index 5cdf1d9..b65b701 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,5 @@ yarn-error.log* *.ntvs* *.njsproj *.sln +.project +.settings/ diff --git a/README.md b/README.md index a0dbbf7..cde5f70 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ -# vipsobservationapp +# VIPS Field Observation App > The Field Pest Observation App for VIPS users -## Build Setup +## Build Setup (vuejs) ``` bash # install dependencies npm install -# serve with hot reload at localhost:8080 +# serve with hot reload at localhost:8080 - only for testing view layer npm run dev -# build for production with minification +# build for production with minification - before building with Cordova npm run build # build for production and view the bundle analyzer report @@ -19,3 +19,20 @@ npm run build --report ``` For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). + +## Build/emulate with cordova + +``` bash +# Add browser and android platforms (haven't tested iOS yet) +cordova platform add browser +cordova platform add android + +# Test in browser +cordova emulate browser + +# Test on Android. Requires correct setup of the Android SDK. +# Read more here: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html +cordova emulate android +``` + + diff --git a/config.xml b/config.xml index 1e4c65b..47599fd 100644 --- a/config.xml +++ b/config.xml @@ -1,25 +1,26 @@ <?xml version='1.0' encoding='utf-8'?> -<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> - <name>HelloCordova</name> - <description> - A sample Apache Cordova application that responds to the deviceready event. - </description> - <author email="dev@cordova.apache.org" href="http://cordova.io"> - Apache Cordova Team - </author> - <content src="index.html" /> - <access origin="*" /> - <allow-intent href="http://*/*" /> - <allow-intent href="https://*/*" /> - <allow-intent href="tel:*" /> - <allow-intent href="sms:*" /> - <allow-intent href="mailto:*" /> - <allow-intent href="geo:*" /> - <platform name="android"> - <allow-intent href="market:*" /> - </platform> - <platform name="ios"> - <allow-intent href="itms:*" /> - <allow-intent href="itms-apps:*" /> - </platform> +<widget id="no.nibio.vips.observation" version="0.0.1" + xmlns="http://www.w3.org/ns/widgets" + xmlns:cdv="http://cordova.apache.org/ns/1.0"> + <name>VIPS Field Observation Aapp</name> + <description>The Field Observation app for VIPS users. +Build it with 'npm run build' before any cordova +specific actions - so that vuejs can +compile to www folder</description> + <author email="tor-einar.skog@nibio.no" href="https://www.nibio.no/en/employees/tor-einar-skog">Tor-Einar Skog</author> + <content src="index.html" /> + <access origin="*" /> + <allow-intent href="http://*/*" /> + <allow-intent href="https://*/*" /> + <allow-intent href="tel:*" /> + <allow-intent href="sms:*" /> + <allow-intent href="mailto:*" /> + <allow-intent href="geo:*" /> + <platform name="android"> + <allow-intent href="market:*" /> + </platform> + <platform name="ios"> + <allow-intent href="itms:*" /> + <allow-intent href="itms-apps:*" /> + </platform> </widget> diff --git a/index.html b/index.html index 2d07f24..86772fb 100644 --- a/index.html +++ b/index.html @@ -7,95 +7,57 @@ <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://code.jquery.com 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:; connect-src 'self' ws:;"> <meta name="description" content=""> - <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> - <title>Offcanvas template ยท Bootstrap v4.6</title> + <meta name="author" content="Tor-Einar Skog"> + <title>VIPS Feltobservasjoner</title> <!-- Bootstrap core CSS --> <link href="static/css/bootstrap.min.css" rel="stylesheet"> - - <style> - .bd-placeholder-img { - font-size: 1.125rem; - text-anchor: middle; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - @media (min-width: 768px) { - .bd-placeholder-img-lg { - font-size: 3.5rem; - } - } - </style> - - - <!-- Custom styles for this template --> + <!-- Custom styles for this Boostrap template --> <link href="static/css/offcanvas.css" rel="stylesheet"> + <!-- Custom styles for this app --> + <link href="static/css/vipsobsapp.css" rel="stylesheet"> <script src="cordova.js"></script> </head> <body class="bg-light"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> - <a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a> + + <a class="navbar-brand mr-auto mr-lg-0" href="#"> +<img src="static/css/images/logo_vips_hvit.png" style="height: 27px; position: relative; top: -3px; margin-right: 15px"/>Feltobservasjoner</a> <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas"> <span class="navbar-toggler-icon"></span> </button> - <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> + <div class="navbar-collapse offcanvas-collapse" id="vipsobsappmenu"> + <form class="my-2 my-lg-0"> + <div class="form-group"> + <input class="form-control mr-sm-2" type="text" placeholder="Brukernavn" aria-label="Brukernavn"> + </div> + <div class="form-group"> + <input class="form-control mr-sm-2" type="password" placeholder="Passord" aria-label="Passord"> + </div> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Logg inn</button> + </form> + <hr/> <ul class="navbar-nav mr-auto"> - <li class="nav-item active"> - <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a> - </li> <li class="nav-item"> - <a class="nav-link" href="#">Notifications</a> + <a class="nav-link" href="#">Mine observasjoner</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">Profile</a> + <a class="nav-link" href="#">Mine steder</a> </li> <li class="nav-item"> - <a class="nav-link" href="#">Switch account</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a> - <div class="dropdown-menu" aria-labelledby="dropdown01"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - </div> + <a class="nav-link" href="#">Innstillinger</a> </li> </ul> - <form class="form-inline my-2 my-lg-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> - </form> + </div> </nav> -<!--div class="nav-scroller bg-white shadow-sm"> - <nav class="nav nav-underline"> - <a class="nav-link active" href="#">Dashboard</a> - <a class="nav-link" href="#"> - Friends - <span class="badge badge-pill bg-light align-text-bottom">27</span> - </a> - <a class="nav-link" href="#">Explore</a> - <a class="nav-link" href="#">Suggestions</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Link</a> - <a class="nav-link" href="#">Link</a> - </nav> -</div--> - <main role="main" class="container"> <div id="app"></div> </main> - - <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> - <script>window.jQuery || document.write('<script src="static/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="static/js/bootstrap.bundle.min.js"></script> - + <script src="static/js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> + <script>window.jQuery || document.write('<script src="static/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="static/js/bootstrap.bundle.min.js"></script> <script src="static/js/offcanvas.js"></script> </body> </html> diff --git a/package-lock.json b/package-lock.json index bc955a8..ae7eb6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2333,6 +2333,24 @@ } } }, + "cordova-plugin-camera": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/cordova-plugin-camera/-/cordova-plugin-camera-5.0.1.tgz", + "integrity": "sha512-9gXyZvI8u9KzsZuqmB8Yw+uheF+7f+usMAwvOMw7L7pqbykg+bm9US5zjhJbwit3A1cSblgZkpBafe5cFiMcTA==", + "dev": true + }, + "cordova-plugin-geolocation": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.1.0.tgz", + "integrity": "sha512-y5io/P10xGMxSn2KEqfv/fExK47eA1pmSonJdmDqDsaSADV9JpgdPx0mUSA08+5pzma/OS9R0LoODeDPx7Jvjg==", + "dev": true + }, + "cordova-plugin-whitelist": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.4.tgz", + "integrity": "sha512-EYC5eQFVkoYXq39l7tYKE6lEjHJ04mvTmKXxGL7quHLdFPfJMNzru/UYpn92AOfpl3PQaZmou78C7EgmFOwFQQ==", + "dev": true + }, "cordova-serve": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cordova-serve/-/cordova-serve-3.0.0.tgz", diff --git a/package.json b/package.json index 83f13d2..3da19d9 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,9 @@ "copy-webpack-plugin": "^4.0.1", "cordova-android": "^9.0.0", "cordova-browser": "^6.0.0", + "cordova-plugin-camera": "^5.0.1", + "cordova-plugin-geolocation": "^4.1.0", + "cordova-plugin-whitelist": "^1.3.4", "css-loader": "^0.28.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", @@ -65,6 +68,15 @@ "platforms": [ "browser", "android" - ] + ], + "plugins": { + "cordova-plugin-geolocation": { + "GPS_REQUIRED": "true" + }, + "cordova-plugin-whitelist": {}, + "cordova-plugin-camera": { + "ANDROID_SUPPORT_V4_VERSION": "27.+" + } + } } } \ No newline at end of file diff --git a/static/css/offcanvas.css b/static/css/offcanvas.css index 9c78f02..a4d5949 100644 --- a/static/css/offcanvas.css +++ b/static/css/offcanvas.css @@ -12,21 +12,22 @@ body { position: fixed; top: 56px; /* Height of navbar */ bottom: 0; - left: 100%; - width: 100%; + left: 80%; + width: 80%; padding-right: 1rem; padding-left: 1rem; overflow-y: auto; visibility: hidden; - background-color: #343a40; + background-color: white; + border-left: 1px solid #3d8052; transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out, visibility .3s ease-in-out; transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out; } .offcanvas-collapse.open { visibility: visible; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); + -webkit-transform: translateX(-80%); + transform: translateX(-80%); } } @@ -74,3 +75,18 @@ body { .lh-100 { line-height: 1; } .lh-125 { line-height: 1.25; } .lh-150 { line-height: 1.5; } + +.bd-placeholder-img { + font-size: 1.125rem; + text-anchor: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + +@media (min-width: 768px) { + .bd-placeholder-img-lg { + font-size: 3.5rem; + } +} diff --git a/static/css/vipsobsapp.css b/static/css/vipsobsapp.css new file mode 100644 index 0000000..e985c28 --- /dev/null +++ b/static/css/vipsobsapp.css @@ -0,0 +1,24 @@ +.navbar { + background-color: #3d8052 !important; +} + +.offcanvas-collapse { + background-color: white; + border-left: 1px solid #3d8052; + +} + +a.nav-link{ + color: black !important; +} + +.btn-outline-success { + color: #3d8052; + border-color: #3d8052; +} + +.btn-outline-success:hover { + color: white; + background-color: #3d8052; + border-color: #3d8052; +} \ No newline at end of file -- GitLab