Bug 1097743 - Improved Loop standalone UI/X on smaller screens. r=dmose a=sylvestre
authorNicolas Perriault <nperriault@mozilla.com>
Mon, 15 Dec 2014 16:56:34 +0100
changeset 234269 7e859c2b666ce4ab2514ec05c48bf4ad2796942f
parent 234268 61d0ddf2616717eaf900db79efaec62490e4977e
child 234270 795f30c3ccb2a20e0bef517b475e4e96e7d19399
push id4255
push userrjesup@wgate.com
push dateFri, 19 Dec 2014 14:50:52 +0000
treeherdermozilla-beta@c3f4398fe28c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdmose, sylvestre
bugs1097743
milestone35.0
Bug 1097743 - Improved Loop standalone UI/X on smaller screens. r=dmose a=sylvestre
browser/components/loop/content/shared/css/conversation.css
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -723,36 +723,31 @@ html, .fx-embedded, #main,
  * Rooms
  */
 
 .room-conversation-wrapper {
   position: relative;
   height: 100%;
 }
 
-.standalone .room-conversation-wrapper {
-  height: calc(100% - 50px - 60px);
-  background: #000;
-}
-
 .room-conversation-wrapper header {
   background: #000;
   height: 50px;
   text-align: left;
   width: 75%;
 }
 
 .room-conversation-wrapper header h1 {
   font-size: 1.5em;
   color: #fff;
   line-height: 50px;
-  text-indent: 50px;
+  text-indent: 60px;
   background-image: url("../img/firefox-logo.png");
   background-size: 30px;
-  background-position: 10px;
+  background-position: 20px;
   background-repeat: no-repeat;
   display: inline-block;
 }
 
 .room-conversation-wrapper header a {
   float: right;
 }
 
@@ -812,39 +807,46 @@ html, .fx-embedded, #main,
   position: absolute;
   bottom: 10px;
 }
 
 /* Standalone rooms */
 
 .standalone .room-conversation-wrapper {
   position: relative;
+  height: 100%;
+  background: #000;
 }
 
-.standalone .room-inner-info-area {
+.standalone .room-conversation-wrapper .video-layout-wrapper {
+  height: calc(100% - 50px - 60px);
+}
+
+.standalone .room-conversation-wrapper .room-inner-info-area {
   position: absolute;
-  top: 50%;
+  top: calc(50% - 1em);
   left: 0;
   right: 25%;
   z-index: 1000;
   margin: 0 auto;
+  padding: 0 1rem;
   width: 50%;
   color: #fff;
   font-weight: bold;
   font-size: 1.1em;
 }
 
-.standalone .room-inner-info-area button {
+.standalone .room-conversation-wrapper .room-inner-info-area button {
   border-radius: 3px;
   font-size: 1.2em;
   padding: .2em 1.2em;
   cursor: pointer;
 }
 
-.standalone .room-inner-info-area a.btn {
+.standalone .room-conversation-wrapper .room-inner-info-area a.btn {
   padding: .5em 3em .3em 3em;
   border-radius: 3px;
   font-weight: normal;
   max-width: 400px;
 }
 
 .standalone .room-conversation h2.room-name {
   position: absolute;
@@ -879,8 +881,54 @@ html, .fx-embedded, #main,
 .standalone .room-conversation .conversation-toolbar .btn-hangup-entry {
   display: block;
 }
 
 .standalone .room-conversation-wrapper .ended-conversation {
   position: relative;
   height: auto;
 }
+
+
+@media screen and (max-width:640px) {
+  /* Rooms specific responsive styling */
+  .standalone .room-conversation {
+    background: #000;
+  }
+  .room-conversation-wrapper header {
+    width: 100%;
+  }
+  .standalone .room-conversation-wrapper .room-inner-info-area {
+    right: 0;
+    margin: auto;
+    width: 100%;
+  }
+  .standalone .room-conversation-wrapper .video-layout-wrapper {
+    /* 50px: header's height; 25px: footer's height */
+    height: calc(100% - 50px - 25px);
+  }
+  .standalone .room-conversation .video_wrapper.remote_wrapper {
+    width: 100%;
+  }
+  .standalone .room-conversation .local-stream {
+    /* Assumes 4:3 aspect ratio */
+    width: 180px;
+    height: 135px;
+  }
+  .standalone .conversation-toolbar {
+    height: 38px;
+    padding: 8px;
+  }
+  .standalone .media.nested {
+    /* This forces the remote video stream to fit within wrapper's height */
+    min-height: 0px;
+  }
+  .standalone .room-conversation-wrapper footer {
+    font-size: 80%;
+    height: 25px;
+  }
+  .standalone .room-conversation-wrapper footer p {
+    padding-top: 4px;
+  }
+  .standalone .room-conversation-wrapper footer .footer-logo {
+    display: none;
+  }
+}