Add quick links to merchants types

This commit is contained in:
el00ruobuob 2019-07-01 12:16:01 +02:00
parent 09c4d9b496
commit cef268335f
No known key found for this signature in database
GPG key ID: 8794A50E11FE51A0
2 changed files with 113 additions and 1 deletions

View file

@ -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">

View file

@ -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*********************************/