Adjust some layout elements

This commit is contained in:
Bubka 2020-11-25 21:56:04 +01:00
parent 54d92d4f60
commit f6e04fb36c
5 changed files with 21 additions and 11 deletions

View File

@ -24,13 +24,16 @@
</vue-footer>
</div>
<!-- Group selector -->
<div class="container groups with-heading" v-if="showGroupSelector">
<div class="columns is-centered">
<div class="container group-selector" v-if="showGroupSelector">
<div class="columns is-centered is-multiline">
<div class="column is-full has-text-centered">
{{ $t('groups.move_selected_to') }}
</div>
<div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div class="columns is-multiline">
<div class="column is-full" v-for="group in groups" :key="group.id">
<button class="button is-fullwidth is-dark has-text-light is-outlined" :class="{ 'is-link' : moveAccountsTo === group.id}" @click="moveAccountsTo = group.id">
<span v-if="group.id === 0">
<span v-if="group.id === 0" class="is-italic">
{{ $t('groups.no_group') }}
</span>
<span v-else>

View File

@ -4,12 +4,14 @@
<h1 class="title">
{{ $t('groups.groups') }}
</h1>
<p class="is-size-7-mobile">
<div class="is-size-7-mobile">
{{ $t('groups.manage_groups_legend')}}
</p>
<router-link class="is-link" :to="{ name: 'createGroup' }">
<font-awesome-icon :icon="['fas', 'plus-circle']" /> Create new group
</router-link>
</div>
<div class="mt-3 mb-6">
<router-link class="is-link mt-5" :to="{ name: 'createGroup' }">
<font-awesome-icon :icon="['fas', 'plus-circle']" /> Create new group
</router-link>
</div>
<div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
{{ group.name }}
<a class="has-text-grey is-pulled-right" @click="deleteGroup(group.id)">
@ -20,9 +22,9 @@
</router-link>
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span>
</div>
<p class="is-size-7 is-pulled-right" v-if="groups.length > 0">
<div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0">
{{ $t('groups.deleting_group_does_not_delete_accounts')}}
</p>
</div>
<!-- footer -->
<vue-footer :showButtons="true">
<!-- close button -->

View File

@ -3,7 +3,7 @@
<div class="container has-text-centered">
<div class="columns quick-uploader">
<!-- trailer phrase that invite to add an account -->
<div class="column is-full quick-uploader-header" :class="{ 'is-invisible' : accountCount > 0 }">
<div class="column is-full quick-uploader-header" :class="{ 'is-invisible' : accountCount !== 0 }">
{{ $t('twofaccounts.no_account_here') }}<br>
{{ $t('twofaccounts.add_first_account') }}
</div>

View File

@ -19,6 +19,7 @@
'active_group' => 'Active group',
'manage_groups_legend' => 'You can create groups to organize your accounts the way you want. All accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.',
'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts',
'move_selected_to' => 'Move selected to',
'no_group' => 'No group',
'forms' => [
'new_group' => 'New group',

View File

@ -72,6 +72,10 @@ a:hover {
margin-top: 110px;
}
.group-selector {
margin-top: 55px;
}
@media screen and (min-width: 769px) {
.accounts {
margin-top: 84px;