diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml new file mode 100644 index 0000000..bbb2112 --- /dev/null +++ b/docker/docker-compose.yml @@ -0,0 +1,23 @@ +--- +version: "2.1" +services: + code-server: + image: ghcr.io/linuxserver/code-server:version-v3.10.0 + container_name: code-server + environment: + - PUID=1000 + - PGID=1000 + - TZ=Europe/London + - SUDO_PASSWORD=password #optional + - SUDO_PASSWORD_HASH= #optional + volumes: + - ./config:/config + - /var/run/docker.sock:/var/run/docker.sock:ro + ports: + - 8443:8443 + restart: unless-stopped + +networks: + default: + external: + name: swag_default diff --git a/html/app.css b/html/app.css index d2ac37a..e74fe76 100755 --- a/html/app.css +++ b/html/app.css @@ -1,16 +1,28 @@ /* app.css */ + /* page scroll bar off */ -html { overflow-y: auto } + +html { + overflow-y: auto +} pre { - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ + white-space: pre-wrap; + /* css-3 */ + white-space: -moz-pre-wrap; + /* Mozilla, since 1999 */ + white-space: -pre-wrap; + /* Opera 4-6 */ + white-space: -o-pre-wrap; + /* Opera 7 */ + word-wrap: break-word; + /* Internet Explorer 5.5+ */ } + + /* http://tobiasahlin.com/spinkit/ */ + .spinner { margin: 100px auto; width: 100px; @@ -24,7 +36,6 @@ pre { height: 100%; width: 16px; display: inline-block; - -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } @@ -50,20 +61,31 @@ pre { } @-webkit-keyframes sk-stretchdelay { - 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } - 20% { -webkit-transform: scaleY(1.0) } + 0%, + 40%, + 100% { + -webkit-transform: scaleY(0.4) + } + 20% { + -webkit-transform: scaleY(1.0) + } } @keyframes sk-stretchdelay { - 0%, 40%, 100% { + 0%, + 40%, + 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); - } 20% { + } + 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } -.fade-enter-active, .fade-leave-active { + +.fade-enter-active, +.fade-leave-active { transition-property: opacity; transition-duration: .25s; } @@ -72,88 +94,104 @@ pre { transition-delay: .25s; } -.fade-enter, .fade-leave-active { +.fade-enter, +.fade-leave-active { opacity: 0 } .child-view { position: absolute; - transition: all .5s cubic-bezier(.55,0,.1,1); + transition: all .5s cubic-bezier(.55, 0, .1, 1); } -.slide-left-enter, .slide-right-leave-active { + +.slide-left-enter, +.slide-right-leave-active { opacity: 0; -webkit-transform: translate(30px, 0); transform: translate(30px, 0); } -.slide-left-leave-active, .slide-right-enter { + +.slide-left-leave-active, +.slide-right-enter { opacity: 0; -webkit-transform: translate(-30px, 0); transform: translate(-30px, 0); } td.vtop { - vertical-align:top; + vertical-align: top; } + + /* .ace_editor { height: 200px; } */ - .acewrap{ - top:0px; - left:0px; - bottom:0px; - right:0px; - height:100%; - } -.ace_gutter-cell.ace_breakpoint{ - border-radius: 20px 0px 0px 20px; - box-shadow: 0px 0px 1px 1px red inset; +.acewrap { + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + height: 100%; } -.ace_editor_wrapper { - height: 100% + +.ace_gutter-cell.ace_breakpoint { + border-radius: 20px 0px 0px 20px; + box-shadow: 0px 0px 1px 1px red inset; } - + +.ace_editor_wrapper { + height: 100% +} + .ace_editor { -height: 100%; -} + height: 100%; +} .multiline-ellipsis { - display: block; - display: -webkit-box; - max-height: 110px; - margin: 0 auto; - line-height: 1.4; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} -.qd-active { - background-color: green; + display: block; + display: -webkit-box; + max-height: 110px; + margin: 0 auto; + line-height: 1.4; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; } + +.qd-active { + background-color: green; +} + .selcard { - background-color: green; - border: thick double #32a1ce; + background-color: green; + border: thick double #32a1ce; } .contain { object-fit: contain; } + .canvas { overflow: hidden; } + .canvas .wrapper.outer > .background { fill: #000000; } + .canvas .wrapper.inner > .background { fill: #CCCCCC; cursor: move; } + .canvas .background { fill: #F6F6F6; stroke: #333333; cursor: move; } + .canvas .panCanvas { cursor: move; } @@ -161,6 +199,7 @@ height: 100%; .canvas .minimap .frame { pointer-events: all; } + .canvas .minimap .frame .background { stroke: #111111; stroke-width: 4px; diff --git a/html/state.js b/html/state.js index 2cfb52c..9b8a634 100755 --- a/html/state.js +++ b/html/state.js @@ -1,17 +1,17 @@ // const store = new Vuex.Store({ - state: { - count: 92, - - edit:{ - currentId: "?", - query: "todo edit/query" - }, - "features":{ - "serviceworker": false - }, - "images": { - thumbtask :` + state: { + count: 92, + + edit: { + currentId: "?", + query: "todo edit/query" + }, + "features": { + "serviceworker": false + }, + "images": { + thumbtask: ` @@ -22,40 +22,40 @@ const store = new Vuex.Store({ ` - }, - "settings": { - "ace": { - theme: "github", - themeDark: "chaos", - keybinding: "ace", - fontsize: 16, - enableSnippets:true, - enableBasicAutocompletion:true, - enableLiveAutocompletion:true - }, - "dark": false - }, - "markdown":{ - "toc": true - } - }, - - mutations: { - increment (state) { - state.count++ - }, - initialiseStore(state) { - // Check if the ID exists - var s=localStorage.getItem('store') - if(s) { - // Replace the state object with the stored item - this.replaceState( - Object.assign(state, JSON.parse(s)) - ); + }, + "settings": { + "ace": { + theme: "github", + themeDark: "chaos", + keybinding: "ace", + fontsize: 16, + enableSnippets: true, + enableBasicAutocompletion: true, + enableLiveAutocompletion: true + }, + "dark": false + }, + "markdown": { + "toc": true + } + }, + + mutations: { + increment(state) { + state.count++ + }, + initialiseStore(state) { + // Check if the ID exists + var s = localStorage.getItem('store') + if (s) { + // Replace the state object with the stored item + this.replaceState( + Object.assign(state, JSON.parse(s)) + ); + } + //console.log("initialiseStore: ",s) } - //console.log("initialiseStore: ",s) } - } }) store.subscribe((mutation, state) => { // Store the state object as a JSON string diff --git a/media/vue-poc.svg b/media/vue-poc.svg index e019f0b..ef6132a 100755 --- a/media/vue-poc.svg +++ b/media/vue-poc.svg @@ -1,200 +1,61 @@ - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + - - + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - +