From 6fd9bd06228cada2729773ff6c31dc3aa0a8a5e3 Mon Sep 17 00:00:00 2001
From: erciccione <erciccione@protonmail.com>
Date: Tue, 12 May 2020 13:35:08 +0200
Subject: [PATCH] accepting: add TOC

and add ul.logo class to general CSS
---
 _i18n/en.yml                   |  1 +
 css/custom.css                 |  4 ++++
 get-started/accepting/index.md | 12 +++++++++---
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/_i18n/en.yml b/_i18n/en.yml
index ee8dc5c2..fc373d98 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -243,6 +243,7 @@ press-kit:
 
 accepting:
   title_gui: Instructions for the GUI
+  index: Index
   gui1: "Accepting a payment with the GUI is very easy. Doesn't matter if you are a merchant or an user, you will have two pages available: Receive and Merchants."
   gui2: The receive page (shown below) is explained in every detail
   guilinkguide: in the guide of the GUI.
diff --git a/css/custom.css b/css/custom.css
index 8a3abfc7..6b2e691d 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1186,6 +1186,10 @@ label.upgrade-x:after {
   transform: rotate(-45deg);
 }
 
+ul.logo {
+  list-style-image: url('/img/logo-list.svg');
+}
+
 @media only screen and (max-width: 75rem) {
 
 .upgrade-content p {
diff --git a/get-started/accepting/index.md b/get-started/accepting/index.md
index 15bfcbee..06a53dfb 100644
--- a/get-started/accepting/index.md
+++ b/get-started/accepting/index.md
@@ -8,7 +8,13 @@ permalink: /get-started/accepting/index.html
     <div class="row">
         <div class="full">
           <div class="info-block text-adapt">
-            <h3>{% t accepting.title_gui %}</h3>
+            <h3>{% t accepting.index %}</h3>
+            <ul class="logo">
+              <li><a href="#gui">{% t accepting.title_gui %}</a></li>
+              <li><a href="#cli">{% t accepting.cliinstructions %}</a></li>
+              <li><a href="#merchants">{% t accepting.merchantstitle %}</a></li>
+            </ul>
+            <h3 id="gui">{% t accepting.title_gui %}</h3>
               <p>{% t accepting.gui1 %}</p>
               <p>{% t accepting.gui2 %} <a href="https://github.com/monero-ecosystem/monero-GUI-guide/blob/master/monero-GUI-guide.md#receive-monero">{% t accepting.guilinkguide %}</a></p>
                 <img class="top-margin" src="/img/receive.png" alt="receive page">
@@ -24,7 +30,7 @@ permalink: /get-started/accepting/index.html
                 <li>{% t accepting.guiol3 %}</li>
                 <li>{% t accepting.guiol4 %}</li>
               </ol>
-            <h3>{% t accepting.cliinstructions %}</h3>
+            <h3 id="cli">{% t accepting.cliinstructions %}</h3>
               <p>{% t accepting.clicreatewallet %}</p>
               <p>{% t accepting.cliaccounts %}</p>
               <p>{% t accepting.clicreateaccount %}</p>
@@ -36,7 +42,7 @@ permalink: /get-started/accepting/index.html
               <p>{% t accepting.cliindex1 %}</p>
               <p><code>address new [label text with white spaces allowed]</code></p>
               <p><i>{% t accepting.clinotes %}</i></p>
-            <h3>{% t accepting.merchantstitle %}</h3>
+            <h3 id="merchants">{% t accepting.merchantstitle %}</h3>
               <p>{% t accepting.merchantsreceive %} <a href="{{ site.baseurl }}/resources/developer-guides/">{% t accepting.merchdevguides %}</a>. {% t accepting.merchantsreceive1 %}</p>
               <p>{% t accepting.merchantsint %} <a href="https://github.com/monero-integrations">{% t accepting.merchantsintlink %}</a>.</p>
               <p>{% t accepting.merchantsthirdp %} <a href="{{ site.baseurl }}/community/merchants/">{% t accepting.merchthirdlink %}</a>. {% t accepting.merchantsthirdp1 %}</p>