From 2b9b3546c000176b74cd640787ae9450817e8bfb Mon Sep 17 00:00:00 2001
From: Rob Cresswell <robert.cresswell@outlook.com>
Date: Mon, 26 Feb 2018 15:11:54 +0000
Subject: [PATCH] Fix the install guide buttons on small screens

This patch fixes the nesting on the rows on the install guide
index page, that were causing all of the links to be covered on
smaller screens.

Unfortunately the high line count change is really required to
make the change easy to understand, as otherwise the indentation makes
it very difficult to notice the incorrect nesting (and probably caused
the bug in the first place).

Closes-Bug: 1751810
Change-Id: Id4e7ddf9d46d6e1a7f81a88047bb6778453cc9b8
---
 www/pike/install/index.html   | 111 +++++++++++++++++-----------------
 www/queens/install/index.html | 111 +++++++++++++++++-----------------
 2 files changed, 112 insertions(+), 110 deletions(-)

diff --git a/www/pike/install/index.html b/www/pike/install/index.html
index 03aa346a7b..691ebcb0a3 100644
--- a/www/pike/install/index.html
+++ b/www/pike/install/index.html
@@ -7,69 +7,70 @@
 {% block content %}
 <!-- Begin Page Content -->
 <div class="top-docs-wrapper">
-    <div class="container">
-        <div class="row">
-            <div class="col-lg-8 col-md-8 col-sm-8">
-                <h1>OpenStack {{SERIES_TITLE}} Installation Guides</h1>
-                <p>
-                  These documents cover installation procedures for OpenStack
-                  services.
-                </p>
-                <p>
-                  If you prefer to install OpenStack using an automated deployment
-                  tool, see the <a href="../deploy/">Deployment Guides.</a>
-                </p>
-            </div>
-        </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-md-8 col-sm-8">
+        <h1>OpenStack {{SERIES_TITLE}} Installation Guides</h1>
+        <p>
+        These documents cover installation procedures for OpenStack
+        services.
+        </p>
+        <p>
+        If you prefer to install OpenStack using an automated deployment
+        tool, see the <a href="../deploy/">Deployment Guides.</a>
+        </p>
+      </div>
     </div>
+  </div>
 </div>
 <div class="mid-docs-wrapper" id="docs-main-body">
-    <div class="container">
-        <div class="row docs-toc">
-            <div class="col-lg-6 col-md-6 col-sm-6">
-                <div class="docs-link-sections services-section">
-                    <h3><i class="fa fa-cogs"></i>Installation Guide</h3>
-                    <p>The following guide provides information about getting started,
-                       setting up your environment, and launching your instance.
-                  </p>
-                    <p>
-                       <a class="overview-btn docs-btn" style="width:80%;text-transform:initial;" 
-                          href="/install-guide/">
-                          OpenStack Installation Guide
-                       </a>
-                    </p>
-                </div>
-            </div>
-            <div class="col-lg-6 col-md-6 col-sm-6">
-                <div class="docs-link-sections">
-                    <h3><i class="fa fa-cogs"></i>Project Installation Guides</h3>
-                 <ul>
+  <div class="container">
+    <div class="row docs-toc">
+      <div class="col-lg-6 col-md-6 col-sm-6">
+        <div class="docs-link-sections services-section">
+          <h3><i class="fa fa-cogs"></i>Installation Guide</h3>
+          <p>The following guide provides information about getting started,
+          setting up your environment, and launching your instance.
+          </p>
+          <p>
+          <a class="overview-btn docs-btn" style="width:80%;text-transform:initial;" 
+                                           href="/install-guide/">
+            OpenStack Installation Guide
+          </a>
+          </p>
+        </div>
+      </div>
+      <div class="col-lg-6 col-md-6 col-sm-6">
+        <div class="docs-link-sections">
+          <h3><i class="fa fa-cogs"></i>Project Installation Guides</h3>
+          <ul>
 
-{% for project in projects|sort(attribute='service') -%}
-{% if project.type in ['service', 'other'] and project.has_install_guide %}
-                   <li><a href="/{{project.name}}/{{SERIES}}/install/">{{project.service}} ({{project.name|title}})</a></li>
-{% endif %}
-{%- endfor %}
-                 </ul>
-            </div>
-        </div>
-        <div class="row docs-contribute-wrapper">
-            <div class="col-lg-12">
-                <p>Documentation treated like code, powered by the community - interested?</p>
-                <a href="/doc-contrib-guide/" class="overview-btn contribute-btn">How To Contribute <i class="fa fa-chevron-right"></i></a>
-            </div>
+            {% for project in projects|sort(attribute='service') -%}
+            {% if project.type in ['service', 'other'] and project.has_install_guide %}
+            <li><a href="/{{project.name}}/{{SERIES}}/install/">{{project.service}} ({{project.name|title}})</a></li>
+            {% endif %}
+            {%- endfor %}
+          </ul>
         </div>
+      </div>
     </div>
+    <div class="row docs-contribute-wrapper">
+      <div class="col-lg-12">
+        <p>Documentation treated like code, powered by the community - interested?</p>
+        <a href="/doc-contrib-guide/" class="overview-btn contribute-btn">How To Contribute <i class="fa fa-chevron-right"></i></a>
+      </div>
+    </div>
+  </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
-    var elements = document.getElementsByClassName("os-box");
-    var maximum =  Number.MIN_VALUE;
-    for (var i = 0, len = elements.length; i < len; i++) {
-       if(elements[i].offsetHeight>maximum){
-          maximum = elements[i].offsetHeight;
-       }
-    }
-    $('.os-box').height(maximum);
+var elements = document.getElementsByClassName("os-box");
+var maximum =  Number.MIN_VALUE;
+for (var i = 0, len = elements.length; i < len; i++) {
+  if(elements[i].offsetHeight>maximum){
+    maximum = elements[i].offsetHeight;
+  }
+}
+$('.os-box').height(maximum);
 </script>
 {% endblock content %}
