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> <div>
<!-- show accounts list --> <!-- show accounts list -->
<div class="container" v-if="this.showAccounts"> <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 --> <!-- accounts -->
<!-- <vue-pull-refresh :on-refresh="onRefresh" :config="{ <!-- <vue-pull-refresh :on-refresh="onRefresh" :config="{
errorLabel: 'error', errorLabel: 'error',
@ -70,6 +46,32 @@
</draggable> </draggable>
<!-- </vue-pull-refresh> --> <!-- </vue-pull-refresh> -->
</div> </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) --> <!-- Show uploader (because no account) -->
<quick-uploader v-if="showUploader" :directStreaming="accounts.length > 0" :showTrailer="accounts.length === 0" ref="QuickUploader"></quick-uploader> <quick-uploader v-if="showUploader" :directStreaming="accounts.length > 0" :showTrailer="accounts.length === 0" ref="QuickUploader"></quick-uploader>
<!-- modal --> <!-- modal -->

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

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

34
resources/sass/app.scss vendored
View File

@ -16,12 +16,27 @@ a:hover {
} }
} }
.search { .header {
margin-bottom: 0 !important; position: fixed;
top: 0;
left: 0;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
} }
.accounts { .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 { .form-column {
@ -327,6 +342,19 @@ footer .field.is-grouped {
text-align: center; 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 { .file .tag {
margin-left: 0.75rem; margin-left: 0.75rem;
} }