As Denis suggests, you can move the existing links and style them to look like buttons.
1) Remove or comment this out in
nav_bar.twig:
Code:
{{ include('./subviews/navigation/question_index_menu.twig') }}
2) In
question_index_menu.twig, modify the format == 'G' block so it looks something like this (you may want to tweak it more for screen-size responsiveness):
Code:
{% if aSurveyInfo.format == 'G' %}
<!-- Question index, group, {{ aSurveyInfo.aQuestionIndex.type }} -->
<ul class="{{ aSurveyInfo.class.indexmenusgul }}" {{ aSurveyInfo.attr.indexmenusgul }}>
{# TODO: move back this logic to SurveyRuntime, and provide a ready to use indexItem.statusClass #}
{% for step, indexItem in aSurveyInfo.aQuestionIndex.items %}
{% set statusClass = '' %}
{% if attribute(indexItem.stepStatus, 'index-item-unanswered') is defined and attribute(indexItem.stepStatus, 'index-item-unanswered') == true %}
{% set statusClass = statusClass ~ ' bg-warning' %}
{% endif %}
{% if attribute(indexItem.stepStatus, 'index-item-error') is defined and attribute(indexItem.stepStatus, 'index-item-error') == true %}
{% set statusClass = statusClass ~ ' bg-danger' %}
{% endif %}
{% if attribute(indexItem.stepStatus, 'index-item-current') is defined and attribute(indexItem.stepStatus, 'index-item-current') == true %}
{% set statusClass = statusClass ~ ' disabled' %}
{% endif %}
<li class="{{ indexItem.coreClass }} {{ statusClass }}" {{ aSurveyInfo.attr.indexmenusgli }}>
<a href='{{ indexItem.url }}' data-limesurvey-submit='{{ indexItem.submit }}' class='aminate btn btn-lg btn-primary'>
{{ indexItem.text }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
3) In
layout_global.twig, after the nav_bar block, add something like this:
Code:
<div class="custom-index-wrapper">
{{ include('./subviews/navigation/question_index_menu.twig') }}
</div>
4) Add something like this to the end of
custom.css (you may want to tweak it more for screen-size responsiveness):
Code:
.custom-index-wrapper {
margin: 20px 0;
}
.custom-index-wrapper ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.custom-index-wrapper li {
display: inline-block;
margin: 0 5px;
}
.custom-index-wrapper li.index-item-current {
opacity:0.65;
filter:alpha(opacity=65);
}
.custom-index-wrapper li a {
min-width: 80px;
}
.custom-index-wrapper li.index-item-current a {
cursor: default;
}
I only put the code inside the nav bar for testing. I tried different twig files to see whether it affects the responsiveness of buttons. The layout_global.twig would be a good place to put it.
