From aefed80475aee98a5c856d9a64bc914b6ba668ba Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Mon, 4 Sep 2017 16:49:39 +0200 Subject: [PATCH] Responsive styles for Chrome/Firefox/Phones. Update to 1.0.0-beta.3 --- openvidu-getaroom/web/style.css | 30 +++++++--- openvidu-insecure-js/web/style.css | 57 +++++++++++++++---- openvidu-js-java/pom.xml | 4 +- .../src/main/resources/static/style.css | 45 +++++++++++++-- openvidu-js-node/package.json | 2 +- openvidu-js-node/public/style.css | 45 +++++++++++++-- openvidu-mvc-java/pom.xml | 4 +- .../src/main/resources/static/style.css | 37 ++++++++++-- openvidu-mvc-node/package.json | 2 +- openvidu-mvc-node/public/style.css | 37 ++++++++++-- 10 files changed, 218 insertions(+), 45 deletions(-) diff --git a/openvidu-getaroom/web/style.css b/openvidu-getaroom/web/style.css index 075d0575..1d0fbea6 100644 --- a/openvidu-getaroom/web/style.css +++ b/openvidu-getaroom/web/style.css @@ -45,8 +45,8 @@ nav i.fa:hover { } .vertical-center { - position: absolute; - top: 51%; + position: relative; + top: 30%; left: 50%; transform: translate(-50%, -50%); } @@ -137,8 +137,8 @@ a:hover .demo-logo { #img-div { text-align: center; - position: absolute; - top: 26%; + position: relative; + top: 20%; left: 50%; transform: translate(-50%, -50%); } @@ -229,14 +229,30 @@ video { /* xs ans md screen resolutions*/ -@media screen and (max-width: 991px) { +@media screen and (max-width: 991px) and (orientation: portrait) { .vertical-center { width: 85%; padding-top: 10px; - top: 57%; + top: 27%; } + .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { + margin-right: 0; + margin-left: 0; + } + .navbar-header i.fa { + font-size: 30px; + } + .navbar-header a.nav-icon { + padding: 7px 3px 7px 3px; + } +} + +@media only screen and (max-height: 767px) and (orientation: landscape) { #img-div { - top: 32%; + top: 10%; + } + .vertical-center { + top: 27%; } } diff --git a/openvidu-insecure-js/web/style.css b/openvidu-insecure-js/web/style.css index b471e392..967e5061 100644 --- a/openvidu-insecure-js/web/style.css +++ b/openvidu-insecure-js/web/style.css @@ -43,12 +43,12 @@ nav i.fa:hover { padding-bottom: 80px; } -.vertical-center { - position: absolute; - top: 56%; +/*vertical-center { + position: relative; + top: 30%; left: 50%; transform: translate(-50%, -50%); -} +}*/ .horizontal-center { margin: 0 auto; @@ -124,6 +124,12 @@ a:hover .demo-logo { filter: brightness(0.7); } +#join-dialog { + margin-left: auto; + margin-right: auto; + max-width: 70%; +} + #join-dialog h1 { color: #4d4d4d; font-weight: bold; @@ -132,10 +138,12 @@ a:hover .demo-logo { #img-div { text-align: center; - position: absolute; - top: 19%; + margin-top: 3em; + margin-bottom: 3em; + /*position: relative; + top: 20%; left: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%);*/ } #img-div img { @@ -224,10 +232,35 @@ video { /* xs ans md screen resolutions*/ -@media screen and (max-width: 991px) { - .vertical-center { - width: 85%; - padding-top: 10px; - top: 57%; +@media screen and (max-width: 991px) and (orientation: portrait) { + #join-dialog { + max-width: inherit; + } + #img-div img { + height: 10%; + } + #img-div { + margin-top: 2em; + margin-bottom: 2em; + } + .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { + margin-right: 0; + margin-left: 0; + } + .navbar-header i.fa { + font-size: 30px; + } + .navbar-header a.nav-icon { + padding: 7px 3px 7px 3px; + } +} + +@media only screen and (max-height: 767px) and (orientation: landscape) { + #img-div { + margin-top: 1em; + margin-bottom: 1em; + } + #join-dialog { + max-width: inherit; } } \ No newline at end of file diff --git a/openvidu-js-java/pom.xml b/openvidu-js-java/pom.xml index 090c2a0b..1ce82a01 100644 --- a/openvidu-js-java/pom.xml +++ b/openvidu-js-java/pom.xml @@ -4,7 +4,7 @@ io.openvidu openvidu-js-java - 1.0.0-beta.1 + 1.0.0-beta.3 jar openvidu-js-java @@ -95,7 +95,7 @@ io.openvidu openvidu-java-client - 1.0.0-beta.1 + 1.0.0-beta.3 diff --git a/openvidu-js-java/src/main/resources/static/style.css b/openvidu-js-java/src/main/resources/static/style.css index 1b9bb6b1..20fd6f4e 100644 --- a/openvidu-js-java/src/main/resources/static/style.css +++ b/openvidu-js-java/src/main/resources/static/style.css @@ -44,10 +44,23 @@ nav i.fa:hover { } .vertical-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + width: -webkit-fit-content; + width: fit-content; + margin: auto; +} + +.vertical-center#not-logged form { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center#not-logged table { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center table { + margin-top: 3em !important; } .horizontal-center { @@ -158,6 +171,14 @@ a:hover .demo-logo { filter: brightness(0.7); } +#join { + padding-top: 40px; +} + +#not-logged { + padding-top: 40px; +} + #join-dialog h1 { color: #4d4d4d; font-weight: bold; @@ -198,6 +219,10 @@ a:hover .demo-logo { margin-bottom: 20px; } +#session-header form { + display: inline; +} + #session-title { display: inline-block; } @@ -306,6 +331,10 @@ table i { text-align: right; } +#login-info form { + display: inline; +} + #login-info div { display: inline; margin-right: 1em; @@ -319,6 +348,13 @@ table i { /* xs ans md screen resolutions*/ @media screen and (max-width: 991px) { + #join { + padding-top: inherit; + } + + #not-logged { + padding-top: inherit; + } .container .navbar-header { margin-right: 0 !important; margin-left: 0 !important; @@ -330,7 +366,6 @@ table i { font-size: 32px; } .vertical-center { - width: 85%; padding-top: 10px; } #img-div { diff --git a/openvidu-js-node/package.json b/openvidu-js-node/package.json index e58f8d08..09b6321a 100644 --- a/openvidu-js-node/package.json +++ b/openvidu-js-node/package.json @@ -20,6 +20,6 @@ "body-parser": "^1.17.2", "express": "^4.15.3", "express-session": "^1.15.3", - "openvidu-node-client": "1.0.1-beta.1" + "openvidu-node-client": "1.0.1-beta.3" } } diff --git a/openvidu-js-node/public/style.css b/openvidu-js-node/public/style.css index 1b9bb6b1..20fd6f4e 100644 --- a/openvidu-js-node/public/style.css +++ b/openvidu-js-node/public/style.css @@ -44,10 +44,23 @@ nav i.fa:hover { } .vertical-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + width: -webkit-fit-content; + width: fit-content; + margin: auto; +} + +.vertical-center#not-logged form { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center#not-logged table { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center table { + margin-top: 3em !important; } .horizontal-center { @@ -158,6 +171,14 @@ a:hover .demo-logo { filter: brightness(0.7); } +#join { + padding-top: 40px; +} + +#not-logged { + padding-top: 40px; +} + #join-dialog h1 { color: #4d4d4d; font-weight: bold; @@ -198,6 +219,10 @@ a:hover .demo-logo { margin-bottom: 20px; } +#session-header form { + display: inline; +} + #session-title { display: inline-block; } @@ -306,6 +331,10 @@ table i { text-align: right; } +#login-info form { + display: inline; +} + #login-info div { display: inline; margin-right: 1em; @@ -319,6 +348,13 @@ table i { /* xs ans md screen resolutions*/ @media screen and (max-width: 991px) { + #join { + padding-top: inherit; + } + + #not-logged { + padding-top: inherit; + } .container .navbar-header { margin-right: 0 !important; margin-left: 0 !important; @@ -330,7 +366,6 @@ table i { font-size: 32px; } .vertical-center { - width: 85%; padding-top: 10px; } #img-div { diff --git a/openvidu-mvc-java/pom.xml b/openvidu-mvc-java/pom.xml index 97fa7807..112454d4 100644 --- a/openvidu-mvc-java/pom.xml +++ b/openvidu-mvc-java/pom.xml @@ -4,7 +4,7 @@ io.openvidu openvidu-mvc-java - 1.0.0-beta.1 + 1.0.0-beta.3 jar @@ -41,7 +41,7 @@ io.openvidu openvidu-java-client - 1.0.0-beta.1 + 1.0.0-beta.3 diff --git a/openvidu-mvc-java/src/main/resources/static/style.css b/openvidu-mvc-java/src/main/resources/static/style.css index 06c04298..20fd6f4e 100644 --- a/openvidu-mvc-java/src/main/resources/static/style.css +++ b/openvidu-mvc-java/src/main/resources/static/style.css @@ -44,10 +44,23 @@ nav i.fa:hover { } .vertical-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + width: -webkit-fit-content; + width: fit-content; + margin: auto; +} + +.vertical-center#not-logged form { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center#not-logged table { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center table { + margin-top: 3em !important; } .horizontal-center { @@ -158,6 +171,14 @@ a:hover .demo-logo { filter: brightness(0.7); } +#join { + padding-top: 40px; +} + +#not-logged { + padding-top: 40px; +} + #join-dialog h1 { color: #4d4d4d; font-weight: bold; @@ -327,6 +348,13 @@ table i { /* xs ans md screen resolutions*/ @media screen and (max-width: 991px) { + #join { + padding-top: inherit; + } + + #not-logged { + padding-top: inherit; + } .container .navbar-header { margin-right: 0 !important; margin-left: 0 !important; @@ -338,7 +366,6 @@ table i { font-size: 32px; } .vertical-center { - width: 85%; padding-top: 10px; } #img-div { diff --git a/openvidu-mvc-node/package.json b/openvidu-mvc-node/package.json index 66948808..e59f8839 100644 --- a/openvidu-mvc-node/package.json +++ b/openvidu-mvc-node/package.json @@ -21,6 +21,6 @@ "ejs": "^2.5.6", "express": "^4.15.3", "express-session": "^1.15.3", - "openvidu-node-client": "1.0.1-beta.1" + "openvidu-node-client": "1.0.1-beta.3" } } diff --git a/openvidu-mvc-node/public/style.css b/openvidu-mvc-node/public/style.css index 06c04298..20fd6f4e 100644 --- a/openvidu-mvc-node/public/style.css +++ b/openvidu-mvc-node/public/style.css @@ -44,10 +44,23 @@ nav i.fa:hover { } .vertical-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + width: -webkit-fit-content; + width: fit-content; + margin: auto; +} + +.vertical-center#not-logged form { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center#not-logged table { + width: -moz-fit-content; + margin: auto; +} + +.vertical-center table { + margin-top: 3em !important; } .horizontal-center { @@ -158,6 +171,14 @@ a:hover .demo-logo { filter: brightness(0.7); } +#join { + padding-top: 40px; +} + +#not-logged { + padding-top: 40px; +} + #join-dialog h1 { color: #4d4d4d; font-weight: bold; @@ -327,6 +348,13 @@ table i { /* xs ans md screen resolutions*/ @media screen and (max-width: 991px) { + #join { + padding-top: inherit; + } + + #not-logged { + padding-top: inherit; + } .container .navbar-header { margin-right: 0 !important; margin-left: 0 !important; @@ -338,7 +366,6 @@ table i { font-size: 32px; } .vertical-center { - width: 85%; padding-top: 10px; } #img-div {