Update users generation

CTR

Signed-off-by: Oleksandr Porunov <alexandr.porunov@gmail.com>

Author: porunov

_includes/css/main.css

@@ -418,6 +418,19 @@ footer .footer-below {
     outline: 0;
 }
 
+a.all-users-link,
+a.all-users-link:focus,
+a.all-users-link:hover,
+a.all-users-link:active,
+a.all-users-link.active {
+    width: auto; !important;
+    margin: 60px 0 0 0; !important;
+    white-space: normal; !important;
+    vertical-align: middle; !important;
+    text-align: center; !important;
+    border-width: 0; !important;
+}
+
 .scroll-top {
     z-index: 1049;
     position: fixed;
@@ -593,6 +606,14 @@ footer .footer-below {
         padding: 0px 5px;
         font-size: 16px;
     }
+
+    a.all-users-link,
+    a.all-users-link:focus,
+    a.all-users-link:hover,
+    a.all-users-link:active,
+    a.all-users-link.active {
+        margin: 0; !important;
+    }
 }
 
 
@@ -653,3 +674,24 @@ footer .footer-below {
         text-align: left;
     }
 }
+
+/* 2.4 columns per element to fit 5 elements */
+
+.col-2dot4,
+.col-sm-2dot4,
+.col-md-2dot4,
+.col-lg-2dot4,
+.col-xl-2dot4 {
+    position:relative;
+    min-height:1px;
+    padding-left:15px;
+    padding-right:15px
+}
+
+@media (min-width:768px){
+    .col-sm-2dot4{float:left}
+    .col-sm-2dot4{width:20%}
+    .col-sm-pull-2dot4{right:20%}
+    .col-sm-push-2dot4{left:20%}
+    .col-sm-offset-2dot4{margin-left:20%}
+}

_includes/users.html

@@ -10,14 +10,44 @@ <h2>Users</h2>
             </div>
             <span class="users-intro">The following users have deployed JanusGraph in production.</span>
             <div class="row">
+                {% assign element_col_class = 'col-sm-3' %}
+                {% assign mod_remainder = site.posts | size | modulo: 4 %}
+                {% assign mod_remainder = 4 | minus: mod_remainder %}
+                {% assign mod_remainder = mod_remainder | modulo: 4 %}
+                {% assign mod_remainder_tmp = site.posts | size | modulo: 3 %}
+                {% assign mod_remainder_tmp = 3 | minus: mod_remainder_tmp %}
+                {% assign mod_remainder_tmp = mod_remainder_tmp | modulo: 3 %}
+                {% if mod_remainder > mod_remainder_tmp %}
+                    {% assign element_col_class = 'col-sm-4' %}
+                    {% assign mod_remainder = mod_remainder_tmp %}
+                {% endif %}
+                {% assign mod_remainder_tmp = site.posts | size | modulo: 5 %}
+                {% assign mod_remainder_tmp = 5 | minus: mod_remainder_tmp %}
+                {% assign mod_remainder_tmp = mod_remainder_tmp | modulo: 5 %}
+                {% if mod_remainder > mod_remainder_tmp %}
+                    {% assign element_col_class = 'col-sm-2dot4' %}
+                    {% assign mod_remainder = mod_remainder_tmp %}
+                {% endif %}
                 {% for post in site.posts %}
-                    <div class="col-sm-3 portfolio-item">
+                    <div class="{{ element_col_class }} portfolio-item">
                         <a href="{{ post.href }}" class="portfolio-link" data-toggle="modal">
                             <div class="caption"></div>
                             <img src="img/logos/{{ post.img }}" class="portfolio-img" alt="{{ post.alt }}">
                         </a>
                     </div>
                 {% endfor %}
+                {% if mod_remainder != 0 %}
+                    <div class="{{ element_col_class }}">
+                        <a href="https://github.com/janusgraph/janusgraph#powered-by-janusgraph" class="btn btn-lg btn-outline all-users-link">
+                            See all users&nbsp; <i class="fas fa-arrow-right"></i>
+                        </a>
+                    </div>
+                {% endif %}
             </div>
+            {% if mod_remainder == 0 %}
+            <a href="https://github.com/janusgraph/janusgraph#powered-by-janusgraph" class="btn btn-lg btn-outline all-users-link" style="margin: 0; !important;">
+                See all users&nbsp; <i class="fas fa-arrow-right"></i>
+            </a>
+            {% endif %}
         </div>
-    </section>
+    </section>