UI improvements
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
7cd45a1351
commit
b5f295c5d9
|
|
@ -116,6 +116,8 @@ export default class App extends Vue {
|
|||
$mdi-font-path: "~@mdi/font/fonts";
|
||||
@import "~@mdi/font/scss/materialdesignicons";
|
||||
|
||||
@import "common";
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
|
|
|
|||
28
js/src/common.scss
Normal file
28
js/src/common.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -50,6 +50,8 @@ export default class ActorCard extends Vue {
|
|||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables.scss";
|
||||
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
|
|
@ -135,7 +137,7 @@ export default class ActorCard extends Vue {
|
|||
$color: #f9f9f9;
|
||||
|
||||
.popover-inner {
|
||||
background: $color;
|
||||
background: lighten($background-color, 65%);
|
||||
color: black;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable">
|
||||
<v-popover offset="16" trigger="click" :class="{ inline }" class="clickable">
|
||||
<slot></slot>
|
||||
<template slot="popover" class="popover">
|
||||
<actor-card :full="true" :actor="actor" :popover="true" />
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<li :class="{ reply: comment.inReplyToComment }">
|
||||
<article class="media" :class="{ selected: commentSelected }" :id="commentId">
|
||||
<popover-actor-card :actor="comment.actor" :inline="true" v-if="comment.actor">
|
||||
<figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
|
||||
<p class="image is-48x48 is-rounded">
|
||||
<img :src="comment.actor.avatar.url" alt="" />
|
||||
</p>
|
||||
<popover-actor-card
|
||||
class="media-left"
|
||||
:actor="comment.actor"
|
||||
:inline="true"
|
||||
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>
|
||||
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
|
||||
</popover-actor-card>
|
||||
<div v-else>
|
||||
<figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
|
||||
<p class="image is-48x48 is-rounded">
|
||||
<img :src="comment.actor.avatar.url" alt="" />
|
||||
</p>
|
||||
<div v-else class="media-left">
|
||||
<figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
|
||||
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
|
||||
</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 class="media-content">
|
||||
<div class="content">
|
||||
|
|
@ -325,7 +326,7 @@ form.reply {
|
|||
}
|
||||
|
||||
strong.organizer {
|
||||
background: $primary;
|
||||
background: $background-color;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
padding: 0 6px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<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>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -581,7 +581,7 @@ $color-white: #eee;
|
|||
padding: 12px 6px;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
border-color: $background-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@ export default class EventCard extends Vue {
|
|||
a.card {
|
||||
display: block;
|
||||
background: $secondary;
|
||||
color: #3c376e;
|
||||
|
||||
&:hover {
|
||||
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
|
||||
|
|
@ -180,8 +181,10 @@ a.card {
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.75em;
|
||||
background-color: #e6e4f4;
|
||||
color: #3c376e;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -198,19 +201,21 @@ a.card {
|
|||
padding: 0.5rem;
|
||||
|
||||
.event-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
min-height: 2.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event-subtitle {
|
||||
font-size: 0.85rem;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
color: #3c376e;
|
||||
|
||||
span {
|
||||
width: 15rem;
|
||||
|
|
|
|||
|
|
@ -310,6 +310,10 @@ article.box {
|
|||
margin-right: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
@ -322,10 +326,6 @@ article.box {
|
|||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ progress + .progress-value {
|
||||
color: lighten($primary, 20%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
@ -345,11 +345,15 @@ article.box {
|
|||
/deep/ span:last-child {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: 0.8rem;
|
||||
color: $primary;
|
||||
color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,10 +42,8 @@
|
|||
</b-table-column>
|
||||
<b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
|
||||
<article class="media">
|
||||
<figure class="media-left" v-if="props.row.actor.avatar">
|
||||
<p class="image is-48x48">
|
||||
<img :src="props.row.actor.avatar.url" alt="" />
|
||||
</p>
|
||||
<figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
|
||||
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
|
||||
</figure>
|
||||
<b-icon
|
||||
class="media-left"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,24 @@
|
|||
|
||||
<section class="modal-card-body is-flex" v-if="event">
|
||||
<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">
|
||||
{{ $t("All the places have already been taken") }}
|
||||
</small>
|
||||
|
|
@ -38,7 +56,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IEvent } from "../../types/event.model";
|
||||
import { IEvent, EventVisibility, EventStatus } from "../../types/event.model";
|
||||
// @ts-ignore
|
||||
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 {
|
||||
@Prop({ type: Object, required: true }) event!: IEvent;
|
||||
@Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
|
||||
|
||||
EventVisibility = EventVisibility;
|
||||
EventStatus = EventStatus;
|
||||
|
||||
get twitterShareUrl(): string {
|
||||
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
|
||||
this.event.title
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default class Logo extends Vue {
|
|||
@import "../variables.scss";
|
||||
|
||||
svg {
|
||||
fill: $primary;
|
||||
fill: $background-color;
|
||||
|
||||
&.invert {
|
||||
fill: $secondary;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
>{{ $t("My groups") }}</b-navbar-item
|
||||
>
|
||||
<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")
|
||||
}}</b-button>
|
||||
</b-navbar-item>
|
||||
|
|
@ -220,8 +220,7 @@ export default class NavBar extends Vue {
|
|||
|
||||
nav {
|
||||
.navbar-item {
|
||||
a.button.is-success {
|
||||
background: #1e7d97;
|
||||
a.button {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -248,10 +247,6 @@ nav {
|
|||
img {
|
||||
max-height: 2.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item.has-dropdown a.navbar-link figure {
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ a {
|
|||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: $primary;
|
||||
color: $background-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default class SettingMenuItem extends Vue {
|
|||
li.setting-menu-item {
|
||||
font-size: 1.05rem;
|
||||
background-color: #fff1de;
|
||||
color: $primary;
|
||||
color: $background-color;
|
||||
margin: auto;
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default class SettingMenuSection extends Vue {
|
|||
li {
|
||||
font-size: 1.3rem;
|
||||
background-color: $secondary;
|
||||
color: $primary;
|
||||
color: $background-color;
|
||||
margin: 2px auto;
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -18,3 +18,8 @@ export default class SettingsMenu extends Vue {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -645,5 +645,7 @@
|
|||
"{moderator} has unsuspended profile {profile}": "{moderator} has unsuspended profile {profile}",
|
||||
"{moderator} has deleted user {user}": "{moderator} has deleted user {user}",
|
||||
"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."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -668,5 +668,7 @@
|
|||
"{moderator} has unsuspended profile {profile}": "{moderator} a annulé la suspension de {profile}",
|
||||
"{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}",
|
||||
"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é."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
@import "~bulma/sass/utilities/_all";
|
||||
|
||||
$primary: #424056;
|
||||
$bleuvert: #1e7d97;
|
||||
$jaune: #ffd599;
|
||||
$violet: #424056;
|
||||
|
||||
$primary: $bleuvert;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
//$secondary: #ffcc85;
|
||||
$secondary: #ffd599;
|
||||
$secondary: $jaune;
|
||||
$secondary-invert: findColorInvert($secondary);
|
||||
|
||||
$background-color: $violet;
|
||||
|
||||
$success: #0eccaf;
|
||||
$success-invert: findColorInvert($success);
|
||||
$info: #36bcd4;
|
||||
$info-invert: findColorInvert($info);
|
||||
$danger: #ff7061;
|
||||
$danger-invert: findColorInvert($danger);
|
||||
$link: $primary;
|
||||
$link-invert: $primary-invert;
|
||||
|
||||
$colors: map-merge(
|
||||
$colors,
|
||||
|
|
@ -36,17 +44,21 @@ $colors: map-merge(
|
|||
$danger,
|
||||
$danger-invert,
|
||||
),
|
||||
"link": (
|
||||
$link,
|
||||
$link-invert,
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
// Navbar
|
||||
$navbar-background-color: $secondary;
|
||||
$navbar-item-color: $primary;
|
||||
$navbar-item-color: $background-color;
|
||||
$navbar-height: 4rem;
|
||||
|
||||
// Footer
|
||||
$footer-padding: 3rem 1.5rem 1rem;
|
||||
$footer-background-color: $primary;
|
||||
$footer-background-color: $background-color;
|
||||
|
||||
$body-background-color: #efeef4;
|
||||
$fullhd-enabled: false;
|
||||
|
|
@ -82,7 +94,6 @@ $subtitle-sup-size: 15px;
|
|||
margin: 15px auto 30px;
|
||||
}
|
||||
|
||||
$accent: #1e7d97;
|
||||
|
||||
$breadcrumb-item-color: $accent;
|
||||
$input-border-color: #dbdbdb;
|
||||
$breadcrumb-item-color: $primary;
|
||||
$checkbox-background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -238,17 +238,20 @@ a:not(.button) {
|
|||
color: #111;
|
||||
}
|
||||
|
||||
.hero.is-primary .subtitle {
|
||||
.hero.is-primary {
|
||||
background: $background-color;
|
||||
.subtitle {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
|
||||
span {
|
||||
color: lighten($primary, 10%);
|
||||
color: lighten($background-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero.register {
|
||||
background: lighten($primary, 20%);
|
||||
background: lighten($background-color, 20%);
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="media">
|
||||
<div class="media-left">
|
||||
<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>
|
||||
<b-icon v-else size="is-large" icon="account-circle" />
|
||||
</div>
|
||||
|
|
@ -29,12 +29,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<span v-else class="block" @click="isComponentModalActive = true">
|
||||
<img
|
||||
class="image is-48x48"
|
||||
v-if="currentIdentity.avatar"
|
||||
:src="currentIdentity.avatar.url"
|
||||
alt=""
|
||||
/>
|
||||
<figure class="image is-48x48" v-if="currentIdentity.avatar">
|
||||
<img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
|
||||
</figure>
|
||||
<b-icon v-else size="is-large" icon="account-circle" />
|
||||
</span>
|
||||
<b-modal :active.sync="isComponentModalActive" has-modal-card>
|
||||
|
|
|
|||
|
|
@ -83,9 +83,9 @@ export default class Dashboard extends Vue {
|
|||
line-height: 1.125;
|
||||
}
|
||||
|
||||
article.tile {
|
||||
a {
|
||||
.tile a,
|
||||
article.tile a {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -66,10 +66,14 @@ export default class Follows extends Vue {
|
|||
relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.tab-item {
|
||||
form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -139,3 +139,13 @@ export default class Settings extends Vue {
|
|||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,15 @@
|
|||
<tag>{{ tag.title }}</tag>
|
||||
</router-link>
|
||||
</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 class="column is-3-tablet">
|
||||
<div>
|
||||
|
|
@ -138,15 +147,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<p v-if="event.visibility === EventVisibility.PUBLIC">
|
||||
{{ $t("Public event") }}
|
||||
|
|
@ -164,6 +164,7 @@
|
|||
</template>
|
||||
<p>
|
||||
<router-link
|
||||
class="participations-link"
|
||||
v-if="actorIsOrganizer && event.draft === false"
|
||||
:to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }"
|
||||
>
|
||||
|
|
@ -224,10 +225,10 @@
|
|||
<b-icon icon="ticket-confirmation-outline" />
|
||||
</p>
|
||||
<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
|
||||
<b-icon icon="dots-horizontal" />
|
||||
</span>
|
||||
<!-- <b-icon icon="dots-horizontal" /> -->
|
||||
</b-button>
|
||||
<b-dropdown-item
|
||||
aria-role="listitem"
|
||||
has-link
|
||||
|
|
@ -1022,7 +1023,7 @@ export default class Event extends EventMixin {
|
|||
@import "../../variables";
|
||||
|
||||
.section {
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1rem 2rem 4rem;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
|
|
@ -1084,6 +1085,9 @@ div.sidebar {
|
|||
background: white;
|
||||
|
||||
p.tags {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
&.tag {
|
||||
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 {
|
||||
background: white;
|
||||
}
|
||||
|
|
@ -1310,4 +1249,12 @@ button.dropdown-item {
|
|||
padding-right: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
a.participations-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.event-status .tag {
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -331,6 +331,12 @@ export default class Participants extends Vue {
|
|||
section {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/deep/ .tabs.is-boxed {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
nav.tabs li {
|
||||
|
|
|
|||
|
|
@ -377,7 +377,6 @@ export default class Home extends Vue {
|
|||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
|
|
@ -385,10 +384,6 @@ main > div > .container {
|
|||
background: $white;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.search-autocomplete {
|
||||
border: 1px solid #dbdbdb;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
|
|
@ -429,7 +424,7 @@ section.hero {
|
|||
background: lighten($secondary, 20%);
|
||||
|
||||
.title {
|
||||
color: $primary;
|
||||
color: $background-color;
|
||||
}
|
||||
|
||||
.column figure.image img {
|
||||
|
|
|
|||
|
|
@ -176,4 +176,8 @@ img.image {
|
|||
height: 1.5em;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -182,4 +182,7 @@ export default class Settings extends Vue {
|
|||
aside.section {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.breadcrumb ul li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -141,31 +141,16 @@ export default class Notifications extends Vue {
|
|||
@import "../../variables.scss";
|
||||
|
||||
.field {
|
||||
.b-checkbox.checkbox {
|
||||
align-items: normal;
|
||||
|
||||
/deep/ & input:checked + .check {
|
||||
background-color: $accent;
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
a.change-timezone {
|
||||
color: $accent;
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #fea72b;
|
||||
text-decoration-thickness: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
// /deep/ .select select {
|
||||
// &:active,
|
||||
// &:focus {
|
||||
// border-color: $primary;
|
||||
// box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -484,6 +484,9 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
|
|||
with true <- current_locale != locale,
|
||||
{:ok, %User{} = updated_user} <- Users.update_user(user, %{locale: locale}) do
|
||||
{:ok, updated_user}
|
||||
else
|
||||
false ->
|
||||
{:ok, user}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Reference in a new issue