Added mobile "support"

delete_edge
Ugo Finnendahl 5 years ago
parent e2bb890704
commit 249f322c37
  1. 8
      frontend/assets/css/src/style.scss
  2. 2
      frontend/assets/css/style.min.css
  3. 1
      frontend/assets/js/canvas.js
  4. 1
      frontend/index.html
  5. 12
      main.py

@ -5,11 +5,9 @@ $main-color: rgb(240, 141, 25);
margin:0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto-Regular";
}
body{
font-family: Roboto;
}
main{
position: relative;
height: 100vh;
@ -49,7 +47,9 @@ main{
position: absolute;
border: none;
padding: 0.6em 1em;
width: 50px;
width: 200px;
font-size: 1.2em;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
}

@ -1 +1 @@
*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto}main{position:relative;height:100vh}main #infobar{position:absolute;top:0;width:100%;padding:0.4em;background-color:rgba(232,9,9,0.4);border:4px solid rgba(232,9,9,0.8);text-align:center;font-weight:bold;font-size:1.8em;z-index:1;transform:translateY(-100%);transition:transform 1s}main #infobar.active{transform:translateY(0%)}main .canvas{background-color:lightgrey;position:relative;height:100%}main .canvas .background{position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.5);width:100%;height:100%}main .canvas input{position:absolute;border:none;padding:0.6em 1em;width:50px;transform:translateX(-50%) translateY(-50%)}main nav,main footer{display:flex;position:absolute;top:1em;left:1em;opacity:0.9}main nav button,main footer button{display:block;background-color:#939292;border:none;border-radius:1em;padding:1em 1em;min-width:8em;margin:0.4em;color:black;border:solid 2px #131313;box-shadow:2px 2px 8px rgba(0,0,0,0.5)}main nav button:focus,main footer button:focus{outline:none}main nav button::-moz-focus-inner,main footer button::-moz-focus-inner{border:0}main nav button:hover,main footer button:hover{background-color:#acacac;border-color:#000;cursor:pointer}main nav button.active,main footer button.active{background-color:#f08d19}main nav button h1,main footer button h1{text-align:center;font-size:1.4em;font-weight:normal;white-space:nowrap}main nav button img,main footer button img{display:block;margin:0 auto 0.5em auto;width:2em}main footer{top:auto;left:auto;bottom:1em;right:1em}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Roboto-Regular"}main{position:relative;height:100vh}main #infobar{position:absolute;top:0;width:100%;padding:0.4em;background-color:rgba(232,9,9,0.4);border:4px solid rgba(232,9,9,0.8);text-align:center;font-weight:bold;font-size:1.8em;z-index:1;transform:translateY(-100%);transition:transform 1s}main #infobar.active{transform:translateY(0%)}main .canvas{background-color:lightgrey;position:relative;height:100%}main .canvas .background{position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.5);width:100%;height:100%}main .canvas input{position:absolute;border:none;padding:0.6em 1em;width:200px;font-size:1.2em;text-align:center;transform:translateX(-50%) translateY(-50%)}main nav,main footer{display:flex;position:absolute;top:1em;left:1em;opacity:0.9}main nav button,main footer button{display:block;background-color:#939292;border:none;border-radius:1em;padding:1em 1em;min-width:8em;margin:0.4em;color:black;border:solid 2px #131313;box-shadow:2px 2px 8px rgba(0,0,0,0.5)}main nav button:focus,main footer button:focus{outline:none}main nav button::-moz-focus-inner,main footer button::-moz-focus-inner{border:0}main nav button:hover,main footer button:hover{background-color:#acacac;border-color:#000;cursor:pointer}main nav button.active,main footer button.active{background-color:#f08d19}main nav button h1,main footer button h1{text-align:center;font-size:1.4em;font-weight:normal;white-space:nowrap}main nav button img,main footer button img{display:block;margin:0 auto 0.5em auto;width:2em}main footer{top:auto;left:auto;bottom:1em;right:1em}

@ -152,6 +152,7 @@ function draw_new_node(name, x, y) {
group.add(box);
group.add(simpleText);
group.on("click", on_node_click);
group.on('tap', on_node_click);
group.on('dragstart', function() {
group.attrs.dragging = true;
});

@ -5,6 +5,7 @@
<title>Assignment</title>
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/roboto.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.min.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/konva@4.0.7/konva.min.js"></script>
</head>
<body>

@ -7,11 +7,11 @@ app.static_folder = "frontend/assets/"
graph = {
"A": {"B":10},
"B": {"E":10, "D":10, "C":10, "A":10},
"C": {"B":10, "D":10},
"D": {"B":10, "C":10},
"E": {"B":10}
# "A": {"B":10},
# "B": {"E":10, "D":10, "C":10, "A":10},
# "C": {"B":10, "D":10},
# "D": {"B":10, "C":10},
# "E": {"B":10}
}
@ -132,4 +132,4 @@ def index():
if __name__ == '__main__':
app.run(host="127.0.0.1", debug=True, port=5000)
app.run(host="0.0.0.0", debug=True, port=5000)

Loading…
Cancel
Save