Noissue - Center the content and unfix on small screens the sidebar

skin/new-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 141 matching lines @@
   box-shadow: inset 0 0 0 2px #099CD0;
 }
 
 button[role="checkbox"]
 {
   width: 18px;
   height: 18px;
   padding: 0px;
   border: 0px;
   background-color: transparent;
-  background-position: -51px 0px;
+}
+
+button[role="checkbox"]:not(.toggle)
+{
+  background-image: url(icons/checkbox.png);
+  display: inline-block;
 }
 
 button[role="checkbox"][aria-checked="true"]:not(.toggle)
 {
-  background-position: -68px 0px;
+  background-position: 0px 18px;
 }
 
 button[role="checkbox"][disabled]
 {
   border-radius: 2px;
   background-color: #ccc;
 }
 
 button[role="checkbox"].toggle
 {
@@ skipping 49 matching lines @@
   display: block;
   height: 1.9rem;
   width: 1.9rem;
   background-color: #099DD1;
 }
 
 button.gear:hover::before,
 button.delete:hover::before
 {
   background-color: #5CBCE1;
-}
-
-button.gear:hover,
-button.delete:hover
-{
-  background-position: -61px -51px;
 }
 
 button.link,
 button.list
 {
   color: #099CD0;
 }
 
 button.link
 {
@@ skipping 260 matching lines @@
   width: 100%;
 }
 
 #sidebar footer p
 {
   display: flex;
   justify-content: center;
   margin: 1.2rem 0rem;
 }
 
+/* This is a stopgap solution of footer overlapping tabs on low resolutions */
 @media (min-height: 37rem)

[saroyanm, 2017/09/25 22:02:13]

@Thomas can you please send the link to the solution you mentioned to me today,
so I'll adapt this accordingly.

[Thomas Greiner, 2017/09/26 10:40:38]

This is a bit of a hack because it depends on the height of the sidebar contents
which may change.

Why do we care about this in the first place? We don't need to optimize for
smaller screens yet. If we did we should probably work on other stuff to fix
this, such as introducing a scrollable hamburger menu and using proper font
sizes that make better use of the available screen real estate.

[Thomas Greiner, 2017/09/26 10:40:38]

What I was mentioning was `position: sticky` but according to MDN it doesn't
look like we can use it yet because it has only been introduced in Chrome in
version 56.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility

[saroyanm, 2017/09/26 16:55:48]

As we did introduce fixed root element and prevented people from increasing the
font-size, this solution will fix the edge case of zooming using `ctrl + "+"`.
Also considering translations being long this can be a good help for us to
manage the "stickiness:)".
Alternative 1: I could use two Absolute layouts and Z-index and hide the footer
behind tabs, which will look funny.
Alternative2: I can use JavaScript to make the footer unstick.

I can't see much more options right now, but my favoite would be not to
introduce footer in sidebar that is pushed to the bottom.

[saroyanm, 2017/09/26 16:55:48]

I see.

[Thomas Greiner, 2017/09/27 13:27:50]

Ok, since there's no good solution that we can implement quickly, let's leave it
as is. However, please add a comment to the code to explain why this workaround
is necessary.

[saroyanm, 2017/09/27 14:56:43]

Agree, done.

 {
   #sidebar .fixed
   {
     position: fixed;
   }
 
   #sidebar footer
   {
     bottom: 0px;
     position: absolute;
@@ skipping 151 matching lines @@
   margin: 0rem;
   border-style: solid;
   border-color: #CDCDCD;
   border-width: 0px 1px 1px 1px;
 }
 
 .list li
 {
   padding: 0rem;
   margin: 0rem 0rem 1.3rem 0rem;
+}
+
+.list li [role="checkbox"]
+{
+  flex-shrink: 0;
 }
 
 .table li:first-of-type
 {
   border-top: 1px solid #CDCDCD;
 }
 
 .table.list li
 {
   padding: 0.5rem 1.1rem;
@@ skipping 182 matching lines @@
 
 .tooltip::before
 {
   content: "";
   width: 1.3rem;
   height: 1.3rem;
   display: block;
   background-color: #099DD1;
   -webkit-mask: url(icons/tooltip.svg);
   mask: url(icons/tooltip.svg);
-}
-
-button[role="checkbox"]:not(.toggle)
-{
-  background-image: url(options-sprite.png);
-  display: inline-block;
 }
 
 /* 
   Used for translatable screen reader only conten.
   e.g.: Use instead of aria-label to avoid complex attribute value translation
 */
 .sr-only
 {
   position: absolute;
   overflow: hidden;
@@ skipping 537 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }