Merge pull request #68 from jonathanKingston/onboarding-flicker-fix

Fixing onboarding flicker, moving to flex and also using logical CSS
mozilla · Jan 10, 2017 · a6bfaab · a6bfaab
2 parents c3bfe26 + 8209d1d
commit a6bfaab
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/webextension/css/popup.css b/webextension/css/popup.css
@@ -1,23 +1,37 @@
 body {
   background: #FAFAFA;
-  min-width: 200px;
-  max-width: 400px;
+  min-inline-size: 200px;
+  max-inline-size: 400px;
 }
 
 table {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .onboarding {
-  margin-top: 16px;
+  margin: 16px;
+  min-block-size: 480px;
+
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+.onboarding h3 {
+  margin-block-start: 16px;
 }
 
 .onboarding * {
   text-align: center;
 }
 
+/* Make button placement to be consistent on tour */
+.onboarding .spacing {
+  margin-block-start: auto;
+}
+
 .popup-bumper {
-  width: 100%;
+  inline-size: 100%;
   padding: .5em;
 }
 
@@ -26,8 +40,8 @@ table {
 }
 
 .icon {
-  max-width: 16px;
-  height: 16px;
+  max-inline-size: 16px;
+  block-size: 16px;
   margin: 4px;
 }
 
@@ -44,8 +58,8 @@ table.unstriped tbody tr {
   background-size: contain;
   filter: url('/img/filters.svg#fill');
   fill: var(--identity-icon-color);
-  width: 32px;
-  height: 32px;
+  inline-size: 32px;
+  block-size: 32px;
 }
 
 .edit-identities {

diff --git a/webextension/popup.html b/webextension/popup.html
@@ -7,25 +7,17 @@
 </head>
 <body>
   <div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1">
-    <div class="row">
-      <div class="columns">
-        <img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
-        <h3>A better way to manage all the things you do online</h3>
-        <p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
-        <p><a href="#">Learn more</a></p>
-        <p><a href="#" id="onboarding-next-button" class="button expanded">Next</a></p>
-      </div>
-    </div>
+    <img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
+    <h3>A better way to manage all the things you do online</h3>
+    <p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
+    <p class="spacing" ><a href="#">Learn more</a></p>
+    <a href="#" id="onboarding-next-button" class="button expanded">Next</a>
   </div>
   <div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2">
-    <div class="row">
-      <div class="columns">
-        <img alt="How Containers Work" src="/img/onboarding-2.png" />
-        <h3>Put containers to work for you.</h3>
-        <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
-        <p><a href="#" id="onboarding-done-button" class="button expanded">Done</a></p>
-      </div>
-    </div>
+    <img alt="How Containers Work" src="/img/onboarding-2.png" />
+    <h3>Put containers to work for you.</h3>
+    <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
+    <a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
   </div>
   <div class="panel container-panel" id="container-panel">
     <div class="row popup-bumper">