hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-06-17 15:54:24 +02:00
parent 7cd45a1351
commit b5f295c5d9
32 changed files with 200 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/components/Account/ActorCard.vue
View File

@@ -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;

2
js/src/components/Account/PopoverActorCard.vue
View File

@@ -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" />

25
js/src/components/Comment/Comment.vue
View File

@@ -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;

2
js/src/components/Comment/CommentTree.vue
View File

@@ -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>

2
js/src/components/Editor.vue
View File

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

9
js/src/components/Event/EventCard.vue
View File

@@ -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;

14
js/src/components/Event/EventListCard.vue
View File

@@ -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;
}
}
}

6
js/src/components/Event/ParticipationTable.vue
View File

@@ -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"

24
js/src/components/Event/ShareEventModal.vue
View File

@@ -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

2
js/src/components/Logo.vue
View File

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

9
js/src/components/NavBar.vue
View File

@@ -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 {

2
js/src/components/Resource/FolderItem.vue
View File

@@ -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;

2
js/src/components/Settings/SettingMenuItem.vue
View File

@@ -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 {

2
js/src/components/Settings/SettingMenuSection.vue
View File

@@ -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 {

5
js/src/components/Settings/SettingsMenu.vue
View File

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