Skip to content
Snippets Groups Projects
Commit c9e6469b authored by Yuriy Maksymets's avatar Yuriy Maksymets
Browse files

CSS fixes and improvements

parent 9ed89c0f
No related branches found
No related tags found
1 merge request!28Rooms and frontend
Pipeline #101590 passed
Stage: fetch
Stage: deps
Stage: check
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 4
− 4
View file @ c9e6469b
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
</script> </script>
</head> </head>
<body style="background-color: black"> <body>
<div style="display:none"> <div style="display:none">
Your client ID: <input id="user-id" type="text" value="" readonly="" /> Your client ID: <input id="user-id" type="text" value="" readonly="" />
</div> </div>
...@@ -51,19 +51,19 @@ ...@@ -51,19 +51,19 @@
size="25" size="25"
color="gray" color="gray"
/> />
<button id="room-connect">Connect<i class="fa fa-link"></i></button> <button id="room-connect">Connect <i class="fa fa-link"></i></button>
</div> </div>
<div id="connected-room-info"> <div id="connected-room-info">
You are connected to a room: <span id="connected-room-id"></span> You are connected to a room: <span id="connected-room-id"></span>
</div> </div>
<div> <div style="display: none;">
<button id="pen-tool" class="selected"> <button id="pen-tool" class="selected">
<i class="fa fa-paint-brush"></i> <i class="fa fa-paint-brush"></i>
</button> </button>
<button id="eraser-tool"><i class="fa fa-eraser"></i></button> <button id="eraser-tool"><i class="fa fa-eraser"></i></button>
</div> </div>
<svg id="canvas" style="background-color: white"> <svg id="canvas">
<defs> <defs>
<marker <marker
id="dot" id="dot"
......
public/styles.css
+ 30
− 6
View file @ c9e6469b
body {
background-color: black;
}
#canvas { #canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: absolute;
background-color: white;
z-index: -1;
} }
#connected-room-info { #connected-room-info {
...@@ -14,10 +20,12 @@ button.selected { ...@@ -14,10 +20,12 @@ button.selected {
.top-bar { .top-bar {
background-color: black; background-color: black;
opacity: 0.8;
width: 100%; width: 100%;
height: 37pt; height: 36pt;
float: left; float: left;
display: flex;
align-items: center;
z-index: 999;
} }
.dropdown { .dropdown {
...@@ -29,7 +37,6 @@ button.selected { ...@@ -29,7 +37,6 @@ button.selected {
.dropdown-peers { .dropdown-peers {
background-color: #2f2f2f; background-color: #2f2f2f;
color: white; color: white;
padding: 12px;
font-size: 16px; font-size: 16px;
border: none; border: none;
cursor: pointer; cursor: pointer;
...@@ -43,7 +50,8 @@ button.selected { ...@@ -43,7 +50,8 @@ button.selected {
background-color: #f9f9f9; background-color: #f9f9f9;
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1; z-index: 999;
padding: 16px;
} }
.peers a { .peers a {
...@@ -57,6 +65,22 @@ button.selected { ...@@ -57,6 +65,22 @@ button.selected {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
#connected-peers {
white-space: nowrap;
list-style: none;
padding: 0 0 4px 0;
margin: 0;
}
#connected-peers li {
border-bottom: 1px solid black;
padding: 4px 0;
}
#connected-peers li:last-child {
border-bottom-width: 0px;
}
.dropdown:hover .peers { .dropdown:hover .peers {
display: block; display: block;
} }
...@@ -66,7 +90,7 @@ button.selected { ...@@ -66,7 +90,7 @@ button.selected {
} }
#room-id { #room-id {
width: 90%; flex: 1;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0.8; opacity: 0.8;
......
src/app.js
+ 0
− 4
View file @ c9e6469b
...@@ -131,10 +131,6 @@ function removeAllChildrenNodes(element) { ...@@ -131,10 +131,6 @@ function removeAllChildrenNodes(element) {
function setBlankUIState() { function setBlankUIState() {
removeAllChildrenNodes(HTML.canvas) removeAllChildrenNodes(HTML.canvas)
removeAllChildrenNodes(HTML.connectedPeers) removeAllChildrenNodes(HTML.connectedPeers)
// Removes all event listeners from canvas
// const newCanvas = HTML.canvas.cloneNode(true)
// canvas.parentNode.replaceChild(newCanvas, canvas)
} }
function handleRoomConnectClick() { function handleRoomConnectClick() {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment