Улучшение вида для мобильных

client/components/Search/Search.vue

@@ -2,274 +2,281 @@
     <div class="root column fit" style="position: relative">
         <div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
             <!-- Tool Panel begin -->
-            <div ref="toolPanel" class="tool-panel q-pb-xs row bg-cyan-2" style="position: sticky; top: 0; z-index: 10;">
-                <div class="column col">
-                    <div class="header q-mb-xs q-ml-sm q-mt-sm row items-center">
-                        <div class="row no-wrap items-center">
-                            <a :href="newSearchLink" style="height: 33px; width: 34px">
-                                <img src="./assets/logo.png" />
-                                <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                    Новый поиск
-                                </q-tooltip>
-                            </a>
-
-                            <q-btn-toggle
-                                v-model="selectedList"
-                                class="q-ml-sm"
-                                toggle-color="primary"
-                                :options="listOptions"
-                                push
-                                no-caps
-                                rounded
-                            />
-                        </div>
-
-                        <div class="row items-center q-ml-sm" style="font-size: 150%;">
-                            <div class="q-mr-xs">
-                                Коллекция
+            <div ref="toolPanel" class="tool-panel q-pb-xs column bg-cyan-2" style="position: sticky; top: 0; z-index: 10;">
+                <!-- 1 -->
+                <div class="row">
+                    <!-- 1-1 -->
+                    <div class="column col">
+                        <div class="header q-mb-xs q-ml-sm q-mt-sm row items-center">
+                            <div class="row no-wrap items-center">
+                                <a :href="newSearchLink" style="height: 33px; width: 34px">
+                                    <img src="./assets/logo.png" />
+                                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                        Новый поиск
+                                    </q-tooltip>
+                                </a>
+
+                                <q-btn-toggle
+                                    v-model="selectedList"
+                                    class="q-ml-sm"
+                                    toggle-color="primary"
+                                    :options="listOptions"
+                                    push
+                                    no-caps
+                                    rounded
+                                />
                             </div>
-                            <div class="clickable" @click.stop.prevent="showCollectionInfo">
-                                {{ collection }}
+
+                            <div class="row items-center q-ml-sm" style="font-size: 150%;">
+                                <div class="q-mr-xs">
+                                    Коллекция
+                                </div>
+                                <div class="clickable" @click.stop.prevent="showCollectionInfo">
+                                    {{ collection }}
+                                </div>
+
+                                <DivBtn class="q-ml-sm text-grey-5 bg-yellow-1" :size="28" :icon-size="24" icon="la la-question" round @click.stop.prevent="showSearchHelp">
+                                    <template #tooltip>
+                                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                            Памятка
+                                        </q-tooltip>
+                                    </template>
+                                </DivBtn>
                             </div>
+                        </div>
+                        <div v-show="!isExtendedSearch" class="row q-mx-sm q-mb-xs items-center" style="max-width: 1024px">
+                            <q-input
+                                ref="authorInput" v-model="search.author" :maxlength="5000" :debounce="inputDebounce"
+                                class="q-mt-xs col-3" :bg-color="inputBgColor('author')" style="min-width: 140px" label="Автор" stack-label outlined dense clearable
+                            >
+                                <q-tooltip v-if="search.author" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ search.author }}
+                                </q-tooltip>
+                            </q-input>
+                            <div class="q-mx-xs" />
+                            <q-input
+                                v-model="search.series" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                                class="q-mt-xs col-3" :bg-color="inputBgColor('series')" style="min-width: 140px" label="Серия" stack-label outlined dense clearable
+                            >
+                                <q-tooltip v-if="search.series" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ search.series }}
+                                </q-tooltip>
+                            </q-input>
+                            <div class="q-mx-xs" />
+                            <q-input
+                                v-model="search.title" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                                class="q-mt-xs col-3" :bg-color="inputBgColor('title')" style="min-width: 140px;" label="Название" stack-label outlined dense clearable
+                            >
+                                <q-tooltip v-if="search.title" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ search.title }}
+                                </q-tooltip>
+                            </q-input>
+                            <div class="q-mx-xs" />
+                            <q-input
+                                v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                                class="q-mt-xs col-1" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 90px;" label="Язык" stack-label outlined dense clearable readonly
+                                @click.stop.prevent="selectLang"
+                            >
+                                <template v-if="search.lang" #append>
+                                    <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.lang = ''" />
+                                </template>
 
-                            <DivBtn class="q-ml-sm text-grey-5 bg-yellow-1" :size="28" :icon-size="24" icon="la la-question" round @click.stop.prevent="showSearchHelp">
+                                <q-tooltip v-if="search.lang && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ search.lang }}
+                                </q-tooltip>
+                            </q-input>
+                            <div class="q-mx-xs" />
+                            <DivBtn
+                                class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
+                                icon="la la-level-up-alt"
+                                @click.stop.prevent="cloneSearch"
+                            >
                                 <template #tooltip>
                                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                        Памятка
+                                        Клонировать поиск
                                     </q-tooltip>
                                 </template>
                             </DivBtn>
                         </div>
-                    </div>
-                    <div v-show="!isExtendedSearch" class="row q-mx-sm q-mb-xs items-center" style="max-width: 1024px">
-                        <q-input
-                            ref="authorInput" v-model="search.author" :maxlength="5000" :debounce="inputDebounce"
-                            class="q-mt-xs col-3" :bg-color="inputBgColor('author')" style="min-width: 150px" label="Автор" stack-label outlined dense clearable
-                        >
-                            <q-tooltip v-if="search.author" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ search.author }}
-                            </q-tooltip>
-                        </q-input>
-                        <div class="q-mx-xs" />
-                        <q-input
-                            v-model="search.series" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                            class="q-mt-xs col-3" :bg-color="inputBgColor('series')" style="min-width: 150px" label="Серия" stack-label outlined dense clearable
-                        >
-                            <q-tooltip v-if="search.series" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ search.series }}
-                            </q-tooltip>
-                        </q-input>
-                        <div class="q-mx-xs" />
-                        <q-input
-                            v-model="search.title" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                            class="q-mt-xs col-3" :bg-color="inputBgColor('title')" style="min-width: 150px;" label="Название" stack-label outlined dense clearable
-                        >
-                            <q-tooltip v-if="search.title" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ search.title }}
-                            </q-tooltip>
-                        </q-input>
-                        <div class="q-mx-xs" />
-                        <q-input
-                            v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                            class="q-mt-xs col-1" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 90px;" label="Язык" stack-label outlined dense clearable readonly
-                            @click.stop.prevent="selectLang"
-                        >
-                            <template v-if="search.lang" #append>
-                                <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.lang = ''" />
-                            </template>
+                        <div v-show="!isExtendedSearch && extendedParams" class="row q-mx-sm q-mb-xs items-center" style="max-width: 1024px">
+                            <q-input
+                                v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                                class="q-mt-xs col-3" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 140px;" label="Жанр" stack-label outlined dense clearable readonly
+                                @click.stop.prevent="selectGenre"
+                            >
+                                <template v-if="genreNames" #append>
+                                    <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.genre = ''" />
+                                </template>
 
-                            <q-tooltip v-if="search.lang && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ search.lang }}
-                            </q-tooltip>
-                        </q-input>
-                        <div class="q-mx-xs" />
-                        <DivBtn
-                            class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
-                            icon="la la-level-up-alt"
-                            @click.stop.prevent="cloneSearch"
-                        >
-                            <template #tooltip>
-                                <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                    Клонировать поиск
+                                <q-tooltip v-if="genreNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ genreNames }}
                                 </q-tooltip>
-                            </template>
-                        </DivBtn>
-                    </div>
-                    <div v-show="!isExtendedSearch && extendedParams" class="row q-mx-sm q-mb-xs items-center" style="max-width: 1024px">
-                        <q-input
-                            v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                            class="q-mt-xs col-3" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 150px;" label="Жанр" stack-label outlined dense clearable readonly
-                            @click.stop.prevent="selectGenre"
-                        >
-                            <template v-if="genreNames" #append>
-                                <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.genre = ''" />
-                            </template>
-
-                            <q-tooltip v-if="genreNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ genreNames }}
-                            </q-tooltip>
-                        </q-input>
-
-                        <div class="q-mx-xs" />
-                        <q-select 
-                            v-model="searchDate"
-                            class="q-mt-xs col-3"
-                            :options="searchDateOptions"
-                            dropdown-icon="la la-angle-down la-sm"
-                            :bg-color="inputBgColor()"
-                            style="min-width: 150px;"
-                            label="Дата поступления" stack-label
-                            outlined dense emit-value map-options clearable
-                        >
-                            <template #selected-item="scope">
-                                <div v-if="scope.opt.value == 'manual'">
-                                    <div v-html="formatSearchDate" />
-                                </div>
-                                <div v-else>
-                                    {{ scope.opt.label }}
-                                </div>
-                            </template>
-
-                            <template #option="scope">
-                                <q-item v-bind="scope.itemProps" @click.stop.prevent="dateSelectItemClick(scope.opt.value)">
-                                    <q-item-section>
-                                        <q-item-label>
-                                            {{ scope.opt.label }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                </q-item>
-                            </template>
-                        </q-select>
-
-                        <div class="q-mx-xs" />
-                        <q-input
-                            v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
-                            class="q-mt-xs col-1" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 90px;" label="Оценка" stack-label outlined dense clearable readonly
-                            @click.stop.prevent="selectLibRate"
-                        >
-                            <template v-if="librateNames" #append>
-                                <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.librate = ''" />
-                            </template>
+                            </q-input>
+
+                            <div class="q-mx-xs" />
+                            <q-select 
+                                v-model="searchDate"
+                                class="q-mt-xs col-3"
+                                :options="searchDateOptions"
+                                dropdown-icon="la la-angle-down la-sm"
+                                :bg-color="inputBgColor()"
+                                style="min-width: 140px;"
+                                label="Дата поступления" stack-label
+                                outlined dense emit-value map-options clearable
+                            >
+                                <template #selected-item="scope">
+                                    <div v-if="scope.opt.value == 'manual'">
+                                        <div v-html="formatSearchDate" />
+                                    </div>
+                                    <div v-else>
+                                        {{ scope.opt.label }}
+                                    </div>
+                                </template>
 
-                            <q-tooltip v-if="librateNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ librateNames }}
-                            </q-tooltip>
-                        </q-input>
-                    </div>
-                    <div v-show="!isExtendedSearch && !extendedParams && extendedParamsMessage" class="row q-mx-md items-center clickable" @click.stop.prevent="extendedParams = true">
-                        +{{ extendedParamsMessage }}
-                    </div>
+                                <template #option="scope">
+                                    <q-item v-bind="scope.itemProps" @click.stop.prevent="dateSelectItemClick(scope.opt.value)">
+                                        <q-item-section>
+                                            <q-item-label>
+                                                {{ scope.opt.label }}
+                                            </q-item-label>
+                                        </q-item-section>
+                                    </q-item>
+                                </template>
+                            </q-select>
+
+                            <div class="q-mx-xs" />
+                            <q-input
+                                v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
+                                class="q-mt-xs col-1" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 90px;" label="Оценка" stack-label outlined dense clearable readonly
+                                @click.stop.prevent="selectLibRate"
+                            >
+                                <template v-if="librateNames" #append>
+                                    <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="search.librate = ''" />
+                                </template>
 
-                    <DivBtn
-                        v-show="!isExtendedSearch && (extendedParams || !extendedParamsMessage)"
-                        class="text-grey-6" :size="16" :icon-size="14"
-                        :icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')"
-                        no-shadow
-                        @click.stop.prevent="extendedParams = !extendedParams"
-                    >
-                        <template #tooltip>
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ `${(extendedParams ? 'Скрыть' : 'Показать')} дополнительные критерии поиска` }}
-                            </q-tooltip>
-                        </template>
-                    </DivBtn>
+                                <q-tooltip v-if="librateNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ librateNames }}
+                                </q-tooltip>
+                            </q-input>
+                        </div>
+                        <div v-show="!isExtendedSearch && !extendedParams && extendedParamsMessage" class="row q-mx-md items-center clickable" @click.stop.prevent="extendedParams = true">
+                            +{{ extendedParamsMessage }}
+                        </div>
 
-                    <div v-show="isExtendedSearch" class="row q-mx-md q-mb-xs items-center">
-                        <q-input
-                            v-model="extSearchNames"
-                            class="col q-mt-xs" :bg-color="inputBgColor('extended')" input-style="cursor: pointer"
-                            style="min-width: 200px; max-width: 638px;" label="Расширенный поиск" stack-label outlined dense clearable readonly
-                            @click.stop.prevent="selectExtSearch"
-                        >
-                            <template v-if="extSearchNames" #append>
-                                <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="clearExtSearch" />
-                            </template>
+                        <div v-show="isExtendedSearch" class="row q-mx-md q-mb-xs items-center">
+                            <q-input
+                                v-model="extSearchNames"
+                                class="col q-mt-xs" :bg-color="inputBgColor('extended')" input-style="cursor: pointer"
+                                style="min-width: 200px; max-width: 638px;" label="Расширенный поиск" stack-label outlined dense clearable readonly
+                                @click.stop.prevent="selectExtSearch"
+                            >
+                                <template v-if="extSearchNames" #append>
+                                    <q-icon name="la la-times-circle" class="q-field__focusable-action" @click.stop.prevent="clearExtSearch" />
+                                </template>
 
-                            <q-tooltip v-if="extSearchNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                {{ extSearchNames }}
-                            </q-tooltip>
-                        </q-input>
-
-                        <div class="q-mx-xs" />
-                        <DivBtn
-                            class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" round
-                            :disabled="!extSearch.author"
-                            @me-click="extToList('author')"
-                        >
-                            <div style="font-size: 130%">
-                                <b>А</b>
-                            </div>
-                            <template #tooltip>
-                                <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                    В раздел "Авторы" с переносом значения author={{ extSearch.author }}
+                                <q-tooltip v-if="extSearchNames && showTooltips" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                    {{ extSearchNames }}
                                 </q-tooltip>
-                            </template>
-                        </DivBtn>
+                            </q-input>
+
+                            <div class="q-mx-xs" />
+                            <DivBtn
+                                class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" round
+                                :disabled="!extSearch.author"
+                                @me-click="extToList('author')"
+                            >
+                                <div style="font-size: 130%">
+                                    <b>А</b>
+                                </div>
+                                <template #tooltip>
+                                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                        В раздел "Авторы" с переносом значения author={{ extSearch.author }}
+                                    </q-tooltip>
+                                </template>
+                            </DivBtn>
 
-                        <div class="q-mx-xs" />
-                        <DivBtn
-                            class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" round
-                            :disabled="!extSearch.series"
-                            @me-click="extToList('series')"
-                        >
-                            <div style="font-size: 130%">
-                                <b>С</b>
-                            </div>
-                            <template #tooltip>
-                                <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                    В раздел "Серии" с переносом значения series={{ extSearch.series }}
-                                </q-tooltip>
-                            </template>
-                        </DivBtn>
+                            <div class="q-mx-xs" />
+                            <DivBtn
+                                class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" round
+                                :disabled="!extSearch.series"
+                                @me-click="extToList('series')"
+                            >
+                                <div style="font-size: 130%">
+                                    <b>С</b>
+                                </div>
+                                <template #tooltip>
+                                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                        В раздел "Серии" с переносом значения series={{ extSearch.series }}
+                                    </q-tooltip>
+                                </template>
+                            </DivBtn>
 
