Add quick links to merchants types

community/merchants/index.md

@@ -4,10 +4,35 @@ title: titles.merchants
 permalink: /community/merchants/index.html
 ---
 {% t global.lang_tag %}
-<div class="text-center container description">
+<div class="merchants text-center container description">
     <p>{% t merchants.intro1 %}<a href="https://repo.getmonero.org/monero-project/monero-site/issues"> {% t merchants.intro2 %}</a></p>
 </div>
 <div class="merchants">
+
+{% assign itemCount = site.data.merchants | size %}
+{% assign headerRow = itemCount | divided_by: 5.0 | ceil | times: 1.0 %}
+{% assign itemInRow = itemCount | divided_by: headerRow | ceil %}
+
+{% assign Item_processed = 0 %}
+<div class="container full">
+  {% for toplevel in site.data.merchants %}
+    {% assign isHeader = Item_processed | modulo: itemInRow %}
+    {% if isHeader == 0 %}
+      <div class="tabPanel-merchant tabPanel-merchant{{ itemInRow }}">
+    {% endif %}
+        <h2><a href="#{{ toplevel.id }}">{{ toplevel.category }}</a></h2>
+        {% assign Item_processed = Item_processed | plus: 1 %}
+    {% assign isHeader = Item_processed | modulo: itemInRow %}
+    {% if isHeader == 0 %}
+      </div>
+      {% if Item_processed != itemCount %}
+        {% assign headerRow = itemCount | minus: Item_processed | divided_by: 5.0 | ceil | times: 1.0 %}
+        {% assign itemInRow = itemCount | minus: Item_processed | divided_by: headerRow | ceil %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+</div>
+
 {% for toplevel in site.data.merchants %}
 <div class="container full" id="{{toplevel.id}}">
        <div class="info-block">

css/custom.css

@@ -3290,6 +3290,93 @@ footer {
     display: inline;
 }
 
+.tabPanel-merchant {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.tabPanel-merchant + .tabPanel-merchant {
+  margin-top: -1rem;
+}
+
+.tabPanel-merchant > h2 {
+  font-size: 1.1rem;
+  height: 2rem;
+  line-height: 2rem;
+  padding: 1rem 0;
+}
+
+.tabPanel-merchant > h2 {
+  position: relative;
+  margin: 0;
+  text-align: center;
+  background: #ffffff;
+  color: #000;
+  -moz-box-shadow: 0 1px 0px rgba(50,50,93,.1);
+  -webkit-box-shadow: 0 1px 0px rgba(50,50,93,.1);
+  box-shadow: 0 1px 0px rgba(50,50,93,.1);
+}
+
+.tabPanel-merchant > h2 ~ h2 {
+  position: absolute;
+  top: 0;
+}
+
+.tabPanel-merchant a:hover, .tabPanel-merchant a:focus, .tabPanel-merchant a:active {
+  color: #d26e2b;
+}
+
+.tabPanel-merchant h2:nth-child(1) {
+  left: 0;
+}
+
+.tabPanel-merchant3 > h2 {
+  width: calc(100% / 3);
+}
+
+.tabPanel-merchant3 h2:nth-child(2) {
+  left: calc(1 * (100% / 3));
+}
+
+.tabPanel-merchant3 h2:nth-child(3) {
+  left: calc(2 * (100% / 3));
+}
+
+.tabPanel-merchant4 > h2 {
+  width: calc(100% / 4);
+}
+
+.tabPanel-merchant4 h2:nth-child(2) {
+  left: calc(1 * (100% / 4));
+}
+
+.tabPanel-merchant4 h2:nth-child(3) {
+  left: calc(2 * (100% / 4));
+}
+
+.tabPanel-merchant4 h2:nth-child(4) {
+  left: calc(3 * (100% / 4));
+}
+
+.tabPanel-merchant5 > h2 {
+  width: calc(100% / 5);
+}
+
+.tabPanel-merchant5 h2:nth-child(2) {
+  left: calc(1 * (100% / 5));
+}
+
+.tabPanel-merchant5 h2:nth-child(3) {
+  left: calc(2 * (100% / 5));
+}
+
+.tabPanel-merchant5 h2:nth-child(4) {
+  left: calc(3 * (100% / 5));
+}
+
+.tabPanel-merchant5 h2:nth-child(5) {
+  left: calc(3 * (100% / 5));
+}
 
 /***************************ROADMAP STYLING*********************************/