extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-01-22 22:30:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set fixed position for Search field and Settings tabs bar

Browse Source
This commit is contained in:
Bubka 2020-09-27 23:39:07 +02:00
parent 928704abf1
commit 93a721cd68
3 changed files with 75 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
resources/js/views/Accounts.vue
View File

@ -2,30 +2,6 @@
<div>
<!-- show accounts list -->
<div class="container" v-if="this.showAccounts">
<!-- header -->
<div class="columns is-gapless is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<!-- toolbar -->
<div class="toolbar has-text-centered" v-if="editMode">
<a class="button" :class="{ 'is-dark': selectedAccounts.length === 0, 'is-danger': selectedAccounts.length > 0 }" :disabled="selectedAccounts.length == 0" @click="destroyAccounts">
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'trash']" />
</span>
<span>{{ $t('commons.delete') }}</span>
</a>
</div>
<!-- search -->
<div class="field" v-else>
<div class="control has-icons-right">
<input type="text" class="input is-rounded is-search" v-model="search">
<span class="icon is-small is-right">
<font-awesome-icon :icon="['fas', 'search']" v-if="!search" />
<a class="delete" v-if="search" @click="search = '' "></a>
</span>
</div>
</div>
</div>
</div>
<!-- accounts -->
<!-- <vue-pull-refresh :on-refresh="onRefresh" :config="{
errorLabel: 'error',
@ -70,6 +46,32 @@
</draggable>
<!-- </vue-pull-refresh> -->
</div>
<!-- header -->
<div class="header has-background-black-ter" v-if="this.showAccounts">
<div class="columns is-gapless is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<!-- toolbar -->
<div class="toolbar has-text-centered" v-if="editMode">
<a class="button is-rounded is-outlined" :class="{ 'is-dark': selectedAccounts.length === 0, 'is-danger': selectedAccounts.length > 0 }" :disabled="selectedAccounts.length == 0" @click="destroyAccounts">
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'trash']" />
</span>
<span>{{ $t('commons.delete') }}</span>
</a>
</div>
<!-- search -->
<div class="field" v-else>
<div class="control has-icons-right">
<input type="text" class="input is-rounded is-search" v-model="search">
<span class="icon is-small is-right">
<font-awesome-icon :icon="['fas', 'search']" v-if="!search" />
<a class="delete" v-if="search" @click="search = '' "></a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- Show uploader (because no account) -->
<quick-uploader v-if="showUploader" :directStreaming="accounts.length > 0" :showTrailer="accounts.length === 0" ref="QuickUploader"></quick-uploader>
<!-- modal -->

32
resources/js/views/settings/Index.vue
View File

@ -1,19 +1,23 @@
<template>
<div>
<div class="columns is-centered">
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<div class="tabs is-centered is-fullwidth">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
</div>
</div>
<options v-if="activeTab === $t('settings.options')"></options>
<account v-if="activeTab === $t('settings.account')"></account>
<password v-if="activeTab === $t('settings.password')"></password>
<div class="options-header has-background-black-ter">
<div class="columns is-centered">
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<div class="tabs is-centered is-fullwidth">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="options-tabs">
<options v-if="activeTab === $t('settings.options')"></options>
<account v-if="activeTab === $t('settings.account')"></account>
<password v-if="activeTab === $t('settings.password')"></password>
</div>
<vue-footer :showButtons="true">
<!-- Cancel button -->
<p class="control">

34
resources/sass/app.scss vendored
View File

@ -16,12 +16,27 @@ a:hover {
}
}
.search {
margin-bottom: 0 !important;
.header {
position: fixed;
top: 0;
left: 0;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
}
.accounts {
margin-top: 0.75rem;
margin-top: 40px;
}
@media screen and (min-width: 769px) {
.accounts {
margin-top: 60px;
}
}
.search {
margin-bottom: 0 !important;
}
.form-column {
@ -327,6 +342,19 @@ footer .field.is-grouped {
text-align: center;
}
.options-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0 1rem 0.5rem;
z-index: 1000;
}
.options-tabs {
margin-top: 80px;
}
.file .tag {
margin-left: 0.75rem;
}