Use standard Mittelab CSS

assets/index.js

+import './main.scss';
+
+import $ from 'jquery';
+import 'bootstrap';
+
+// import QCodeDecoder from 'qcode-decoder';
+
+$(function () {
+ let qr = new QCodeDecoder();
+ const resultHandler = function (err, result) {
+ if (err) {
+ console.log(err.message);
+ return;
+ }
+ $("input#id_id")[0].value = result;
+ $("#qr-scan").modal("toggle");
+ };
+ $("#cameraProcess").click(function(e) {
+ var input = $("#cameraInput")[0];
+ if (input.files && input.files[0]) {
+ var reader = new FileReader();
+ reader.onload = function (e) {
+ qr.decodeFromImage(e.target.result, resultHandler);
+ };
+ reader.readAsDataURL(input.files[0]);
+ }
+ });
+ $("#qr-scan").on("show.bs.modal", function(){
+
+ if (!(qr.isCanvasSupported() && qr.hasGetUserMedia())) {
+ alert("Your browser doesn\'t match the required specs.");
+ throw new Error("Canvas and getUserMedia are required");
+ }
+ var video = document.querySelector("video");
+ var reset = document.querySelector("#reset");
+ var stop = document.querySelector('#stop');
+
+ // prepare a canvas element that will receive the image to decode, sets
+ // the callback for the result and then prepares the videoElement to
+ // send its source to the decoder.
+ qr.decodeFromCamera(video, resultHandler,true);
+ // attach some event handlers to reset and stop whenever we want.
+ reset.onclick = function () {
+ for (var i = 0; i < qr.stream.getTracks().length; i++){
+ qr.stream.getTracks()[i].stop();
+ }
+ qr = new QCodeDecoder();
+ qr.decodeFromCamera(video, resultHandler,true);
+ };
+ }).on("hide.bs.modal", function() {
+ for (var i = 0; i < qr.stream.getTracks().length; i++){
+ qr.stream.getTracks()[i].stop();
+ }
+ qr = new QCodeDecoder();
+ });
+});

assets/main.scss

+/*
+ * Globals
+ */
+
+@import "mlab-bootstrap";
+
+.jumbotron {
+ color: $mittelab-header-background;
+}
\ No newline at end of file

assets/mlab-bootstrap.scss

+$mittelab-green: #0ce3ac;
+$mittelab-blue: #375a7f;
+$mittelab-logo: #7fc0c2;
+$mittelab-primary: #fff;
+$mittelab-secondary: #222;
+$mittelab-tertiary: #0ce3ac;
+$mittelab-quandary: #0ce3ac;
+$mittelab-header-background: #375a7f;
+$mittelab-header-primary: #fff;
+$mittelab-highlight: #428bca;
+$mittelab-danger: #b00b1e;
+$mittelab-success: #44ff00;
+$mittelab-love: #fa6c8d;
+
+$body-bg: #222;
+$body-color: #fff;
+$link-color: $mittelab-logo;
+
+$theme-colors: (
+ "dark": $body-bg,
+ "mitte": $mittelab-blue,
+ "light": $mittelab-logo,
+);
+
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1600px
+);
+
+$font-family-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: "Ubuntu Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+
+@import "~bootstrap/scss/bootstrap";
+
+.img-thumbnail {
+ // Fix for dark bg by default
+ background-color: $white;
+}