Overview
Comment:Advancement on the transaction creation form
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | dev
Files: files | file ages | folders
SHA1: 958821f73ff97c2c15c6b0991b6b7c6c39219979
User & Date: bohwaz on 2020-09-09 21:17:44
Other Links: branch diff | manifest | tags
Context
2020-09-10
00:19
Fix queries check-in: d5683e8d06 user: bohwaz tags: dev
2020-09-09
21:17
Advancement on the transaction creation form check-in: 958821f73f user: bohwaz tags: dev
21:17
Display current year and chart check-in: 78ca60b49f user: bohwaz tags: dev
Changes

Modified src/templates/acc/transactions/new.tpl from [b6541e1492] to [f1b8abb95a].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


32
33
34
35
36
37
38
39
40
41

42
43
44
45


46
47
48
49
50

51
52
53
54




55



56
57
58
59
60
61
62

63
64

65
66
67
68
69




70
71
72
73
74
75
76
77
78
79
80
81
82
83



84
85
86
87
88
89
90

91
92
93
94
95
96
















97








98


99
100




101
102


103
104


105
106


107
108
109
110
111
112
113
114





115
116
117
118
119
120
121
122
123
124
125
126




127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

149

150
151
152
153
154
155
156
157
158
{include file="admin/_head.tpl" title="Saisie d'une opération" current="compta/saisie" js=1}

