From b5f295c5d90a879db9b95e0015f2fa62819fda41 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Wed, 17 Jun 2020 15:54:24 +0200 Subject: [PATCH] UI improvements Signed-off-by: Thomas Citharel --- js/src/App.vue | 2 + js/src/common.scss | 28 +++++ js/src/components/Account/ActorCard.vue | 4 +- .../components/Account/PopoverActorCard.vue | 2 +- js/src/components/Comment/Comment.vue | 25 +++-- js/src/components/Comment/CommentTree.vue | 2 +- js/src/components/Editor.vue | 2 +- js/src/components/Event/EventCard.vue | 9 +- js/src/components/Event/EventListCard.vue | 14 ++- .../components/Event/ParticipationTable.vue | 6 +- js/src/components/Event/ShareEventModal.vue | 24 +++- js/src/components/Logo.vue | 2 +- js/src/components/NavBar.vue | 9 +- js/src/components/Resource/FolderItem.vue | 2 +- .../components/Settings/SettingMenuItem.vue | 2 +- .../Settings/SettingMenuSection.vue | 2 +- js/src/components/Settings/SettingsMenu.vue | 5 + js/src/i18n/en_US.json | 4 +- js/src/i18n/fr_FR.json | 4 +- js/src/variables.scss | 25 +++-- js/src/views/About.vue | 15 ++- .../views/Account/IdentityPickerWrapper.vue | 11 +- js/src/views/Admin/Dashboard.vue | 8 +- js/src/views/Admin/Follows.vue | 6 +- js/src/views/Admin/Settings.vue | 10 ++ js/src/views/Event/Event.vue | 103 +++++------------- js/src/views/Event/Participants.vue | 6 + js/src/views/Home.vue | 7 +- js/src/views/Moderation/Logs.vue | 4 + js/src/views/Settings.vue | 3 + js/src/views/Settings/Notifications.vue | 17 +-- lib/graphql/resolvers/user.ex | 3 + 32 files changed, 200 insertions(+), 166 deletions(-) create mode 100644 js/src/common.scss diff --git a/js/src/App.vue b/js/src/App.vue index 4e772c08f..ec0c54f59 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -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; diff --git a/js/src/common.scss b/js/src/common.scss new file mode 100644 index 000000000..172e5d1cc --- /dev/null +++ b/js/src/common.scss @@ -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; +} diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue index 5c143932a..0cbfe708e 100644 --- a/js/src/components/Account/ActorCard.vue +++ b/js/src/components/Account/ActorCard.vue @@ -50,6 +50,8 @@ export default class ActorCard extends Vue { diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json index fad695698..76facffe2 100644 --- a/js/src/i18n/en_US.json +++ b/js/src/i18n/en_US.json @@ -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." } diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json index 68bdd12d2..ab80b2f38 100644 --- a/js/src/i18n/fr_FR.json +++ b/js/src/i18n/fr_FR.json @@ -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é." } diff --git a/js/src/variables.scss b/js/src/variables.scss index 2c94f7512..16549bf26 100644 --- a/js/src/variables.scss +++ b/js/src/variables.scss @@ -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; diff --git a/js/src/views/About.vue b/js/src/views/About.vue index aa0b19820..8e94a6230 100644 --- a/js/src/views/About.vue +++ b/js/src/views/About.vue @@ -238,17 +238,20 @@ a:not(.button) { color: #111; } -.hero.is-primary .subtitle { - padding: 1rem; - display: block; +.hero.is-primary { + background: $background-color; + .subtitle { + padding: 1rem; + display: block; - span { - color: lighten($primary, 10%); + span { + color: lighten($background-color, 10%); + } } } .hero.register { - background: lighten($primary, 20%); + background: lighten($background-color, 20%); } section { diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue index 9d893b689..266c9ecb7 100644 --- a/js/src/views/Account/IdentityPickerWrapper.vue +++ b/js/src/views/Account/IdentityPickerWrapper.vue @@ -9,7 +9,7 @@
- +
@@ -29,12 +29,9 @@
- +
+ +
diff --git a/js/src/views/Admin/Dashboard.vue b/js/src/views/Admin/Dashboard.vue index 34b82b83e..c43c3344c 100644 --- a/js/src/views/Admin/Dashboard.vue +++ b/js/src/views/Admin/Dashboard.vue @@ -83,9 +83,9 @@ export default class Dashboard extends Vue { line-height: 1.125; } -article.tile { - a { - color: #4a4a4a; - } +.tile a, +article.tile a { + color: #4a4a4a; + text-decoration: none; } diff --git a/js/src/views/Admin/Follows.vue b/js/src/views/Admin/Follows.vue index 17256a5d5..4481b99f2 100644 --- a/js/src/views/Admin/Follows.vue +++ b/js/src/views/Admin/Follows.vue @@ -66,10 +66,14 @@ export default class Follows extends Vue { relayFollowers: Paginate = { elements: [], total: 0 }; } - diff --git a/js/src/views/Admin/Settings.vue b/js/src/views/Admin/Settings.vue index f29d0c03b..74a9f1a16 100644 --- a/js/src/views/Admin/Settings.vue +++ b/js/src/views/Admin/Settings.vue @@ -139,3 +139,13 @@ export default class Settings extends Vue { } } + diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue index 74ce52dee..37f97ddc6 100644 --- a/js/src/views/Event/Event.vue +++ b/js/src/views/Event/Event.vue @@ -68,6 +68,15 @@ {{ tag.title }}

+ {{ $t("Draft") }} + + {{ + $t("Event to be confirmed") + }} + {{ + $t("Event cancelled") + }} +
@@ -138,15 +147,6 @@
- {{ $t("Draft") }} - - {{ - $t("Event to be confirmed") - }} - {{ - $t("Event cancelled") - }} -

@@ -224,10 +225,10 @@

- + Actions - - + + * { - 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; +} diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue index 4872a874f..4a9af5f69 100644 --- a/js/src/views/Event/Participants.vue +++ b/js/src/views/Event/Participants.vue @@ -331,6 +331,12 @@ export default class Participants extends Vue { section { padding: 1rem 0; } + +/deep/ .tabs.is-boxed { + a { + text-decoration: none; + } +} diff --git a/js/src/views/Settings.vue b/js/src/views/Settings.vue index f3ac9ba51..61819f758 100644 --- a/js/src/views/Settings.vue +++ b/js/src/views/Settings.vue @@ -182,4 +182,7 @@ export default class Settings extends Vue { aside.section { padding-top: 1rem; } +.breadcrumb ul li a { + text-decoration: none; +} diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue index 85d4b08ce..ed7990999 100644 --- a/js/src/views/Settings/Notifications.vue +++ b/js/src/views/Settings/Notifications.vue @@ -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); - // } - // } } diff --git a/lib/graphql/resolvers/user.ex b/lib/graphql/resolvers/user.ex index 0bcfb2f5f..7c2cd5ec4 100644 --- a/lib/graphql/resolvers/user.ex +++ b/lib/graphql/resolvers/user.ex @@ -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