Responsive styles for Chrome/Firefox/Phones. Update to 1.0.0-beta.3

This commit is contained in:
pabloFuente 2017-09-04 16:49:39 +02:00
parent 442499bf01
commit aefed80475
10 changed files with 218 additions and 45 deletions

View File

@ -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%;
}
}

View File

@ -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;
}
}

View File

@ -4,7 +4,7 @@
<groupId>io.openvidu</groupId>
<artifactId>openvidu-js-java</artifactId>
<version>1.0.0-beta.1</version>
<version>1.0.0-beta.3</version>
<packaging>jar</packaging>
<name>openvidu-js-java</name>
@ -95,7 +95,7 @@
<dependency>
<groupId>io.openvidu</groupId>
<artifactId>openvidu-java-client</artifactId>
<version>1.0.0-beta.1</version>
<version>1.0.0-beta.3</version>
</dependency>
</dependencies>

View File

@ -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 {

View File

@ -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"
}
}

View File

@ -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 {

View File

@ -4,7 +4,7 @@
<groupId>io.openvidu</groupId>
<artifactId>openvidu-mvc-java</artifactId>
<version>1.0.0-beta.1</version>
<version>1.0.0-beta.3</version>
<packaging>jar</packaging>
<parent>
@ -41,7 +41,7 @@
<dependency>
<groupId>io.openvidu</groupId>
<artifactId>openvidu-java-client</artifactId>
<version>1.0.0-beta.1</version>
<version>1.0.0-beta.3</version>
</dependency>
</dependencies>

View File

@ -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 {

View File

@ -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"
}
}

View File

@ -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 {