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

skin/firstRun.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 137 matching lines @@
   box-sizing: border-box;
 }
 
 #general
 {
   display: table;
   padding-left: 0px;
   padding-right: 0px;
 }
 
-#general > div
+#general > .block
 {
   display: table-cell;
   width: 50%;
   vertical-align: top;
   padding: 0px 50px;
   border: dashed 0 #969085;
   -webkit-border-start-width: 1px;
   -moz-border-start-width: 1px;
   border-inline-start-width: 1px;
 }
 
-#general > div:first-child
+#general > .block:first-child
 {
   border: none;
 }
 
 #acceptable-ads-block h2
 {
   margin-bottom: 34px;
 }
 
 #abb-promotion-block:lang(fr)
@@ skipping 176 matching lines @@
   font-size: 22px;
   display: block;
 }
 
 #donate:hover, .share-buttons a:hover
 {
   box-shadow: 0px 0px 0px 2px #8ca7c4;
   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
    * font-size and line-height 0px
    */
   font-size: 0px;
   line-height: 0px;
 }
 
 .share-buttons > a
@@ skipping 245 matching lines @@
     width: 64px;
     height: 64px;
   }
 
   section
   {
     padding: 40px 20px;
   }
 
   #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,
   #can-do-more .feature h3
   {
     text-align: center;
   }
 
   #can-do-more .feature-description-textblock
   {
     text-align: start;
   }
 
   .toggle
   {
     margin-top: 14px;
   }
 }