Commit c858a211 authored by marioromera's avatar marioromera
Browse files

fix wrong display and process.env

parent 0a29c950
This diff is collapsed.
......@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=0" />
<title>POC_WORKSHOP</title>
<link rel="shortcut icon" href="./favicon.ico" />
......
......@@ -19,6 +19,19 @@ import Drawing from './components/drawing';
const draw = new Drawing('#drawing-svg');
const idContainer = document
.querySelector('.id-container')
.getBoundingClientRect().height;
const webRTC = document.querySelector('.webRTC').getBoundingClientRect().height;
const drawingContainer = document.querySelector('.drawing-container');
var windowHeight =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
drawingContainer.style.height =
windowHeight - (idContainer + webRTC + 20) + 'px';
// Function to send data to other peers
import { createPeer, setAnswer, setOffer } from './peer';
import { updateGossipData } from './scuttlebutt';
......
......@@ -7,11 +7,14 @@ body {
font-family: TerminalGrotesque;
background-image: linear-gradient(lightblue, yellow);
font-size: 12px;
font-size: 1em;
width: 100%;
height: 100%;
}
* {
box-sizing: border-box;
}
.app {
position: absolute;
......@@ -19,13 +22,15 @@ body {
left: 0;
width: 100%;
height: 100%;
display: flex;
display: block;
flex-flow: column nowrap;
overflow: hidden;
}
.id-container {
flex: 0.1;
height: 10%;
width: 100%;
display: flex;
align-items: center;
font-weight: 600;
......@@ -55,16 +60,14 @@ body {
flex: 1;
align-items: center;
justify-content: center;
position: relative;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
align-items: center;
justify-content: center;
flex: 1;
width: 100%;
height: 100%;
......@@ -73,21 +76,18 @@ body {
}
}
.btn:hover {
color: #000000;
background-color: #ffffff;
}
.webRTC {
flex: 1;
display: flex;
flex-direction: column;
margin: 5px;
position: relative;
.scuttlebutt {
width: 100%;
}
.p2p-containers {
display: flex;
flex: 1 0 auto;
justify-content: space-around;
width: 100%;
......@@ -100,8 +100,13 @@ body {
padding: 5px;
}
}
.btn:hover {
color: #000000;
background-color: #ffffff;
}
.btn {
width: 60%;
flex-shrink: 0;
height: 90%;
padding: 25% 0;
......@@ -117,6 +122,7 @@ body {
textarea {
border-radius: 5px;
width: 50%;
min-height: 50%;
padding-bottom: 20%;
}
......@@ -129,11 +135,11 @@ body {
}
.drawing-container {
flex: 2;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
}
......
......@@ -5,7 +5,11 @@ import { drawAnswer, drawOffer } from '.';
console.log('Initializing socket connection');
const socket = io('localhost:7000');
const socket = io(
process.env.NODE_ENV === 'production'
? '193.170.194.211:7000'
: 'localhost:7000'
);
socket.on('error', (err) => {
console.error(err);
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment