improve toggle responsiveness

ansible · Mar 28, 2023 · 7d45258 · 7d45258
1 parent 89a1acf
commit 7d45258
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 82 deletions.
diff --git a/sass/_switch.scss b/sass/_switch.scss
@@ -3,6 +3,10 @@
   display: inline-block;
   width: 60px;
   height: 34px;
+  @media screen and (max-width: 768px) {
+    height: 24px;
+    width: 53px;
+  }
 }
 
 /* Hide default HTML checkbox */
@@ -35,6 +39,10 @@
   background-color: $white;
   -webkit-transition: 0.4s;
   transition: 0.4s;
+  @media screen and (max-width: 768px) {
+    height: 16px;
+    width: 16px;
+  }
 }
 
 input:checked + .slider {

diff --git a/sass/_toggle.scss b/sass/_toggle.scss
@@ -1,8 +1,10 @@
 .toggle {
 	background: $white;
 	color: $navy;
-	text-align: center;
-	font-weight: lighter;
-	font-size: 0.9rem;
-    margin-top: 1.2rem;
+	text-align: left;
+	font-size: 0.8rem;
+	margin-top: 50%;
+	@media screen and (max-width: 768px) {
+		margin-top: 0%;
+	}
 }
diff --git a/sass/main.scss b/sass/main.scss
@@ -106,4 +106,4 @@ img.rh-logo {
   @media screen and (max-width: 990px) {
     display: none;
   }
-}
+}
diff --git a/templates/ansible-prior-versions.html b/templates/ansible-prior-versions.html
@@ -10,15 +10,17 @@ <h2 class="page-title">{{ pages.archive.community.title }}</h2>
         <p class="intropara">{{ pages.archive.community.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">
           <a class="btn" href="{{ links.archive.community.v_2_6 }}" role="button">{{ pages.archive.community.v_2_6 }}</a>

diff --git a/templates/automation-tower-chinese-translations.html b/templates/automation-tower-chinese-translations.html
@@ -11,15 +11,17 @@ <h2 class="page-title">{{ pages.translations.tower_zh.title }}</h2>
         <p class="intropara">{{ pages.translations.tower_zh.text }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h5>Automation Controller Version 4.3.0 (Supported)</h5>
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">

diff --git a/templates/automation-tower-japanese-translations.html b/templates/automation-tower-japanese-translations.html
@@ -11,15 +11,17 @@ <h2 class="page-title">{{ pages.translations.tower_ja.title }}</h2>
         <p class="intropara">{{ pages.translations.tower_ja.text }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h5>Automation Controller Version 4.3.0 (Supported)</h5>
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">

diff --git a/templates/automation-tower-korean-translations.html b/templates/automation-tower-korean-translations.html
@@ -11,15 +11,17 @@ <h2 class="page-title">{{ pages.translations.tower_ko.title }}</h2>
         <p class="intropara">{{ pages.translations.tower_ko.text }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h5>Automation Controller Version 4.3.0 (Supported)</h5>
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">

diff --git a/templates/automation-tower-prior-versions.html b/templates/automation-tower-prior-versions.html
@@ -10,15 +10,17 @@ <h2 class="page-title">{{ pages.archive.platform.title }}</h2>
         <p class="intropara">{{ pages.archive.platform.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">
             <a class="btn" href="{{ links.archive.platform.v_4_2_0 }}" role="button">{{ pages.archive.platform.v_4_2_0 }}</a>

diff --git a/templates/community.html b/templates/community.html
@@ -10,15 +10,17 @@ <h2 class="page-title">{{ pages.community.title }}</h2>
         <p class="intropara">{{ pages.community.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h3>{{ pages.community.collaborate.title }}</h3>
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">

diff --git a/templates/core-translated-ja.html b/templates/core-translated-ja.html
@@ -11,15 +11,17 @@ <h2 class="page-title">{{ pages.translations.core_ja.title }}</h2>
         <p class="intropara">{{ pages.translations.core_ja.text }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
-      </div>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
+      </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h5>{{ pages.translations.core_ja.v_2_14 }}</h5>
         <a class="btn" href="{{ links.translations.core_ja.v_2_14 }}" role="button">

diff --git a/templates/core.html b/templates/core.html
@@ -11,15 +11,17 @@ <h2 class="page-title">{{ pages.core.title }}</h2>
         <p class="intropara">{{ pages.core.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h5>{{ projects.name.core }}</h5>
         <p>{{ projects.description.core }}</p>

diff --git a/templates/developer.html b/templates/developer.html
@@ -5,7 +5,7 @@
       <div class="width-3-12 width-12-12-m">
         <img class="page-logo" src="static/images/community_logo.svg">
       </div>
-      <div class="width-8-12 width-12-12-m">
+      <div class="width-9-12 width-12-12-m">
         <h2 class="page-title">{{ pages.developer.title }}</h2>
         <p class="intropara">{{ pages.developer.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>

diff --git a/templates/ecosystem.html b/templates/ecosystem.html
@@ -11,15 +11,17 @@ <h2 class="page-title">{{ pages.ecosystem.title }}</h2>
         <p class="intropara">{{ pages.ecosystem.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h5>{{ projects.collections.name }}</h5>
         <p>{{ projects.collections.description }}</p>

diff --git a/templates/index.html b/templates/index.html
@@ -10,15 +10,17 @@ <h2 class="page-title">{{ pages.index.title }}</h2>
         <p class="intropara">{{ pages.index.intro }}</p>
         <p class="feedback">{{ pages.feedback }}</p>
       </div>
+      <!-- Start old docsite toggle. -->
       <div class="width-1-12 width-12-12-m">
-        <p class="toggle">
-          {{ pages.take_me_back }}
-        </p>
-        <label class="switch">
-          <input type="checkbox" id="page-toggle">
-          <span class="slider round"></span>
-        </label>
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
+          <label class="switch">
+            <input type="checkbox" id="page-toggle">
+            <span class="slider round"></span>
+          </label>
+        </div>
       </div>
+      <!-- End old docsite toggle. -->
       <div class="width-6-12 width-12-12-m">
         <h4>{{ pages.index.novice_heading }} <i class="fas fa-rocket"></i></h4>
         <div class="btn-group-vertical" role="group" aria-label="{{ pages.labels.button_group }}">

diff --git a/templates/platform.html b/templates/platform.html
@@ -10,15 +10,17 @@ <h2 class="page-title">{{ pages.platform.title }}</h2>
           <p class="intropara">{{ pages.platform.intro }}</p>
           <p class="feedback">{{ pages.feedback }}</p>
         </div>
-        <div class="width-1-12 width-12-12-m">
-          <p class="toggle">
-            {{ pages.take_me_back }}
-          </p>
+        <!-- Start old docsite toggle. -->
+      <div class="width-1-12 width-12-12-m">
+        <div class="toggle">
+          <p>{{ pages.take_me_back }}</p>
           <label class="switch">
-            <input type="checkbox" id="page-toggle" data-target="automation.html">
+            <input type="checkbox" id="page-toggle">
             <span class="slider round"></span>
           </label>
         </div>
+      </div>
+        <!-- End old docsite toggle. -->
         <div class="width-6-12 width-12-12-m">
           <h3>{{ pages.platform.access.title }}</h3>
           <p>{{ pages.platform.access.text }}</p>