From 18dd7f58b087ac44bb4047fe09a60000e6cd34e3 Mon Sep 17 00:00:00 2001
From: Antonin <zepcome@gmail.com>
Date: Mon, 8 Aug 2016 18:07:36 +0200
Subject: [PATCH] Collapse by default optionnal parameters

---
 css/app/create_poll.css |  28 ++++
 tpl/create_poll.tpl     | 307 +++++++++++++++++++++-------------------
 2 files changed, 193 insertions(+), 142 deletions(-)

diff --git a/css/app/create_poll.css b/css/app/create_poll.css
index 3b91efb..58b79eb 100644
--- a/css/app/create_poll.css
+++ b/css/app/create_poll.css
@@ -1,3 +1,31 @@
 .form-horizontal .radio label {
     width: 100%;
+}
+
+.optionnal-parameters:hover, .optionnal-parameters:focus {
+    text-decoration: none;
+}
+
+.optionnal-parameters:active, .optionnal-parameters:focus {
+    outline: none;
+}
+
+.optionnal-parameters .caret, .optionnal-parameters.collapsed .caret.caret-up {
+    display: none;
+}
+
+.optionnal-parameters .caret.caret-up, .optionnal-parameters.collapsed .caret {
+    display: inline-block;
+}
+
+.caret.caret-up  {
+    border-bottom: 4px dashed;
+    border-top: 0 none;
+    content: "";
+}
+
+@media (max-width: 767px) {
+    #optionnal {
+        margin-top: 15px;
+    }
 }
\ No newline at end of file
diff --git a/tpl/create_poll.tpl b/tpl/create_poll.tpl
index f144661..a7780a9 100644
--- a/tpl/create_poll.tpl
+++ b/tpl/create_poll.tpl
@@ -101,168 +101,191 @@
                     </div>
                 {/if}
 
-                {* Poll identifier *}
-
-                <div class="form-group {$errors['customized_url']['class']}">
-                    <label for="poll_id" class="col-sm-4 control-label">
-                        {__('Step 1', 'Poll id')}<br/>
-                    </label>
-
-                    <div class="col-sm-8">
-                        <div class="checkbox">
-                            <label>
-                                <input id="use_customized_url" name="use_customized_url" type="checkbox" {if $use_customized_url}checked{/if}/>
-                                {__('Step 1', 'Customize the URL')}
-                            </label>
-                        </div>
-                    </div>
+                {* Optionnal parameters *}
+                <div class="col-sm-offset-3 col-sm-1 hidden-xs">
+                    <p class="lead">
+                        <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                    </p>
                 </div>
-                <div id="customized_url_options" {if !$use_customized_url}class="hidden"{/if}>
+                <div class="col-sm-8 col-xs-12">
+                    <span class="lead visible-xs-inline">
+                        <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                    </span>
+                    <a class="optionnal-parameters collapsed lead" role="button" data-toggle="collapse" href="#optionnal" aria-expanded="false" aria-controls="optionnal">
+                        Paramètres optionnels
+                        <i class="caret" aria-hidden="true"></i>
+                        <i class="caret caret-up" aria-hidden="true"></i>
+                    </a>
+
+                </div>
+                <div class="clearfix"></div>
+
+
+                <div class="collapse" id="optionnal">
+
+                    {* Poll identifier *}
+
                     <div class="form-group {$errors['customized_url']['class']}">
-                        <label for="customized_url" class="col-sm-4 control-label">
-                            <span id="pollUrlDesc" class="small">{__('Step 1', 'Poll id rules')}</span>
+                        <label for="poll_id" class="col-sm-4 control-label">
+                            {__('Step 1', 'Poll id')}<br/>
                         </label>
 
                         <div class="col-sm-8">
-                            <div class="input-group">
-                                <span class="input-group-addon">
-                                    {$SERVER_URL}
-                                </span>
-                                <input id="customized_url" type="text" name="customized_url" class="form-control" {$errors['customized_url']['aria']}
-                                       value="{$customized_url|html}" aria-describedBy="pollUrlDesc" maxlength="64"
-                                       pattern="[A-Za-z0-9-]+"/>
+                            <div class="checkbox">
+                                <label>
+                                    <input id="use_customized_url" name="use_customized_url" type="checkbox" {if $use_customized_url}checked{/if}/>
+                                    {__('Step 1', 'Customize the URL')}
+                                </label>
                             </div>
-                            <span class="help-block text-warning">{__('Step 1', 'Poll id warning')}</span>
                         </div>
                     </div>
