From 487adf3275400953a69295db326540b81f5964b0 Mon Sep 17 00:00:00 2001
From: Dominic Clifton <me@dominicclifton.name>
Date: Sat, 23 May 2015 14:57:27 +0100
Subject: [PATCH] Cleanup welcome tab layout.

---
 tabs/landing.css  |  53 +++++++++++++++++++++---
 tabs/landing.html | 103 +++++++++++++++++++++++++---------------------
 2 files changed, 103 insertions(+), 53 deletions(-)

diff --git a/tabs/landing.css b/tabs/landing.css
index f0dac6f6..a30f30c8 100644
--- a/tabs/landing.css
+++ b/tabs/landing.css
@@ -1,15 +1,19 @@
 .tab-landing .left {
     width: 60%;
+    position: relative;
 }
 .tab-landing .right {
     float: left;
 
     margin-left: 10px;
     width: calc(40% - 10px);
+    position: relative;
 }
 
 .tab-landing .section {
     margin-bottom: 10px;
+    width: 100%;
+    overflow: auto;
 }
 
 .left .section:last-child,
@@ -55,16 +59,33 @@
     background-color: #dedcdc;
 }
 
+.tab-landing .row {
+    margin-bottom: 10px;
+    float: left;
+    width: 100%;
+}
+.tab-landing .row:last-child {
+    margin-bottom: 0px;
+}
+
 .welcome {
-    height: 207px;
+    height: 196px;
 }
 
 .contributing,
 .welcome {
-    padding: 5px;
     border: 1px solid silver;
 }
 
+.contributing_and_sponsors .right,
+.contributing_and_sponsors .left {
+    min-height: 260px
+}
+
+.section-content {
+    margin: 5px;
+}
+
 .contributing a,
 .welcome a {
     font-weight: bold;
@@ -94,7 +115,7 @@
     background-color: #3f4241;
 }
 .changelog .wrapper {
-    height: 150px;
+    height: 165px;
 
     padding: 5px;
 
@@ -111,10 +132,13 @@
 }
 
 .donate {
-    height: 92px;
     border: 1px solid silver;
 }
 
