Merge branch 'ui-improvements' into 'master'

UI improvements

See merge request framasoft/mobilizon!477
This commit is contained in:
Thomas Citharel 2020-06-17 16:37:56 +02:00
commit 399a82c761
32 changed files with 200 additions and 166 deletions

View file

@ -116,6 +116,8 @@ export default class App extends Vue {
$mdi-font-path: "~@mdi/font/fonts"; $mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons"; @import "~@mdi/font/scss/materialdesignicons";
@import "common";
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s; transition: opacity 0.5s;

28
js/src/common.scss Normal file
View file

@ -0,0 +1,28 @@
a {
text-decoration: underline;
text-decoration-color: #fea72b;
text-decoration-thickness: 2px;
&.navbar-item,
&.dropdown-item,
&.card,
&.button,
&[href="#comments"],
&.router-link-active,
&.comment-link,
&.pagination-link {
text-decoration: none;
}
}
input.input {
border-color: $input-border-color !important;
}
.section {
padding: 1rem 2rem 4rem;
}
figure img.is-rounded {
border: 1px solid #cdcaea;
}

View file

@ -50,6 +50,8 @@ export default class ActorCard extends Vue {
</style> </style>
<style lang="scss"> <style lang="scss">
@import "../../variables.scss";
.tooltip { .tooltip {
display: block !important; display: block !important;
z-index: 10000; z-index: 10000;
@ -135,7 +137,7 @@ export default class ActorCard extends Vue {
$color: #f9f9f9; $color: #f9f9f9;
.popover-inner { .popover-inner {
background: $color; background: lighten($background-color, 65%);
color: black; color: black;
padding: 24px; padding: 24px;
border-radius: 5px; border-radius: 5px;

View file

@ -1,5 +1,5 @@
<template> <template>
<v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable"> <v-popover offset="16" trigger="click" :class="{ inline }" class="clickable">
<slot></slot> <slot></slot>
<template slot="popover" class="popover"> <template slot="popover" class="popover">
<actor-card :full="true" :actor="actor" :popover="true" /> <actor-card :full="true" :actor="actor" :popover="true" />

View file

@ -1,21 +1,22 @@
<template> <template>
<li :class="{ reply: comment.inReplyToComment }"> <li :class="{ reply: comment.inReplyToComment }">
<article class="media" :class="{ selected: commentSelected }" :id="commentId"> <article class="media" :class="{ selected: commentSelected }" :id="commentId">
<popover-actor-card :actor="comment.actor" :inline="true" v-if="comment.actor"> <popover-actor-card
<figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar"> class="media-left"
<p class="image is-48x48 is-rounded"> :actor="comment.actor"
<img :src="comment.actor.avatar.url" alt="" /> :inline="true"
</p> v-if="comment.actor"
>
<figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
</popover-actor-card> </popover-actor-card>
<div v-else> <div v-else class="media-left">
<figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar"> <figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
<p class="image is-48x48 is-rounded"> <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
<img :src="comment.actor.avatar.url" alt="" />
</p>
</figure> </figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
@ -325,7 +326,7 @@ form.reply {
} }
strong.organizer { strong.organizer {
background: $primary; background: $background-color;
border-radius: 12px; border-radius: 12px;
color: white; color: white;
padding: 0 6px; padding: 0 6px;

View file

@ -17,7 +17,7 @@
</p> </p>
</div> </div>
<div class="send-comment"> <div class="send-comment">
<b-button native-type="submit" type="is-info">{{ $t("Post a comment") }}</b-button> <b-button native-type="submit" type="is-primary">{{ $t("Post a comment") }}</b-button>
</div> </div>
</div> </div>
</article> </article>

View file

@ -581,7 +581,7 @@ $color-white: #eee;
padding: 12px 6px; padding: 12px 6px;
&:focus { &:focus {
border-color: $primary; border-color: $background-color;
outline: none; outline: none;
} }
} }

View file

@ -140,6 +140,7 @@ export default class EventCard extends Vue {
a.card { a.card {
display: block; display: block;
background: $secondary; background: $secondary;
color: #3c376e;
&:hover { &:hover {
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1); // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
@ -180,8 +181,10 @@ a.card {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
display: block; display: block;
font-size: 1em; font-size: 0.9em;
line-height: 1.75em; line-height: 1.75em;
background-color: #e6e4f4;
color: #3c376e;
} }
} }
@ -198,19 +201,21 @@ a.card {
padding: 0.5rem; padding: 0.5rem;
.event-title { .event-title {
font-size: 1.25rem; font-size: 1.2rem;
line-height: 1.25rem; line-height: 1.25rem;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
min-height: 2.4rem; min-height: 2.4rem;
font-weight: bold;
} }
.event-subtitle { .event-subtitle {
font-size: 0.85rem; font-size: 0.85rem;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
color: #3c376e;
span { span {
width: 15rem; width: 15rem;

View file

@ -310,6 +310,10 @@ article.box {
margin-right: 16px; margin-right: 16px;
} }
a {
text-decoration: none;
}
.title { .title {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
@ -322,10 +326,6 @@ article.box {
margin: auto 0; margin: auto 0;
} }
} }
/deep/ progress + .progress-value {
color: lighten($primary, 20%) !important;
}
} }
.actions { .actions {
@ -345,11 +345,15 @@ article.box {
/deep/ span:last-child { /deep/ span:last-child {
padding-left: 4px; padding-left: 4px;
} }
&:hover {
background: #f5f5f5;
}
} }
* { * {
font-size: 0.8rem; font-size: 0.8rem;
color: $primary; color: $background-color;
} }
} }
} }

View file

@ -42,10 +42,8 @@
</b-table-column> </b-table-column>
<b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable> <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
<article class="media"> <article class="media">
<figure class="media-left" v-if="props.row.actor.avatar"> <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
<p class="image is-48x48"> <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
<img :src="props.row.actor.avatar.url" alt="" />
</p>
</figure> </figure>
<b-icon <b-icon
class="media-left" class="media-left"

View file

@ -6,6 +6,24 @@
<section class="modal-card-body is-flex" v-if="event"> <section class="modal-card-body is-flex" v-if="event">
<div class="container has-text-centered"> <div class="container has-text-centered">
<b-notification
type="is-warning"
v-if="event.visibility !== EventVisibility.PUBLIC"
:closable="false"
>
{{
$t(
"This event is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-notification
type="is-danger"
v-if="event.status === EventStatus.CANCELLED"
:closable="false"
>
{{ $t("This event has been cancelled.") }}
</b-notification>
<small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK"> <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
{{ $t("All the places have already been taken") }} {{ $t("All the places have already been taken") }}
</small> </small>
@ -38,7 +56,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { IEvent } from "../../types/event.model"; import { IEvent, EventVisibility, EventStatus } from "../../types/event.model";
// @ts-ignore // @ts-ignore
import DiasporaLogo from "../../assets/diaspora-icon.svg?inline"; import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
@ -50,6 +68,10 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
export default class ShareEventModal extends Vue { export default class ShareEventModal extends Vue {
@Prop({ type: Object, required: true }) event!: IEvent; @Prop({ type: Object, required: true }) event!: IEvent;
@Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean; @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
EventVisibility = EventVisibility;
EventStatus = EventStatus;
get twitterShareUrl(): string { get twitterShareUrl(): string {
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${ return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
this.event.title this.event.title

View file

@ -20,7 +20,7 @@ export default class Logo extends Vue {
@import "../variables.scss"; @import "../variables.scss";
svg { svg {
fill: $primary; fill: $background-color;
&.invert { &.invert {
fill: $secondary; fill: $secondary;

View file

@ -19,7 +19,7 @@
>{{ $t("My groups") }}</b-navbar-item >{{ $t("My groups") }}</b-navbar-item
> >
<b-navbar-item tag="span"> <b-navbar-item tag="span">
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{ <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{
$t("Create") $t("Create")
}}</b-button> }}</b-button>
</b-navbar-item> </b-navbar-item>
@ -220,8 +220,7 @@ export default class NavBar extends Vue {
nav { nav {
.navbar-item { .navbar-item {
a.button.is-success { a.button {
background: #1e7d97;
font-weight: bold; font-weight: bold;
} }
@ -248,10 +247,6 @@ nav {
img { img {
max-height: 2.5em; max-height: 2.5em;
} }
&:hover {
background: whitesmoke;
}
} }
.navbar-item.has-dropdown a.navbar-link figure { .navbar-item.has-dropdown a.navbar-link figure {

View file

@ -161,7 +161,7 @@ a {
display: block; display: block;
font-weight: 500; font-weight: 500;
margin-bottom: 5px; margin-bottom: 5px;
color: $primary; color: $background-color;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-decoration: none; text-decoration: none;

View file

@ -33,7 +33,7 @@ export default class SettingMenuItem extends Vue {
li.setting-menu-item { li.setting-menu-item {
font-size: 1.05rem; font-size: 1.05rem;
background-color: #fff1de; background-color: #fff1de;
color: $primary; color: $background-color;
margin: auto; margin: auto;
span { span {

View file

@ -32,7 +32,7 @@ export default class SettingMenuSection extends Vue {
li { li {
font-size: 1.3rem; font-size: 1.3rem;
background-color: $secondary; background-color: $secondary;
color: $primary; color: $background-color;
margin: 2px auto; margin: 2px auto;
&.active { &.active {

View file

@ -18,3 +18,8 @@ export default class SettingsMenu extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
/deep/ a {
text-decoration: none;
}
</style>

View file

@ -645,5 +645,7 @@
"{moderator} has unsuspended profile {profile}": "{moderator} has unsuspended profile {profile}", "{moderator} has unsuspended profile {profile}": "{moderator} has unsuspended profile {profile}",
"{moderator} has deleted user {user}": "{moderator} has deleted user {user}", "{moderator} has deleted user {user}": "{moderator} has deleted user {user}",
"Change timezone": "Change timezone", "Change timezone": "Change timezone",
"Select a language": "Select a language" "Select a language": "Select a language",
"This event is accessible only through it's link. Be careful where you post this link.": "This event is accessible only through it's link. Be careful where you post this link.",
"This event has been cancelled.": "This event has been cancelled."
} }

View file

@ -668,5 +668,7 @@
"{moderator} has unsuspended profile {profile}": "{moderator} a annulé la suspension de {profile}", "{moderator} has unsuspended profile {profile}": "{moderator} a annulé la suspension de {profile}",
"{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}", "{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}",
"Change timezone": "Changer de fuseau horaire", "Change timezone": "Changer de fuseau horaire",
"Select a language": "Choisissez une langue" "Select a language": "Choisissez une langue",
"This event is accessible only through it's link. Be careful where you post this link.": "Cet événement est accessible uniquement à travers son lien. Faites attention où vous le diffusez.",
"This event has been cancelled.": "Cet événement a été annulé."
} }

View file

@ -1,17 +1,25 @@
@import "~bulma/sass/utilities/_all"; @import "~bulma/sass/utilities/_all";
$primary: #424056; $bleuvert: #1e7d97;
$jaune: #ffd599;
$violet: #424056;
$primary: $bleuvert;
$primary-invert: findColorInvert($primary); $primary-invert: findColorInvert($primary);
//$secondary: #ffcc85; //$secondary: #ffcc85;
$secondary: #ffd599; $secondary: $jaune;
$secondary-invert: findColorInvert($secondary); $secondary-invert: findColorInvert($secondary);
$background-color: $violet;
$success: #0eccaf; $success: #0eccaf;
$success-invert: findColorInvert($success); $success-invert: findColorInvert($success);
$info: #36bcd4; $info: #36bcd4;
$info-invert: findColorInvert($info); $info-invert: findColorInvert($info);
$danger: #ff7061; $danger: #ff7061;
$danger-invert: findColorInvert($danger); $danger-invert: findColorInvert($danger);
$link: $primary;
$link-invert: $primary-invert;
$colors: map-merge( $colors: map-merge(
$colors, $colors,
@ -36,17 +44,21 @@ $colors: map-merge(
$danger, $danger,
$danger-invert, $danger-invert,
), ),
"link": (
$link,
$link-invert,
),
) )
); );
// Navbar // Navbar
$navbar-background-color: $secondary; $navbar-background-color: $secondary;
$navbar-item-color: $primary; $navbar-item-color: $background-color;
$navbar-height: 4rem; $navbar-height: 4rem;
// Footer // Footer
$footer-padding: 3rem 1.5rem 1rem; $footer-padding: 3rem 1.5rem 1rem;
$footer-background-color: $primary; $footer-background-color: $background-color;
$body-background-color: #efeef4; $body-background-color: #efeef4;
$fullhd-enabled: false; $fullhd-enabled: false;
@ -82,7 +94,6 @@ $subtitle-sup-size: 15px;
margin: 15px auto 30px; margin: 15px auto 30px;
} }
$accent: #1e7d97; $input-border-color: #dbdbdb;
$breadcrumb-item-color: $primary;
$breadcrumb-item-color: $accent;
$checkbox-background-color: #fff; $checkbox-background-color: #fff;

View file

@ -238,17 +238,20 @@ a:not(.button) {
color: #111; color: #111;
} }
.hero.is-primary .subtitle { .hero.is-primary {
padding: 1rem; background: $background-color;
display: block; .subtitle {
padding: 1rem;
display: block;
span { span {
color: lighten($primary, 10%); color: lighten($background-color, 10%);
}
} }
} }
.hero.register { .hero.register {
background: lighten($primary, 20%); background: lighten($background-color, 20%);
} }
section { section {

View file

@ -9,7 +9,7 @@
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="currentIdentity.avatar"> <figure class="image is-48x48" v-if="currentIdentity.avatar">
<img class="image" :src="currentIdentity.avatar.url" alt="" /> <img class="image is-rounded" :src="currentIdentity.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
@ -29,12 +29,9 @@
</div> </div>
</div> </div>
<span v-else class="block" @click="isComponentModalActive = true"> <span v-else class="block" @click="isComponentModalActive = true">
<img <figure class="image is-48x48" v-if="currentIdentity.avatar">
class="image is-48x48" <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
v-if="currentIdentity.avatar" </figure>
:src="currentIdentity.avatar.url"
alt=""
/>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</span> </span>
<b-modal :active.sync="isComponentModalActive" has-modal-card> <b-modal :active.sync="isComponentModalActive" has-modal-card>

View file

@ -83,9 +83,9 @@ export default class Dashboard extends Vue {
line-height: 1.125; line-height: 1.125;
} }
article.tile { .tile a,
a { article.tile a {
color: #4a4a4a; color: #4a4a4a;
} text-decoration: none;
} }
</style> </style>

View file

@ -66,10 +66,14 @@ export default class Follows extends Vue {
relayFollowers: Paginate<IFollower> = { elements: [], total: 0 }; relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.tab-item { .tab-item {
form { form {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
} }
a {
text-decoration: none !important;
}
</style> </style>

View file

@ -139,3 +139,13 @@ export default class Settings extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
@import "../../variables.scss";
.notification a {
color: $primary !important;
text-decoration: underline !important;
text-decoration-color: #fea72b !important;
text-decoration-thickness: 2px !important;
}
</style>

View file

@ -68,6 +68,15 @@
<tag>{{ tag.title }}</tag> <tag>{{ tag.title }}</tag>
</router-link> </router-link>
</p> </p>
<b-tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</b-tag>
<span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
<b-tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
$t("Event to be confirmed")
}}</b-tag>
<b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
$t("Event cancelled")
}}</b-tag>
</span>
</div> </div>
<div class="column is-3-tablet"> <div class="column is-3-tablet">
<div> <div>
@ -138,15 +147,6 @@
</div> </div>
</div> </div>
<div class="has-text-right"> <div class="has-text-right">
<tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</tag>
<span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
<tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
$t("Event to be confirmed")
}}</tag>
<tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
$t("Event cancelled")
}}</tag>
</span>
<template class="visibility" v-if="!event.draft"> <template class="visibility" v-if="!event.draft">
<p v-if="event.visibility === EventVisibility.PUBLIC"> <p v-if="event.visibility === EventVisibility.PUBLIC">
{{ $t("Public event") }} {{ $t("Public event") }}
@ -164,6 +164,7 @@
</template> </template>
<p> <p>
<router-link <router-link
class="participations-link"
v-if="actorIsOrganizer && event.draft === false" v-if="actorIsOrganizer && event.draft === false"
:to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }" :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }"
> >
@ -224,10 +225,10 @@
<b-icon icon="ticket-confirmation-outline" /> <b-icon icon="ticket-confirmation-outline" />
</p> </p>
<b-dropdown position="is-bottom-left" aria-role="list"> <b-dropdown position="is-bottom-left" aria-role="list">
<span slot="trigger" role="button"> <b-button slot="trigger" role="button" icon-right="dots-horizontal">
Actions Actions
<b-icon icon="dots-horizontal" /> <!-- <b-icon icon="dots-horizontal" /> -->
</span> </b-button>
<b-dropdown-item <b-dropdown-item
aria-role="listitem" aria-role="listitem"
has-link has-link
@ -1022,7 +1023,7 @@ export default class Event extends EventMixin {
@import "../../variables"; @import "../../variables";
.section { .section {
padding: 1rem 1.5rem; padding: 1rem 2rem 4rem;
} }
.fade-enter-active, .fade-enter-active,
@ -1084,6 +1085,9 @@ div.sidebar {
background: white; background: white;
p.tags { p.tags {
a {
text-decoration: none;
}
span { span {
&.tag { &.tag {
margin: 0 2px; margin: 0 2px;
@ -1229,71 +1233,6 @@ div.sidebar {
} }
} }
.share {
border-bottom: solid 1px $primary;
border-top: solid 1px $primary;
.diaspora span svg {
height: 2rem;
width: 2rem;
}
.columns {
& > * {
padding: 2rem 0;
}
h3 {
display: block;
color: $primary;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: $secondary;
max-width: 20rem;
}
.column:first-child {
h3 {
margin: 0 auto 1rem;
font-weight: normal;
}
small.maximumNumberOfPlacesWarning {
margin: 0 auto 1rem;
display: block;
}
}
.column:last-child {
h3 {
margin-right: 0;
}
}
.add-to-calendar {
display: flex;
h3 {
margin-left: 0;
cursor: pointer;
}
img {
max-width: 250px;
}
&::before {
content: "";
background: #b3b3b2;
position: absolute;
bottom: 25%;
height: 40%;
width: 1px;
}
}
}
}
.more-events { .more-events {
background: white; background: white;
} }
@ -1310,4 +1249,12 @@ button.dropdown-item {
padding-right: 1rem; padding-right: 1rem;
text-align: right; text-align: right;
} }
a.participations-link {
text-decoration: none;
}
.event-status .tag {
font-size: 1rem;
}
</style> </style>

View file

@ -331,6 +331,12 @@ export default class Participants extends Vue {
section { section {
padding: 1rem 0; padding: 1rem 0;
} }
/deep/ .tabs.is-boxed {
a {
text-decoration: none;
}
}
</style> </style>
<style lang="scss"> <style lang="scss">
nav.tabs li { nav.tabs li {

View file

@ -377,7 +377,6 @@ export default class Home extends Vue {
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
@ -385,10 +384,6 @@ main > div > .container {
background: $white; background: $white;
} }
.section {
padding: 1rem 1.5rem;
}
.search-autocomplete { .search-autocomplete {
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@ -429,7 +424,7 @@ section.hero {
background: lighten($secondary, 20%); background: lighten($secondary, 20%);
.title { .title {
color: $primary; color: $background-color;
} }
.column figure.image img { .column figure.image img {

View file

@ -176,4 +176,8 @@ img.image {
height: 1.5em; height: 1.5em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
a {
text-decoration: none;
}
</style> </style>

View file

@ -182,4 +182,7 @@ export default class Settings extends Vue {
aside.section { aside.section {
padding-top: 1rem; padding-top: 1rem;
} }
.breadcrumb ul li a {
text-decoration: none;
}
</style> </style>

View file

@ -141,31 +141,16 @@ export default class Notifications extends Vue {
@import "../../variables.scss"; @import "../../variables.scss";
.field { .field {
.b-checkbox.checkbox {
align-items: normal;
/deep/ & input:checked + .check {
background-color: $accent;
border-color: $accent;
}
}
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
a.change-timezone { a.change-timezone {
color: $accent; color: $primary;
text-decoration: underline; text-decoration: underline;
text-decoration-color: #fea72b; text-decoration-color: #fea72b;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
margin-left: 5px; margin-left: 5px;
} }
// /deep/ .select select {
// &:active,
// &:focus {
// border-color: $primary;
// box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
// }
// }
} }
</style> </style>

View file

@ -484,6 +484,9 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
with true <- current_locale != locale, with true <- current_locale != locale,
{:ok, %User{} = updated_user} <- Users.update_user(user, %{locale: locale}) do {:ok, %User{} = updated_user} <- Users.update_user(user, %{locale: locale}) do
{:ok, updated_user} {:ok, updated_user}
else
false ->
{:ok, user}
end end
end end
end end