-                    {if !empty($errors['customized_url']['msg'])}
-                        <div class="alert alert-danger">
-                            <p id="poll_customized_url_error">
-                                {$errors['customized_url']['msg']}
-                            </p>
+                    <div id="customized_url_options" {if !$use_customized_url}class="hidden"{/if}>
+                        <div class="form-group {$errors['customized_url']['class']}">
+                            <label for="customized_url" class="col-sm-4 control-label">
+                                <span id="pollUrlDesc" class="small">{__('Step 1', 'Poll id rules')}</span>
+                            </label>
+
+                            <div class="col-sm-8">
+                                <div class="input-group">
+                                    <span class="input-group-addon">
+                                        {$SERVER_URL}
+                                    </span>
+                                    <input id="customized_url" type="text" name="customized_url" class="form-control" {$errors['customized_url']['aria']}
+                                           value="{$customized_url|html}" aria-describedBy="pollUrlDesc" maxlength="64"
+                                           pattern="[A-Za-z0-9-]+"/>
+                                </div>
+                                <span class="help-block text-warning">{__('Step 1', 'Poll id warning')}</span>
+                            </div>
+                        </div>
+                        {if !empty($errors['customized_url']['msg'])}
+                            <div class="alert alert-danger">
+                                <p id="poll_customized_url_error">
+                                    {$errors['customized_url']['msg']}
+                                </p>
+                            </div>
+                        {/if}
+                    </div>
+
+                    {* Password *}
+
+                    <div class="form-group">
+                        <label for="poll_id" class="col-sm-4 control-label">
+                            {__('Step 1', 'Poll password')}
+                        </label>
+
+                        <div class="col-sm-8">
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="use_password" {if $poll_use_password}checked{/if}
+                                           id="use_password">
+                                    {__('Step 1', "Use a password to restrict access")}
+                                </label>
+                            </div>
+                        </div>
+
+                        <div id="password_options"{if !$poll_use_password} class="hidden"{/if}>
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <div class="input-group">
+                                    <input id="poll_password" type="password" name="password" class="form-control" {$errors['password']['aria']}/>
+                                    <label for="poll_password" class="input-group-addon">{__('Step 1', 'Password choice')}</label>
+                                </div>
+                            </div>
+                            {if !empty($errors['password']['msg'])}
+                                <div class="alert alert-danger">
+                                    <p id="poll_password_error">
+                                        {$errors['password']['msg']}
+                                    </p>
+                                </div>
+                            {/if}
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <div class="input-group">
+                                    <input id="poll_password_repeat" type="password" name="password_repeat" class="form-control" {$errors['password_repeat']['aria']}/>
+                                    <label for="poll_password_repeat" class="input-group-addon">{__('Step 1', 'Password confirmation')}</label>
+                                </div>
+                            </div>
+                            {if !empty($errors['password_repeat']['msg'])}
+                                <div class="alert alert-danger">
+                                    <p id="poll_password_repeat_error">
+                                        {$errors['password_repeat']['msg']}
+                                    </p>
+                                </div>
+                            {/if}
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" name="results_publicly_visible"
+                                               {if $poll_results_publicly_visible}checked{/if} id="results_publicly_visible"/>
+                                        {__('Step 1', "The results are publicly visible")}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="poll_id" class="col-sm-4 control-label">
+                            {__('Step 1', 'Permissions')}
+                        </label>
+                        <div class="col-sm-8">
+                            <div class="radio">
+                                <label>
+                                    <input type="radio" name="editable" id="editableByAll" {if $poll_editable==constant("Framadate\Editable::EDITABLE_BY_ALL")}checked{/if} value="{constant("Framadate\Editable::EDITABLE_BY_ALL")}">
+                                    {__('Step 1', 'All voters can modify any vote')}
+                                </label>
+                                <label>
+                                    <input type="radio" name="editable" {if $poll_editable==constant("Framadate\Editable::EDITABLE_BY_OWN")}checked{/if} value="{constant("Framadate\Editable::EDITABLE_BY_OWN")}">
+                                    {__('Step 1', 'Voters can modify their vote themselves')}
+                                </label>
+                                <label>
+                                    <input type="radio" name="editable" {if empty($poll_editable) or $poll_editable==constant("Framadate\Editable::NOT_EDITABLE")}checked{/if} value="{constant("Framadate\Editable::NOT_EDITABLE")}">
+                                    {__('Step 1', 'Votes cannot be modified')}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    {if $use_smtp}
+                        <div class="form-group">
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" name="receiveNewVotes" {if $poll_receiveNewVotes}checked{/if}
+                                        id="receiveNewVotes">
+                                        {__('Step 1', 'To receive an email for each new vote')}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <div class="checkbox">
+                                    <label>
+                                        <input type="checkbox" name="receiveNewComments" {if $poll_receiveNewComments}checked{/if}
+                                        id="receiveNewComments">
+                                        {__('Step 1', 'To receive an email for each new comment')}
+                                    </label>
+                                </div>
+                            </div>
                         </div>
                     {/if}
-                </div>
 