+.donate .buttons {
+    margin-bottom: 10px;
+}
+
 .section .title {
     line-height: 20px;
 
@@ -134,11 +158,28 @@
     width: 74px;
     height: 21px;
 
-    margin: auto;
+    margin: auto;    
+}
+
+.contributing_and_sponsors .left .section {
+    position: absolute;
+}
+
+.contributing_and_sponsors .left .contributing {
+    top: 0%;
+    height: 50%;
+}
+
+.contributing_and_sponsors .left .donate {
+    top: 50%;
+    margin-top: 10px;
+    height: calc(50% - 10px);
 }
 
 .tab-landing .sponsors {
-    height: 254px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
     border: 1px solid silver;
 }
 .tab-landing .sponsors p {
diff --git a/tabs/landing.html b/tabs/landing.html
index fd217ca9..635f5e12 100644
--- a/tabs/landing.html
+++ b/tabs/landing.html
@@ -1,57 +1,66 @@
 <div class="tab-landing">
-    <div class="left">
-        <div class="section optional_permissions">
-            <div class="title" i18n="default_optional_permissions_head"></div>
-            <p i18n="default_optional_permissions_text"></p>
-            <a id="requestOptionalPermissions" href="#" i18n="default_request_optional_permissions"></a>
-            <div class="clear-both"></div>
+    <div class="section optional_permissions">
+        <div class="title" i18n="default_optional_permissions_head"></div>
+        <p i18n="default_optional_permissions_text"></p>
+        <a id="requestOptionalPermissions" href="#" i18n="default_request_optional_permissions"></a>
+        <div class="clear-both"></div>
+    </div>
+
+    <div class="row welcome_and_sponsors">
+        <div class="left">
+            <div class="section welcome">
+                <div class="section-content" i18n="defaultWelcomeText"></div>
+            </div>
         </div>
-        <div class="section welcome" i18n="defaultWelcomeText"></div>
-        <div class="section contributing">
-            <div class="title" i18n="defaultContributingHead"></div>
-            <p i18n="defaultContributingText">
-            </p>
-        </div>
-        <div class="section donate">
-            <div class="title" i18n="defaultDonateHead"></div>
-            <p i18n="defaultDonateText">
-            </p>
-            <div class="buttons">
-                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6" target="_blank" title="Donate"><img src="./images/btn_donate_SM.gif" alt="Paypal" /></a></li>
+        <div class="right">
+            <div class="section changelog configurator">
+                <div class="title" i18n="defaultChangelogHead"></div>
+                <div class="wrapper">
+                    <!-- changelog content will be loaded here -->
+                </div>
             </div>
         </div>
     </div>
-    <div class="right">
-        <div class="section changelog configurator">
-            <div class="title" i18n="defaultChangelogHead"></div>
-            <div class="wrapper">
-                <!-- changelog content will be loaded here -->
+    <div class="row contributing_and_sponsors">
+        <div class="left">
+            <div class="section contributing">
+                <div class="title" i18n="defaultContributingHead"></div>
+                <div class="section-content" i18n="defaultContributingText"></div>
+                </p>
+            </div>
+            <div class="section donate">
+                <div class="title" i18n="defaultDonateHead"></div>
+                <div class="section-content" i18n="defaultDonateText"></div>
+                <div class="buttons">
+                    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSQKVT6UYKGL6" target="_blank" title="Donate"><img src="./images/btn_donate_SM.gif" alt="Paypal" /></a></li>
+                </div>
             </div>
         </div>
-        <div class="section sponsors">
-            <div class="title" i18n="defaultSponsorsHead"></div>
-            <p>
-                &bull; <a href="http://www.massiverc.com" title="www.massiverc.com" target="_blank">MassiveRC</a><br />
-            </p>
-            <p>
-                &bull; <a href="http://www.armattanquads.com" title="www.armattanquads.com" target="_blank">Armattan Quads</a><br />
-            </p>
-            <p>
-                &bull; <a href="http://www.bcmultirotors.com" title="www.bcmultirotors.com" target="_blank">Bungeecow Multirotors</a><br />
-            </p>
-            <p>
-                &bull; <a href="http://www.immersionrc.com" title="www.immersionrc.com" target="_blank">Immersion RC</a><br />
-            </p>
-            <p>
-                &bull; <a href="http://www.radioc.co.uk" title="www.radioc.co.uk" target="_blank">RadioC</a><br />
-            </p>
-            <p>
-                &bull; <a href="http://www.multiwiicopter.com" title="www.multiwiicopter.com" target="_blank">MultiiWiiCopter</a><br />
-            </p>
-            <p>
-                &bull; <a href="http://www.overskyrc.com" title="www.overskyrc.com" target="_blank">OverSkyRC</a><br />
-            </p>
+        <div class="right">
+            <div class="section sponsors">
+                <div class="title" i18n="defaultSponsorsHead"></div>
+                <p>
+                    &bull; <a href="http://www.massiverc.com" title="www.massiverc.com" target="_blank">MassiveRC</a><br />
+                </p>
+                <p>
+                    &bull; <a href="http://www.armattanquads.com" title="www.armattanquads.com" target="_blank">Armattan Quads</a><br />
+                </p>
+                <p>
+                    &bull; <a href="http://www.bcmultirotors.com" title="www.bcmultirotors.com" target="_blank">Bungeecow Multirotors</a><br />
+                </p>
+                <p>
+                    &bull; <a href="http://www.immersionrc.com" title="www.immersionrc.com" target="_blank">Immersion RC</a><br />
+                </p>
+                <p>
+                    &bull; <a href="http://www.radioc.co.uk" title="www.radioc.co.uk" target="_blank">RadioC</a><br />
+                </p>
+                <p>
+                    &bull; <a href="http://www.multiwiicopter.com" title="www.multiwiicopter.com" target="_blank">MultiiWiiCopter</a><br />
+                </p>
+                <p>
+                    &bull; <a href="http://www.overskyrc.com" title="www.overskyrc.com" target="_blank">OverSkyRC</a><br />
+                </p>
+            </div>
         </div>
     </div>
-    <div class="clear-both"></div>
 </div>
\ No newline at end of file