[add] example docker-compose
This commit is contained in:
parent
303a168bc7
commit
87d24bec72
4 changed files with 208 additions and 285 deletions
131
html/app.css
131
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;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
//
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
count: 92,
|
||||
|
||||
edit:{
|
||||
currentId: "?",
|
||||
query: "todo edit/query"
|
||||
},
|
||||
"features":{
|
||||
"serviceworker": false
|
||||
},
|
||||
"images": {
|
||||
thumbtask :`<thumbnail>
|
||||
state: {
|
||||
count: 92,
|
||||
|
||||
edit: {
|
||||
currentId: "?",
|
||||
query: "todo edit/query"
|
||||
},
|
||||
"features": {
|
||||
"serviceworker": false
|
||||
},
|
||||
"images": {
|
||||
thumbtask: `<thumbnail>
|
||||
<size width="200" height="200"/>
|
||||
<filters>
|
||||
<colorize color="green" alpha=".5"/>
|
||||
|
|
@ -22,40 +22,40 @@ const store = new Vuex.Store({
|
|||
<output format="gif"/>
|
||||
</thumbnail>
|
||||
`
|
||||
},
|
||||
"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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue