Issue 1292 - Optimized first-run page share section for smaller screens

skin/firstRun.css

Index: skin/firstRun.css
===================================================================
--- a/skin/firstRun.css
+++ b/skin/firstRun.css
@@ -155,7 +155,7 @@
   padding-right: 0px;
 }
 
-#general > div
+#general > .block
 {
   display: table-cell;
   width: 50%;
@@ -167,7 +167,7 @@
   border-inline-start-width: 1px;
 }
 
-#general > div:first-child
+#general > .block:first-child
 {
   border: none;
 }
@@ -364,38 +364,31 @@
   border-radius: 30px;
 }
 
-#donate-block span, #share-block span
+#share > .block
 {
-  margin: 10px 20px;
-}
-
-#donate-block, #share-block
-{
-  min-width: 250px;
   display: inline-block;
   vertical-align: top;
-  padding: 5px 0 5px 0;
+  width: 50%;
+  padding: 5px 0px;
   border: 1px dashed #37506d;
   border-style: none dashed;
 }
 
-#donate-block
+#share > .block:last-child
 {
-  width: 50%;
+  width: 49%;
+  -webkit-border-start-style: none;

[saroyanm, 2015/11/27 18:15:06]

I do remember we had discussion several times about this. 
Shouldn't we also consider using adblockplusUI on other platforms beside webkit
based and mozilla ? Otherwise we can have issues with this solution, but it's
just note to refresh memory.
Feel free to keep it as it is right now while it's not part of the review.

[Thomas Greiner, 2015/12/03 15:14:51]

The platforms we support are either Gecko (Firefox) or WebKit (Chrome, Opera,
Safari). According to http://caniuse.com/#feat=css-logical-props this is not
something we can use in IE and there's little hope that it's going to be added
to Edge anytime soon either.

Therefore we'll need to come back to find a different solution for Edge anyway,
when we decide to reuse it there.

+  -moz-border-start-style: none;
 }
 
-#share-block
+#share > .block > span
 {
-  width: 49%;
-
-  -webkit-border-start-style: none;
-  -moz-border-start-style: none;
+  margin: 10px 20px;
 }
 
 .share-buttons
 {
   margin-top: 6px;
-  cursor: pointer;
   vertical-align: top;
   /* because inline block creates
    * space if not captured with
@@ -661,24 +654,37 @@
   }
 
   #general,
-  #general > div
+  #general > .block
   {
     display: block;
   }
 
-  #general > div
+  #general > .block
   {
     width: auto;
+    margin-left: 20px;
+    margin-right: 20px;
     padding: 10px 0px;
     border-width: 1px 0px 0px;
   }
 
-  #general > div,
-  #can-do-more > h2,
-  #can-do-more-content
+  #share > .block
   {
-    margin-left: 20px;
-    margin-right: 20px;
+    display: block;

[saroyanm, 2015/11/27 18:15:06]

Detail: You can move this rule with selector also under  #general, #general >
.block

[Thomas Greiner, 2015/12/03 15:14:51]

Done.

+    width: auto;
+    padding: 20px 0px;
+    border-style: dashed none none;
+  }
+
+  #share > .block:last-child
+  {
+    width: auto;

[saroyanm, 2015/11/27 18:15:06]

I guess you have to set this rule again because of Specificity, what about
having both width of the elements 49% ?
IMO same could work for general section and would be possible combine and have
more generic styles.
I think we do not want to use "important".
Currently whenever we will add generic rule for desktop version we will need to
consider mobile as well, I think the suggestion above will be less error prone. 

[Thomas Greiner, 2015/12/03 15:14:51]

Done. You're right. Changing the regular width from `50%` to `49%` is much more
sane than overriding it here.

+  }
+
+  #donate,
+  .share-buttons
+  {
+    margin-top: 10px;
   }
   
   #can-do-more,