Fix telephone icon + some css size fixes

master
Stefan Otto 2018-11-16 14:39:41 +01:00
parent 250b008f58
commit f9e0049e4d
2 changed files with 24 additions and 24 deletions

View File

@ -2,12 +2,12 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Meet</title> <title>Multiparty Meeting</title>
</head> </head>
<style> <style>
body{ body{
margin:auto; margin:auto;
padding:0.5em; padding:0.5vmin;
text-align:center; text-align:center;
position: fixed; position: fixed;
left: 50%; left: 50%;
@ -18,50 +18,50 @@
background-attachment: fixed; background-attachment: fixed;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: repeat;
} }
input:hover {opacity:0.9;} input:hover {opacity:0.9;}
input[type=text]{ input[type=text]{
font-size: 3vh; font-size: 1.5em;
padding: 1.5vh; padding: 1.5vmin;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
border: 0; border: 0;
color: #fff; color: #fff;
margin: 0.6vh; margin: 0.8vmin;
width: 50%; width: 50%;
} }
button:hover {background-color: #28bd7b;} button:hover {background-color: #28bd7b;}
button{ button{
font-size: 3vh; font-size: 1.5em;
padding: 1.5vh; padding: 1.5vmin;
margin: 0.6vh; margin: 0.8vmin;
background-color: #38cd8b; background-color: #38cd8b;
border-radius: 1.2vh; border-radius: 1.8vmin;
color: #fff; color: #fff;
border: 0; border: 0;
} }
img{ img{
height: 10vh; height: 15vmin;
} }
</style> </style>
<body> <body>
<a> <a>
<img class='logoStartscreen' src='/resources/images/logo.svg'></img><br> <img src='/resources/images/logo.svg'></img><br>
</a> </a>
<input id="room" type="text" onkeypress="checkEnter(event)" value="" placeholder="your room name"> <input id="room" type="text" onkeypress="checkEnter(event)" value="" placeholder="your room name">
<button onclick = "start(location.href)">Start room</button> <button onclick = "start(location.href)">Go to room</button>
</body> </body>
<script> <script>
var room = document.getElementById("room"); var room = document.getElementById("room");
var stateObj = { foo: "bar" }; var stateObj = { foo: "bar" };
room.addEventListener("input", function(e) { room.addEventListener("input", function(e) {
console.log(e.charCode); console.log(e.charCode);
history.replaceState(stateObj, "meet", "/"+room.value); history.replaceState(stateObj, "Multiparty Meeting", "/"+room.value);
},true); },true);
room.focus(); room.focus();
function start(target){ function start(target){
location.href;history.replaceState(stateObj, "meet", "/"); location.href;history.replaceState(stateObj, "Multiparty Meeting", "/");
window.location = target; window.location = target;
} }
function checkEnter(event){ function checkEnter(event){

View File

@ -9,13 +9,13 @@
align-items: center; align-items: center;
+desktop() { +desktop() {
left: 20px; left: 1.0em;
width: 36px; width: 2.6em;
} }
+mobile() { +mobile() {
left: 10px; left: 0.5em;
width: 32px; width: 2.6em;
} }
> .button { > .button {
@ -34,13 +34,13 @@
justify-content: center; justify-content: center;
+desktop() { +desktop() {
height: 36px; height: 2.5em;
width: 36px; width: 2.5em;
} }
+mobile() { +mobile() {
height: 32px; height: 2.5em;
width: 32px; width: 2.5em;
} }
&.on { &.on {
@ -110,7 +110,7 @@
} }
&.leave-meeting { &.leave-meeting {
background-image: url('/resources/images/leave-meeting.svg'); background-image: url('/resources/images/cancel.svg');
} }
} }
} }