diff --git a/www/queens/install/index.html b/www/queens/install/index.html
index 03aa346a7b..691ebcb0a3 100644
--- a/www/queens/install/index.html
+++ b/www/queens/install/index.html
@@ -7,69 +7,70 @@
 {% block content %}
 <!-- Begin Page Content -->
 <div class="top-docs-wrapper">
-    <div class="container">
-        <div class="row">
-            <div class="col-lg-8 col-md-8 col-sm-8">
-                <h1>OpenStack {{SERIES_TITLE}} Installation Guides</h1>
-                <p>
-                  These documents cover installation procedures for OpenStack
-                  services.
-                </p>
-                <p>
-                  If you prefer to install OpenStack using an automated deployment
-                  tool, see the <a href="../deploy/">Deployment Guides.</a>
-                </p>
-            </div>
-        </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-md-8 col-sm-8">
+        <h1>OpenStack {{SERIES_TITLE}} Installation Guides</h1>
+        <p>
+        These documents cover installation procedures for OpenStack
+        services.
+        </p>
+        <p>
+        If you prefer to install OpenStack using an automated deployment
+        tool, see the <a href="../deploy/">Deployment Guides.</a>
+        </p>
+      </div>
     </div>
+  </div>
 </div>
 <div class="mid-docs-wrapper" id="docs-main-body">
-    <div class="container">
-        <div class="row docs-toc">
-            <div class="col-lg-6 col-md-6 col-sm-6">
-                <div class="docs-link-sections services-section">
-                    <h3><i class="fa fa-cogs"></i>Installation Guide</h3>
-                    <p>The following guide provides information about getting started,
-                       setting up your environment, and launching your instance.
-                  </p>
-                    <p>
-                       <a class="overview-btn docs-btn" style="width:80%;text-transform:initial;" 
-                          href="/install-guide/">
-                          OpenStack Installation Guide
-                       </a>
-                    </p>
-                </div>
-            </div>
-            <div class="col-lg-6 col-md-6 col-sm-6">
-                <div class="docs-link-sections">
-                    <h3><i class="fa fa-cogs"></i>Project Installation Guides</h3>
-                 <ul>
+  <div class="container">
+    <div class="row docs-toc">
+      <div class="col-lg-6 col-md-6 col-sm-6">
+        <div class="docs-link-sections services-section">
+          <h3><i class="fa fa-cogs"></i>Installation Guide</h3>
+          <p>The following guide provides information about getting started,
+          setting up your environment, and launching your instance.
+          </p>
+          <p>
+          <a class="overview-btn docs-btn" style="width:80%;text-transform:initial;" 
+                                           href="/install-guide/">
+            OpenStack Installation Guide
+          </a>
+          </p>
+        </div>
+      </div>
+      <div class="col-lg-6 col-md-6 col-sm-6">
+        <div class="docs-link-sections">
+          <h3><i class="fa fa-cogs"></i>Project Installation Guides</h3>
+          <ul>
 
-{% for project in projects|sort(attribute='service') -%}
-{% if project.type in ['service', 'other'] and project.has_install_guide %}
-                   <li><a href="/{{project.name}}/{{SERIES}}/install/">{{project.service}} ({{project.name|title}})</a></li>
-{% endif %}
-{%- endfor %}
-                 </ul>
-            </div>
-        </div>
-        <div class="row docs-contribute-wrapper">
-            <div class="col-lg-12">
-                <p>Documentation treated like code, powered by the community - interested?</p>
-                <a href="/doc-contrib-guide/" class="overview-btn contribute-btn">How To Contribute <i class="fa fa-chevron-right"></i></a>
-            </div>
+            {% for project in projects|sort(attribute='service') -%}
+            {% if project.type in ['service', 'other'] and project.has_install_guide %}
+            <li><a href="/{{project.name}}/{{SERIES}}/install/">{{project.service}} ({{project.name|title}})</a></li>
+            {% endif %}
+            {%- endfor %}
+          </ul>
         </div>
+      </div>
     </div>
+    <div class="row docs-contribute-wrapper">
+      <div class="col-lg-12">
+        <p>Documentation treated like code, powered by the community - interested?</p>
+        <a href="/doc-contrib-guide/" class="overview-btn contribute-btn">How To Contribute <i class="fa fa-chevron-right"></i></a>
+      </div>
+    </div>
+  </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
-    var elements = document.getElementsByClassName("os-box");
-    var maximum =  Number.MIN_VALUE;
-    for (var i = 0, len = elements.length; i < len; i++) {
-       if(elements[i].offsetHeight>maximum){
-          maximum = elements[i].offsetHeight;
-       }
-    }
-    $('.os-box').height(maximum);
+var elements = document.getElementsByClassName("os-box");
+var maximum =  Number.MIN_VALUE;
+for (var i = 0, len = elements.length; i < len; i++) {
+  if(elements[i].offsetHeight>maximum){
+    maximum = elements[i].offsetHeight;
+  }
+}
+$('.os-box').height(maximum);
 </script>
 {% endblock content %}