-                        <div class="q-mx-xs" />
-                        <DivBtn
-                            class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" round
-                            :disabled="!extSearch.title"
-                            @me-click="extToList('title')"
-                        >
-                            <div style="font-size: 130%">
-                                <b>К</b>
-                            </div>
+                            <div class="q-mx-xs" />
+                            <DivBtn
+                                class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" round
+                                :disabled="!extSearch.title"
+                                @me-click="extToList('title')"
+                            >
+                                <div style="font-size: 130%">
+                                    <b>К</b>
+                                </div>
+                                <template #tooltip>
+                                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                        В раздел "Книги" с переносом значения title={{ extSearch.title }}
+                                    </q-tooltip>
+                                </template>
+                            </DivBtn>
+
+                            <div class="q-mx-xs" />
+                            <DivBtn
+                                class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
+                                icon="la la-level-up-alt"
+                                @click.stop.prevent="cloneSearch"
+                            >
+                                <template #tooltip>
+                                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                                        Клонировать поиск
+                                    </q-tooltip>
+                                </template>
+                            </DivBtn>
+                        </div>
+                    </div><!-- 1-1 -->
+                    <!-- 1-2 -->
+                    <div class="column q-mx-sm">
+                        <div style="height: 3px" />
+                        <DivBtn v-if="!config.freeAccess" class="q-mt-sm text-white bg-secondary" :size="28" :icon-size="24" :imt="1" icon="la la-sign-out-alt" round @click.stop.prevent="logout">
                             <template #tooltip>
                                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                    В раздел "Книги" с переносом значения title={{ extSearch.title }}
+                                    Выход
                                 </q-tooltip>
                             </template>
                         </DivBtn>
 
-                        <div class="q-mx-xs" />
-                        <DivBtn
-                            class="text-grey-8 bg-yellow-1 q-mt-xs" :size="30" :icon-size="24" round
-                            icon="la la-level-up-alt"
-                            @click.stop.prevent="cloneSearch"
-                        >
+                        <DivBtn class="q-mt-sm text-white bg-secondary" :size="28" :icon-size="24" :imt="1" icon="la la-cog" round @click.stop.prevent="settingsDialogVisible = true">
                             <template #tooltip>
                                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                    Клонировать поиск
+                                    Настройки
                                 </q-tooltip>
                             </template>
                         </DivBtn>
-                    </div>
-                </div>
-                <div class="column q-mx-sm">
-                    <div style="height: 3px" />
-                    <DivBtn v-if="!config.freeAccess" class="q-mt-sm text-white bg-secondary" :size="28" :icon-size="24" :imt="1" icon="la la-sign-out-alt" round @click.stop.prevent="logout">
-                        <template #tooltip>
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                Выход
-                            </q-tooltip>
-                        </template>
-                    </DivBtn>
-
-                    <DivBtn class="q-mt-sm text-white bg-secondary" :size="28" :icon-size="24" :imt="1" icon="la la-cog" round @click.stop.prevent="settingsDialogVisible = true">
+                    </div><!-- 1-2 -->
+                </div><!-- 1 -->
+                <!-- 2 -->
+                <div class="column">
+                    <DivBtn
+                        v-show="!isExtendedSearch && (extendedParams || !extendedParamsMessage)"
+                        class="text-grey-6" :size="16" :icon-size="14"
+                        :icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')"
+                        no-shadow
+                        @click.stop.prevent="extendedParams = !extendedParams"
+                    >
                         <template #tooltip>
                             <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
-                                Настройки
+                                {{ `${(extendedParams ? 'Скрыть' : 'Показать')} дополнительные критерии поиска` }}
                             </q-tooltip>
                         </template>
                     </DivBtn>
-                </div>
+                </div><!-- 2 -->
             </div>
             <!-- Tool Panel end -->