ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add CSS styling to danger message box

Browse Source 
- lost the CSS when removed buefy
This commit is contained in:
Matt Rider 2019-06-10 14:11:44 -03:00
parent 1c506bd21c
commit 507890a7aa
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
webapp/components/DeleteAccount/DeleteAccount.vue
View File

@ -1,20 +1,22 @@
<template> <template>
<div> <div>
<ds-card hover> <ds-card hover>
<ds-space/> <ds-space />
<ds-container> <ds-container>
<ds-flex> <ds-flex>
<ds-flex-item :width="{ base: '100%', sm: 0.75, md: 0.5, lg: 0.5 }"> <ds-flex-item :width="{ base: '100%', sm: 0.75, md: 0.5, lg: 0.5 }">
<ds-icon name="warning" size="xxx-large" class="delete-warning-icon"/> <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 5.25, md: 2.75, lg: 5.5 }"> <ds-flex-item :width="{ base: '100%', sm: 5.25, md: 2.75, lg: 5.5 }">
<ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading> <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
</ds-flex-item> </ds-flex-item>
<ds-space/> <ds-space />
<ds-heading tag="h4">{{ $t('settings.deleteUserAccount.accountDescription') }}</ds-heading> <ds-heading tag="h4">
{{ $t('settings.deleteUserAccount.accountDescription') }}
</ds-heading>
</ds-flex> </ds-flex>
</ds-container> </ds-container>
<ds-space/> <ds-space />
<ds-container> <ds-container>
<transition name="slide-up"> <transition name="slide-up">
<div v-if="deleteEnabled"> <div v-if="deleteEnabled">
@ -40,7 +42,7 @@
/> />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<ds-space margin-top="xx-small"/> <ds-space margin-top="xx-small" />
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }"> <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
<ds-flex-item <ds-flex-item
v-if="currentUser.commentsCount" v-if="currentUser.commentsCount"
@ -62,10 +64,12 @@
class="enable-comment-deletion-input" class="enable-comment-deletion-input"
/> />
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }">
<ds-section id="delete-user-account-warning">
<div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
</ds-section>
</ds-flex-item>
</ds-flex> </ds-flex>
<div class="message is-danger">
<div class="message-body" v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
</div>
</div> </div>
</transition> </transition>
</ds-container> </ds-container>
@ -75,7 +79,9 @@
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }"> <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
<div <div
class="delete-input-label" class="delete-input-label"
v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })" v-html="
$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })
"
></div> ></div>
<ds-input <ds-input
v-model="enableDeletionValue" v-model="enableDeletionValue"
@ -89,7 +95,9 @@
danger danger
:disabled="isLoading || !deleteEnabled" :disabled="isLoading || !deleteEnabled"
@click="handleSubmit" @click="handleSubmit"
>{{ $t('settings.deleteUserAccount.name') }}</ds-button> >
{{ $t('settings.deleteUserAccount.name') }}
</ds-button>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-container> </ds-container>
@ -201,6 +209,15 @@ b.is-danger {
.ds-card-footer { .ds-card-footer {
border-top: $border-size-base solid $border-color-softest; border-top: $border-size-base solid $border-color-softest;
background-color: $background-color-warning-inverse; background-color: $background-color-danger-inverse;
}
#delete-user-account-warning {
background-color: $background-color-danger-inverse;
border-left: $border-size-x-large solid $background-color-danger-active;
color: $text-color-danger;
margin-left: 0px;
margin-right: 0px;
border-radius: $border-radius-x-large;
} }
</style> </style>

4
webapp/pages/settings.vue
View File

@ -3,11 +3,11 @@
<ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading> <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
<ds-flex gutter="small"> <ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', md: '200px' }"> <ds-flex-item :width="{ base: '100%', md: '200px' }">
<ds-menu :routes="routes" :is-exact="() => true"/> <ds-menu :routes="routes" :is-exact="() => true" />
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', md: 1 }"> <ds-flex-item :width="{ base: '100%', md: 1 }">
<transition name="slide-up" appear> <transition name="slide-up" appear>
<nuxt-child/> <nuxt-child />
</transition> </transition>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>