From 2de5984e395054acb2aebca77f2c37172e8a8655 Mon Sep 17 00:00:00 2001
From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Sat, 10 Sep 2016 19:39:48 +0100
Subject: [PATCH] The final touches. Project ends after feedback!

---
 Guidelines.md    | 12 ++++++++++--
 css/master.css   | 34 +++++++++++-----------------------
 givingguide.html | 28 ++++++++++++++++++++++++++--
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/Guidelines.md b/Guidelines.md
index 4b43c6a..3a814a6 100644
--- a/Guidelines.md
+++ b/Guidelines.md
@@ -10,11 +10,19 @@
 
 * Products' images, "good" or "naughty" should be put inside transparent, square PNG files at 350px × 350px, and a padding consistent with existing images.
 
+## BUY/GET button
+
+* Copy the entire block of code including the two lines for comments before and after the Divs.
+
+* Paste it just after the **h5** line.
+
+* Append a unique string to the `id` `href` `aria-controls` of the **a** elements, as well as the `id` of the next div and the content of `document.getElementById('...')` so that all have the same text. Example: `get-iem-smartphone` `get-item-compact` ...
+
+* Change the content of the Anchor link **a** and its `href` attributes to link to different sellers.
+
 
 ## General Best Practices
 
 * Resist the urge to add another list-element **li** to announce a SALE, a BONUS, or anything unrelated to being a PROS or CONS. Instead use the SALE triangle, and Bootstrap's *alert* (Check its documentation, or existing code if unsure)
 
 * Avoid using very long titles as they tend to wrap into multiple lines on mobile devices. Be concise.
-
-*
diff --git a/css/master.css b/css/master.css
index eaa5b28..ca2ce23 100644
--- a/css/master.css
+++ b/css/master.css
@@ -308,22 +308,12 @@ section {
 }
 
 .rfy {
-  /*position: absolute;*/
-  /*top: 44px;*/
-  /*left: -71px;*/
-  /*padding: 10px 0;*/
-  /*width: 266px;*/
   border-bottom: 0;
-  /*background: #2B81E3;*/
   color: #fff;
-  /*text-align: center;*/
   text-decoration: underline;
   text-transform: uppercase;
   font-weight: 700;
   font-size: 14px;
-  /*-webkit-transform: rotate(-45deg);*/
-  /*-moz-transform: rotate(-45deg);*/
-  /*transform: rotate(-45deg);*/
 }
 
 .rfy-line {
@@ -380,14 +370,14 @@ li.neutral {
 
 .get-item {
   position: absolute;
-  right: 20px;
-  bottom: 6px;
-  /*margin: 0 auto 5px;*/
-  padding: 15px 11px;
-  width: 60px;
-  height: 60px;
+  right: 50%;
+  left: 50%;
+  top: 220px;
+  margin-left: -60px;
+  padding: 5px;
+  width: 120px;
   border-bottom: 0;
-  border-radius: 50%;
+  border-radius: 100px;
   background: #2B81E3;
   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
   color: white;
@@ -414,18 +404,16 @@ li.neutral {
 }
 
 .seller-group {
-  position: absolute;
-  right: 20px;
-  bottom: 70px;
-  /*padding: 10px;*/
+
   text-align: center;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
+  background-color: white;
+  padding: 15px;
 }
 
 .seller {
-  display: block;
-  /*width: 50px;*/
+  width: 150px;
   /*height: 50px;*/
   text-align: center;
 }
diff --git a/givingguide.html b/givingguide.html
index 566f88e..51d63e2 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -164,7 +164,6 @@
           <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
 
           <!-- Buy/Download Button   -->
-
           <a id="get-item" class=" btn get-item" role="button" data-toggle="collapse" href="#sellers" aria-expanded="false" aria-controls="sellers" style="display:none">
           BUY
           </a>
@@ -175,7 +174,6 @@
             </div>
           </div>
 
-
           <script>
             document.getElementById('get-item').style.display = '';
           </script>
@@ -281,6 +279,32 @@
         <div class="good col-md-6 col-sm-6">
           <img src="img/products/x200.png" alt="x200" class="center-block" />
           <h5 class="text-center">Libiquity Taurinus X200 with GNU/Linux</h5>
+
+          <!-- Buy/Download Button   -->
+          <a id="get-item-compact" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-compact" aria-expanded="false" aria-controls="sellers-compact" style="display:none">
+          BUY
+          </a>
+          <div class="collapse" id="sellers-compact">
+            <div class="center-block seller-group">
+              <a href="#" class="seller action-button">Seller 1</a>
+              <a href="#" class="seller action-button">Seller 2</a>
+            </div>
+          </div>
+
+          <script>
+            document.getElementById('get-item-compact').style.display = '';
+          </script>
+          <noscript>
+              <div class="center-block seller-group">
+                <p style="color: #6b6b6b">
+                  <strong>Get it from</strong>
+                </p>
+                <a href="#" class="seller action-button">Seller 1</a>
+                <a href="#" class="seller action-button">Seller 2</a>
+              </div>
+          </noscript>
+          <!-- End Buy/Download button -->
+
           <ul class="pros">
             <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system and libreboot firmware on hardware that is certified to Respect Your Freedom.</li>
             <li>Durable hardware is meant to last and easy to repair.</li>
-- 
2.25.1