Remove SCSS variables
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
ee20e03cc2
commit
57c3df43ff
@ -268,10 +268,6 @@ const { isDemoMode } = useIsDemoMode();
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "variables";
|
|
||||||
|
|
||||||
@import "common";
|
|
||||||
|
|
||||||
#mobilizon {
|
#mobilizon {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -7,18 +7,29 @@ body {
|
|||||||
outline: none !important;
|
outline: none !important;
|
||||||
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded h-10;
|
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded h-10;
|
||||||
}
|
}
|
||||||
|
.btn:hover {
|
||||||
|
@apply text-slate-200;
|
||||||
|
}
|
||||||
.btn-rounded {
|
.btn-rounded {
|
||||||
@apply rounded-full;
|
@apply rounded-full;
|
||||||
}
|
}
|
||||||
|
.btn-outlined-,
|
||||||
.btn-outlined-primary {
|
.btn-outlined-primary {
|
||||||
@apply bg-transparent text-blue-700 font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
|
@apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
|
||||||
}
|
}
|
||||||
|
.btn-outlined-:hover,
|
||||||
.btn-outlined-primary:hover {
|
.btn-outlined-primary:hover {
|
||||||
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
|
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
|
||||||
}
|
}
|
||||||
.btn-disabled {
|
.btn-disabled {
|
||||||
@apply opacity-50 cursor-not-allowed;
|
@apply opacity-50 cursor-not-allowed;
|
||||||
}
|
}
|
||||||
|
.btn-danger {
|
||||||
|
@apply bg-mbz-danger;
|
||||||
|
}
|
||||||
|
.btn-success {
|
||||||
|
@apply bg-mbz-success;
|
||||||
|
}
|
||||||
|
|
||||||
/* Field */
|
/* Field */
|
||||||
.field {
|
.field {
|
||||||
@ -100,7 +111,7 @@ body {
|
|||||||
@apply bg-white dark:bg-gray-700 shadow-lg rounded-sm;
|
@apply bg-white dark:bg-gray-700 shadow-lg rounded-sm;
|
||||||
}
|
}
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
@apply relative inline-flex gap-1 no-underline p-2 cursor-pointer;
|
@apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item-active {
|
.dropdown-item-active {
|
||||||
@ -157,7 +168,7 @@ button.menubar__button {
|
|||||||
|
|
||||||
/* Notification */
|
/* Notification */
|
||||||
.notification {
|
.notification {
|
||||||
@apply p-7;
|
@apply p-7 bg-secondary text-black rounded;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-primary {
|
.notification-primary {
|
||||||
@ -178,7 +189,7 @@ button.menubar__button {
|
|||||||
|
|
||||||
/* Table */
|
/* Table */
|
||||||
.table tr {
|
.table tr {
|
||||||
@apply odd:bg-white even:bg-gray-50 border-b;
|
@apply odd:bg-white dark:odd:bg-gray-800 even:bg-gray-50 dark:even:bg-gray-900 border-b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-td {
|
.table-td {
|
||||||
|
|||||||
@ -1,188 +0,0 @@
|
|||||||
@use "@/styles/_mixins" as *;
|
|
||||||
@import "variables.scss";
|
|
||||||
|
|
||||||
// @import "node_modules/bulma/bulma.sass";
|
|
||||||
// @import "node_modules/bulma-divider/src/sass/index.sass";
|
|
||||||
// @import "node_modules/buefy/src/scss/buefy";
|
|
||||||
@import "styles/vue-announcer.scss";
|
|
||||||
@import "styles/vue-skip-to.scss";
|
|
||||||
|
|
||||||
a.out,
|
|
||||||
.content a,
|
|
||||||
.ProseMirror a {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: #ed8d07;
|
|
||||||
text-decoration-thickness: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 1rem 1% 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
$color-black: #000;
|
|
||||||
|
|
||||||
.mention {
|
|
||||||
background: rgba($color-black, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0.2rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
@include margin-right(0.2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mention-suggestion {
|
|
||||||
color: rgba($color-black, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mention .mention {
|
|
||||||
background: initial;
|
|
||||||
@include margin-right(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select select {
|
|
||||||
border-color: $borders;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter-active,
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
}
|
|
||||||
.fade-enter,
|
|
||||||
.fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: $body-background-color;
|
|
||||||
font-family: BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Segoe UI",
|
|
||||||
"Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobilizon > .container > .message {
|
|
||||||
margin: 1rem auto auto;
|
|
||||||
.message-header {
|
|
||||||
button.delete {
|
|
||||||
background: #4a4a4a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-description {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
color: $violet-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// $list-background-color: $scheme-main !default;
|
|
||||||
// $list-shadow: 0 2px 3px rgba($scheme-invert, 0.1),
|
|
||||||
// 0 0 0 1px rgba($scheme-invert, 0.1) !default;
|
|
||||||
// $list-radius: $radius !default;
|
|
||||||
|
|
||||||
// $list-item-border: 1px solid $border !default;
|
|
||||||
// $list-item-color: $text !default;
|
|
||||||
// $list-item-active-background-color: $link !default;
|
|
||||||
// $list-item-active-color: $link-invert !default;
|
|
||||||
// $list-item-hover-background-color: $background !default;
|
|
||||||
|
|
||||||
// .list-item {
|
|
||||||
// display: block;
|
|
||||||
// padding: 0.5em 1em;
|
|
||||||
// &:not(a) {
|
|
||||||
// color: $list-item-color;
|
|
||||||
// }
|
|
||||||
// &:first-child {
|
|
||||||
// border-top-left-radius: $list-radius;
|
|
||||||
// border-top-right-radius: $list-radius;
|
|
||||||
// }
|
|
||||||
// &:last-child {
|
|
||||||
// border-bottom-left-radius: $list-radius;
|
|
||||||
// border-bottom-right-radius: $list-radius;
|
|
||||||
// }
|
|
||||||
// &:not(:last-child) {
|
|
||||||
// border-bottom: $list-item-border;
|
|
||||||
// }
|
|
||||||
// &.is-active {
|
|
||||||
// background-color: $list-item-active-background-color;
|
|
||||||
// color: $list-item-active-color;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// a.list-item {
|
|
||||||
// background-color: $list-item-hover-background-color;
|
|
||||||
// cursor: pointer;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.setting-title {
|
|
||||||
margin-top: 2rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
display: inline;
|
|
||||||
background: $secondary;
|
|
||||||
padding: 2px 7.5px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin focus() {
|
|
||||||
&:focus {
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.menu-list > li,
|
|
||||||
p {
|
|
||||||
@include focus;
|
|
||||||
}
|
|
||||||
.navbar-item {
|
|
||||||
@include focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-dropdown span.navbar-item:hover {
|
|
||||||
background-color: whitesmoke;
|
|
||||||
color: #0a0a0a;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bulma/Buefy fixes
|
|
||||||
*/
|
|
||||||
.icon {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tags .tag:not(:last-child) {
|
|
||||||
margin-right: unset;
|
|
||||||
@include margin-right(0.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button .icon {
|
|
||||||
&:first-child:not(:last-child) {
|
|
||||||
@include margin-left(calc(-0.5em - 1px));
|
|
||||||
@include margin-right(0.25em);
|
|
||||||
}
|
|
||||||
&:last-child:not(:first-child) {
|
|
||||||
@include margin-right(calc(-0.5em - 1px));
|
|
||||||
@include margin-left(0.25em);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons .button:not(:last-child):not(.is-fullwidth) {
|
|
||||||
margin-right: unset;
|
|
||||||
@include margin-right(0.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb li:first-child a {
|
|
||||||
padding-left: unset;
|
|
||||||
@include padding-left(0);
|
|
||||||
@include padding-right(0.75em);
|
|
||||||
}
|
|
||||||
.media-left {
|
|
||||||
@include margin-left(1rem);
|
|
||||||
}
|
|
||||||
a.dropdown-item {
|
|
||||||
@include padding-right(3rem);
|
|
||||||
}
|
|
||||||
@ -26,13 +26,3 @@ withDefaults(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.v-popper__inner {
|
|
||||||
padding: 0 !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
.v-popper__arrow-outer {
|
|
||||||
border-color: $violet-1 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -9,9 +9,6 @@
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
&.has-text-grey {
|
|
||||||
border-color: $grey;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.subject {
|
.subject {
|
||||||
|
|||||||
@ -26,6 +26,8 @@
|
|||||||
class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
|
class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
|
||||||
:src="`/img/categories/${category.key.toLowerCase()}.jpg`"
|
:src="`/img/categories/${category.key.toLowerCase()}.jpg`"
|
||||||
:srcset="`/img/categories/${category.key.toLowerCase()}-small.jpg `"
|
:srcset="`/img/categories/${category.key.toLowerCase()}-small.jpg `"
|
||||||
|
width="384"
|
||||||
|
height="384"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</picture>
|
</picture>
|
||||||
|
|||||||
@ -198,6 +198,7 @@ import Alert from "vue-material-design-icons/Alert.vue";
|
|||||||
import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
|
import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
|
||||||
import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
|
import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
|
||||||
import Reply from "vue-material-design-icons/Reply.vue";
|
import Reply from "vue-material-design-icons/Reply.vue";
|
||||||
|
import type { Locale } from "date-fns";
|
||||||
|
|
||||||
const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
|
const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
|
||||||
|
|
||||||
@ -359,7 +360,6 @@ form.reply {
|
|||||||
}
|
}
|
||||||
|
|
||||||
strong.organizer {
|
strong.organizer {
|
||||||
background: $background-color;
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
@ -400,29 +400,18 @@ a.comment-link {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
&.announcement {
|
&.announcement {
|
||||||
background: $purple-2;
|
|
||||||
|
|
||||||
small {
|
small {
|
||||||
color: hsl(0, 0%, 21%);
|
color: hsl(0, 0%, 21%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
background-color: $violet-1;
|
|
||||||
color: $white;
|
|
||||||
.reply-btn,
|
.reply-btn,
|
||||||
small,
|
small,
|
||||||
span,
|
span,
|
||||||
strong,
|
strong,
|
||||||
.icons button {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
a.comment-link:hover {
|
a.comment-link:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: $white;
|
|
||||||
small {
|
|
||||||
color: $purple-3;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -484,13 +473,11 @@ a.comment-link {
|
|||||||
|
|
||||||
& > p > span {
|
& > p > span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $violet-2;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.level-item.reply-btn {
|
.level-item.reply-btn {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $violet-2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
|||||||
25
js/src/components/Dashboard/LinkedNumberDashboardTile.vue
Normal file
25
js/src/components/Dashboard/LinkedNumberDashboardTile.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<router-link
|
||||||
|
v-if="to?.name"
|
||||||
|
:to="to"
|
||||||
|
class="bg-white dark:bg-black mb-4 shadow-md rounded p-4"
|
||||||
|
>
|
||||||
|
<NumberDashboardTile :number="number" :subtitle="subtitle" :style="false">
|
||||||
|
<template #subtitle>
|
||||||
|
<slot name="subtitle" />
|
||||||
|
</template>
|
||||||
|
</NumberDashboardTile>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import NumberDashboardTile from "./NumberDashboardTile.vue";
|
||||||
|
defineProps<{
|
||||||
|
number?: number;
|
||||||
|
subtitle?: string;
|
||||||
|
to?: {
|
||||||
|
name: string;
|
||||||
|
params?: Record<string, any>;
|
||||||
|
query?: Record<string, any>;
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
20
js/src/components/Dashboard/NumberDashboardTile.vue
Normal file
20
js/src/components/Dashboard/NumberDashboardTile.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<article
|
||||||
|
:class="{ 'bg-white dark:bg-black mb-4 shadow-md rounded p-4': style }"
|
||||||
|
>
|
||||||
|
<p class="text-violet-3 text-4xl font-bold">{{ number }}</p>
|
||||||
|
<slot name="subtitle">
|
||||||
|
{{ subtitle }}
|
||||||
|
</slot>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
number?: number;
|
||||||
|
subtitle?: string;
|
||||||
|
style?: boolean;
|
||||||
|
}>(),
|
||||||
|
{ style: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
@ -190,8 +190,6 @@ article.comment {
|
|||||||
display: block;
|
display: block;
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
color: #3c376e;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons {
|
.icons {
|
||||||
@ -244,7 +242,6 @@ article.comment {
|
|||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
background: $secondary;
|
|
||||||
color: #111;
|
color: #111;
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
|
|||||||
@ -420,9 +420,6 @@ onBeforeUnmount(() => {
|
|||||||
@use "@/styles/_mixins" as *;
|
@use "@/styles/_mixins" as *;
|
||||||
@import "./Editor/style.scss";
|
@import "./Editor/style.scss";
|
||||||
|
|
||||||
$color-black: #000;
|
|
||||||
$color-white: #eee;
|
|
||||||
|
|
||||||
.menubar {
|
.menubar {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
|
transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
|
||||||
@ -432,19 +429,10 @@ $color-white: #eee;
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: $color-black;
|
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
// @include margin-right(0.2rem);
|
// @include margin-right(0.2rem);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba($color-black, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-active {
|
|
||||||
background-color: rgba($color-black, 0.1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -487,7 +475,6 @@ $color-white: #eee;
|
|||||||
padding: 12px 6px;
|
padding: 12px 6px;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $background-color;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -520,8 +507,6 @@ $color-white: #eee;
|
|||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 3px solid rgba($color-black, 0.1);
|
|
||||||
color: rgba($color-black, 0.8);
|
|
||||||
// @include padding-left(0.8rem);
|
// @include padding-left(0.8rem);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
||||||
@ -562,7 +547,6 @@ $color-white: #eee;
|
|||||||
|
|
||||||
.suggestion-list {
|
.suggestion-list {
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
border: 2px solid rgba($color-black, 0.1);
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
&__no-results {
|
&__no-results {
|
||||||
@ -576,10 +560,6 @@ $color-white: #eee;
|
|||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
&.is-selected,
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba($color-white, 0.2);
|
|
||||||
}
|
|
||||||
&.is-empty {
|
&.is-empty {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
@ -591,11 +571,9 @@ $color-white: #eee;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tippy-box[data-theme~="dark"] {
|
.tippy-box[data-theme~="dark"] {
|
||||||
background-color: $color-black;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-align: inherit;
|
text-align: inherit;
|
||||||
color: $color-white;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -90,11 +90,5 @@ const selectItem = (index: number): void => {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
|
|
||||||
&.is-selected,
|
|
||||||
&:hover {
|
|
||||||
color: $background-color;
|
|
||||||
background: rgba($background-color, 0.1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -198,7 +198,6 @@ const sentryProvider = computed((): IAnalyticsConfig | undefined => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#error-wrapper {
|
#error-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: $white;
|
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
|||||||
@ -46,7 +46,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-1 w-full flex flex-col justify-between">
|
<div class="flex-1 w-full flex flex-col justify-between">
|
||||||
<h3
|
<h3
|
||||||
class="text-lg leading-5 line-clamp-3 font-bold"
|
class="text-lg leading-5 line-clamp-3 font-bold text-violet-3"
|
||||||
:title="event.title"
|
:title="event.title"
|
||||||
dir="auto"
|
dir="auto"
|
||||||
:lang="event.language"
|
:lang="event.language"
|
||||||
@ -54,7 +54,7 @@
|
|||||||
{{ event.title }}
|
{{ event.title }}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="pt-3">
|
<div class="pt-3">
|
||||||
<div class="flex items-center" dir="auto">
|
<div class="flex items-center text-violet-3" dir="auto">
|
||||||
<figure class="" v-if="actorAvatarURL">
|
<figure class="" v-if="actorAvatarURL">
|
||||||
<img
|
<img
|
||||||
class="rounded-xl"
|
class="rounded-xl"
|
||||||
|
|||||||
@ -47,25 +47,25 @@
|
|||||||
</h3>
|
</h3>
|
||||||
<inline-address
|
<inline-address
|
||||||
v-if="event.physicalAddress"
|
v-if="event.physicalAddress"
|
||||||
class="event-subtitle"
|
class=""
|
||||||
:physical-address="event.physicalAddress"
|
:physical-address="event.physicalAddress"
|
||||||
/>
|
/>
|
||||||
<div
|
<div class="" v-else-if="event.options && event.options.isOnline">
|
||||||
class="event-subtitle"
|
|
||||||
v-else-if="event.options && event.options.isOnline"
|
|
||||||
>
|
|
||||||
<Video />
|
<Video />
|
||||||
<span>{{ $t("Online") }}</span>
|
<span>{{ $t("Online") }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="event-subtitle event-organizer flex" v-if="showOrganizer">
|
<div class="flex gap-1" v-if="showOrganizer">
|
||||||
<figure
|
<figure class="" v-if="organizer(event) && organizer(event)?.avatar">
|
||||||
class="image is-24x24"
|
<img
|
||||||
v-if="organizer(event) && organizer(event)?.avatar"
|
class="rounded-full"
|
||||||
>
|
:src="organizer(event)?.avatar?.url"
|
||||||
<img class="is-rounded" :src="organizer(event)?.avatar?.url" alt="" />
|
alt=""
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
/>
|
||||||
</figure>
|
</figure>
|
||||||
<AccountCircle v-else />
|
<AccountCircle v-else :size="24" />
|
||||||
<span class="organizer-name">
|
<span class="">
|
||||||
{{ organizerDisplayName(event) }}
|
{{ organizerDisplayName(event) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -145,8 +145,6 @@ withDefaults(
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use "@/styles/_mixins" as *;
|
@use "@/styles/_mixins" as *;
|
||||||
// @import "node_modules/bulma/sass/utilities/mixins.sass";
|
|
||||||
// @import "@/variables.scss";
|
|
||||||
|
|
||||||
.event-minimalist-card-wrapper {
|
.event-minimalist-card-wrapper {
|
||||||
// display: grid;
|
// display: grid;
|
||||||
@ -191,8 +189,7 @@ withDefaults(
|
|||||||
// -webkit-box-orient: vertical;
|
// -webkit-box-orient: vertical;
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
// font-weight: bold;
|
// font-weight: bold;
|
||||||
// color: $title-color;
|
d // }
|
||||||
// }
|
|
||||||
|
|
||||||
:deep(.icon) {
|
:deep(.icon) {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|||||||
@ -618,7 +618,6 @@ article.box {
|
|||||||
// line-height: 24px;
|
// line-height: 24px;
|
||||||
// margin: auto 0;
|
// margin: auto 0;
|
||||||
// font-weight: bold;
|
// font-weight: bold;
|
||||||
// color: $title-color;
|
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
@ -626,7 +625,6 @@ article.box {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// .identity-header {
|
// .identity-header {
|
||||||
// background: $yellow-2;
|
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// padding: 5px;
|
// padding: 5px;
|
||||||
|
|
||||||
|
|||||||
@ -69,7 +69,6 @@ const monthName = (event: IEvent): string => {
|
|||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background: $orange-3;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|||||||
@ -16,14 +16,10 @@ import { IEvent } from "@/types/event.model";
|
|||||||
import { formatDistanceToNow } from "date-fns";
|
import { formatDistanceToNow } from "date-fns";
|
||||||
import { inject } from "vue";
|
import { inject } from "vue";
|
||||||
import EventCard from "./EventCard.vue";
|
import EventCard from "./EventCard.vue";
|
||||||
|
import type { Locale } from "date-fns";
|
||||||
defineProps<{
|
defineProps<{
|
||||||
event: IEvent;
|
event: IEvent;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
p.time {
|
|
||||||
color: $violet-3;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -15,8 +15,8 @@
|
|||||||
<img
|
<img
|
||||||
:src="`/img/pics/footer_${random}-1024w.jpg`"
|
:src="`/img/pics/footer_${random}-1024w.jpg`"
|
||||||
alt=""
|
alt=""
|
||||||
width="5234"
|
width="1024"
|
||||||
height="2189"
|
height="428"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
</picture>
|
</picture>
|
||||||
|
|||||||
@ -80,13 +80,3 @@ defineProps<{
|
|||||||
member: IMember;
|
member: IMember;
|
||||||
}>();
|
}>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.media:not(.subfield) {
|
|
||||||
background: lighten($primary, 40%);
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
color: $violet-3;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -17,8 +17,10 @@ import { IMember } from "@/types/actor/member.model";
|
|||||||
import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
|
import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
|
||||||
import { useMutation } from "@vue/apollo-composable";
|
import { useMutation } from "@vue/apollo-composable";
|
||||||
import { ErrorResponse } from "@/types/errors.model";
|
import { ErrorResponse } from "@/types/errors.model";
|
||||||
|
import { inject } from "vue";
|
||||||
|
import type { Notifier } from "@/plugins/notifier";
|
||||||
|
|
||||||
const props = defineProps<{
|
defineProps<{
|
||||||
invitations: IMember[];
|
invitations: IMember[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
@ -75,11 +75,9 @@ onUnmounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
console.debug("src changed");
|
|
||||||
// Image is visible (means: has entered the viewport),
|
// Image is visible (means: has entered the viewport),
|
||||||
// so start loading by setting the src attribute
|
// so start loading by setting the src attribute
|
||||||
if (image.value) {
|
if (image.value) {
|
||||||
console.debug("image is ok, setting it");
|
|
||||||
image.value.src = src.value;
|
image.value.src = src.value;
|
||||||
|
|
||||||
image.value.onload = () => {
|
image.value.onload = () => {
|
||||||
|
|||||||
@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
|
<svg
|
||||||
|
class="bg-white dark:bg-gray-900 dark:fill-white"
|
||||||
|
:class="{ 'bg-gray-900': invert }"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 248.16 46.78"
|
||||||
|
>
|
||||||
<title>Mobilizon Logo</title>
|
<title>Mobilizon Logo</title>
|
||||||
<g data-name="header">
|
<g data-name="header">
|
||||||
<path
|
<path
|
||||||
@ -35,12 +40,3 @@ withDefaults(
|
|||||||
{ invert: false }
|
{ invert: false }
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
svg {
|
|
||||||
fill: $background-color;
|
|
||||||
|
|
||||||
&.invert {
|
|
||||||
fill: $secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -4,7 +4,7 @@
|
|||||||
class="container mx-auto flex flex-wrap justify-between items-center mx-auto"
|
class="container mx-auto flex flex-wrap justify-between items-center mx-auto"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: RouteName.HOME }" class="flex items-center">
|
<router-link :to="{ name: RouteName.HOME }" class="flex items-center">
|
||||||
<logo class="w-40" />
|
<MobilizonLogo class="w-40" />
|
||||||
</router-link>
|
</router-link>
|
||||||
<div class="flex items-center md:order-2" v-if="currentActor?.id">
|
<div class="flex items-center md:order-2" v-if="currentActor?.id">
|
||||||
<o-dropdown>
|
<o-dropdown>
|
||||||
@ -300,20 +300,21 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Logo from "@/components/Logo.vue";
|
import MobilizonLogo from "@/components/MobilizonLogo.vue";
|
||||||
import { ICurrentUserRole } from "@/types/enums";
|
import { ICurrentUserRole } from "@/types/enums";
|
||||||
import { logout } from "../utils/auth";
|
import { logout } from "../utils/auth";
|
||||||
import { IDENTITIES } from "../graphql/actor";
|
import { displayName } from "../types/actor";
|
||||||
import { displayName, IPerson, Person } from "../types/actor";
|
|
||||||
import RouteName from "../router/name";
|
import RouteName from "../router/name";
|
||||||
import { useQuery } from "@vue/apollo-composable";
|
import { ref, watch } from "vue";
|
||||||
import { reactive, ref, watch } from "vue";
|
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||||
// import { useProgrammatic } from "@oruga-ui/oruga-next";
|
// import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||||
import { useCurrentUserClient } from "@/composition/apollo/user";
|
import { useCurrentUserClient } from "@/composition/apollo/user";
|
||||||
import { useCurrentActorClient } from "@/composition/apollo/actor";
|
import {
|
||||||
|
useCurrentActorClient,
|
||||||
|
useCurrentUserIdentities,
|
||||||
|
} from "@/composition/apollo/actor";
|
||||||
// import { useRestrictions } from "@/composition/apollo/config";
|
// import { useRestrictions } from "@/composition/apollo/config";
|
||||||
|
|
||||||
const { currentUser } = useCurrentUserClient();
|
const { currentUser } = useCurrentUserClient();
|
||||||
@ -325,7 +326,7 @@ const { currentActor } = useCurrentActorClient();
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
// const route = useRoute();
|
// const route = useRoute();
|
||||||
|
|
||||||
const identities = reactive<any[]>([]);
|
const { identities } = useCurrentUserIdentities();
|
||||||
|
|
||||||
// const mobileNavbarActive = ref(false);
|
// const mobileNavbarActive = ref(false);
|
||||||
|
|
||||||
@ -336,44 +337,25 @@ const identities = reactive<any[]>([]);
|
|||||||
|
|
||||||
const { t } = useI18n({ useScope: "global" });
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
// TODO: Refactor this
|
watch(identities, () => {
|
||||||
const { onResult } = useQuery<{ identities: IPerson[] }>(
|
|
||||||
IDENTITIES,
|
|
||||||
{},
|
|
||||||
() => ({
|
|
||||||
enabled:
|
|
||||||
currentUser.value?.id !== undefined && currentUser.value?.id !== null,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
onResult(async ({ data }) => {
|
|
||||||
identities.push([
|
|
||||||
...data.identities.map((identity: IPerson) => new Person(identity)),
|
|
||||||
]);
|
|
||||||
|
|
||||||
// If we don't have any identities, the user has validated their account,
|
// If we don't have any identities, the user has validated their account,
|
||||||
// is logging for the first time but didn't create an identity somehow
|
// is logging for the first time but didn't create an identity somehow
|
||||||
if (identities.length === 0) {
|
if (identities.value && identities.value.length === 0) {
|
||||||
console.debug("We have no identities listed for current user", identities);
|
console.debug(
|
||||||
|
"We have no identities listed for current user",
|
||||||
|
identities.value
|
||||||
|
);
|
||||||
console.debug("Pushing route to REGISTER_PROFILE");
|
console.debug("Pushing route to REGISTER_PROFILE");
|
||||||
try {
|
router.push({
|
||||||
await router.push({
|
name: RouteName.REGISTER_PROFILE,
|
||||||
name: RouteName.REGISTER_PROFILE,
|
params: {
|
||||||
params: {
|
email: currentUser.value?.email,
|
||||||
email: currentUser.value?.email,
|
userAlreadyActivated: "true",
|
||||||
userAlreadyActivated: "true",
|
},
|
||||||
},
|
});
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(currentActor, async () => {
|
|
||||||
if (!currentUser.value?.isLoggedIn) return;
|
|
||||||
});
|
|
||||||
|
|
||||||
// watch(loggedUser, () => {
|
// watch(loggedUser, () => {
|
||||||
// if (loggedUser.value?.locale) {
|
// if (loggedUser.value?.locale) {
|
||||||
// console.debug("Setting locale from navbar");
|
// console.debug("Setting locale from navbar");
|
||||||
@ -472,56 +454,3 @@ watch(currentActor, async () => {
|
|||||||
|
|
||||||
const showMobileMenu = ref(false);
|
const showMobileMenu = ref(false);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
@use "@/styles/_mixins" as *;
|
|
||||||
nav {
|
|
||||||
.navbar-item {
|
|
||||||
a.button {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
height: 1.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-dropdown .navbar-item {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-active {
|
|
||||||
background: $secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.icon.is-medium {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-height: 2.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-item.has-dropdown a.navbar-link figure {
|
|
||||||
// @include margin-right(0.75rem);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.navbar-item:focus-within {
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.identity-wrapper {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.media-content span {
|
|
||||||
display: flex;
|
|
||||||
color: $violet-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -102,7 +102,6 @@ const isBeforeLastWeek = computed((): boolean => {
|
|||||||
|
|
||||||
.title-info-wrapper {
|
.title-info-wrapper {
|
||||||
.post-minimalist-title {
|
.post-minimalist-title {
|
||||||
// color: #3c376e;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|||||||
@ -166,7 +166,6 @@ a {
|
|||||||
display: block;
|
display: block;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
// color: $primary;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
@ -131,7 +131,6 @@ a {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
// color: $primary;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|||||||
@ -171,7 +171,6 @@ const moveDisabled = computed((): boolean | undefined => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.is-primary .panel-heading {
|
&.is-primary .panel-heading {
|
||||||
background: $primary;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,7 +32,6 @@ const isActive = computed((): boolean => {
|
|||||||
li.setting-menu-item {
|
li.setting-menu-item {
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
background-color: #fff1de;
|
background-color: #fff1de;
|
||||||
color: $background-color;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|||||||
@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<li>
|
<li class="bg-yellow-1 text-violet-2 text-xl">
|
||||||
<router-link v-if="to" :to="to">{{ title }}</router-link>
|
<router-link
|
||||||
|
class="cursor-pointer my-2 mx-0 py-2 px-3 font-medium block no-underline"
|
||||||
|
v-if="to"
|
||||||
|
:to="to"
|
||||||
|
>{{ title }}</router-link
|
||||||
|
>
|
||||||
<b v-else>{{ title }}</b>
|
<b v-else>{{ title }}</b>
|
||||||
<ul>
|
<ul>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
@ -29,26 +34,3 @@ defineProps<{
|
|||||||
// return false;
|
// return false;
|
||||||
// });
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
li {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
background-color: $secondary;
|
|
||||||
color: $background-color;
|
|
||||||
margin: 2px auto;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #fea72b;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
b {
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 5px 0;
|
|
||||||
display: block;
|
|
||||||
padding: 5px 10px;
|
|
||||||
color: inherit;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<o-button
|
<o-button
|
||||||
outlined
|
outlined
|
||||||
|
variant="primary"
|
||||||
:icon-left="oauthProvider.id"
|
:icon-left="oauthProvider.id"
|
||||||
v-if="isProviderSelected && !oauthProvider.label"
|
v-if="isProviderSelected && !oauthProvider.label"
|
||||||
:href="`/auth/${oauthProvider.id}`"
|
:href="`/auth/${oauthProvider.id}`"
|
||||||
@ -9,6 +10,7 @@
|
|||||||
>
|
>
|
||||||
<o-button
|
<o-button
|
||||||
outlined
|
outlined
|
||||||
|
variant="primary"
|
||||||
:href="`/auth/${oauthProvider.id}`"
|
:href="`/auth/${oauthProvider.id}`"
|
||||||
v-else-if="isProviderSelected"
|
v-else-if="isProviderSelected"
|
||||||
icon-left="lock"
|
icon-left="lock"
|
||||||
|
|||||||
@ -12,8 +12,3 @@ const dataContent = computed((): string => {
|
|||||||
return props.content.toLocaleUpperCase();
|
return props.content.toLocaleUpperCase();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.is-divider-vertical[data-content]::after {
|
|
||||||
background-color: $body-background-color;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
<div class="" v-if="hasIcon && (icon || iconByType)">
|
<div class="" v-if="hasIcon && (icon || iconByType)">
|
||||||
<o-icon
|
<o-icon
|
||||||
:icon="icon ? icon : iconByType"
|
:icon="icon ? icon : iconByType"
|
||||||
:type="type"
|
:variant="variant"
|
||||||
:both="!icon"
|
:both="!icon"
|
||||||
custom-size="48"
|
custom-size="48"
|
||||||
/>
|
/>
|
||||||
@ -37,11 +37,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer v-if="canCancel" class="flex gap-2">
|
<footer v-if="canCancel" class="flex gap-2 my-2">
|
||||||
<o-button ref="cancelButton" @click="cancel('button')">{{
|
<o-button ref="cancelButton" outlined @click="cancel('button')">{{
|
||||||
cancelText ?? t("Cancel")
|
cancelText ?? t("Cancel")
|
||||||
}}</o-button>
|
}}</o-button>
|
||||||
<o-button :type="type" ref="confirmButton" @click="confirm">{{
|
<o-button :variant="variant" ref="confirmButton" @click="confirm">{{
|
||||||
confirmText ?? t("Confirm")
|
confirmText ?? t("Confirm")
|
||||||
}}</o-button>
|
}}</o-button>
|
||||||
</footer>
|
</footer>
|
||||||
@ -58,7 +58,7 @@ const props = withDefaults(
|
|||||||
message: string | string[];
|
message: string | string[];
|
||||||
icon?: string;
|
icon?: string;
|
||||||
hasIcon?: boolean;
|
hasIcon?: boolean;
|
||||||
type?: string;
|
variant?: string;
|
||||||
size?: string;
|
size?: string;
|
||||||
canCancel?: boolean;
|
canCancel?: boolean;
|
||||||
confirmText?: string;
|
confirmText?: string;
|
||||||
@ -71,7 +71,12 @@ const props = withDefaults(
|
|||||||
hasInput?: boolean;
|
hasInput?: boolean;
|
||||||
inputAttrs?: Record<string, any>;
|
inputAttrs?: Record<string, any>;
|
||||||
}>(),
|
}>(),
|
||||||
{ type: "primary", canCancel: true, hasInput: false, inputAttrs: () => ({}) }
|
{
|
||||||
|
variant: "primary",
|
||||||
|
canCancel: true,
|
||||||
|
hasInput: false,
|
||||||
|
inputAttrs: () => ({}),
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const emit = defineEmits(["confirm", "cancel", "close"]);
|
const emit = defineEmits(["confirm", "cancel", "close"]);
|
||||||
@ -91,7 +96,7 @@ const dialogClass = computed(() => {
|
|||||||
* Icon name (MDI) based on the type.
|
* Icon name (MDI) based on the type.
|
||||||
*/
|
*/
|
||||||
const iconByType = computed(() => {
|
const iconByType = computed(() => {
|
||||||
switch (props.type) {
|
switch (props.variant) {
|
||||||
case "info":
|
case "info":
|
||||||
return "information";
|
return "information";
|
||||||
case "success":
|
case "success":
|
||||||
|
|||||||
@ -219,6 +219,14 @@ const icons: Record<string, () => Promise<any>> = {
|
|||||||
import(`../../../node_modules/vue-material-design-icons/Email.vue`),
|
import(`../../../node_modules/vue-material-design-icons/Email.vue`),
|
||||||
ChatAlert: () =>
|
ChatAlert: () =>
|
||||||
import(`../../../node_modules/vue-material-design-icons/ChatAlert.vue`),
|
import(`../../../node_modules/vue-material-design-icons/ChatAlert.vue`),
|
||||||
|
InboxArrowDown: () =>
|
||||||
|
import(
|
||||||
|
`../../../node_modules/vue-material-design-icons/InboxArrowDown.vue`
|
||||||
|
),
|
||||||
|
LanDisconnect: () =>
|
||||||
|
import(`../../../node_modules/vue-material-design-icons/LanDisconnect.vue`),
|
||||||
|
CloudQuestion: () =>
|
||||||
|
import(`../../../node_modules/vue-material-design-icons/CloudQuestion.vue`),
|
||||||
};
|
};
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
@ -236,15 +244,6 @@ const componentInstance = computed(() =>
|
|||||||
defineAsyncComponent(icons[name.value])
|
defineAsyncComponent(icons[name.value])
|
||||||
);
|
);
|
||||||
|
|
||||||
/*
|
|
||||||
defineAsyncComponent(
|
|
||||||
async () =>
|
|
||||||
await import(
|
|
||||||
`../../../node_modules/vue-material-design-icons/${name.value}.vue`
|
|
||||||
)
|
|
||||||
);
|
|
||||||
*/
|
|
||||||
|
|
||||||
const realSize = computed(() => Number.parseInt(props.size ?? "18"));
|
const realSize = computed(() => Number.parseInt(props.size ?? "18"));
|
||||||
|
|
||||||
function toPascalCase(text: string) {
|
function toPascalCase(text: string) {
|
||||||
|
|||||||
@ -29,7 +29,10 @@ export function useCurrentUserIdentities() {
|
|||||||
IDENTITIES,
|
IDENTITIES,
|
||||||
{},
|
{},
|
||||||
() => ({
|
() => ({
|
||||||
enabled: currentUser.value?.isLoggedIn === true,
|
enabled:
|
||||||
|
currentUser.value?.id !== undefined &&
|
||||||
|
currentUser.value?.id !== null &&
|
||||||
|
currentUser.value?.isLoggedIn === true,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import { MemberRole } from "@/types/enums";
|
|||||||
import { IMediaUploadWrapper } from "@/types/media.model";
|
import { IMediaUploadWrapper } from "@/types/media.model";
|
||||||
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
|
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
|
||||||
import { useMutation, useQuery } from "@vue/apollo-composable";
|
import { useMutation, useQuery } from "@vue/apollo-composable";
|
||||||
import { computed } from "vue";
|
import { computed, Ref, unref } from "vue";
|
||||||
import { useCurrentActorClient } from "./actor";
|
import { useCurrentActorClient } from "./actor";
|
||||||
|
|
||||||
type useGroupOptions = {
|
type useGroupOptions = {
|
||||||
@ -28,7 +28,7 @@ type useGroupOptions = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function useGroup(
|
export function useGroup(
|
||||||
name: string | undefined,
|
name: string | undefined | Ref<string | undefined>,
|
||||||
options: useGroupOptions = {}
|
options: useGroupOptions = {}
|
||||||
) {
|
) {
|
||||||
console.debug("using group with", name);
|
console.debug("using group with", name);
|
||||||
@ -52,11 +52,11 @@ export function useGroup(
|
|||||||
}
|
}
|
||||||
>(
|
>(
|
||||||
FETCH_GROUP,
|
FETCH_GROUP,
|
||||||
{
|
() => ({
|
||||||
name: "hello",
|
name: unref(name),
|
||||||
...options,
|
...options,
|
||||||
},
|
}),
|
||||||
{ enabled: name !== undefined }
|
() => ({ enabled: unref(name) !== undefined })
|
||||||
);
|
);
|
||||||
const group = computed(() => result.value?.group);
|
const group = computed(() => result.value?.group);
|
||||||
return { group, error, loading, onError, refetch };
|
return { group, error, loading, onError, refetch };
|
||||||
@ -84,7 +84,7 @@ export function useCreateGroup(variables: {
|
|||||||
if (!membershipData) return;
|
if (!membershipData) return;
|
||||||
if (!currentActor.value) return;
|
if (!currentActor.value) return;
|
||||||
const { person } = membershipData;
|
const { person } = membershipData;
|
||||||
person.memberships.elements.push({
|
person.memberships?.elements.push({
|
||||||
parent: data?.createGroup,
|
parent: data?.createGroup,
|
||||||
role: MemberRole.ADMINISTRATOR,
|
role: MemberRole.ADMINISTRATOR,
|
||||||
actor: currentActor.value,
|
actor: currentActor.value,
|
||||||
|
|||||||
@ -1354,5 +1354,10 @@
|
|||||||
"Open user menu": "Open user menu",
|
"Open user menu": "Open user menu",
|
||||||
"Open main menu": "Open main menu",
|
"Open main menu": "Open main menu",
|
||||||
"{'@'}{username} ({role})": "{'@'}{username} ({role})",
|
"{'@'}{username} ({role})": "{'@'}{username} ({role})",
|
||||||
"This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique."
|
"This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.",
|
||||||
|
"Confirm": "Confirm",
|
||||||
|
"Published events with {comments} comments and {participations} confirmed participations": "Published events with {comments} comments and {participations} confirmed participations",
|
||||||
|
"Ex: someone{'@'}mobilizon.org": "Ex: someone{'@'}mobilizon.org",
|
||||||
|
"Group members": "Group members",
|
||||||
|
"e.g. Nantes, Berlin, Cork, …": "e.g. Nantes, Berlin, Cork, …"
|
||||||
}
|
}
|
||||||
@ -1338,11 +1338,12 @@
|
|||||||
"View all categories": "Voir toutes les catégories",
|
"View all categories": "Voir toutes les catégories",
|
||||||
"{instanceName} ({domain})": "{instanceName} ({domain})",
|
"{instanceName} ({domain})": "{instanceName} ({domain})",
|
||||||
"This instance, {instanceName}, hosts your profile, so remember its name.": "Cette instance, {instanceName}, héberge votre profil, donc souvenez-vous de son nom.",
|
"This instance, {instanceName}, hosts your profile, so remember its name.": "Cette instance, {instanceName}, héberge votre profil, donc souvenez-vous de son nom.",
|
||||||
"Keyword, event title, group name, etc.": "Keyword, event title, group name, etc.",
|
"Keyword, event title, group name, etc.": "Mot clé, titre d'un événement, nom d'un groupe, etc.",
|
||||||
"Go!": "Go!",
|
"Go!": "Go!",
|
||||||
"Explore!": "Explorer !",
|
"Explore!": "Explorer !",
|
||||||
"Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
|
"Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
|
||||||
"Open user menu": "Ouvrir le menu utilisateur",
|
"Open user menu": "Ouvrir le menu utilisateur",
|
||||||
"Open main menu": "Ouvrir le menu principal",
|
"Open main menu": "Ouvrir le menu principal",
|
||||||
"This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "C'est comme votre adresse fédérée ({username}) pour les groupes. Cela permettra au groupe d'être trouvable sur la fédération, et est garanti d'être unique."
|
"This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "C'est comme votre adresse fédérée ({username}) pour les groupes. Cela permettra au groupe d'être trouvable sur la fédération, et est garanti d'être unique.",
|
||||||
|
"Published events with {comments} comments and {participations} confirmed participations": "Événements publiés avec {comments} commentaires et {participations} participations confirmées"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,25 +13,23 @@ export class Dialog {
|
|||||||
message,
|
message,
|
||||||
confirmText,
|
confirmText,
|
||||||
cancelText,
|
cancelText,
|
||||||
type,
|
variant,
|
||||||
hasIcon,
|
hasIcon,
|
||||||
size,
|
size,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
onCancel,
|
onCancel,
|
||||||
inputAttrs,
|
inputAttrs,
|
||||||
variant,
|
|
||||||
}: {
|
}: {
|
||||||
title?: string;
|
title?: string;
|
||||||
message: string;
|
message: string;
|
||||||
confirmText?: string;
|
confirmText?: string;
|
||||||
cancelText?: string;
|
cancelText?: string;
|
||||||
type?: string;
|
variant?: string;
|
||||||
hasIcon?: boolean;
|
hasIcon?: boolean;
|
||||||
size?: string;
|
size?: string;
|
||||||
onConfirm?: (prompt: string) => void;
|
onConfirm?: (prompt: string) => void;
|
||||||
onCancel?: (source: string) => void;
|
onCancel?: (source: string) => void;
|
||||||
inputAttrs: Record<string, any>;
|
inputAttrs: Record<string, any>;
|
||||||
variant?: string;
|
|
||||||
}) {
|
}) {
|
||||||
this.app.config.globalProperties.$oruga.modal.open({
|
this.app.config.globalProperties.$oruga.modal.open({
|
||||||
component: DialogComponent,
|
component: DialogComponent,
|
||||||
@ -40,13 +38,12 @@ export class Dialog {
|
|||||||
message,
|
message,
|
||||||
confirmText,
|
confirmText,
|
||||||
cancelText,
|
cancelText,
|
||||||
type,
|
variant,
|
||||||
hasIcon,
|
hasIcon,
|
||||||
size,
|
size,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
onCancel,
|
onCancel,
|
||||||
inputAttrs,
|
inputAttrs,
|
||||||
variant,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -56,7 +53,7 @@ export class Dialog {
|
|||||||
message,
|
message,
|
||||||
confirmText,
|
confirmText,
|
||||||
cancelText,
|
cancelText,
|
||||||
type,
|
variant,
|
||||||
hasIcon,
|
hasIcon,
|
||||||
size,
|
size,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
@ -66,7 +63,7 @@ export class Dialog {
|
|||||||
message: string;
|
message: string;
|
||||||
confirmText?: string;
|
confirmText?: string;
|
||||||
cancelText?: string;
|
cancelText?: string;
|
||||||
type: string;
|
variant: string;
|
||||||
hasIcon?: boolean;
|
hasIcon?: boolean;
|
||||||
size?: string;
|
size?: string;
|
||||||
onConfirm: () => any;
|
onConfirm: () => any;
|
||||||
@ -80,7 +77,7 @@ export class Dialog {
|
|||||||
message,
|
message,
|
||||||
confirmText,
|
confirmText,
|
||||||
cancelText,
|
cancelText,
|
||||||
type,
|
variant,
|
||||||
hasIcon,
|
hasIcon,
|
||||||
size,
|
size,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
|
|||||||
@ -93,7 +93,8 @@ export const settingsRoutes: RouteRecordRaw[] = [
|
|||||||
{
|
{
|
||||||
path: "admin/dashboard",
|
path: "admin/dashboard",
|
||||||
name: SettingsRouteName.ADMIN_DASHBOARD,
|
name: SettingsRouteName.ADMIN_DASHBOARD,
|
||||||
component: (): Promise<any> => import("@/views/Admin/Dashboard.vue"),
|
component: (): Promise<any> =>
|
||||||
|
import("@/views/Admin/DashboardView.vue"),
|
||||||
meta: {
|
meta: {
|
||||||
requiredAuth: true,
|
requiredAuth: true,
|
||||||
announcer: {
|
announcer: {
|
||||||
|
|||||||
@ -28,8 +28,6 @@
|
|||||||
clip: auto;
|
clip: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
background-color: $white;
|
|
||||||
border: 2px solid $violet-3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&,
|
&,
|
||||||
@ -41,12 +39,10 @@
|
|||||||
&__link {
|
&__link {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
color: $violet-3;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__nav > span {
|
&__nav > span {
|
||||||
border-bottom: 2px solid $violet-3;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -57,7 +53,6 @@
|
|||||||
|
|
||||||
&__link:focus {
|
&__link:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: $violet-3;
|
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,182 +0,0 @@
|
|||||||
// @import "../node_modules/bulma/sass/utilities/functions.sass";
|
|
||||||
// @import "../node_modules/bulma/sass/utilities/initial-variables.sass";
|
|
||||||
// @import "../node_modules/bulma/sass/utilities/derived-variables.sass";
|
|
||||||
|
|
||||||
$white: #fff;
|
|
||||||
|
|
||||||
$bleuvert: #1e7d97;
|
|
||||||
$jaune: #ffd599;
|
|
||||||
$violet: #424056;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text body, paragraphs
|
|
||||||
*/
|
|
||||||
$violet-1: #3a384c;
|
|
||||||
$violet-2: #474467;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Titles, dark borders, buttons
|
|
||||||
*/
|
|
||||||
$violet-3: #3c376e;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Borders
|
|
||||||
*/
|
|
||||||
$borders: #d7d6de;
|
|
||||||
$backgrounds: #ecebf2;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text
|
|
||||||
*/
|
|
||||||
$purple-1: #757199;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Background
|
|
||||||
*/
|
|
||||||
$purple-2: #cdcaea;
|
|
||||||
$purple-3: #e6e4f4;
|
|
||||||
|
|
||||||
$orange-2: #ed8d07;
|
|
||||||
$orange-3: #d35204;
|
|
||||||
|
|
||||||
$yellow-1: #ffd599;
|
|
||||||
$yellow-2: #fff1de;
|
|
||||||
$yellow-3: #fbd5cb;
|
|
||||||
$yellow-4: #f7ba30;
|
|
||||||
|
|
||||||
$primary: $bleuvert;
|
|
||||||
$primary-invert: findColorInvert($primary);
|
|
||||||
$secondary: $jaune;
|
|
||||||
$secondary-invert: findColorInvert($secondary);
|
|
||||||
|
|
||||||
$background-color: $violet-2;
|
|
||||||
|
|
||||||
$success: #0d8758;
|
|
||||||
$success-invert: findColorInvert($success);
|
|
||||||
$info: #36bcd4;
|
|
||||||
$info-invert: findColorInvert($info);
|
|
||||||
$danger: #cd2026;
|
|
||||||
$danger-invert: findColorInvert($danger);
|
|
||||||
$link: $primary;
|
|
||||||
$link-invert: $primary-invert;
|
|
||||||
$text: $violet-1;
|
|
||||||
$grey: #757575;
|
|
||||||
|
|
||||||
// $colors: map-merge(
|
|
||||||
// $colors,
|
|
||||||
// (
|
|
||||||
// "primary": (
|
|
||||||
// $primary,
|
|
||||||
// $primary-invert,
|
|
||||||
// ),
|
|
||||||
// "secondary": (
|
|
||||||
// $secondary,
|
|
||||||
// $secondary-invert,
|
|
||||||
// ),
|
|
||||||
// "success": (
|
|
||||||
// $success,
|
|
||||||
// $success-invert,
|
|
||||||
// ),
|
|
||||||
// "info": (
|
|
||||||
// $info,
|
|
||||||
// $info-invert,
|
|
||||||
// ),
|
|
||||||
// "danger": (
|
|
||||||
// $danger,
|
|
||||||
// $danger-invert,
|
|
||||||
// ),
|
|
||||||
// "link": (
|
|
||||||
// $link,
|
|
||||||
// $link-invert,
|
|
||||||
// ),
|
|
||||||
// "grey": (
|
|
||||||
// $grey,
|
|
||||||
// findColorInvert($grey),
|
|
||||||
// ),
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
|
|
||||||
// Navbar
|
|
||||||
$navbar-background-color: $secondary;
|
|
||||||
$navbar-item-color: $background-color;
|
|
||||||
$navbar-height: 4rem;
|
|
||||||
|
|
||||||
// Footer
|
|
||||||
$footer-padding: 3rem 1.5rem 1rem;
|
|
||||||
$footer-background-color: $background-color;
|
|
||||||
|
|
||||||
$body-background-color: #efeef4;
|
|
||||||
$fullhd-enabled: false;
|
|
||||||
$hero-body-padding-medium: 6rem 1.5rem;
|
|
||||||
|
|
||||||
// main > .container {
|
|
||||||
// background: $body-background-color;
|
|
||||||
// min-height: 70vh;
|
|
||||||
// }
|
|
||||||
|
|
||||||
$title-color: #3c376e;
|
|
||||||
$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
|
|
||||||
serif;
|
|
||||||
$title-weight: 700;
|
|
||||||
$title-size: 40px;
|
|
||||||
$title-sub-size: 45px;
|
|
||||||
$title-sup-size: 30px;
|
|
||||||
|
|
||||||
$subtitle-color: #3a384c;
|
|
||||||
$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
|
|
||||||
serif;
|
|
||||||
$subtitle-weight: 400;
|
|
||||||
$subtitle-size: 32px;
|
|
||||||
$subtitle-sub-size: 30px;
|
|
||||||
$subtitle-sup-size: 15px;
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
background: $secondary;
|
|
||||||
display: inline;
|
|
||||||
padding: 3px 8px;
|
|
||||||
margin: 15px auto 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//$input-border-color: #dbdbdb;
|
|
||||||
$breadcrumb-item-color: $primary;
|
|
||||||
$checkbox-background-color: #fff;
|
|
||||||
$title-color: $violet-3;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-primary: 30 125 151;
|
|
||||||
--color-secondary: 255 213 153;
|
|
||||||
--color-violet-title: 66 64 86;
|
|
||||||
--color-tag: 230 228 244;
|
|
||||||
--color-mbz-yellow-2: 255 241 222;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--color-primary: 30 125 151;
|
|
||||||
--color-secondary: 255 213 153;
|
|
||||||
--color-violet-title: 66 64 86;
|
|
||||||
--color-tag: 230 228 244;
|
|
||||||
--color-mbz-yellow-2: 255 241 222;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Oruga
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--oruga-field-label-color: white;
|
|
||||||
|
|
||||||
// tables
|
|
||||||
--oruga-table-background-color: #111827;
|
|
||||||
--oruga-table-th-color: white;
|
|
||||||
|
|
||||||
// modals
|
|
||||||
--oruga-modal-content-background-color: #111827;
|
|
||||||
|
|
||||||
// dropdowns
|
|
||||||
--oruga-dropdown-item-color: white;
|
|
||||||
--oruga-dropdown-menu-background: #111827;
|
|
||||||
--oruga-dropdown-item-hover-color: #white;
|
|
||||||
--oruga-dropdown-item-hover-background-color: #111827;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { useI18n } from "vue-i18n";
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -22,7 +23,7 @@
|
|||||||
<p class="">{{ currentIdentity.name }}</p>
|
<p class="">{{ currentIdentity.name }}</p>
|
||||||
<p class="">
|
<p class="">
|
||||||
{{ `@${currentIdentity.preferredUsername}` }}
|
{{ `@${currentIdentity.preferredUsername}` }}
|
||||||
<span v-if="masked">{{ $t("(Masked)") }}</span>
|
<span v-if="masked">{{ t("(Masked)") }}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="" v-else>
|
<div class="" v-else>
|
||||||
@ -33,7 +34,7 @@
|
|||||||
v-if="identities && identities.length > 1"
|
v-if="identities && identities.length > 1"
|
||||||
@click="activateModal"
|
@click="activateModal"
|
||||||
>
|
>
|
||||||
{{ $t("Change") }}
|
{{ t("Change") }}
|
||||||
</o-button>
|
</o-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -55,7 +56,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<o-modal
|
<o-modal
|
||||||
v-model:active="isComponentModalActive"
|
v-model:active="isComponentModalActive"
|
||||||
:close-button-aria-label="$t('Close')"
|
:close-button-aria-label="t('Close')"
|
||||||
>
|
>
|
||||||
<identity-picker v-if="currentIdentity" v-model="currentIdentity" />
|
<identity-picker v-if="currentIdentity" v-model="currentIdentity" />
|
||||||
</o-modal>
|
</o-modal>
|
||||||
@ -67,6 +68,7 @@ import { computed, ref } from "vue";
|
|||||||
import { IPerson } from "../../types/actor";
|
import { IPerson } from "../../types/actor";
|
||||||
import IdentityPicker from "./IdentityPicker.vue";
|
import IdentityPicker from "./IdentityPicker.vue";
|
||||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
const { identities } = useCurrentUserIdentities();
|
const { identities } = useCurrentUserIdentities();
|
||||||
|
|
||||||
@ -84,6 +86,8 @@ const props = withDefaults(
|
|||||||
|
|
||||||
const emit = defineEmits(["update:modelValue"]);
|
const emit = defineEmits(["update:modelValue"]);
|
||||||
|
|
||||||
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
const isComponentModalActive = ref(false);
|
const isComponentModalActive = ref(false);
|
||||||
|
|
||||||
const currentIdentity = computed({
|
const currentIdentity = computed({
|
||||||
|
|||||||
@ -230,8 +230,4 @@ p.description {
|
|||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
margin-top: -10px;
|
margin-top: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.section {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -208,14 +208,13 @@ import {
|
|||||||
PERSON_FRAGMENT,
|
PERSON_FRAGMENT,
|
||||||
PERSON_FRAGMENT_FEED_TOKENS,
|
PERSON_FRAGMENT_FEED_TOKENS,
|
||||||
UPDATE_PERSON,
|
UPDATE_PERSON,
|
||||||
} from "../../../graphql/actor";
|
} from "@/graphql/actor";
|
||||||
import { IPerson, displayName } from "../../../types/actor";
|
import { IPerson, displayName } from "@/types/actor";
|
||||||
import PictureUpload from "../../../components/PictureUpload.vue";
|
import PictureUpload from "@/components/PictureUpload.vue";
|
||||||
import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint";
|
import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
|
||||||
import RouteName from "../../../router/name";
|
import RouteName from "@/router/name";
|
||||||
import { buildFileVariable } from "../../../utils/image";
|
import { buildFileVariable } from "@/utils/image";
|
||||||
import { changeIdentity } from "../../../utils/identity";
|
import { changeIdentity } from "@/utils/identity";
|
||||||
// import identityEditionMixin from "../../../mixins/identityEdition";
|
|
||||||
import {
|
import {
|
||||||
CREATE_FEED_TOKEN_ACTOR,
|
CREATE_FEED_TOKEN_ACTOR,
|
||||||
DELETE_FEED_TOKEN,
|
DELETE_FEED_TOKEN,
|
||||||
|
|||||||
@ -1,175 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<breadcrumbs-nav
|
|
||||||
:links="[
|
|
||||||
{ name: RouteName.ADMIN, text: $t('Admin') },
|
|
||||||
{ text: $t('Dashboard') },
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
<section>
|
|
||||||
<h1>{{ $t("Administration") }}</h1>
|
|
||||||
<div class="tile is-ancestor" v-if="dashboard">
|
|
||||||
<div class="tile is-vertical">
|
|
||||||
<div class="tile">
|
|
||||||
<div class="tile is-parent is-vertical is-6">
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<p class="dashboard-number">{{ dashboard.numberOfEvents }}</p>
|
|
||||||
<i18n-t
|
|
||||||
keypath="Published events with {comments} comments and {participations} confirmed participations"
|
|
||||||
tag="p"
|
|
||||||
>
|
|
||||||
<template #comments>
|
|
||||||
<b>{{ dashboard.numberOfComments }}</b>
|
|
||||||
</template>
|
|
||||||
<template #participations>
|
|
||||||
<b>{{
|
|
||||||
dashboard.numberOfConfirmedParticipationsToLocalEvents
|
|
||||||
}}</b>
|
|
||||||
</template>
|
|
||||||
</i18n-t>
|
|
||||||
</article>
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link :to="{ name: RouteName.ADMIN_GROUPS }">
|
|
||||||
<p class="dashboard-number">{{ dashboard.numberOfGroups }}</p>
|
|
||||||
<p>{{ $t("Groups") }}</p>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div class="tile is-parent is-vertical">
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link :to="{ name: RouteName.USERS }">
|
|
||||||
<p class="dashboard-number">{{ dashboard.numberOfUsers }}</p>
|
|
||||||
<p>{{ $t("Users") }}</p>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">
|
|
||||||
<p class="dashboard-number">
|
|
||||||
{{ dashboard.numberOfFollowers }}
|
|
||||||
</p>
|
|
||||||
<p>{{ $t("Instances following you") }}</p>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div class="tile is-parent is-vertical">
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link :to="{ name: RouteName.REPORTS }">
|
|
||||||
<p class="dashboard-number">
|
|
||||||
{{ dashboard.numberOfReports }}
|
|
||||||
</p>
|
|
||||||
<p>{{ $t("Opened reports") }}</p>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link :to="{ name: RouteName.RELAY_FOLLOWINGS }">
|
|
||||||
<p class="dashboard-number">
|
|
||||||
{{ dashboard.numberOfFollowings }}
|
|
||||||
</p>
|
|
||||||
<p>{{ $t("Instances you follow") }}</p>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tile">
|
|
||||||
<div
|
|
||||||
class="tile is-parent is-vertical is-6"
|
|
||||||
v-if="dashboard.lastPublicEventPublished"
|
|
||||||
>
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link
|
|
||||||
:to="{
|
|
||||||
name: RouteName.EVENT,
|
|
||||||
params: { uuid: dashboard.lastPublicEventPublished.uuid },
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<p>{{ $t("Last published event") }}</p>
|
|
||||||
<p class="subtitle">
|
|
||||||
{{ dashboard.lastPublicEventPublished.title }}
|
|
||||||
</p>
|
|
||||||
<figure
|
|
||||||
class="image is-4by3"
|
|
||||||
v-if="dashboard.lastPublicEventPublished.picture"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
:src="dashboard.lastPublicEventPublished.picture.url"
|
|
||||||
/>
|
|
||||||
</figure>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="tile is-parent is-vertical"
|
|
||||||
v-if="dashboard.lastGroupCreated"
|
|
||||||
>
|
|
||||||
<article class="tile is-child box">
|
|
||||||
<router-link
|
|
||||||
:to="{
|
|
||||||
name: RouteName.GROUP,
|
|
||||||
params: {
|
|
||||||
preferredUsername: usernameWithDomain(
|
|
||||||
dashboard.lastGroupCreated
|
|
||||||
),
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<p>{{ $t("Last group created") }}</p>
|
|
||||||
<p class="subtitle">
|
|
||||||
{{
|
|
||||||
dashboard.lastGroupCreated.name ||
|
|
||||||
dashboard.lastGroupCreated.preferredUsername
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
<figure
|
|
||||||
class="image is-4by3"
|
|
||||||
v-if="dashboard.lastGroupCreated.avatar"
|
|
||||||
>
|
|
||||||
<img :src="dashboard.lastGroupCreated.avatar.url" />
|
|
||||||
</figure>
|
|
||||||
</router-link>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { DASHBOARD } from "@/graphql/admin";
|
|
||||||
import { IDashboard } from "@/types/admin.model";
|
|
||||||
import { usernameWithDomain } from "@/types/actor";
|
|
||||||
import RouteName from "@/router/name";
|
|
||||||
import { useQuery } from "@vue/apollo-composable";
|
|
||||||
import { computed } from "vue";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
import { useHead } from "@vueuse/head";
|
|
||||||
|
|
||||||
const { result: dashboardResult } = useQuery<{ dashboard: IDashboard }>(
|
|
||||||
DASHBOARD
|
|
||||||
);
|
|
||||||
|
|
||||||
const dashboard = computed(() => dashboardResult.value?.dashboard);
|
|
||||||
|
|
||||||
const { t } = useI18n({ useScope: "global" });
|
|
||||||
|
|
||||||
useHead({
|
|
||||||
title: computed(() => t("Administration")),
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dashboard-number {
|
|
||||||
font-size: 40px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.125;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile a,
|
|
||||||
article.tile a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image.is-4by3 img {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
151
js/src/views/Admin/DashboardView.vue
Normal file
151
js/src/views/Admin/DashboardView.vue
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<breadcrumbs-nav
|
||||||
|
:links="[
|
||||||
|
{ name: RouteName.ADMIN, text: t('Admin') },
|
||||||
|
{ text: t('Dashboard') },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
<section>
|
||||||
|
<h1>{{ t("Administration") }}</h1>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 lg:grid-rows-2 lg:grid-flow-col gap-x-4 items-stretch"
|
||||||
|
>
|
||||||
|
<NumberDashboardTile :number="dashboard?.numberOfEvents">
|
||||||
|
<template #subtitle>
|
||||||
|
<i18n-t
|
||||||
|
keypath="Published events with {comments} comments and {participations} confirmed participations"
|
||||||
|
tag="p"
|
||||||
|
>
|
||||||
|
<template #comments>
|
||||||
|
<b>{{ dashboard?.numberOfComments }}</b>
|
||||||
|
</template>
|
||||||
|
<template #participations>
|
||||||
|
<b>{{
|
||||||
|
dashboard?.numberOfConfirmedParticipationsToLocalEvents
|
||||||
|
}}</b>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</template>
|
||||||
|
</NumberDashboardTile>
|
||||||
|
<LinkedNumberDashboardTile
|
||||||
|
:number="dashboard?.numberOfGroups"
|
||||||
|
:subtitle="t('Groups', dashboard?.numberOfGroups ?? 0)"
|
||||||
|
:to="{ name: RouteName.ADMIN_GROUPS }"
|
||||||
|
/>
|
||||||
|
<LinkedNumberDashboardTile
|
||||||
|
:number="dashboard?.numberOfUsers"
|
||||||
|
:subtitle="t('Users', dashboard?.numberOfUsers ?? 0)"
|
||||||
|
:to="{ name: RouteName.ADMIN_GROUPS }"
|
||||||
|
/>
|
||||||
|
<LinkedNumberDashboardTile
|
||||||
|
:number="dashboard?.numberOfReports"
|
||||||
|
:subtitle="t('Opened reports', dashboard?.numberOfReports ?? 0)"
|
||||||
|
:to="{ name: RouteName.REPORTS }"
|
||||||
|
/>
|
||||||
|
<LinkedNumberDashboardTile
|
||||||
|
:number="dashboard?.numberOfFollowers"
|
||||||
|
:subtitle="
|
||||||
|
t('Instances following you', dashboard?.numberOfFollowers ?? 0)
|
||||||
|
"
|
||||||
|
:to="{
|
||||||
|
name: RouteName.INSTANCES,
|
||||||
|
query: { followStatus: InstanceFilterFollowStatus.FOLLOWING },
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<LinkedNumberDashboardTile
|
||||||
|
:number="dashboard?.numberOfFollowings"
|
||||||
|
:subtitle="
|
||||||
|
t('Instances you follow', dashboard?.numberOfFollowings ?? 0)
|
||||||
|
"
|
||||||
|
:to="{
|
||||||
|
name: RouteName.INSTANCES,
|
||||||
|
query: { followStatus: InstanceFilterFollowStatus.FOLLOWED },
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<div
|
||||||
|
class="tile is-parent is-vertical is-6"
|
||||||
|
v-if="dashboard?.lastPublicEventPublished"
|
||||||
|
>
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<router-link
|
||||||
|
:to="{
|
||||||
|
name: RouteName.EVENT,
|
||||||
|
params: { uuid: dashboard?.lastPublicEventPublished.uuid },
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<p>{{ t("Last published event") }}</p>
|
||||||
|
<p>
|
||||||
|
{{ dashboard?.lastPublicEventPublished.title }}
|
||||||
|
</p>
|
||||||
|
<figure
|
||||||
|
class="image is-4by3"
|
||||||
|
v-if="dashboard?.lastPublicEventPublished.picture"
|
||||||
|
>
|
||||||
|
<img :src="dashboard?.lastPublicEventPublished.picture.url" />
|
||||||
|
</figure>
|
||||||
|
</router-link>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="tile is-parent is-vertical"
|
||||||
|
v-if="dashboard?.lastGroupCreated"
|
||||||
|
>
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<router-link
|
||||||
|
:to="{
|
||||||
|
name: RouteName.GROUP,
|
||||||
|
params: {
|
||||||
|
preferredUsername: usernameWithDomain(
|
||||||
|
dashboard?.lastGroupCreated
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<p>{{ t("Last group created") }}</p>
|
||||||
|
<p>
|
||||||
|
{{
|
||||||
|
dashboard?.lastGroupCreated.name ||
|
||||||
|
dashboard?.lastGroupCreated.preferredUsername
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<figure
|
||||||
|
class="image is-4by3"
|
||||||
|
v-if="dashboard?.lastGroupCreated.avatar"
|
||||||
|
>
|
||||||
|
<img :src="dashboard?.lastGroupCreated.avatar.url" />
|
||||||
|
</figure>
|
||||||
|
</router-link>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { DASHBOARD } from "@/graphql/admin";
|
||||||
|
import { IDashboard } from "@/types/admin.model";
|
||||||
|
import { usernameWithDomain } from "@/types/actor";
|
||||||
|
import RouteName from "@/router/name";
|
||||||
|
import { useQuery } from "@vue/apollo-composable";
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { useHead } from "@vueuse/head";
|
||||||
|
import NumberDashboardTile from "@/components/Dashboard/NumberDashboardTile.vue";
|
||||||
|
import LinkedNumberDashboardTile from "@/components/Dashboard/LinkedNumberDashboardTile.vue";
|
||||||
|
import { InstanceFilterFollowStatus } from "@/types/enums";
|
||||||
|
|
||||||
|
const { result: dashboardResult } = useQuery<{ dashboard: IDashboard }>(
|
||||||
|
DASHBOARD
|
||||||
|
);
|
||||||
|
|
||||||
|
const dashboard = computed(() => dashboardResult.value?.dashboard);
|
||||||
|
|
||||||
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
title: computed(() => t("Administration")),
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -78,12 +78,8 @@
|
|||||||
src="../../assets/logo.svg"
|
src="../../assets/logo.svg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<o-icon
|
<CloudQuestion v-else :size="36" />
|
||||||
class="is-large"
|
|
||||||
v-else
|
|
||||||
custom-size="mdi-36px"
|
|
||||||
icon="cloud-question"
|
|
||||||
/>
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<h4 class="text-lg truncate">{{ instance.domain }}</h4>
|
<h4 class="text-lg truncate">{{ instance.domain }}</h4>
|
||||||
<span
|
<span
|
||||||
@ -183,6 +179,7 @@ import { useMutation, useQuery } from "@vue/apollo-composable";
|
|||||||
import { computed, ref } from "vue";
|
import { computed, ref } from "vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { useHead } from "@vueuse/head";
|
import { useHead } from "@vueuse/head";
|
||||||
|
import CloudQuestion from "../../../node_modules/vue-material-design-icons/CloudQuestion.vue";
|
||||||
|
|
||||||
const INSTANCES_PAGE_LIMIT = 10;
|
const INSTANCES_PAGE_LIMIT = 10;
|
||||||
|
|
||||||
|
|||||||
@ -2,23 +2,23 @@
|
|||||||
<div>
|
<div>
|
||||||
<breadcrumbs-nav
|
<breadcrumbs-nav
|
||||||
:links="[
|
:links="[
|
||||||
{ name: RouteName.ADMIN, text: $t('Admin') },
|
{ name: RouteName.ADMIN, text: t('Admin') },
|
||||||
{ text: $t('Instance settings') },
|
{ text: t('Instance settings') },
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section v-if="settingsToWrite">
|
<section v-if="settingsToWrite">
|
||||||
<form @submit.prevent="updateSettings">
|
<form @submit.prevent="updateSettings">
|
||||||
<o-field :label="$t('Instance Name')" label-for="instance-name">
|
<o-field :label="t('Instance Name')" label-for="instance-name">
|
||||||
<o-input v-model="settingsToWrite.instanceName" id="instance-name" />
|
<o-input v-model="settingsToWrite.instanceName" id="instance-name" />
|
||||||
</o-field>
|
</o-field>
|
||||||
<div class="field">
|
<div class="field flex flex-col">
|
||||||
<label class="label has-help" for="instance-description">{{
|
<label class="" for="instance-description">{{
|
||||||
$t("Instance Short Description")
|
t("Instance Short Description")
|
||||||
}}</label>
|
}}</label>
|
||||||
<small>
|
<small>
|
||||||
{{
|
{{
|
||||||
$t(
|
t(
|
||||||
"Displayed on homepage and meta tags. Describe what Mobilizon is and what makes this instance special in a single paragraph."
|
"Displayed on homepage and meta tags. Describe what Mobilizon is and what makes this instance special in a single paragraph."
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
@ -30,73 +30,71 @@
|
|||||||
id="instance-description"
|
id="instance-description"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field flex flex-col">
|
||||||
<label class="label has-help" for="instance-slogan">{{
|
<label class="" for="instance-slogan">{{
|
||||||
$t("Instance Slogan")
|
t("Instance Slogan")
|
||||||
}}</label>
|
}}</label>
|
||||||
<small>
|
<small>
|
||||||
{{
|
{{
|
||||||
$t(
|
t(
|
||||||
'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
|
'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</small>
|
</small>
|
||||||
<o-input
|
<o-input
|
||||||
v-model="settingsToWrite.instanceSlogan"
|
v-model="settingsToWrite.instanceSlogan"
|
||||||
:placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
|
:placeholder="t('Gather ⋅ Organize ⋅ Mobilize')"
|
||||||
id="instance-slogan"
|
id="instance-slogan"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field flex flex-col">
|
||||||
<label class="label has-help" for="instance-contact">{{
|
<label class="" for="instance-contact">{{ t("Contact") }}</label>
|
||||||
$t("Contact")
|
|
||||||
}}</label>
|
|
||||||
<small>
|
<small>
|
||||||
{{ $t("Can be an email or a link, or just plain text.") }}
|
{{ t("Can be an email or a link, or just plain text.") }}
|
||||||
</small>
|
</small>
|
||||||
<o-input v-model="settingsToWrite.contact" id="instance-contact" />
|
<o-input v-model="settingsToWrite.contact" id="instance-contact" />
|
||||||
</div>
|
</div>
|
||||||
<o-field :label="$t('Allow registrations')">
|
<o-field :label="t('Allow registrations')">
|
||||||
<o-switch v-model="settingsToWrite.registrationsOpen">
|
<o-switch v-model="settingsToWrite.registrationsOpen">
|
||||||
<p
|
<p
|
||||||
class="prose dark:prose-invert"
|
class="prose dark:prose-invert"
|
||||||
v-if="settingsToWrite.registrationsOpen"
|
v-if="settingsToWrite.registrationsOpen"
|
||||||
>
|
>
|
||||||
{{ $t("Registration is allowed, anyone can register.") }}
|
{{ t("Registration is allowed, anyone can register.") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="prose dark:prose-invert" v-else>
|
<p class="prose dark:prose-invert" v-else>
|
||||||
{{ $t("Registration is closed.") }}
|
{{ t("Registration is closed.") }}
|
||||||
</p>
|
</p>
|
||||||
</o-switch>
|
</o-switch>
|
||||||
</o-field>
|
</o-field>
|
||||||
<div class="field">
|
<div class="field flex flex-col">
|
||||||
<label class="label has-help" for="instance-languages">{{
|
<label class="" for="instance-languages">{{
|
||||||
$t("Instance languages")
|
t("Instance languages")
|
||||||
}}</label>
|
}}</label>
|
||||||
<small>
|
<small>
|
||||||
{{ $t("Main languages you/your moderators speak") }}
|
{{ t("Main languages you/your moderators speak") }}
|
||||||
</small>
|
</small>
|
||||||
<o-taginput
|
<o-inputitems
|
||||||
v-model="instanceLanguages"
|
v-model="instanceLanguages"
|
||||||
:data="filteredLanguages"
|
:data="filteredLanguages"
|
||||||
autocomplete
|
autocomplete
|
||||||
:open-on-focus="true"
|
:open-on-focus="true"
|
||||||
field="name"
|
field="name"
|
||||||
icon="label"
|
icon="label"
|
||||||
:placeholder="$t('Select languages')"
|
:placeholder="t('Select languages')"
|
||||||
@typing="getFilteredLanguages"
|
@typing="getFilteredLanguages"
|
||||||
id="instance-languages"
|
id="instance-languages"
|
||||||
>
|
>
|
||||||
<template #empty>{{ $t("No languages found") }}</template>
|
<template #empty>{{ t("No languages found") }}</template>
|
||||||
</o-taginput>
|
</o-inputitems>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field flex flex-col">
|
||||||
<label class="label has-help" for="instance-long-description">{{
|
<label class="" for="instance-long-description">{{
|
||||||
$t("Instance Long Description")
|
t("Instance Long Description")
|
||||||
}}</label>
|
}}</label>
|
||||||
<small>
|
<small>
|
||||||
{{
|
{{
|
||||||
$t(
|
t(
|
||||||
"A place to explain who you are and the things that set your instance apart. You can use HTML tags."
|
"A place to explain who you are and the things that set your instance apart. You can use HTML tags."
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
@ -108,13 +106,11 @@
|
|||||||
id="instance-long-description"
|
id="instance-long-description"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field flex flex-col">
|
||||||
<label class="label has-help" for="instance-rules">{{
|
<label class="" for="instance-rules">{{ t("Instance Rules") }}</label>
|
||||||
$t("Instance Rules")
|
|
||||||
}}</label>
|
|
||||||
<small>
|
<small>
|
||||||
{{
|
{{
|
||||||
$t(
|
t(
|
||||||
"A place for your code of conduct, rules or guidelines. You can use HTML tags."
|
"A place for your code of conduct, rules or guidelines. You can use HTML tags."
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
@ -125,19 +121,19 @@
|
|||||||
id="instance-rules"
|
id="instance-rules"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<o-field :label="$t('Instance Terms Source')">
|
<o-field :label="t('Instance Terms Source')">
|
||||||
<div class="columns">
|
<div class="">
|
||||||
<div class="column is-one-third-desktop">
|
<div class="">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>
|
<legend>
|
||||||
{{ $t("Choose the source of the instance's Terms") }}
|
{{ t("Choose the source of the instance's Terms") }}
|
||||||
</legend>
|
</legend>
|
||||||
<o-field>
|
<o-field>
|
||||||
<o-radio
|
<o-radio
|
||||||
v-model="settingsToWrite.instanceTermsType"
|
v-model="settingsToWrite.instanceTermsType"
|
||||||
name="instanceTermsType"
|
name="instanceTermsType"
|
||||||
:native-value="InstanceTermsType.DEFAULT"
|
:native-value="InstanceTermsType.DEFAULT"
|
||||||
>{{ $t("Default Mobilizon terms") }}</o-radio
|
>{{ t("Default Mobilizon terms") }}</o-radio
|
||||||
>
|
>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field>
|
<o-field>
|
||||||
@ -145,7 +141,7 @@
|
|||||||
v-model="settingsToWrite.instanceTermsType"
|
v-model="settingsToWrite.instanceTermsType"
|
||||||
name="instanceTermsType"
|
name="instanceTermsType"
|
||||||
:native-value="InstanceTermsType.URL"
|
:native-value="InstanceTermsType.URL"
|
||||||
>{{ $t("Custom URL") }}</o-radio
|
>{{ t("Custom URL") }}</o-radio
|
||||||
>
|
>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field>
|
<o-field>
|
||||||
@ -153,20 +149,20 @@
|
|||||||
v-model="settingsToWrite.instanceTermsType"
|
v-model="settingsToWrite.instanceTermsType"
|
||||||
name="instanceTermsType"
|
name="instanceTermsType"
|
||||||
:native-value="InstanceTermsType.CUSTOM"
|
:native-value="InstanceTermsType.CUSTOM"
|
||||||
>{{ $t("Custom text") }}</o-radio
|
>{{ t("Custom text") }}</o-radio
|
||||||
>
|
>
|
||||||
</o-field>
|
</o-field>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="">
|
||||||
<div
|
<o-notification
|
||||||
class="notification"
|
class="bg-slate-700"
|
||||||
v-if="
|
v-if="
|
||||||
settingsToWrite.instanceTermsType ===
|
settingsToWrite.instanceTermsType ===
|
||||||
InstanceTermsType.DEFAULT
|
InstanceTermsType.DEFAULT
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b>{{ $t("Default") }}</b>
|
<b>{{ t("Default") }}</b>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
tag="p"
|
tag="p"
|
||||||
class="prose dark:prose-invert"
|
class="prose dark:prose-invert"
|
||||||
@ -177,25 +173,25 @@
|
|||||||
href="https://demo.mobilizon.org/terms"
|
href="https://demo.mobilizon.org/terms"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>{{ $t("default Mobilizon terms") }}</a
|
>{{ t("default Mobilizon terms") }}</a
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
<b>{{
|
<b>{{
|
||||||
$t(
|
t(
|
||||||
"NOTE! The default terms have not been checked over by a lawyer and thus are unlikely to provide full legal protection for all situations for an instance admin using them. They are also not specific to all countries and jurisdictions. If you are unsure, please check with a lawyer."
|
"NOTE! The default terms have not been checked over by a lawyer and thus are unlikely to provide full legal protection for all situations for an instance admin using them. They are also not specific to all countries and jurisdictions. If you are unsure, please check with a lawyer."
|
||||||
)
|
)
|
||||||
}}</b>
|
}}</b>
|
||||||
</div>
|
</o-notification>
|
||||||
<div
|
<div
|
||||||
class="notification"
|
class="notification"
|
||||||
v-if="
|
v-if="
|
||||||
settingsToWrite.instanceTermsType === InstanceTermsType.URL
|
settingsToWrite.instanceTermsType === InstanceTermsType.URL
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b>{{ $t("URL") }}</b>
|
<b>{{ t("URL") }}</b>
|
||||||
<p class="prose dark:prose-invert">
|
<p class="prose dark:prose-invert">
|
||||||
{{ $t("Set an URL to a page with your own terms.") }}
|
{{ t("Set an URL to a page with your own terms.") }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -204,7 +200,7 @@
|
|||||||
settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
|
settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b>{{ $t("Custom") }}</b>
|
<b>{{ t("Custom") }}</b>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
tag="p"
|
tag="p"
|
||||||
class="prose dark:prose-invert"
|
class="prose dark:prose-invert"
|
||||||
@ -216,7 +212,7 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>
|
>
|
||||||
{{ $t("default Mobilizon terms") }}</a
|
{{ t("default Mobilizon terms") }}</a
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
@ -225,7 +221,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field
|
<o-field
|
||||||
:label="$t('Instance Terms URL')"
|
:label="t('Instance Terms URL')"
|
||||||
label-for="instanceTermsUrl"
|
label-for="instanceTermsUrl"
|
||||||
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
|
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
|
||||||
>
|
>
|
||||||
@ -236,7 +232,7 @@
|
|||||||
/>
|
/>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field
|
<o-field
|
||||||
:label="$t('Instance Terms')"
|
:label="t('Instance Terms')"
|
||||||
label-for="instanceTerms"
|
label-for="instanceTerms"
|
||||||
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
|
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
|
||||||
>
|
>
|
||||||
@ -246,19 +242,19 @@
|
|||||||
id="instanceTerms"
|
id="instanceTerms"
|
||||||
/>
|
/>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field :label="$t('Instance Privacy Policy Source')">
|
<o-field :label="t('Instance Privacy Policy Source')">
|
||||||
<div class="columns">
|
<div class="">
|
||||||
<div class="column is-one-third-desktop">
|
<div class="">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>
|
<legend>
|
||||||
{{ $t("Choose the source of the instance's Privacy Policy") }}
|
{{ t("Choose the source of the instance's Privacy Policy") }}
|
||||||
</legend>
|
</legend>
|
||||||
<o-field>
|
<o-field>
|
||||||
<o-radio
|
<o-radio
|
||||||
v-model="settingsToWrite.instancePrivacyPolicyType"
|
v-model="settingsToWrite.instancePrivacyPolicyType"
|
||||||
name="instancePrivacyType"
|
name="instancePrivacyType"
|
||||||
:native-value="InstancePrivacyType.DEFAULT"
|
:native-value="InstancePrivacyType.DEFAULT"
|
||||||
>{{ $t("Default Mobilizon privacy policy") }}</o-radio
|
>{{ t("Default Mobilizon privacy policy") }}</o-radio
|
||||||
>
|
>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field>
|
<o-field>
|
||||||
@ -266,7 +262,7 @@
|
|||||||
v-model="settingsToWrite.instancePrivacyPolicyType"
|
v-model="settingsToWrite.instancePrivacyPolicyType"
|
||||||
name="instancePrivacyType"
|
name="instancePrivacyType"
|
||||||
:native-value="InstancePrivacyType.URL"
|
:native-value="InstancePrivacyType.URL"
|
||||||
>{{ $t("Custom URL") }}</o-radio
|
>{{ t("Custom URL") }}</o-radio
|
||||||
>
|
>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field>
|
<o-field>
|
||||||
@ -274,12 +270,12 @@
|
|||||||
v-model="settingsToWrite.instancePrivacyPolicyType"
|
v-model="settingsToWrite.instancePrivacyPolicyType"
|
||||||
name="instancePrivacyType"
|
name="instancePrivacyType"
|
||||||
:native-value="InstancePrivacyType.CUSTOM"
|
:native-value="InstancePrivacyType.CUSTOM"
|
||||||
>{{ $t("Custom text") }}</o-radio
|
>{{ t("Custom text") }}</o-radio
|
||||||
>
|
>
|
||||||
</o-field>
|
</o-field>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="">
|
||||||
<div
|
<div
|
||||||
class="notification"
|
class="notification"
|
||||||
v-if="
|
v-if="
|
||||||
@ -287,7 +283,7 @@
|
|||||||
InstancePrivacyType.DEFAULT
|
InstancePrivacyType.DEFAULT
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b>{{ $t("Default") }}</b>
|
<b>{{ t("Default") }}</b>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
tag="p"
|
tag="p"
|
||||||
class="prose dark:prose-invert"
|
class="prose dark:prose-invert"
|
||||||
@ -298,7 +294,7 @@
|
|||||||
href="https://demo.mobilizon.org/privacy"
|
href="https://demo.mobilizon.org/privacy"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>{{ $t("default Mobilizon privacy policy") }}</a
|
>{{ t("default Mobilizon privacy policy") }}</a
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
@ -310,9 +306,9 @@
|
|||||||
InstancePrivacyType.URL
|
InstancePrivacyType.URL
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b>{{ $t("URL") }}</b>
|
<b>{{ t("URL") }}</b>
|
||||||
<p class="prose dark:prose-invert">
|
<p class="prose dark:prose-invert">
|
||||||
{{ $t("Set an URL to a page with your own privacy policy.") }}
|
{{ t("Set an URL to a page with your own privacy policy.") }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -322,11 +318,11 @@
|
|||||||
InstancePrivacyType.CUSTOM
|
InstancePrivacyType.CUSTOM
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<b>{{ $t("Custom") }}</b>
|
<b>{{ t("Custom") }}</b>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
tag="p"
|
tag="p"
|
||||||
class="prose dark:prose-invert"
|
class="prose dark:prose-invert"
|
||||||
path="Enter your own privacy policy. HTML tags allowed. The {mobilizon_privacy_policy} is provided as template."
|
keypath="Enter your own privacy policy. HTML tags allowed. The {mobilizon_privacy_policy} is provided as template."
|
||||||
>
|
>
|
||||||
<template #mobilizon_privacy_policy>
|
<template #mobilizon_privacy_policy>
|
||||||
<a
|
<a
|
||||||
@ -334,7 +330,7 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
>
|
>
|
||||||
{{ $t("default Mobilizon privacy policy") }}</a
|
{{ t("default Mobilizon privacy policy") }}</a
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
@ -343,7 +339,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field
|
<o-field
|
||||||
:label="$t('Instance Privacy Policy URL')"
|
:label="t('Instance Privacy Policy URL')"
|
||||||
label-for="instancePrivacyPolicyUrl"
|
label-for="instancePrivacyPolicyUrl"
|
||||||
v-if="
|
v-if="
|
||||||
settingsToWrite.instancePrivacyPolicyType ===
|
settingsToWrite.instancePrivacyPolicyType ===
|
||||||
@ -357,7 +353,7 @@
|
|||||||
/>
|
/>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field
|
<o-field
|
||||||
:label="$t('Instance Privacy Policy')"
|
:label="t('Instance Privacy Policy')"
|
||||||
label-for="instancePrivacyPolicy"
|
label-for="instancePrivacyPolicy"
|
||||||
v-if="
|
v-if="
|
||||||
settingsToWrite.instancePrivacyPolicyType ===
|
settingsToWrite.instancePrivacyPolicyType ===
|
||||||
@ -371,7 +367,7 @@
|
|||||||
/>
|
/>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-button native-type="submit" variant="primary">{{
|
<o-button native-type="submit" variant="primary">{{
|
||||||
$t("Save")
|
t("Save")
|
||||||
}}</o-button>
|
}}</o-button>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
@ -390,29 +386,30 @@ import { useMutation, useQuery } from "@vue/apollo-composable";
|
|||||||
import { ref, computed, watch, inject } from "vue";
|
import { ref, computed, watch, inject } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useHead } from "@vueuse/head";
|
import { useHead } from "@vueuse/head";
|
||||||
import { Notifier } from "@/plugins/notifier";
|
import type { Notifier } from "@/plugins/notifier";
|
||||||
|
|
||||||
|
const defaultAdminSettings: IAdminSettings = {
|
||||||
|
instanceName: "",
|
||||||
|
instanceDescription: "",
|
||||||
|
instanceSlogan: "",
|
||||||
|
instanceLongDescription: "",
|
||||||
|
contact: "",
|
||||||
|
instanceTerms: "",
|
||||||
|
instanceTermsType: InstanceTermsType.DEFAULT,
|
||||||
|
instanceTermsUrl: null,
|
||||||
|
instancePrivacyPolicy: "",
|
||||||
|
instancePrivacyPolicyType: InstancePrivacyType.DEFAULT,
|
||||||
|
instancePrivacyPolicyUrl: null,
|
||||||
|
instanceRules: "",
|
||||||
|
registrationsOpen: false,
|
||||||
|
instanceLanguages: [],
|
||||||
|
};
|
||||||
|
|
||||||
const { result: adminSettingsResult } = useQuery<{
|
const { result: adminSettingsResult } = useQuery<{
|
||||||
adminSettings: IAdminSettings;
|
adminSettings: IAdminSettings;
|
||||||
}>(ADMIN_SETTINGS);
|
}>(ADMIN_SETTINGS);
|
||||||
const adminSettings = computed(
|
const adminSettings = computed(
|
||||||
() =>
|
() => adminSettingsResult.value?.adminSettings ?? defaultAdminSettings
|
||||||
adminSettingsResult.value?.adminSettings ?? {
|
|
||||||
instanceName: "",
|
|
||||||
instanceDescription: "",
|
|
||||||
instanceSlogan: "",
|
|
||||||
instanceLongDescription: "",
|
|
||||||
contact: "",
|
|
||||||
instanceTerms: "",
|
|
||||||
instanceTermsType: InstanceTermsType.DEFAULT,
|
|
||||||
instanceTermsUrl: null,
|
|
||||||
instancePrivacyPolicy: "",
|
|
||||||
instancePrivacyPolicyType: InstanceTermsType.DEFAULT,
|
|
||||||
instancePrivacyPolicyUrl: null,
|
|
||||||
instanceRules: "",
|
|
||||||
registrationsOpen: false,
|
|
||||||
instanceLanguages: [],
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const { result: languageResult } = useQuery<{ languages: ILanguage[] }>(
|
const { result: languageResult } = useQuery<{ languages: ILanguage[] }>(
|
||||||
@ -425,10 +422,10 @@ useHead({
|
|||||||
title: computed(() => t("Settings")),
|
title: computed(() => t("Settings")),
|
||||||
});
|
});
|
||||||
|
|
||||||
const settingsToWrite = ref<IAdminSettings>({ ...adminSettings });
|
const settingsToWrite = ref<IAdminSettings>(defaultAdminSettings);
|
||||||
|
|
||||||
watch(adminSettings, () => {
|
watch(adminSettings, () => {
|
||||||
// settingsToWrite.value = { ...adminSettings.value };
|
settingsToWrite.value = { ...adminSettings.value };
|
||||||
});
|
});
|
||||||
|
|
||||||
const filteredLanguages = ref<string[]>([]);
|
const filteredLanguages = ref<string[]>([]);
|
||||||
|
|||||||
@ -196,7 +196,6 @@ a.user-profile {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a.disabled {
|
a.disabled {
|
||||||
color: $danger;
|
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -496,7 +496,6 @@
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// @use "@/styles/_mixins" as *;
|
// @use "@/styles/_mixins" as *;
|
||||||
// main section > .container {
|
// main section > .container {
|
||||||
// // background: $white;
|
|
||||||
|
|
||||||
// form {
|
// form {
|
||||||
// h2 {
|
// h2 {
|
||||||
@ -528,7 +527,6 @@
|
|||||||
// span {
|
// span {
|
||||||
// padding: 5px 7px;
|
// padding: 5px 7px;
|
||||||
// display: inline;
|
// display: inline;
|
||||||
// background: $secondary;
|
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
@ -553,7 +551,6 @@
|
|||||||
|
|
||||||
// nav.navbar {
|
// nav.navbar {
|
||||||
// min-height: 2rem !important;
|
// min-height: 2rem !important;
|
||||||
// background: lighten($secondary, 10%);
|
|
||||||
|
|
||||||
// .container {
|
// .container {
|
||||||
// min-height: 2rem;
|
// min-height: 2rem;
|
||||||
@ -561,7 +558,6 @@
|
|||||||
// .navbar-menu,
|
// .navbar-menu,
|
||||||
// .navbar-end {
|
// .navbar-end {
|
||||||
// display: flex !important;
|
// display: flex !important;
|
||||||
// background: lighten($secondary, 10%);
|
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .navbar-end {
|
// .navbar-end {
|
||||||
@ -625,7 +621,6 @@ import {
|
|||||||
CREATE_EVENT,
|
CREATE_EVENT,
|
||||||
EDIT_EVENT,
|
EDIT_EVENT,
|
||||||
EVENT_PERSON_PARTICIPATION,
|
EVENT_PERSON_PARTICIPATION,
|
||||||
FETCH_EVENT,
|
|
||||||
} from "../../graphql/event";
|
} from "../../graphql/event";
|
||||||
import {
|
import {
|
||||||
EventModel,
|
EventModel,
|
||||||
@ -634,20 +629,8 @@ import {
|
|||||||
removeTypeName,
|
removeTypeName,
|
||||||
toEditJSON,
|
toEditJSON,
|
||||||
} from "../../types/event.model";
|
} from "../../types/event.model";
|
||||||
import {
|
import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
|
||||||
CURRENT_ACTOR_CLIENT,
|
import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
|
||||||
IDENTITIES,
|
|
||||||
LOGGED_USER_DRAFTS,
|
|
||||||
PERSON_STATUS_GROUP,
|
|
||||||
} from "../../graphql/actor";
|
|
||||||
import { FETCH_GROUP } from "../../graphql/group";
|
|
||||||
import {
|
|
||||||
displayNameAndUsername,
|
|
||||||
IActor,
|
|
||||||
IGroup,
|
|
||||||
IPerson,
|
|
||||||
usernameWithDomain,
|
|
||||||
} from "../../types/actor";
|
|
||||||
import {
|
import {
|
||||||
buildFileFromIMedia,
|
buildFileFromIMedia,
|
||||||
buildFileVariable,
|
buildFileVariable,
|
||||||
@ -655,8 +638,6 @@ import {
|
|||||||
} from "../../utils/image";
|
} from "../../utils/image";
|
||||||
import RouteName from "../../router/name";
|
import RouteName from "../../router/name";
|
||||||
import "intersection-observer";
|
import "intersection-observer";
|
||||||
import { CONFIG_EDIT_EVENT } from "../../graphql/config";
|
|
||||||
import { IConfig } from "../../types/config.model";
|
|
||||||
import {
|
import {
|
||||||
ApolloCache,
|
ApolloCache,
|
||||||
FetchResult,
|
FetchResult,
|
||||||
@ -664,8 +645,6 @@ import {
|
|||||||
} from "@apollo/client/core";
|
} from "@apollo/client/core";
|
||||||
import cloneDeep from "lodash/cloneDeep";
|
import cloneDeep from "lodash/cloneDeep";
|
||||||
import { IEventOptions } from "@/types/event-options.model";
|
import { IEventOptions } from "@/types/event-options.model";
|
||||||
import { USER_SETTINGS } from "@/graphql/user";
|
|
||||||
import { IUser } from "@/types/current-user.model";
|
|
||||||
import { IAddress } from "@/types/address.model";
|
import { IAddress } from "@/types/address.model";
|
||||||
import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
|
import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
|
||||||
import {
|
import {
|
||||||
@ -690,6 +669,7 @@ import { Dialog } from "@/plugins/dialog";
|
|||||||
import { Notifier } from "@/plugins/notifier";
|
import { Notifier } from "@/plugins/notifier";
|
||||||
import { useHead } from "@vueuse/head";
|
import { useHead } from "@vueuse/head";
|
||||||
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||||
|
import type { Locale } from "date-fns";
|
||||||
|
|
||||||
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
|
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
|
||||||
|
|
||||||
@ -1033,10 +1013,10 @@ const handleError = (err: any) => {
|
|||||||
* Put in cache the updated or created event.
|
* Put in cache the updated or created event.
|
||||||
* If the event is not a draft anymore, also put in cache the participation
|
* If the event is not a draft anymore, also put in cache the participation
|
||||||
*/
|
*/
|
||||||
const postCreateOrUpdate = (store: any, updateEvent: IEvent) => {
|
const postCreateOrUpdate = (store: any, updatedEvent: IEvent) => {
|
||||||
const resultEvent: IEvent = { ...updateEvent };
|
const resultEvent: IEvent = { ...updatedEvent };
|
||||||
console.debug("resultEvent", resultEvent);
|
console.debug("resultEvent", resultEvent);
|
||||||
if (!updateEvent.draft) {
|
if (!updatedEvent.draft) {
|
||||||
store.writeQuery({
|
store.writeQuery({
|
||||||
query: EVENT_PERSON_PARTICIPATION,
|
query: EVENT_PERSON_PARTICIPATION,
|
||||||
variables: {
|
variables: {
|
||||||
@ -1077,9 +1057,9 @@ const postCreateOrUpdate = (store: any, updateEvent: IEvent) => {
|
|||||||
*/
|
*/
|
||||||
// eslint-disable-next-line class-methods-use-this
|
// eslint-disable-next-line class-methods-use-this
|
||||||
const postRefetchQueries = (
|
const postRefetchQueries = (
|
||||||
updateEvent: IEvent
|
updatedEvent: IEvent
|
||||||
): InternalRefetchQueriesInclude => {
|
): InternalRefetchQueriesInclude => {
|
||||||
if (updateEvent.draft) {
|
if (updatedEvent.draft) {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
query: LOGGED_USER_DRAFTS,
|
query: LOGGED_USER_DRAFTS,
|
||||||
@ -1253,10 +1233,10 @@ const beginsOn = computed({
|
|||||||
// }
|
// }
|
||||||
return event.value.beginsOn ? new Date(event.value.beginsOn) : null;
|
return event.value.beginsOn ? new Date(event.value.beginsOn) : null;
|
||||||
},
|
},
|
||||||
set(beginsOn: Date | null) {
|
set(newBeginsOn: Date | null) {
|
||||||
event.value.beginsOn = beginsOn?.toISOString() ?? null;
|
event.value.beginsOn = newBeginsOn?.toISOString() ?? null;
|
||||||
if (!event.value.endsOn || !beginsOn) return;
|
if (!event.value.endsOn || !newBeginsOn) return;
|
||||||
const dateBeginsOn = new Date(beginsOn);
|
const dateBeginsOn = new Date(newBeginsOn);
|
||||||
const dateEndsOn = new Date(event.value.endsOn);
|
const dateEndsOn = new Date(event.value.endsOn);
|
||||||
let endsOn = new Date(event.value.endsOn);
|
let endsOn = new Date(event.value.endsOn);
|
||||||
if (dateEndsOn < dateBeginsOn) {
|
if (dateEndsOn < dateBeginsOn) {
|
||||||
@ -1277,8 +1257,8 @@ const endsOn = computed({
|
|||||||
// }
|
// }
|
||||||
return event.value.endsOn ? new Date(event.value.endsOn) : null;
|
return event.value.endsOn ? new Date(event.value.endsOn) : null;
|
||||||
},
|
},
|
||||||
set(endsOn: Date | null) {
|
set(newEndsOn: Date | null) {
|
||||||
event.value.endsOn = endsOn?.toISOString() ?? null;
|
event.value.endsOn = newEndsOn?.toISOString() ?? null;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1324,10 +1304,10 @@ const timezone = computed({
|
|||||||
get(): string | null {
|
get(): string | null {
|
||||||
return event.value.options.timezone;
|
return event.value.options.timezone;
|
||||||
},
|
},
|
||||||
set(timezone: string | null) {
|
set(newTimezone: string | null) {
|
||||||
event.value.options = {
|
event.value.options = {
|
||||||
...event.value.options,
|
...event.value.options,
|
||||||
timezone,
|
timezone: newTimezone,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -1368,10 +1348,10 @@ const isOnline = computed({
|
|||||||
get(): boolean {
|
get(): boolean {
|
||||||
return event.value.options.isOnline;
|
return event.value.options.isOnline;
|
||||||
},
|
},
|
||||||
set(isOnline: boolean) {
|
set(newIsOnline: boolean) {
|
||||||
event.value.options = {
|
event.value.options = {
|
||||||
...event.value.options,
|
...event.value.options,
|
||||||
isOnline,
|
isOnline: newIsOnline,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -1391,13 +1371,13 @@ onFetchEventResult((result) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const { person } = usePersonStatusGroup(
|
const groupFederatedUsername = computed(() =>
|
||||||
usernameWithDomain(fetchedEvent.value?.attributedTo)
|
usernameWithDomain(fetchedEvent.value?.attributedTo)
|
||||||
);
|
);
|
||||||
|
|
||||||
const { group } = useGroup(
|
const { person } = usePersonStatusGroup(groupFederatedUsername);
|
||||||
usernameWithDomain(fetchedEvent.value?.attributedTo)
|
|
||||||
);
|
const { group } = useGroup(groupFederatedUsername);
|
||||||
|
|
||||||
watch(group, () => {
|
watch(group, () => {
|
||||||
if (!props.isUpdate && group.value?.visibility == GroupVisibility.UNLISTED) {
|
if (!props.isUpdate && group.value?.visibility == GroupVisibility.UNLISTED) {
|
||||||
|
|||||||
@ -1339,7 +1339,6 @@ div.sidebar {
|
|||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
background: $secondary;
|
|
||||||
color: #111;
|
color: #111;
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
|
|||||||
@ -416,8 +416,6 @@ const firstDayOfWeek = computed((): number => {
|
|||||||
// @import "node_modules/bulma/sass/utilities/mixins.sass";
|
// @import "node_modules/bulma/sass/utilities/mixins.sass";
|
||||||
|
|
||||||
main > .container {
|
main > .container {
|
||||||
// background: $white;
|
|
||||||
|
|
||||||
& > h1 {
|
& > h1 {
|
||||||
margin: 10px auto 5px;
|
margin: 10px auto 5px;
|
||||||
}
|
}
|
||||||
@ -436,7 +434,6 @@ section {
|
|||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background: $orange-3;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|||||||
@ -456,7 +456,6 @@ const openDetailedRows = <Record<string, boolean>>{};
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
section.container.container {
|
section.container.container {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
// background: $white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
@ -479,12 +478,6 @@ section.container.container {
|
|||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span.tag {
|
|
||||||
&.is-primary {
|
|
||||||
background-color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.breadcrumb {
|
nav.breadcrumb {
|
||||||
|
|||||||
@ -135,7 +135,10 @@
|
|||||||
currentActor?.id !== undefined
|
currentActor?.id !== undefined
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<button class="media py-4 px-2 w-full" @click="followGroup">
|
<button
|
||||||
|
class="flex gap-1 text-start py-4 px-2 w-full"
|
||||||
|
@click="followGroup"
|
||||||
|
>
|
||||||
<RSS />
|
<RSS />
|
||||||
<div class="pl-2">
|
<div class="pl-2">
|
||||||
<h3 class="font-medium text-lg">{{ t("Follow") }}</h3>
|
<h3 class="font-medium text-lg">{{ t("Follow") }}</h3>
|
||||||
@ -174,7 +177,10 @@
|
|||||||
isGroupInviteOnly || isCurrentActorAPendingGroupMember
|
isGroupInviteOnly || isCurrentActorAPendingGroupMember
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<button class="media py-4 px-2 w-full" @click="joinGroup">
|
<button
|
||||||
|
class="flex gap-1 text-start py-4 px-2 w-full"
|
||||||
|
@click="joinGroup"
|
||||||
|
>
|
||||||
<AccountMultiplePlus />
|
<AccountMultiplePlus />
|
||||||
<div class="pl-2">
|
<div class="pl-2">
|
||||||
<h3 class="font-medium text-lg">{{ t("Join") }}</h3>
|
<h3 class="font-medium text-lg">{{ t("Join") }}</h3>
|
||||||
@ -346,7 +352,7 @@
|
|||||||
</o-dropdown>
|
</o-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<invitations
|
<InvitationsList
|
||||||
v-if="
|
v-if="
|
||||||
isCurrentActorAnInvitedGroupMember && groupMember !== undefined
|
isCurrentActorAnInvitedGroupMember && groupMember !== undefined
|
||||||
"
|
"
|
||||||
@ -626,7 +632,7 @@ import {
|
|||||||
import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
|
import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
|
||||||
import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
|
import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
|
||||||
import { Address, addressFullName } from "@/types/address.model";
|
import { Address, addressFullName } from "@/types/address.model";
|
||||||
import Invitations from "@/components/Group/Invitations.vue";
|
import InvitationsList from "@/components/Group/InvitationsList.vue";
|
||||||
import addMinutes from "date-fns/addMinutes";
|
import addMinutes from "date-fns/addMinutes";
|
||||||
import { JOIN_GROUP } from "@/graphql/member";
|
import { JOIN_GROUP } from "@/graphql/member";
|
||||||
import { MemberRole, Openness, PostVisibility } from "@/types/enums";
|
import { MemberRole, Openness, PostVisibility } from "@/types/enums";
|
||||||
@ -1129,7 +1135,6 @@ watch(isCurrentActorAGroupMember, () => {
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use "@/styles/_mixins" as *;
|
@use "@/styles/_mixins" as *;
|
||||||
// @import "node_modules/bulma/sass/utilities/mixins.sass";
|
|
||||||
div.container {
|
div.container {
|
||||||
.block-container {
|
.block-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1137,21 +1142,10 @@ div.container {
|
|||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
|
||||||
&.presentation {
|
&.presentation {
|
||||||
border: 2px solid $purple-2;
|
|
||||||
padding: 0 0 10px;
|
padding: 0 0 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
// h1 {
|
|
||||||
// color: $purple-1;
|
|
||||||
// font-size: 2rem;
|
|
||||||
// font-weight: 500;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.button.is-outlined {
|
|
||||||
border-color: $purple-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > *:not(img) {
|
& > *:not(img) {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|||||||
@ -403,7 +403,7 @@ const confirmDeleteGroup = (): void => {
|
|||||||
),
|
),
|
||||||
confirmText: t("Delete group"),
|
confirmText: t("Delete group"),
|
||||||
cancelText: t("Cancel"),
|
cancelText: t("Cancel"),
|
||||||
type: "danger",
|
variant: "danger",
|
||||||
hasIcon: true,
|
hasIcon: true,
|
||||||
onConfirm: () =>
|
onConfirm: () =>
|
||||||
deleteGroupMutation({
|
deleteGroupMutation({
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<o-loading v-model:active="loading"></o-loading>
|
<o-loading v-model:active="loading"></o-loading>
|
||||||
<invitations
|
<InvitationsList
|
||||||
:invitations="invitations"
|
:invitations="invitations"
|
||||||
@accept-invitation="acceptInvitation"
|
@accept-invitation="acceptInvitation"
|
||||||
@reject-invitation="rejectInvitation"
|
@reject-invitation="rejectInvitation"
|
||||||
@ -82,8 +82,8 @@
|
|||||||
import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
|
import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
|
||||||
import { LEAVE_GROUP } from "@/graphql/group";
|
import { LEAVE_GROUP } from "@/graphql/group";
|
||||||
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
|
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
|
||||||
import Invitations from "@/components/Group/Invitations.vue";
|
import InvitationsList from "@/components/Group/InvitationsList.vue";
|
||||||
import { IGroup, usernameWithDomain } from "@/types/actor";
|
import { usernameWithDomain } from "@/types/actor";
|
||||||
import { IMember } from "@/types/actor/member.model";
|
import { IMember } from "@/types/actor/member.model";
|
||||||
import { MemberRole } from "@/types/enums";
|
import { MemberRole } from "@/types/enums";
|
||||||
import { supportsWebPFormat } from "@/utils/support";
|
import { supportsWebPFormat } from "@/utils/support";
|
||||||
|
|||||||
@ -43,12 +43,3 @@ useHead({
|
|||||||
title: computed(() => t("Group settings")),
|
title: computed(() => t("Group settings")),
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
aside.section {
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
.container.section {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -288,12 +288,12 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { EventSortField, ParticipantRole, SortDirection } from "@/types/enums";
|
import { EventSortField, ParticipantRole, SortDirection } from "@/types/enums";
|
||||||
import { Paginate } from "@/types/paginate";
|
import { Paginate } from "@/types/paginate";
|
||||||
import { IParticipant, Participant } from "../types/participant.model";
|
import { IParticipant } from "../types/participant.model";
|
||||||
import { FETCH_EVENTS } from "../graphql/event";
|
import { FETCH_EVENTS } from "../graphql/event";
|
||||||
import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
|
import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
|
||||||
import MultiCard from "../components/Event/MultiCard.vue";
|
import MultiCard from "../components/Event/MultiCard.vue";
|
||||||
import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
|
import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
|
||||||
import { displayName, IPerson, Person } from "../types/actor";
|
import { IPerson, Person } from "../types/actor";
|
||||||
import ngeohash from "ngeohash";
|
import ngeohash from "ngeohash";
|
||||||
import {
|
import {
|
||||||
ICurrentUser,
|
ICurrentUser,
|
||||||
@ -471,10 +471,8 @@ const locationName = computed(
|
|||||||
// () => closeEventsResult.value?.searchEvents || { total: 0, elements: [] }
|
// () => closeEventsResult.value?.searchEvents || { total: 0, elements: [] }
|
||||||
// );
|
// );
|
||||||
|
|
||||||
const currentUserParticipations = computed(() =>
|
const currentUserParticipations = computed(
|
||||||
loggedUser.value?.participations.elements.map(
|
() => loggedUser.value?.participations.elements
|
||||||
(participation: IParticipant) => new Participant(participation)
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const instanceName = computed((): string | undefined => config.value?.name);
|
const instanceName = computed((): string | undefined => config.value?.name);
|
||||||
@ -635,6 +633,6 @@ watch(loggedUser, (loggedUserValue) => {
|
|||||||
// },
|
// },
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
title: computed(() => instanceName.value),
|
title: computed(() => instanceName.value ?? ""),
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -99,8 +99,3 @@ useHead({
|
|||||||
title: computed(() => t("Interact with a remote content")),
|
title: computed(() => t("Interact with a remote content")),
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
main > .container {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -214,7 +214,7 @@
|
|||||||
log.object.__typename == 'Group'
|
log.object.__typename == 'Group'
|
||||||
"
|
"
|
||||||
tag="span"
|
tag="span"
|
||||||
path="{moderator} suspended group {profile}"
|
keypath="{moderator} suspended group {profile}"
|
||||||
>
|
>
|
||||||
<template #moderator>
|
<template #moderator>
|
||||||
<router-link
|
<router-link
|
||||||
|
|||||||
@ -515,10 +515,6 @@ tbody td img.image,
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-content {
|
|
||||||
border-left: 4px solid $primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box a {
|
.box a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|||||||
@ -411,7 +411,6 @@ useHead({
|
|||||||
form {
|
form {
|
||||||
nav.navbar {
|
nav.navbar {
|
||||||
// min-height: 2rem !important;
|
// min-height: 2rem !important;
|
||||||
background: lighten($secondary, 10%);
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
// min-height: 2rem;
|
// min-height: 2rem;
|
||||||
@ -419,7 +418,6 @@ form {
|
|||||||
.navbar-menu,
|
.navbar-menu,
|
||||||
.navbar-end {
|
.navbar-end {
|
||||||
// display: flex !important;
|
// display: flex !important;
|
||||||
background: lighten($secondary, 10%);
|
|
||||||
// flex-wrap: wrap;
|
// flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -416,7 +416,6 @@ onDeletePostDone(({ data }) => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use "@/styles/_mixins" as *;
|
@use "@/styles/_mixins" as *;
|
||||||
article.post {
|
article.post {
|
||||||
// background: $white !important;
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -487,7 +486,6 @@ article.post {
|
|||||||
height: 0.2rem;
|
height: 0.2rem;
|
||||||
content: " ";
|
content: " ";
|
||||||
display: block;
|
display: block;
|
||||||
background-color: $purple-1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
|
|||||||
@ -250,10 +250,10 @@ import RouteName from "../../router/name";
|
|||||||
import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
|
import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
|
||||||
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||||
|
|
||||||
const { loggedUser } = useLoggedUser();
|
|
||||||
|
|
||||||
const { t } = useI18n({ useScope: "global" });
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
|
const { loggedUser } = useLoggedUser();
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
title: computed(() => t("General settings")),
|
title: computed(() => t("General settings")),
|
||||||
});
|
});
|
||||||
|
|||||||
@ -832,9 +832,7 @@ const { mutate: createNewFeedToken } = useMutation(CREATE_FEED_TOKEN, () => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
a.change-timezone {
|
a.change-timezone {
|
||||||
color: $primary;
|
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-decoration-color: #fea72b;
|
|
||||||
text-decoration-thickness: 2px;
|
text-decoration-thickness: 2px;
|
||||||
@include margin-left(5px);
|
@include margin-left(5px);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
<h1 class="">{{ t("Settings") }}</h1>
|
<h1 class="text-violet-3">{{ t("Settings") }}</h1>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<SettingsMenu class="max-w-xs w-full" />
|
<SettingsMenu class="max-w-xs w-full" />
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
|
|||||||
@ -3,9 +3,9 @@ module.exports = {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: "rgb(var(--color-primary) / <alpha-value>)",
|
primary: "#1e7d97",
|
||||||
secondary: "rgb(var(--color-secondary) / <alpha-value>)",
|
secondary: "#ffd599",
|
||||||
"violet-title": "rgb(var(--color-violet-title) / <alpha-value>)",
|
"violet-title": "#3c376e",
|
||||||
tag: "rgb(var(--color-tag) / <alpha-value>)",
|
tag: "rgb(var(--color-tag) / <alpha-value>)",
|
||||||
"frama-violet": "#725794",
|
"frama-violet": "#725794",
|
||||||
"frama-orange": "#cc4e13",
|
"frama-orange": "#cc4e13",
|
||||||
|
|||||||
@ -61,9 +61,6 @@ export default defineConfig(({ command }) => {
|
|||||||
css: {
|
css: {
|
||||||
preprocessorOptions: {
|
preprocessorOptions: {
|
||||||
scss: {
|
scss: {
|
||||||
additionalData: `
|
|
||||||
@use "@/variables.scss" as *;
|
|
||||||
`,
|
|
||||||
sassOptions: {
|
sassOptions: {
|
||||||
quietDeps: true,
|
quietDeps: true,
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user