Commit d9f8d4f6 authored by Chenu Denis's avatar Chenu Denis
Browse files

[feature] headercontainer and titlelocation

parent bb0620b2
......@@ -16,7 +16,7 @@
<supportUrl>https://extensions.sondages.pro/themes-and-templates/skelvanilla-a11y-and-usuability/</supportUrl>
<copyright>Copyright (C) 2018-2020 Denis Chenu / Sondages Pro</copyright>
<license>GNU General Public License version 3 or later</license>
<version>9.3.3</version>
<version>9.4.0-alpha</version>
<apiVersion>3</apiVersion>
<description><![CDATA[<strong>LimeSurvey Bootstrap Vanilla Survey Theme with Accessibility and Options</strong><br>Base on vanilla theme, usage of more aria, fix some role and aria from core.<br>Allow usage of a lot of variations, list of variation can be updated. Some decoration option using boostrap class.]]></description>
<extends>vanilla</extends>
......@@ -69,6 +69,8 @@
<helpcolor>text-info</helpcolor>
<validitycolor>text-info</validitycolor>
<fixedheader>off</fixedheader>
<headercontainer>off</headercontainer>
<titlelocation>header</titlelocation>
<theme>off</theme>
<bodyloaded>on</bodyloaded>
<removeback>on</removeback>
......
......@@ -15,7 +15,7 @@
}
.navbar-brand .logo-container {padding:0;padding:0 0.5rem;display:inline-block;}
.navbar-brand .logo-container > img{max-height:2em;width:auto;display:inline-block;}
.navbar-brand .logo-container > img{width:auto;display:inline-block;}
.navbar-brand img {vertical-align: text-bottom;}
.skip-navigation{list-style-type: none;}
......
......@@ -153,7 +153,11 @@ var ThemeOptions = function(){
// selector_option_value_field are the select dropdown (like variations and fonts)
var prepareSelectField = function(){
globalForm.find('.selector_option_value_field').each(function(i,item){
var itemValue = parseOptionValue(item, 'off');
var defaultValue = 'off';
if ($(item).data("default")) {
defaultValue = $(item).data("default");
}
var itemValue = parseOptionValue(item, defaultValue);
$(item).val(itemValue).trigger("change");
disableImagePreviewIfneeded(item);
});
......
......@@ -504,6 +504,33 @@
</div>
</div>
</div>
<div class='col-sm-12 col-md-6 col-lg-3'>
<div class='form-group row'>
<label for='simple_edit_options_headercontainer' class='control-label col-xs-4'> {{ gT("Header container") }} </label>
<div class='col-xs-8'>
<div class="btn-group" data-toggle="buttons" data-default='off'>
<label class="btn btn-default">
<input type='radio' name='headercontainer' value='on' class='selector_option_radio_field simple_edit_options_headercontainer ' data-id='headercontainer'/>
{{ gT("Yes") }}
</label>
<label class="btn btn-default">
<input type='radio' name='headercontainer' value='off' class='selector_option_radio_field simple_edit_options_headercontainer ' data-id='headercontainer'/>
{{ gT("No") }}
</label>
{# If this is a root template setting, don't show the inherit button #}
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
<label class="btn btn-default">
<input type='radio' name='headercontainer' value='inherit' class='selector_option_radio_field simple_edit_options_headercontainer ' data-id='headercontainer'/>
{{ gT("Inherit") }}
</label>
{% endif %}
</div>
</div>
<p class="help-block col-xs-12">{{ gT("Set as following survey container, default is no : header take all width.") }}</p>
</div>
</div>
</div>
<div class="row action_hide_on_inherit">
{# Question size #}
<div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
<div class='form-group row'>
......@@ -628,6 +655,8 @@
</div>
</div>
</div>
</div>
<div class="row action_hide_on_inherit">
{# Body loading loaded #}
<div class='col-sm-12 col-md-6 col-lg-3'>
<div class='form-group row'>
......@@ -665,27 +694,33 @@
<h3 class="h3 action_hide_on_inherit">{{ gT("Content") }}</h3>
<div class="row action_hide_on_inherit">
{# Description #}
<div class='col-sm-12 col-md-6 col-lg-6'>
<div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
<div class='form-group row'>
<label for='simple_edit_options_descriptiondisplay' class='control-label col-xs-4'> {{ gT("Survey description display") }} </label>
<div class='col-xs-8'>
<div class="btn-group" data-toggle="buttons" role='radiogroup' aria-labelledby='simple_edit_options_descriptiondisplay' data-default='welcome'>
<label class="btn btn-default">
<input type='radio' name='descriptiondisplay' value='all' class='selector_option_radio_field simple_edit_options_descriptiondisplay ' data-id='descriptiondisplay'/>
{{ gT("All page") }}
</label>
<label class="btn btn-default">
<input type='radio' name='descriptiondisplay' value='welcome' class='selector_option_radio_field simple_edit_options_descriptiondisplay ' data-id='descriptiondisplay'/>
{{ gT("Only on welcome page") }}
</label>
{# If this is a root template setting, don't show the inherit button #}
<select class='form-control selector_option_value_field' id='simple_edit_options_descriptiondisplay' name='descriptiondisplay' data-default="welcome">
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
<label class="btn btn-default">
<input type='radio' name='descriptiondisplay' value='inherit' class='selector_option_radio_field simple_edit_options_descriptiondisplay ' data-id='descriptiondisplay'/>
{{ gT("Inherit") }}
</label>
<option value="inherit"> {{ gT('Inherit') }}</option>
{% endif %}
</div>
<option value="welcome">{{ gT("Only on welcome page") }}</option>
<option value="all">{{ gT("All page") }}</option>
</select>
</div>
</div>
</div>
{# Title location #}
<div class='col-sm-12 col-md-6 col-lg-3 container-fluid'>
<div class='form-group row'>
<label for='simple_edit_options_titlelocation' class='control-label col-xs-4'>{{ gT("Title location and display") }}</label>
<div class='col-xs-8'>
<select class='form-control selector_option_value_field' id='simple_edit_options_titlelocation' name='titlelocation' data-default="header">
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %}
<option value="inherit"> {{ gT('Inherit') }}</option>
{% endif %}
<option value="header">{{ gT("In header") }}</option>
<option value="content">{{ gT("In content") }}</option>
<option value="hidden">{{ gT("Hidden (in header for accessibility)") }}</option>
</select>
</div>
</div>
</div>
......
{% if aSurveyInfo.options.titlelocation == 'content' %}
<h1 class="{% if (aSurveyInfo.options.container == "on") %} container {% else %} container-fluid {% endif %}">
{{ pagetitle ?: processString(aSurveyInfo.surveyls_title,1) }}
</h1>
{% endif %}
{% if aSurveyInfo.options.descriptiondisplay == 'all' %}
{% if processString(aSurveyInfo.description,1) %}
<div class="description-wrapper">
......
......@@ -16,66 +16,109 @@
For the survey navigator ("Next", "Back", etc.), see: navigation/navigator.twig
#}
{% set havepreviouslink = (aSurveyInfo.options.previouslink == 'on' and aSurveyInfo.aNavigator.aMovePrev.show) %}
{% set havenextsubmitlink = (aSurveyInfo.options.nextsubmitlink == 'on' and aSurveyInfo.aNavigator.aMoveNext.show) %}
{% set hasMenu = (aSurveyInfo.options.savelink != 'off' or aSurveyInfo.options.clearalllink != 'off' or aSurveyInfo.options.indexlink != 'off' or aSurveyInfo.options.languagelink != 'off' or havenextsubmitlink or havenextsubmitlink) %}
{% set containerclass = 'container-fluid' %}
{% if (aSurveyInfo.options.container == "on" and aSurveyInfo.options.headercontainer == "on") %}
{% set containerclass = 'container' %}
{% endif %}
<!-- Bootstrap Navigation Bar -->
{% if(aSurveyInfo.class.navbar) %}
{% if(aSurveyInfo.options.fixedheader == 'on') %}
<div class="invisible navbar navbar-inverse navbar-static-top" aria-hidden="true">
<div class="container-fluid">
<div class="{{ aSurveyInfo.class.navbarheader }}">
<div class="{{ aSurveyInfo.class.navbarbrand }} {% if( aSurveyInfo.options.brandlogo == "on") %}with-logo{% endif %}">
{% if( aSurveyInfo.options.brandlogo == "on") %}
<span class="logo-container">
{{ image(aSurveyInfo.options.brandlogofile, "", {"class": "logo img-responsive"}) }}
</span>
{% endif %}
{{ aSurveyInfo.name }}
{% if(aSurveyInfo.options.fixedheader == 'on') %}
<div class="invisible navbar navbar-inverse navbar-static-top" aria-hidden="true">
<div class="{{ containerclass }}">
<div class="{{ aSurveyInfo.class.navbarheader }}">
{% if(hasMenu) %}
<button type="button" class="{{ aSurveyInfo.class.navbartoggle }}" {{ aSurveyInfo.attr.navbartoggle }} >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{% endif %}
{% if(aSurveyInfo.options.titlelocation != 'content') %}
<div class="h1 {{ aSurveyInfo.class.navbarbrand }} {% if( aSurveyInfo.options.brandlogo == "on") %}with-logo{% endif %}" {{ aSurveyInfo.attr.navbarbrand }} >
{% if( aSurveyInfo.options.brandlogo == "on") %}
<span class="logo-container">
{{ image(aSurveyInfo.options.brandlogofile, "", {"class": "logo img-responsive"}) }}
</span>
{% endif %}
{% if(aSurveyInfo.options.titlelocation == 'hidden') %}<div class="sr-only">{% endif %}
{{ pagetitle ?: processString(aSurveyInfo.surveyls_title,1) }}
{% if(aSurveyInfo.options.titlelocation == 'hidden') %}</div>{% endif %}
</div>
{% else %}
<div class="h1 {{ aSurveyInfo.class.navbarbrand }} {% if( aSurveyInfo.options.brandlogo == "on") %}with-logo{% endif %}" {{ aSurveyInfo.attr.navbarbrand }} aria-hidden="true" >
{% if( aSurveyInfo.options.brandlogo == "on") %}
<span class="logo-container">
{{ image(aSurveyInfo.options.brandlogofile, "", {"class": "logo img-responsive"}) }}
</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
<header class="{{ aSurveyInfo.class.navbar }} {{ (aSurveyInfo.options.fixedheader == 'on') ? 'navbar-fixed-top' : 'navbar-static-top' }} hidden-print" role="banner" {{ aSurveyInfo.attr.navbar }}>
<div class="container-fluid" role="navigation">
<div class="{{ aSurveyInfo.class.navbarheader }}" {{ aSurveyInfo.attr.navbarheader }} >
{{ include('./subviews/navigation/shortcuts_links.twig') }}
<button type="button" class="{{ aSurveyInfo.class.navbartoggle }}" {{ aSurveyInfo.attr.navbartoggle }} >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="{{ aSurveyInfo.class.navbarbrand }} {% if( aSurveyInfo.options.brandlogo == "on") %}with-logo{% endif %}" {{ aSurveyInfo.attr.navbarbrand }} >
{% if( aSurveyInfo.options.brandlogo == "on") %}
<span class="logo-container">
{{ image(aSurveyInfo.options.brandlogofile, "", {"class": "logo img-responsive"}) }}
</span>
{% endif %}
{{ pagetitle ?: flatString(processString(aSurveyInfo.surveyls_title,1)) }}
</h1>
</div>
<div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
<ul class="{{ aSurveyInfo.class.navbarlink }} navbar-right" {{ aSurveyInfo.attr.navbarlink }}>
{% if(aSurveyInfo.options.savelink != 'off') %}
{{ include('./subviews/navigation/save_links.twig') }}
{% endif %}
<header class="{{ aSurveyInfo.class.navbar }} {{ (aSurveyInfo.options.fixedheader == 'on') ? 'navbar-fixed-top' : 'navbar-static-top' }} hidden-print" role="banner" {{ aSurveyInfo.attr.navbar }}>
<div class="{{ containerclass }}" role="navigation">
<div class="{{ aSurveyInfo.class.navbarheader }}" {{ aSurveyInfo.attr.navbarheader }} >
{{ include('./subviews/navigation/shortcuts_links.twig') }}
{% if(hasMenu) %}
<button type="button" class="{{ aSurveyInfo.class.navbartoggle }}" {{ aSurveyInfo.attr.navbartoggle }} >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{% endif %}
{% if(aSurveyInfo.options.clearalllink != 'off') %}
{{ include('./subviews/navigation/clearall_links.twig') }}
{% if(aSurveyInfo.options.titlelocation != 'content') %}
<h1 class="{{ aSurveyInfo.class.navbarbrand }} {% if( aSurveyInfo.options.brandlogo == "on") %}with-logo{% endif %}" {{ aSurveyInfo.attr.navbarbrand }} >
{% if( aSurveyInfo.options.brandlogo == "on") %}
<span class="logo-container">
{{ image(aSurveyInfo.options.brandlogofile, "", {"class": "logo img-responsive"}) }}
</span>
{% endif %}
{% if(aSurveyInfo.options.titlelocation == 'hidden') %}<div class="sr-only">{% endif %}
{{ pagetitle ?: processString(aSurveyInfo.surveyls_title,1) }}
{% if(aSurveyInfo.options.titlelocation == 'hidden') %}</div>{% endif %}
</h1>
{% else %}
<div class="h1 {{ aSurveyInfo.class.navbarbrand }} {% if( aSurveyInfo.options.brandlogo == "on") %}with-logo{% endif %}" {{ aSurveyInfo.attr.navbarbrand }} aria-hidden="true" >
{% if( aSurveyInfo.options.brandlogo == "on") %}
<span class="logo-container">
{{ image(aSurveyInfo.options.brandlogofile, "", {"class": "logo img-responsive"}) }}
</span>
{% endif %}
</div>
{% endif %}
{% if(aSurveyInfo.options.indexlink != 'off') %}
{{ include('./subviews/navigation/question_index_menu.twig') }}
{% endif %}
{% if(aSurveyInfo.options.languagelink != 'off') %}
{{ include('./subviews/navigation/language_changer_top_menu.twig') }}
{% endif %}
{% if(aSurveyInfo.options.previouslink == 'on') %}
{{ include('./subviews/navigation/previous_link.twig') }}
{% endif %}
{% if(aSurveyInfo.options.nextsubmitlink == 'on') %}
{{ include('./subviews/navigation/nextsubmit_link.twig') }}
{% endif %}
</ul>
</div>
{% if(hasMenu) %}
<div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
<ul class="{{ aSurveyInfo.class.navbarlink }} navbar-right" {{ aSurveyInfo.attr.navbarlink }}>
{% if(aSurveyInfo.options.savelink != 'off') %}
{{ include('./subviews/navigation/save_links.twig') }}
{% endif %}
{% if(aSurveyInfo.options.clearalllink != 'off') %}
{{ include('./subviews/navigation/clearall_links.twig') }}
{% endif %}
{% if(aSurveyInfo.options.indexlink != 'off') %}
{{ include('./subviews/navigation/question_index_menu.twig') }}
{% endif %}
{% if(aSurveyInfo.options.languagelink != 'off') %}
{{ include('./subviews/navigation/language_changer_top_menu.twig') }}
{% endif %}
{% if(aSurveyInfo.options.previouslink == 'on') %}
{{ include('./subviews/navigation/previous_link.twig') }}
{% endif %}
{% if(aSurveyInfo.options.nextsubmitlink == 'on') %}
{{ include('./subviews/navigation/nextsubmit_link.twig') }}
{% endif %}
</ul>
</div>
{% endif %}
</div>
</div>
</header>
</header>
{% endif %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment