Options UI: Adding Responsiveness (EFForg#19849)

zoracon · web-flow · commit d5e835e4447d · 2020-12-12T16:18:03.000-08:00
* Add grid css to options page

* Adjust grid and base css
diff --git a/chromium/pages/base.css b/chromium/pages/base.css
@@ -23,4 +23,8 @@
 .button:hover {
   background-color: var(--darker-blue);
   color: #fff;
+}
+
+.font {
+  font-family: var(--font);
 }
diff --git a/chromium/pages/options/index.html b/chromium/pages/options/index.html
@@ -6,11 +6,12 @@
     <title></title>
     <link href="style.css" rel="stylesheet">
   </head>
-  <body>
-    <span class="button section-header-span active" data-show="general-settings-wrapper" data-i18n="options_generalSettings"></span>
-    <span class="button section-header-span inactive" data-show="advanced-settings-wrapper" data-i18n="options_advancedSettings"></span>
-    <span class="button section-header-span inactive" data-show="update-channels-wrapper" data-i18n="options_updateChannels"></span>
-
+  <body class="font">
+    <section class="header-wrapper">
+      <span class="button section-header-span active" data-show="general-settings-wrapper" data-i18n="options_generalSettings"></span>
+      <span class="button section-header-span inactive" data-show="advanced-settings-wrapper" data-i18n="options_advancedSettings"></span>
+      <span class="button section-header-span inactive" data-show="update-channels-wrapper" data-i18n="options_updateChannels"></span>
+    </section>
     <div class="section-wrapper" id="general-settings-wrapper">
       <div id="update-wrapper" class="settings-wrapper">
         <input type="checkbox" id="autoUpdateRulesets">
diff --git a/chromium/pages/options/style.css b/chromium/pages/options/style.css
@@ -1,26 +1,24 @@
 @import "../main.css";
 
 body{
-  min-width: 500px;
-  min-height: 250px;
-  display: block;
-  font-family: var(--font);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #202023;
-    color: #f9f9fa;
-  }
-
-  .section-header-span, div#update-channels-warning {
-    color: #000;
-  }
-
-  textarea, input[type=text] {
-    background-color: #202023;
-    color: #f9f9fa;
-  }
+/*---------
+# GRID LAYOUT
+---------*/
+.header-wrapper {
+  display: inline-flex;
+  grid-column: 2;
+  grid-row: 1;
+}
+.section-wrapper {
+  grid-column: 2;
+  grid-row: 2;
+}
+#add-disabled-site-wrapper {
+  float: left;
 }
 
 a.settings{
@@ -109,8 +107,10 @@ img.remove{
 }
 
 .section-header-span{
+  cursor: pointer;
   padding: 8px;
-  margin-right: 10px;
+  margin-left: 0 !important;
+  margin-right: var(--space) !important;
   display: inline-block;
 }
 
@@ -130,7 +130,6 @@ img.remove{
   margin-bottom: 30px;
   border: 1px solid grey;
   border-radius: 20px;
-  width: 498px;
 }
 
 .update-channel-name{
@@ -228,8 +227,8 @@ div#update-channels-last-checked {
   font-size: 10px;
 }
 
-#update-channels-wrapper{
-  width: 500px;
+#update-channels-list {
+  display: inline-block;
 }
 
 @keyframes flash {
@@ -253,3 +252,19 @@ div#update-channels-last-checked {
 .flash {
   animation: flash 1s ease-out;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #202023;
+    color: #f9f9fa;
+  }
+
+  .section-header-span, div#update-channels-warning {
+    color: #000;
+  }
+
+  textarea, input[type=text] {
+    background-color: #202023;
+    color: #f9f9fa;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -23,4 +23,8 @@`
`23`	`23`	`.button:hover {`
`24`	`24`	`background-color: var(--darker-blue);`
`25`	`25`	`color: #fff;`
	`26`	`+}`
	`27`	`+`
	`28`	`+.font {`
	`29`	`+ font-family: var(--font);`
`26`	`30`	`}`