Bug 1072279 - Prevent unnecessary scrollbars in Loop conversation window. r=Standard8
authorNicolas Perriault <nperriault@gmail.com>
Thu, 25 Sep 2014 11:28:09 +0100
changeset 225397 97132a8f56dd65338129062167ac0d99395259ec
parent 225396 473d13ee7ce7ef51d215570ef1c80215252c3f28
child 225398 a01b2985cfe6b7e788cb4cab35a77ba179380475
push id3979
push userraliiev@mozilla.com
push dateMon, 13 Oct 2014 16:35:44 +0000
treeherdermozilla-beta@30f2cc610691 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersStandard8
bugs1072279
milestone34.0a2
Bug 1072279 - Prevent unnecessary scrollbars in Loop conversation window. r=Standard8
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/ui/ui-showcase.js
browser/components/loop/ui/ui-showcase.jsx
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -230,22 +230,22 @@
  * but the UI breaks when you pop out
  * Bug 1040985
  */
 .incoming-call {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  min-height: 264px;
+  min-height: 230px;
 }
 
 .incoming-call-action-group {
   display: flex;
-  padding: 2.5em 0;
+  padding: 2.5em 0 0 0;
   width: 100%;
   justify-content: space-around;
 }
 
 .incoming-call-action-group > .btn {
   margin-left: .5em;
 }
 
@@ -358,23 +358,26 @@
 }
 
 /* Feedback form */
 
 .feedback {
   padding: 14px;
 }
 
+.feedback p {
+  margin: 0px;
+}
+
 .feedback h3 {
   color: #666;
   font-size: 12px;
   font-weight: 700;
   text-align: center;
-  margin-bottom: 14px;
-  margin-top: 14px;
+  margin: 0 0 1em 0;
 }
 
 .feedback .faces {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 20px 0;
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/browser/components/loop/ui/ui-showcase.js
@@ -144,33 +144,33 @@
             ), 
             Example({summary: "Error Notification - authenticated", dashed: "true", style: {width: "332px"}}, 
               PanelView({client: mockClient, notifications: errNotifications, 
                          userProfile: {email: "test@example.com"}})
             )
           ), 
 
           Section({name: "IncomingCallView"}, 
-            Example({summary: "Default / incoming video call", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default / incoming video call", dashed: "true", style: {width: "260px", height: "254px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                   video: true})
               )
             ), 
 
-            Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "260px", height: "254px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                   video: false})
               )
             )
           ), 
 
           Section({name: "IncomingCallView-ActiveState"}, 
-            Example({summary: "Default", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default", dashed: "true", style: {width: "260px", height: "254px"}}, 
               React.DOM.div({className: "fx-embedded"}, 
                 IncomingCallView({model: mockConversationModel, 
                                    showDeclineMenu: true, 
                                    video: true})
               )
             )
           ), 
 
@@ -314,23 +314,23 @@
             )
           ), 
 
           Section({name: "FeedbackView"}, 
             React.DOM.p({className: "note"}, 
               React.DOM.strong(null, "Note:"), " For the useable demo, you can access submitted data at ", 
               React.DOM.a({href: "https://input.allizom.org/"}, "input.allizom.org"), "."
             ), 
-            Example({summary: "Default (useable demo)", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Default (useable demo)", dashed: "true", style: {width: "260px"}}, 
               FeedbackView({feedbackApiClient: stageFeedbackApiClient})
             ), 
-            Example({summary: "Detailed form", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Detailed form", dashed: "true", style: {width: "260px"}}, 
               FeedbackView({feedbackApiClient: stageFeedbackApiClient, step: "form"})
             ), 
-            Example({summary: "Thank you!", dashed: "true", style: {width: "280px"}}, 
+            Example({summary: "Thank you!", dashed: "true", style: {width: "260px"}}, 
               FeedbackView({feedbackApiClient: stageFeedbackApiClient, step: "finished"})
             )
           ), 
 
           Section({name: "CallUrlExpiredView"}, 
             Example({summary: "Firefox User"}, 
               CallUrlExpiredView({helper: {isFirefox: returnTrue}})
             ), 
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/browser/components/loop/ui/ui-showcase.jsx
@@ -144,33 +144,33 @@
             </Example>
             <Example summary="Error Notification - authenticated" dashed="true" style={{width: "332px"}}>
               <PanelView client={mockClient} notifications={errNotifications}
                          userProfile={{email: "test@example.com"}} />
             </Example>
           </Section>
 
           <Section name="IncomingCallView">
-            <Example summary="Default / incoming video call" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default / incoming video call" dashed="true" style={{width: "260px", height: "254px"}}>
               <div className="fx-embedded">
                 <IncomingCallView model={mockConversationModel}
                                   video={true} />
               </div>
             </Example>
 
-            <Example summary="Default / incoming audio only call" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default / incoming audio only call" dashed="true" style={{width: "260px", height: "254px"}}>
               <div className="fx-embedded">
                 <IncomingCallView model={mockConversationModel}
                                   video={false} />
               </div>
             </Example>
           </Section>
 
           <Section name="IncomingCallView-ActiveState">
-            <Example summary="Default" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default" dashed="true" style={{width: "260px", height: "254px"}}>
               <div className="fx-embedded" >
                 <IncomingCallView  model={mockConversationModel}
                                    showDeclineMenu={true}
                                    video={true} />
               </div>
             </Example>
           </Section>
 
@@ -314,23 +314,23 @@
             </Example>
           </Section>
 
           <Section name="FeedbackView">
             <p className="note">
               <strong>Note:</strong> For the useable demo, you can access submitted data at&nbsp;
               <a href="https://input.allizom.org/">input.allizom.org</a>.
             </p>
-            <Example summary="Default (useable demo)" dashed="true" style={{width: "280px"}}>
+            <Example summary="Default (useable demo)" dashed="true" style={{width: "260px"}}>
               <FeedbackView feedbackApiClient={stageFeedbackApiClient} />
             </Example>
-            <Example summary="Detailed form" dashed="true" style={{width: "280px"}}>
+            <Example summary="Detailed form" dashed="true" style={{width: "260px"}}>
               <FeedbackView feedbackApiClient={stageFeedbackApiClient} step="form" />
             </Example>
-            <Example summary="Thank you!" dashed="true" style={{width: "280px"}}>
+            <Example summary="Thank you!" dashed="true" style={{width: "260px"}}>
               <FeedbackView feedbackApiClient={stageFeedbackApiClient} step="finished" />
             </Example>
           </Section>
 
           <Section name="CallUrlExpiredView">
             <Example summary="Firefox User">
               <CallUrlExpiredView helper={{isFirefox: returnTrue}} />
             </Example>