Bug 1168829 - Part 3. Fix some RTL issues associated with the new layout for Loop's text-chat. r=mikedeboer
authorMark Banner <standard8@mozilla.com>
Thu, 18 Jun 2015 14:18:02 +0100
changeset 249429 5442bb7741fc445b6c5aa72fb8bed66ace5f37a8
parent 249428 f160bb5abec102a8b0272a6bb77c73c5c3c39f15
child 249430 1eddcba043a009810cb3e087be729c4e3d36ea45
push id13634
push usermbanner@mozilla.com
push dateThu, 18 Jun 2015 13:18:38 +0000
treeherderfx-team@1eddcba043a0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1168829
milestone41.0a1
Bug 1168829 - Part 3. Fix some RTL issues associated with the new layout for Loop's text-chat. r=mikedeboer
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/standalone/content/css/webapp.css
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -745,33 +745,45 @@ html, .fx-embedded, #main,
 
 .room-conversation-wrapper header {
   background: #000;
   height: 50px;
   text-align: left;
   margin: 0 10px;
 }
 
+html[dir="rtl"] .room-conversation-wrapper header {
+  text-align: right;
+}
+
 .room-conversation-wrapper header h1 {
   font-size: 1.5em;
   color: #fff;
   line-height: 50px;
   text-indent: 40px;
   background-image: url("../img/firefox-logo.png");
   background-size: 30px;
   background-position: 0 center;
   background-repeat: no-repeat;
   display: inline-block;
   margin: 0 10px;
 }
 
+html[dir="rtl"] .room-conversation-wrapper header h1 {
+  background-position: 100% center;
+}
+
 .room-conversation-wrapper header a {
   float: right;
 }
 
+html[dir="rtl"] .room-conversation-wrapper header a {
+  float: left;
+}
+
 .room-conversation-wrapper header .icon-help {
   display: inline-block;
   background-size: contain;
   margin-top: 15px;
   width: 20px;
   height: 20px;
   background: transparent url("../img/svg/glyph-help-16x16.svg") no-repeat;
 }
@@ -1291,16 +1303,21 @@ html[dir="rtl"] .room-context-btn-edit {
   left: 25%;
   z-index: 1000;
   /* `width` here is specified by the design spec. */
   width: 250px;
   color: #fff;
   box-sizing: content-box;
 }
 
+html[dir="rtl"] .standalone .room-conversation-wrapper .room-inner-info-area {
+  right: 25%;
+  left: auto;
+}
+
 .standalone .prompt-media-message {
   padding-top: 136px; /* Fallback for browsers that don't support calc() */
   /* 122px is 2x the intrinsic height of the background-image, and
      1rem puts one line of margin between the background-image and
      supporting text. */
   padding-top: calc(122px + 1rem);
   color: #000;
   background-color: #fff;
--- a/browser/components/loop/standalone/content/css/webapp.css
+++ b/browser/components/loop/standalone/content/css/webapp.css
@@ -349,16 +349,21 @@ p.standalone-btn-label {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   border-radius: 3px;
   z-index: 1002; /* ensures the form is always on top of the control bar */
 }
 .standalone .room-conversation-wrapper .ended-conversation .feedback {
   right: 35%;
 }
 
+html[dir="rtl"] .standalone .room-conversation-wrapper .ended-conversation .feedback {
+  right: auto;
+  left: 35%;
+}
+
 .standalone .ended-conversation .local-stream {
   /* Hide  local media stream when feedback form is shown. */
   display: none;
 }
 
 @media screen and (max-width:640px) {
   .standalone .ended-conversation .feedback {
     width: 92%;