<form method="post" action="{$self_url}">
    {form_errors}

    {if $ok}
        <p class="confirm">
            L'opération numéro <a href="{$admin_url}compta/operations/voir.php?id={$ok}">{$ok}</a> a été ajoutée.
            (<a href="{$admin_url}compta/operations/voir.php?id={$ok}">Voir l'opération</a>)
        </p>
    {/if}

    <fieldset>
        <legend>Type d'écriture</legend>
        <dl>
            {input type="radio" name="type" value="recette" label="Recette"}
            {input type="radio" name="type" value="depense" label="Dépense"}
            {input type="radio" name="type" value="virement" label="Virement" help="Faire un virement entre comptes, déposer des espèces en banque, etc."}
            {input type="radio" name="type" value="dette" label="Dette" help="Quand l'association doit de l'argent à un membre ou un fournisseur"}
            {input type="radio" name="type" value="creance" label="Créance" help="Quand un membre ou un fournisseur doit de l'argent à l'association"}
            {input type="radio" name="type" value="avance" label="Saisie avancée" help="Choisir les comptes du plan comptable, ventiler une écriture sur plusieurs comptes, etc."}
        </dl>
    </fieldset>

    <fieldset>
        <legend>Informations</legend>
        <dl>
            {input type="date" name="date" value=$date label="Date" required=1}
            {input type="text" name="label" label="Libellé" required=1}
            {input type="number" name="amount" label="Montant" min="0.00" step="0.01" value="0.00" required=1} {$config.monnaie}
        </dl>


        <dl class="type_recette type_depense">
            {input type="select_groups" name="account" label="Compte" required=1}
            {input type="text" name="reference_paiement" label="Référence de paiement" help="Numéro de chèque, numéro de transaction CB, etc."}
        </dl>
        <dl class="type_avance">
            {input type="compta_lignes" name="lignes" label="Lignes de l'écriture"}
        </dl>
    </fieldset>

    <fieldset class="type_virement">

        <legend>Virement</legend>
        <dl>
            {input type="select" name="from" options=$comptes label="De" required=1}
            {input type="select" name="to" options=$comptes label="Vers" required=1}


        </dl>
    </fieldset>

    <fieldset>
        <legend>Détails</legend>

        <dl>
            {input type="datalist" name="membre" label="Membres associés"}
            {input type="text" name="numero_piece" label="Numéro de pièce comptable"}
            {input type="textarea" name="remarques" label="Remarques" rows=4 cols=30}








            {if count($projets) > 0}
                {input type="select" name="projet" options=$projets}
            {/if}
        </dl>
    </fieldset>

    <fieldset class="type_dette">

        <legend>Dette</legend>
        <dl>

            <dt><label for="f_compte_usager">Type de dette</label></dt>
            <dd>
                <input type="radio" name="compte" id="f_compte_usager" value="4110" {form_field name=compte checked=4110 default=4110} />
                <label for="f_compte_usager">Dette envers un membre ou usager</label>
            </dd>




            <dd>
                <input type="radio" name="compte" id="f_compte_fournisseur" value="4010" {form_field name=compte checked=4010} />
                <label for="f_compte_fournisseur">Dette envers un fournisseur</label>
            </dd>
        </dl>
    </fieldset>

    <fieldset class="type_recette">
        <legend>Catégorie</legend>
        <dl class="catList">
        {foreach from=$categories_recettes item="cat"}
            {input type="radio" name="categorie_recette" value=$cat.id label=$cat.intitule}
            {if !empty($cat.description)}
                <dd class="desc">{$cat.description}</dd>



            {/if}
        {/foreach}
        </dl>
    </fieldset>

    <fieldset class="type_depense type_dette">
        <legend>Catégorie</legend>

        <dl class="catList">
        {foreach from=$categories_depenses item="cat"}
            {input type="radio" name="categorie_depense" value=$cat.id label=$cat.intitule}
            {if !empty($cat.description)}
                <dd class="desc">{$cat.description}</dd>
            {/if}
















        {/foreach}








        </dl>


    </fieldset>






    <script type="text/javascript">


    {literal}
    (function () {



        function changeMoyenPaiement()


        {
            var elm = $('#f_moyen_paiement');
            g.toggle('.f_cheque', elm.value == 'CH');
            g.toggle('.f_banque', elm.value != 'ES');

            g.toggle('.f_a_encaisser', elm.value == 'CB' || elm.value == 'CH');

            cocherAEncaisser();





        }

        function changeTypeSaisie(type)
        {
            g.toggle(['.type_dette', '.type_recette', '.type_depense', '.type_avance', '.type_virement'], false);
            g.toggle('.type_' + type, true);
        }

        function cocherAEncaisser()
        {
            var elm = $('#f_a_encaisser');
            g.toggle('.f_banque', !elm.checked && $('#f_moyen_paiement').value != 'ES');




        }

        changeMoyenPaiement();
        changeTypeSaisie(document.forms[0].type.value);
        cocherAEncaisser();

        $('#f_moyen_paiement').onchange = changeMoyenPaiement;

        $('#f_a_encaisser').onchange = cocherAEncaisser;

        var inputs = $('input[name="type"]');

        for (var i = 0; i < inputs.length; i++)
        {
            inputs[i].onchange = function (e) {
                changeTypeSaisie(this.value);
            };
        }

        $('#f_date').focus();
    } ());
    {/literal}

    </script>


    <p class="submit">
        {csrf_field key="compta_saisie"}
        <input type="submit" name="save" value="Enregistrer &rarr;" />
    </p>

</form>

{include file="admin/_foot.tpl"}
|


|

|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|

|
|
|
<
|
<
|
>
>
|
<
|
|
<
<
<
|

<
>
|
|
<
<
>
>
|
|

|
<
>
|
<
<
<
>
>
>
>

>
>
>
|
|
<
|
|

<
>
|
|
>
|
<
<
<
|
>
>
>
>
|
<
|
|
|
|

|
|
|
|
|
|
<
>
>
>
|
<
|
|

<
|
>
|
<
|
|
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>
>
>
>
>
>
|
>
>
|

>
>
>
>

<
>
>
|
<
>
>

<
>
>
|
<
<
<
<
<
<
<
>
>
>
>
>
|
<
<
<
<
<
|
|
<
|
<
<
>
>
>
>
|

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
>
|
>

<
<
<
<
<
<
<

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

28

29
30
31
32

33
34



35
36

37
38
39


40
41
42
43
44
45

46
47



48
49
50
51
52
53
54
55
56
57

58
59
60

61
62
63
64
65



66
67
68
69
70
71

72
73
74
75
76
77
78
79
80
81
82

83
84
85
86

87
88
89

90
91
92

93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

132
133
134

135
136
137

138
139
140







141
142
143
144
145
146





147
148

149


150
151
152
153
154
155




















156
157
158
159







160
{include file="admin/_head.tpl" title="Saisie d'une écriture" current="acc/new" js=1}

<form method="post" action="{$self_url}">
	{form_errors}

	{if $ok}
		<p class="confirm">
			L'opération numéro <a href="{$admin_url}compta/operations/voir.php?id={$ok}">{$ok}</a> a été ajoutée.
			(<a href="{$admin_url}compta/operations/voir.php?id={$ok}">Voir l'opération</a>)
		</p>
	{/if}

	<fieldset>
		<legend>Type d'écriture</legend>
		<dl>
			{input type="radio" name="type" value="revenue" label="Recette"}
			{input type="radio" name="type" value="expense" label="Dépense"}
			{input type="radio" name="type" value="transfer" label="Virement" help="Faire un virement entre comptes, déposer des espèces en banque, etc."}
			{input type="radio" name="type" value="debt" label="Dette" help="Quand l'association doit de l'argent à un membre ou un fournisseur"}
			{input type="radio" name="type" value="credit" label="Créance" help="Quand un membre ou un fournisseur doit de l'argent à l'association"}
			{input type="radio" name="type" value="advanced" label="Saisie avancée" help="Choisir les comptes du plan comptable, ventiler une écriture sur plusieurs comptes, etc."}
		</dl>
	</fieldset>

	<fieldset>
		<legend>Informations</legend>
		<dl>

			{input type="text" name="label" label="Libellé" required=1}

		</dl>
		<dl data-types="revenue expense transfer debt credit">
			{input type="date" name="date" value=$date label="Date" required=1}
			{input type="number" name="amount" label="Montant (%s)"|args:$config.monnaie min="0.00" step="0.01" value="0.00" required=1}

			{input type="text" name="reference_paiement" label="Référence de paiement" help="Numéro de chèque, numéro de transaction CB, etc."}
		</dl>



	</fieldset>


	<fieldset data-types="transfer">
		<legend>Virement</legend>
		<dl>


			{input type="list" target="bank cash outstanding" name="from" label="De" required=1}
			{input type="list" target="bank cash outstanding" name="to" label="Vers" required=1}
		</dl>
	</fieldset>

	<fieldset data-types="revenue">

		<legend>Recette</legend>
		<dl>



			{input type="list" target="revenue" name="from" label="Type de recette" required=1}
			{input type="list" target="bank cash outstanding" name="to" label="Compte d'encaissement" required=1}
		</dl>
	</fieldset>

	<fieldset data-types="expense">
		<legend>Dépense</legend>
		<dl>
			{input type="list" target="expense" name="to" label="Type de dépense" required=1}
			{input type="list" target="bank cash outstanding" name="from" label="Compte de décaissement" required=1}

		</dl>
	</fieldset>


	<fieldset data-types="debt">
		<legend>Dette</legend>
		<dl>
			{input type="list" target="thirdparty" name="to" label="Compte de tiers" required=1}
			{input type="list" target="bank cash outstanding" name="from" label="Type de dette" required=1}



		</dl>
	</fieldset>

	<fieldset data-types="debt">
		<legend>Créance</legend>
		<dl>

			{input type="list" target="thirdparty" name="to" label="Compte de tiers" required=1}
			{input type="list" target="bank cash outstanding" name="from" label="Type de dette" required=1}
		</dl>
	</fieldset>

	<fieldset>
		<legend>Détails</legend>
		<dl>
			{input type="ajax-complete" multiple=true name="membre" label="Membres associés"}
			{input type="text" name="numero_piece" label="Numéro de pièce comptable"}
			{input type="textarea" name="remarques" label="Remarques" rows=4 cols=30}


			{if count($analytical_accounts) > 0}
				{input type="select" name="analytical_account" label="Compte analytique (projet)" options=$analytical_accounts}
			{/if}

		</dl>
	</fieldset>


	{* Saisie avancée *}
	<fieldset data-types="advanced">
		<table class="list">

			<thead>
				<tr>
					<th>Compte</th>
					<td>Débit</td>
					<td>Crédit</td>
					<td>Réf. pièce</td>
					<td>Libellé ligne</td>
					<td></td>
				</tr>
			</thead>
			<tbody>
			{foreach from=$lines key="line_number" item="line"}
				<tr>
					<th>{input type="list" target="all" name="lines[%d][account]"|args:$line_number value=$line.id_account required=1}</th>
					<td>{input type="number" name="lines[%d][debit]"|args:$line_number min="0.00" step="0.01" value=$line.debit required=1}</td>
					<td>{input type="number" name="lines[%d][credit]"|args:$line_number min="0.00" step="0.01" value=$line.credit required=1}</td>
					<td>{input type="text" name="lines[%d][reference]" size=8}</td>
					<td>{input type="text" name="lines[%d][label]"}</td>
					<td></td>
				</tr>
			{/foreach}
			</tbody>
			<tfoot>
				<tr>
					<th></th>
					<td id="lines_debit_total"></td>
					<td id="lines_credit_total"></td>
					<td colspan="2"></td>
					<td></td>
				</tr>
			</tfoot>
		</table>
	</fieldset>

	<p class="submit">
		{csrf_field key="compta_saisie"}
		<input type="submit" name="save" value="Enregistrer &rarr;" />
	</p>


</form>

{literal}

<script type="text/javascript">
var current_input;


function initForm() {
	var inputs = $('.input-list button');








	inputs.forEach((i) => {
		i.onclick = () => {
			current_input = i.parentNode;
			g.openFrameDialog(g.admin_url + 'acc/accounts/selector.php?target=' + i.value);
			return false;
		};





	});
}




function inputListSelected(value, label) {
	current_input.querySelector('input[type=hidden]').value = value;
	current_input.querySelector('span').innerHTML = label;
	g.closeFrameDialog();
}





















initForm();
</script>
{/literal}








{include file="admin/_foot.tpl"}

Modified src/www/admin/acc/transactions/new.php from [e22f5542d2] to [cdd41db12e].

1
2
3


4
5
6
7
8

9
10

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172




<?php
namespace Garradin;



require_once __DIR__ . '/../_inc.php';

$session->requireAccess('compta', Membres::DROIT_ECRITURE);

$journal = new Compta\Journal;


$journal->checkExercice();


$cats = new Compta\Categories;

$type = f('type') ?: 'recette';

if (f('save'))
{
    $form->check('compta_saisie', [
        'libelle' => 'required',
        'date'    => 'date_format:Y-m-d|required',
        'montant' => 'money|required',
    ]);

    if (!$form->hasErrors())
    {
        try
        {
            if ($type == 'avance')
            {
                $id = $journal->add([
                    'libelle'       =>  f('libelle'),
                    'montant'       =>  f('montant'),
                    'date'          =>  f('date'),
                    'compte_credit' =>  f('compte_credit'),
                    'compte_debit'  =>  f('compte_debit'),
                    'numero_piece'  =>  f('numero_piece'),
                    'remarques'     =>  f('remarques'),
                    'id_auteur'     =>  $user->id,
                    'id_projet'     =>  f('projet') ?: null,
                ]);
            }
            elseif ($type == 'virement')
            {
                $id = $journal->add([
                    'libelle'       =>  f('libelle'),
                    'montant'       =>  f('montant'),
                    'date'          =>  f('date'),
                    'compte_debit'  =>  f('compte1'),
                    'compte_credit' =>  f('compte2'),
                    'numero_piece'  =>  f('numero_piece'),
                    'remarques'     =>  f('remarques'),
                    'id_auteur'     =>  $user->id,
                    'id_projet'     =>  f('projet') ?: null,
                ]);
            }
            else
            {
                if ($type == 'recette')
                {
                    $cat = 'categorie_recette';
                }
                else
                {
                    // Dette ou dépense
                    $cat = 'categorie_depense';
                }

                $cat = $cats->get(f($cat));

                if (!$cat)
                {
                    throw new UserException('Il faut choisir une catégorie.');
                }

                if ($type == 'dette')
                {
                    if (!trim(f('compte')) ||
                        (f('compte') != 4010 && f('compte') != 4110))
                    {
                        throw new UserException('Type de dette invalide.');
                    }
                }
                else
                {
                    if (f('moyen_paiement') == 'ES')
                    {
                        $a = Compta\Comptes::CAISSE;
                        $b = $cat->compte;
                    }
                    elseif (in_array(f('moyen_paiement'), ['CH', 'CB']) && f('a_encaisser'))
                    {
                        $a = f('moyen_paiement') == 'CH' 
                            ? Compta\Comptes::CHEQUE_A_ENCAISSER
                            : Compta\Comptes::CARTE_A_ENCAISSER;
                        $b = $cat->compte;
                    }
                    else
                    {
                        if (!trim(f('banque')))
                        {
                            throw new UserException('Le compte bancaire choisi est invalide.');
                        }

                        if (!array_key_exists(f('banque'), $banques->getList()))
                        {
                            throw new UserException('Le compte bancaire choisi n\'existe pas.');
                        }

                        $a = f('banque');
                        $b = $cat->compte;
                    }
                }

                if ($type == 'depense')
                {
                    $debit = $b;
                    $credit = $a;
                }
                elseif ($type == 'recette')
                {
                    $debit = $a;
                    $credit = $b;
                }
                elseif ($type == 'dette')
                {
                    $debit = $cat->compte;
                    $credit = f('compte');
                }

                $id = $journal->add([
                    'libelle'       =>  f('libelle'),
                    'montant'       =>  f('montant'),
                    'date'          =>  f('date'),
                    'moyen_paiement'=>  ($type == 'dette') ? null : f('moyen_paiement'),
                    'numero_cheque' =>  ($type == 'dette') ? null : f('numero_cheque'),
                    'compte_credit' =>  $credit,
                    'compte_debit'  =>  $debit,
                    'numero_piece'  =>  f('numero_piece'),
                    'remarques'     =>  f('remarques'),
                    'id_categorie'  =>  ($type === 'dette') ? null : (int)$cat->id,
                    'id_auteur'     =>  $user->id,
                    'id_projet'     =>  f('projet') ?: null,
                ]);
            }

            $session->set('context_compta_date', f('date'));

            Utils::redirect(ADMIN_URL . 'compta/operations/saisir.php?ok='.(int)$id);
        }
        catch (UserException $e)
        {
            $form->addError($e->getMessage());
        }
    }
}

$tpl->assign('type', $type);

$tpl->assign('comptes', $comptes->listTree());
$tpl->assign('categories_depenses', $cats->getList(Compta\Categories::DEPENSES));
$tpl->assign('categories_recettes', $cats->getList(Compta\Categories::RECETTES));
$tpl->assign('comptes_simples', $comptes->listSimpleTargetAccounts());

if (!$session->get('context_compta_date'))
{
    $session->set('context_compta_date', date('Y-m-d'));
}

$tpl->assign('date', $session->get('context_compta_date') ?: false);
$tpl->assign('ok', (int) qg('ok'));

$tpl->display('admin/compta/operations/saisir.tpl');







>
>




|
>

<
>

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<



<
>
>
>
>
1
2
3
4
5
6
7
8
9
10
11
12

13
14





























































































































































15
16
17

18
19
20
21
<?php
namespace Garradin;

use Garradin\Entities\Accounting\Transaction;

require_once __DIR__ . '/../_inc.php';

$session->requireAccess('compta', Membres::DROIT_ECRITURE);

$chart = $year->chart();
$accounts = $chart->accounts();


$transaction = new Transaction;






























































































































































$tpl->assign('date', $session->get('context_compta_date') ?: false);
$tpl->assign('ok', (int) qg('ok'));


$tpl->assign('lines', $transaction->getLines());

$tpl->assign('analytical_accounts', $accounts->listAnalytical());
$tpl->display('acc/transactions/new.tpl');

Modified src/www/admin/static/admin.css from [224cccbfdb] to [08ef9a0ea6].

298
299
300
301
302
303
304
305
306
307
308
309

310
311
312
313
314
315
316
...
346
347
348
349
350
351
352





























353
354
355
356
357
358
359
...
800
801
802
803
804
805
806


807
808
809
810
811
812
813
}

fieldset dl dl {
    margin: .5em 0 .5em 1.2em;
}

input[type=text], textarea, input[type=password], input[type=email],
input[type=url], input[type=tel], select {
    padding: 0.2em 0.4em;
    font-family: Sans-serif;
    min-width: 20em;
    max-width: 100%;

}

input[type=password], input.clearTextPassword {
    font-family: monospace;
}

select, input[size] {
................................................................................
    background: none;
    margin-top: .1em;
}

input[type=button].showPassword:hover {
    background: none;
}






























.loader {
    width: 100%;
    min-height: 32px;
    display: block;
    position: relative;
}
................................................................................

h2.ruler:after {
    left: 0.5em;
    margin-right: -50%;
}

.icn-btn {


    border-radius: .2em;
    padding: .2em .4em;
    margin: .2em .5em;
    display: inline-block;
    background-color: rgba(var(--gSecondColor), 0.1);
    text-shadow: none;
    white-space: pre;







|




>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
>







298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
...
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
...
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
}

fieldset dl dl {
    margin: .5em 0 .5em 1.2em;
}

input[type=text], textarea, input[type=password], input[type=email],
input[type=url], input[type=tel], select, .input-list {
    padding: 0.2em 0.4em;
    font-family: Sans-serif;
    min-width: 20em;
    max-width: 100%;
    border: 1px solid #999;
}

input[type=password], input.clearTextPassword {
    font-family: monospace;
}

select, input[size] {
................................................................................
    background: none;
    margin-top: .1em;
}

input[type=button].showPassword:hover {
    background: none;
}

form .input-list button {
    float: left;
}

#dialog {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    opacity: 1;
    transition: opacity .5s;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dialog > iframe {
    width: 90%;
    height: 90%;
    border: none;
    transition: width .5s, height .5s;
    box-shadow: 0px 0px 5px #000;
}

.loader {
    width: 100%;
    min-height: 32px;
    display: block;
    position: relative;
}
................................................................................

h2.ruler:after {
    left: 0.5em;
    margin-right: -50%;
}

.icn-btn {
    border: none;
    font-size: inherit;
    border-radius: .2em;
    padding: .2em .4em;
    margin: .2em .5em;
    display: inline-block;
    background-color: rgba(var(--gSecondColor), 0.1);
    text-shadow: none;
    white-space: pre;