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 249535 5442bb7741fc445b6c5aa72fb8bed66ace5f37a8
parent 249534 f160bb5abec102a8b0272a6bb77c73c5c3c39f15
child 249536 1eddcba043a009810cb3e087be729c4e3d36ea45
push id28929
push userryanvm@gmail.com
push dateThu, 18 Jun 2015 19:51:41 +0000
treeherdermozilla-central@d56a1257088e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1168829
milestone41.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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%;