-                {* Password *}
-
-                <div class="form-group">
-                    <label for="poll_id" class="col-sm-4 control-label">
-                        {__('Step 1', 'Poll password')}
-                    </label>
-
-                    <div class="col-sm-8">
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" name="use_password" {if $poll_use_password}checked{/if}
-                                       id="use_password">
-                                {__('Step 1', "Use a password to restrict access")}
-                            </label>
-                        </div>
-                    </div>
-
-                    <div id="password_options"{if !$poll_use_password} class="hidden"{/if}>
-                        <div class="col-sm-offset-4 col-sm-8">
-                            <div class="input-group">
-                                <input id="poll_password" type="password" name="password" class="form-control" {$errors['password']['aria']}/>
-                                <label for="poll_password" class="input-group-addon">{__('Step 1', 'Password choice')}</label>
-                            </div>
-                        </div>
-                        {if !empty($errors['password']['msg'])}
-                            <div class="alert alert-danger">
-                                <p id="poll_password_error">
-                                    {$errors['password']['msg']}
-                                </p>
-                            </div>
-                        {/if}
-                        <div class="col-sm-offset-4 col-sm-8">
-                            <div class="input-group">
-                                <input id="poll_password_repeat" type="password" name="password_repeat" class="form-control" {$errors['password_repeat']['aria']}/>
-                                <label for="poll_password_repeat" class="input-group-addon">{__('Step 1', 'Password confirmation')}</label>
-                            </div>
-                        </div>
-                        {if !empty($errors['password_repeat']['msg'])}
-                            <div class="alert alert-danger">
-                                <p id="poll_password_repeat_error">
-                                    {$errors['password_repeat']['msg']}
-                                </p>
-                            </div>
-                        {/if}
-                        <div class="col-sm-offset-4 col-sm-8">
-                            <div class="checkbox">
-                                <label>
-                                    <input type="checkbox" name="results_publicly_visible"
-                                           {if $poll_results_publicly_visible}checked{/if} id="results_publicly_visible"/>
-                                    {__('Step 1', "The results are publicly visible")}
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="poll_id" class="col-sm-4 control-label">
-                        {__('Step 1', 'Permissions')}
-                    </label>
-                    <div class="col-sm-8">
-                        <div class="radio">
-                            <label>
-                                <input type="radio" name="editable" id="editableByAll" {if $poll_editable==constant("Framadate\Editable::EDITABLE_BY_ALL")}checked{/if} value="{constant("Framadate\Editable::EDITABLE_BY_ALL")}">
-                                {__('Step 1', 'All voters can modify any vote')}
-                            </label>
-                            <label>
-                                <input type="radio" name="editable" {if $poll_editable==constant("Framadate\Editable::EDITABLE_BY_OWN")}checked{/if} value="{constant("Framadate\Editable::EDITABLE_BY_OWN")}">
-                                {__('Step 1', 'Voters can modify their vote themselves')}
-                            </label>
-                            <label>
-                                <input type="radio" name="editable" {if empty($poll_editable) or $poll_editable==constant("Framadate\Editable::NOT_EDITABLE")}checked{/if} value="{constant("Framadate\Editable::NOT_EDITABLE")}">
-                                {__('Step 1', 'Votes cannot be modified')}
-                            </label>
-                        </div>
-                    </div>
-                </div>
-
-
-                {if $use_smtp}
                     <div class="form-group">
                         <div class="col-sm-offset-4 col-sm-8">
                             <div class="checkbox">
                                 <label>
-                                    <input type="checkbox" name="receiveNewVotes" {if $poll_receiveNewVotes}checked{/if}
-                                    id="receiveNewVotes">
-                                    {__('Step 1', 'To receive an email for each new vote')}
+                                    <input type="checkbox" name="hidden" {if $poll_hidden}checked{/if}
+                                    id="hidden">
+                                    {__('Step 1', "Only the poll maker can see the poll's results")}
                                 </label>
                             </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-offset-4 col-sm-8">
-                            <div class="checkbox">
-                                <label>
-                                    <input type="checkbox" name="receiveNewComments" {if $poll_receiveNewComments}checked{/if}
-                                    id="receiveNewComments">
-                                    {__('Step 1', 'To receive an email for each new comment')}
-                                </label>
+                            <div id="hiddenWithBadEditionModeError" class="alert alert-danger hidden">
+                                <p>
+                                    {__('Error', "You can't create a poll with hidden results with the following edition option:")}"{__('Step 1', 'All voters can modify any vote')}"
+                                </p>
                             </div>
                         </div>
                     </div>
-                {/if}
-
-                <div class="form-group">
-                    <div class="col-sm-offset-4 col-sm-8">
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" name="hidden" {if $poll_hidden}checked{/if}
-                                id="hidden">
-                                {__('Step 1', "Only the poll maker can see the poll's results")}
-                            </label>
-                        </div>
-                        <div id="hiddenWithBadEditionModeError" class="alert alert-danger hidden">
-                            <p>
-                                {__('Error', "You can't create a poll with hidden results with the following edition option:")}"{__('Step 1', 'All voters can modify any vote')}"
-                            </p>
-                        </div>
-                    </div>
                 </div>
 
                 <p class="text-right">