Commit a914650e authored by Klaus Ramm's avatar Klaus Ramm

Rebuild CSS and polish generated HTML structure

parent 2448811d
node_modules
dist/main.js
\ No newline at end of file
dist/main.js
dist/struktog.min.css
\ No newline at end of file
......@@ -2,4 +2,17 @@
Webprogramm zur Erstellung von Struktogrammen / PAP sowie zur Umwandlung dessen in Code (Python, PHP, Javascript)
[Datenfluss-Diagramm](https://drive.google.com/file/d/1BqLCW7vIB3DXViDjjPmEk6r4qjEnT8jv/view?usp=sharing)
\ No newline at end of file
[Datenfluss-Diagramm](https://drive.google.com/file/d/1BqLCW7vIB3DXViDjjPmEk6r4qjEnT8jv/view?usp=sharing)
# for deployment
- 'sed', 'sassc' need to be installed
- run deploy.sh in shell to generate CSS file
- run npx webpack to generate JS file
# for development
- 'inotify-tools' need to be installed
- run develop.sh to automatically build CSS and JS files on saving
\ No newline at end of file
.caseBody-1 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='50%' y1='0%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-noDefault-2 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='100%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='50%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-2 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='66.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='100%' y1='0%' x2='66.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='33.3333%' y1='100%' x2='33.3333%' y2='50%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseBody-2 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='33.3333%' y1='0%' x2='33.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='66.6666%' y1='0%' x2='66.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-noDefault-3 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='100%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='33.3333%' y1='33.3333%' x2='33.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='66.6666%' y1='66.6666%' x2='66.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-3 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='75%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='100%' y1='0%' x2='75%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='25%' y1='100%' x2='25%' y2='33.3333%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='100%' x2='50%' y2='66.6666%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseBody-3 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='25%' y1='0%' x2='25%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='0%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='75%' y1='0%' x2='75%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-noDefault-4 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='100%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='25%' y1='25%' x2='25%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='50%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='75%' y1='75%' x2='75%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-4 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='80%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='100%' y1='0%' x2='80%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='20%' y1='100%' x2='20%' y2='25%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='40%' y1='100%' x2='40%' y2='50%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='60%' y1='100%' x2='60%' y2='75%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseBody-4 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='20%' y1='0%' x2='20%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='40%' y1='0%' x2='40%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='60%' y1='0%' x2='60%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='80%' y1='0%' x2='80%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-noDefault-5 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='100%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='20%' y1='20%' x2='20%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='40%' y1='40%' x2='40%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='60%' y1='60%' x2='60%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='80%' y1='80%' x2='80%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-5 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='83.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='100%' y1='0%' x2='83.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='16.6666%' y1='100%' x2='16.6666%' y2='20%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='33.3333%' y1='100%' x2='33.3333%' y2='40%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='100%' x2='50%' y2='60%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='66.6666%' y1='100%' x2='66.6666%' y2='80%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseBody-5 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='16.6666%' y1='0%' x2='16.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='33.3333%' y1='0%' x2='33.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='0%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='66.6666%' y1='0%' x2='66.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='83.3333%' y1='0%' x2='83.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-noDefault-6 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='100%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='16.6666%' y1='16.6666%' x2='16.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='33.3333%' y1='33.3333%' x2='33.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='50%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='66.6666%' y1='66.6666%' x2='66.6666%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='83.3333%' y1='83.3333%' x2='83.3333%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-6 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='85.7142%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='100%' y1='0%' x2='85.7142%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='14.2857%' y1='100%' x2='14.2857%' y2='16.6666%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='28.5714%' y1='100%' x2='28.5714%' y2='33.3333%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='42.8571%' y1='100%' x2='42.8571%' y2='50%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='57.1428%' y1='100%' x2='57.1428%' y2='66.6666%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='71.4285%' y1='100%' x2='71.4285%' y2='83.3333%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseBody-6 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='14.2857%' y1='0%' x2='14.2857%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='28.5714%' y1='0%' x2='28.5714%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='42.8571%' y1='0%' x2='42.8571%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='57.1428%' y1='0%' x2='57.1428%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='71.4285%' y1='0%' x2='71.4285%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='85.7142%' y1='0%' x2='85.7142%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-noDefault-7 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='100%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='14.2857%' y1='14.2857%' x2='14.2857%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='28.5714%' y1='28.5714%' x2='28.5714%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='42.8571%' y1='42.8571%' x2='42.8571%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='57.1428%' y1='57.1428%' x2='57.1428%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='71.4285%' y1='71.4285%' x2='71.4285%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='85.7142%' y1='85.7142%' x2='85.7142%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseHead-7 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='0%' y1='0%' x2='87.5%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='100%' y1='0%' x2='87.5%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='12.5%' y1='100%' x2='12.5%' y2='14.2857%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='25%' y1='100%' x2='25%' y2='28.5714%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='37.5%' y1='100%' x2='37.5%' y2='42.8571%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='100%' x2='50%' y2='57.1428%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='62.5%' y1='100%' x2='62.5%' y2='71.4285%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='75%' y1='100%' x2='75%' y2='85.7142%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
.caseBody-7 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cline x1='12.5%' y1='0%' x2='12.5%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='25%' y1='0%' x2='25%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='37.5%' y1='0%' x2='37.5%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='50%' y1='0%' x2='50%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='62.5%' y1='0%' x2='62.5%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='75%' y1='0%' x2='75%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3Cline x1='87.5%' y1='0%' x2='87.5%' y2='100%' stroke='black' stroke-width='1.5' /%3E%3C/svg%3E") no-repeat top left;
background-size: cover;
}
$code-highlight: rgb(128,212,255);
.text-code {
color: $code-highlight;
}
.bg-primary {
background-color: $main-background-color;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 2; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
$main-background-color: rgba(128,212,255, 0.5);
.line {
height: 2em;
min-height: 2em;
width: 100%;
// display option icons on hovering on top of an line
&:hover .optionIcon {
display: inline-block;
}
}
.fixedHalfHeight {
flex: 0 0 1em;
}
.fixedHeight {
flex: 0 0 2em;
//width: 100%;
// display option icons on hovering on top of an line
&:hover .optionIcon {
display: inline-block;
}
}
.fixedDoubleHeight {
flex: 0 0 4em;
//width: 100%;
// display option icons on hovering on top of an line
&:hover .optionIcon {
display: inline-block;
}
}
.inputButtonIcon {
width: 3em;
float: left;
}
.symbol {
margin-top: 6.5px;
.input-group {
margin-top: -6px;
}
}
.symbolHeight {
height: 1em;
}
.columnInput {
flex: 48%;
}
@media screen and (min-width: 800px) {
.columnInput {
flex: 32%;
}
}
.insertButton {
border: 0.15em solid black;
text-align: center;
margin: 0.2em;
display: flex;
justify-content: center;
.buttonLogo {
float: left;
height: 1em;
min-width: 2em;
margin: auto;
flex: 1;
}
span {
flex: 4;
margin: auto;
}
}
.padding {
padding-left: 1em;
padding-right: 1em;
}
.editField {
width: 80%;
input {
flex: 10;
min-width: 0;
}
div {
flex: 1;
margin-left: 1em;
height: inherit;
border: 0.15em solid black;
}
}
.columnText {
flex: auto;
}
.optionContainer {
position: absolute;
z-index: 1;
top: 0;
right: 1em;
height: 100%;
display: inline-flex;
flex-wrap: nowrap;
.optionIcon {
width: 1em;
height: 100%;
margin-left: 0.4em;
flex: 1;
display: none;
@media screen and (min-width: 480px) {
display: inline-block;
}
@media screen and (min-width: 800px) {
display: none;
}
}
}
.tooltip {
position: relative;
&:after {
background: rgba(50, 50, 50, 0.95);
border-radius: 0;
bottom: 100%;
color: white;
content: attr(data-tooltip);
display: block;
left: -100%;
max-width: 15em;
opacity: 0;
overflow: hidden;
padding: 0.3em;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
transform: translate(-50%, 0.3em);
transition: opacity .2s, transform .2s;
white-space: pre;
z-index: 2;
}
&:focus,
&:hover {
&::after {
opacity: 1;
transform: translate(-50%, -0.3em);
}
}
&[disabled],
&.disabled {
pointer-events: auto;
}
&.tooltip-bottom {
&::after {
bottom: auto;
top: 75%;
transform: translate(-50%, -0.3em);
}
&:focus,
&:hover {
&::after {
transform: translate(-50%, 0.3em);
}
}
}
}
.columnFull {
flex-basis: 100%;
}
.columnAuto {
flex: 1;
}
.bottomHeader {
align-self: flex-end;
}
// display borders around elements
.simpleBorder {
margin: 0 1px;
background-color: $main-background-color;
}
.loopShift {
justify-content: flex-end !important;
.loopWidth {
flex-basis: calc(100% - 2em);
}
}
@import "structogram";
@import "importExport";
@import "cases";
@import "code";
$font-stack: "Verdana", Geneva, sans-serif;
body {
font: 100% $font-stack;
max-width: 1500px;
min-height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
main {
flex: 1;
}
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
position: relative;
}
.vcontainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
position: relative;
justify-content: flex-start;
}
.column {
flex-basis: 100%;
}
@media screen and (min-width: 800px) {
.column {
flex: 1;
}
}
.logo-container {
min-height: 2.5em;
width: 3em;
float: left;
}
.nav-logo-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.nav-col {
flex: auto;
margin: auto;
}
.options-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
}
.hand {
cursor: pointer;
}
.columnEditorFull {
flex-basis: 100%;
}
.columnEditorStructogram {
flex-basis: 100%;
margin: 0.2em;
}
.columnEditorCode {
flex-basis: 50%;
}
@media screen and (min-width: 1200px) {
.columnEditorStructogram {
flex-basis: 75%;
}
.columnEditorCode {
flex-basis: 24%;
}
}
.float-right {
float: right;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.ov-hidden {
overflow: hidden;
}
#!/bin/sh
# Deploy this projects client version (HTML, JS, CSS)
# Requires sed, sassc
cp css/structog.scss css/temp_css.scss
for file in svg/*
do
echo ".$(echo "$file" | sed -r "s/.+\/(.+)\..+/\1/") {" >> css/temp_css.scss
svgimage=$(sed -e 's/\s\{2,\}//g' -e 's/\"/\x27/g' -e 's/#/%23/g' -e 's/</%3C/g' -e 's/>/%3E/g' $file | sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/ /g')
echo "background-image: url(\"data:image/svg+xml,${svgimage}\");" >> css/temp_css.scss
# echo "height: 100%;" >> css/temp_css.scss
# echo "background-size: contain;" >> css/temp_css.scss
echo "background-repeat: no-repeat;" >> css/temp_css.scss
echo "background-position: center;" >> css/temp_css.scss
echo "}" >> css/temp_css.scss
done
sassc -t compressed css/temp_css.scss dist/struktog.min.css
rm css/temp_css.scss
#!/bin/sh
# Recompile JS and CSS automatically after file change in the directory
# Requires inotify-tools
while inotifywait -qre modify .; do
./deploy.sh
npx webpack --mode "development"
done
......@@ -4,101 +4,65 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="struktogRAMM.min.css">
<link rel="stylesheet" href="struktog.min.css">
<script src="main.js"></script>
<title>Struktog.</title>
</head>
<body>
<!-- Header -->
<header class="container">
<div class="columns">
<div class="column col-12 navbar">
<section class="navbar-section">
<div class="text-large">
<a href="index.html" class="navbar-brand mr-2 text-dark">
<figure class="avatar" data-initial="SG"></figure>
<strong>Struktog.</strong>
</a>
</div>
</section>
<section class="navbar-section">
<div class="columns">
<div class="column col-12 text-right">
<span>
&#169; 2019 Klaus Ramm
</span>
</div>
<div class="column col-12 text-right">
<span>
(
</span>
<a href="license.html">MIT License</a>
<span>
)
</span>
</div>
</div>
</section>
<section class="nav-col">
<div class="nav-logo-container">
<div class="logo-container logo"></div>
<a href="index.html">
<strong>Struktog.</strong>
</a>
</div>
</div>
</header>
<div class="divider"></div>
<main>
<div class="container">
<div id="optionButtons" class="columns elementButtonColumns">
<div class="column col-6 col-md-12 pt-2">
</div>
<div class="column col-auto elementButtonColumns">
<button class="btn" onclick="document.getElementById('IEModal').classList.add('active');">
</section>
<section class="nav-col">
<div id="optionButtons" class="options-container">
<div class="column container">
<button class="column" onclick="document.getElementById('IEModal').style.display = 'block';">
Import / Export
</button>
</div>
</div>
<div id="editorDisplay" class="columns">
<!-- Container for views -->
</div>
</section>
</header>
<main>
<div id="editorDisplay" class="container">
</div>
<!-- Popup modal for import and export -->
<div class="modal" id="IEModal">
<a href="#"
class="modal-overlay"
aria-label="Close"
onclick="document.getElementById('IEModal').classList.remove('active');"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#"
class="btn btn-clear float-right"
aria-label="Close"
onclick="document.getElementById('IEModal').classList.remove('active');"></a>
<div class="modal-title h5">Import / Export</div>
</div>
<div class="modal-body">
<div class="content">
<div class="container">
<div class="columns">
<div class="column col-12">
<div class="columns">
<div class="col-12 lowerPadding">
<p>
JSON-Import:
</p>
<input id="ImportForm" type="file" class="form-input" \>
</div>
<div class="column col-12">
<p>
Export:
</p>
<div id="Export" class="text-center pt-1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="IEModal" class="modal">
<div class="modal-content">
<span class="close"
onclick="document.getElementById('IEModal').style.display = 'none';">
&times;
</span>
<p>
JSON-Import:
</p>
<input id="ImportForm" type="file" class="form-input" \>
<p>
Export:
</p>
<div id="Export" class="text-center pt-1"></div>
</div>
</div>
</main>
<footer class="container">
<div class="column">
<span>
&#169; 2019 Klaus Ramm
</span>
<span>
(
</span>
<a href="license.html">MIT License</a>
<span>
)
</span>
</div>
</footer>
</body>
</html>
......@@ -32,9 +32,9 @@ window.onload = function() {
// reset button must be last defined
let resetButtonDiv = document.createElement('div');
resetButtonDiv.classList.add('column', 'col-mr-auto');
resetButtonDiv.classLi