extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-25 06:24:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor views to use a responsive width wrapper component

Browse Source
This commit is contained in:
Bubka 2022-10-12 12:56:16 +02:00
parent 6a41c77144
commit 4511df5764
7 changed files with 293 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/FormWrapper.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div class="columns is-centered"> <responsive-width-wrapper>
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
<h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1> <h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
<div id="punchline" v-if="punchline" class="block" v-html="punchline"></div> <div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
<slot /> <slot />
</div> </responsive-width-wrapper>
</div>
</template> </template>
<script> <script>

19
resources/js/components/ResponsiveWidthWrapper.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="columns is-centered">
<div class="form-column column is-two-thirds-tablet is-half-desktop is-half-widescreen is-one-third-fullhd">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'ResponsiveWidthWrapper',
data() {
return {
}
},
}
</script>

6
resources/js/components/SettingTabs.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="options-header has-background-black-ter"> <div class="options-header has-background-black-ter">
<div class="columns is-centered"> <responsive-width-wrapper>
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
<div class="tabs is-centered is-fullwidth"> <div class="tabs is-centered is-fullwidth">
<ul> <ul>
<li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }"> <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
@ -9,8 +8,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </responsive-width-wrapper>
</div>
</div> </div>
</template> </template>

4
resources/js/components/index.js vendored
View File

@ -13,6 +13,7 @@ import FormButtons from './FormButtons'
import VueFooter from './Footer' import VueFooter from './Footer'
import Kicker from './Kicker' import Kicker from './Kicker'
import SettingTabs from './SettingTabs' import SettingTabs from './SettingTabs'
import ResponsiveWidthWrapper from './ResponsiveWidthWrapper'
// Components that are registered globaly. // Components that are registered globaly.
[ [
@ -29,7 +30,8 @@ import SettingTabs from './SettingTabs'
FormButtons, FormButtons,
VueFooter, VueFooter,
Kicker, Kicker,
SettingTabs SettingTabs,
ResponsiveWidthWrapper
].forEach(Component => { ].forEach(Component => {
Vue.component(Component.name, Component) Vue.component(Component.name, Component)
}) })

6
resources/js/views/About.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="columns is-centered"> <responsive-width-wrapper>
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
<h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1> <h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
<p class="block"> <p class="block">
<span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br /> <span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
@ -80,8 +79,7 @@
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link> <router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
</p> </p>
</vue-footer> </vue-footer>
</div> </responsive-width-wrapper>
</div>
</template> </template>
<script> <script>

6
resources/js/views/Groups.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="columns is-centered"> <responsive-width-wrapper>
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
<h1 class="title has-text-grey-dark"> <h1 class="title has-text-grey-dark">
{{ $t('groups.groups') }} {{ $t('groups.groups') }}
</h1> </h1>
@ -41,8 +40,7 @@
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link> <router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
</p> </p>
</vue-footer> </vue-footer>
</div> </responsive-width-wrapper>
</div>
</template> </template>
<script> <script>

6
resources/js/views/twofaccounts/Import.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<div class="columns is-centered"> <responsive-width-wrapper>
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
<h1 class="title has-text-grey-dark"> <h1 class="title has-text-grey-dark">
{{ $t('twofaccounts.import.import') }} {{ $t('twofaccounts.import.import') }}
</h1> </h1>
@ -146,8 +145,7 @@
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link> <router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
</p> </p>
</vue-footer> </vue-footer>
</div> </responsive-width-wrapper>
</div>
<!-- modal --> <!-- modal -->
<modal v-model="ShowTwofaccountInModal"> <modal v-model="ShowTwofaccountInModal">
<otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()"> <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()">