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

Various accessibility improvements

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-09-07 17:52:34 +02:00
parent d36f1d4b5e
commit 291a788438
28 changed files with 437 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/src/views/About.vue
View File

@@ -31,7 +31,7 @@
$t("About this instance")
}}</router-link>
</p>
<p class="menu-label">
<p class="menu-label has-text-grey-dark">
{{ $t("Legal") }}
</p>
<ul class="menu-list">
@@ -64,8 +64,10 @@
</div>
</main>
<!-- We hide the "Find an instance button until https://joinmobilizon.org gets a instance picker -->
<div class="hero register is-primary is-medium">
<div
class="hero register is-primary is-medium"
v-if="!currentUser || !currentUser.id"
>
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">

36
js/src/views/Account/children/EditIdentity.vue
View File

@@ -36,12 +36,17 @@
class="picture-upload"
/>
<b-field horizontal :label="$t('Display name')">
<b-field
horizontal
:label="$t('Display name')"
label-for="identity-display-name"
>
<b-input
aria-required="true"
required
v-model="identity.name"
@input="autoUpdateUsername($event)"
id="identity-display-name"
/>
</b-field>
@@ -50,6 +55,7 @@
custom-class="username-field"
expanded
:label="$t('Username')"
label-for="identity-username"
:message="message"
>
<b-field expanded>
@@ -60,6 +66,7 @@
:disabled="isUpdate"
:use-html5-validation="!isUpdate"
pattern="[a-z0-9_]+"
id="identity-username"
/>
<p class="control">
@@ -68,11 +75,16 @@
</b-field>
</b-field>
<b-field horizontal :label="$t('Description')">
<b-field
horizontal
:label="$t('Description')"
label-for="identity-summary"
>
<b-input
type="textarea"
aria-required="false"
v-model="identity.summary"
id="identity-summary"
/>
</b-field>
@@ -94,11 +106,15 @@
</div>
</b-field>
<div class="delete-identity" v-if="isUpdate">
<span @click="openDeleteIdentityConfirmation()">{{
$t("Delete this identity")
}}</span>
</div>
<b-field class="delete-identity">
<b-button
v-if="isUpdate"
@click="openDeleteIdentityConfirmation()"
type="is-text"
>
{{ $t("Delete this identity") }}
</b-button>
</b-field>
<section v-if="isUpdate">
<div class="setting-title">
@@ -194,12 +210,6 @@ h1 {
margin: 30px 0;
}
.delete-identity {
text-decoration: underline;
cursor: pointer;
margin-top: 15px;
}
.username-field + .field {
margin-bottom: 0;
}

13
js/src/views/Admin/GroupProfiles.vue
View File

@@ -41,10 +41,10 @@
>
<template #searchable="props">
<b-input
:aria-label="$t('Filter')"
v-model="props.filters.preferredUsername"
placeholder="Search..."
:placeholder="$t('Filter')"
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">
@@ -58,7 +58,10 @@
<article class="media">
<figure class="media-left" v-if="props.row.avatar">
<p class="image is-48x48">
<img :src="props.row.avatar.url" />
<img
:src="props.row.avatar.url"
:alt="props.row.avatar.alt || ''"
/>
</p>
</figure>
<div class="media-content">
@@ -76,10 +79,10 @@
<b-table-column field="domain" :label="$t('Domain')" searchable>
<template #searchable="props">
<b-input
:aria-label="$t('Filter')"
v-model="props.filters.domain"
placeholder="Search..."
:placeholder="$t('Filter')"
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">

13
js/src/views/Admin/Profiles.vue
View File

@@ -42,9 +42,9 @@
<template #searchable="props">
<b-input
v-model="props.filters.preferredUsername"
placeholder="Search..."
:aria-label="$t('Filter')"
:placeholder="$t('Filter')"
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">
@@ -58,7 +58,10 @@
<article class="media">
<figure class="media-left" v-if="props.row.avatar">
<p class="image is-48x48">
<img :src="props.row.avatar.url" />
<img
:src="props.row.avatar.url"
:alt="props.row.avatar.alt || ''"
/>
</p>
</figure>
<div class="media-content">
@@ -77,9 +80,9 @@
<template #searchable="props">
<b-input
v-model="props.filters.domain"
placeholder="Search..."
:aria-label="$t('Filter')"
:placeholder="$t('Filter')"
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">

149
js/src/views/Admin/Settings.vue
View File

@@ -16,11 +16,11 @@
</nav>
<section v-if="adminSettings">
<form @submit.prevent="updateSettings">
<b-field :label="$t('Instance Name')">
<b-input v-model="adminSettings.instanceName" />
<b-field :label="$t('Instance Name')" label-for="instance-name">
<b-input v-model="adminSettings.instanceName" id="instance-name" />
</b-field>
<div class="field">
<label class="label has-help">{{
<label class="label has-help" for="instance-description">{{
$t("Instance Short Description")
}}</label>
<small>
@@ -34,10 +34,13 @@
type="textarea"
v-model="adminSettings.instanceDescription"
rows="2"
id="instance-name"
/>
</div>
<div class="field">
<label class="label has-help">{{ $t("Instance Slogan") }}</label>
<label class="label has-help" for="instance-slogan">{{
$t("Instance Slogan")
}}</label>
<small>
{{
$t(
@@ -48,14 +51,17 @@
<b-input
v-model="adminSettings.instanceSlogan"
:placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
id="instance-slogan"
/>
</div>
<div class="field">
<label class="label has-help">{{ $t("Contact") }}</label>
<label class="label has-help" for="instance-contact">{{
$t("Contact")
}}</label>
<small>
{{ $t("Can be an email or a link, or just plain text.") }}
</small>
<b-input v-model="adminSettings.contact" />
<b-input v-model="adminSettings.contact" id="instance-contact" />
</div>
<b-field :label="$t('Allow registrations')">
<b-switch v-model="adminSettings.registrationsOpen">
@@ -66,7 +72,9 @@
</b-switch>
</b-field>
<div class="field">
<label class="label has-help">{{ $t("Instance languages") }}</label>
<label class="label has-help" for="instance-languages">{{
$t("Instance languages")
}}</label>
<small>
{{ $t("Main languages you/your moderators speak") }}
</small>
@@ -79,12 +87,13 @@
icon="label"
:placeholder="$t('Select languages')"
@typing="getFilteredLanguages"
id="instance-languages"
>
<template slot="empty">{{ $t("No languages found") }}</template>
</b-taginput>
</div>
<div class="field">
<label class="label has-help">{{
<label class="label has-help" for="instance-long-description">{{
$t("Instance Long Description")
}}</label>
<small>
@@ -98,10 +107,13 @@
type="textarea"
v-model="adminSettings.instanceLongDescription"
rows="4"
id="instance-long-description"
/>
</div>
<div class="field">
<label class="label has-help">{{ $t("Instance Rules") }}</label>
<label class="label has-help" for="instance-rules">{{
$t("Instance Rules")
}}</label>
<small>
{{
$t(
@@ -109,35 +121,44 @@
)
}}
</small>
<b-input type="textarea" v-model="adminSettings.instanceRules" />
<b-input
type="textarea"
v-model="adminSettings.instanceRules"
id="instance-rules"
/>
</div>
<b-field :label="$t('Instance Terms Source')">
<div class="columns">
<div class="column is-one-third-desktop">
<b-field>
<b-radio
v-model="adminSettings.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.DEFAULT"
>{{ $t("Default Mobilizon terms") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.URL"
>{{ $t("Custom URL") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.CUSTOM"
>{{ $t("Custom text") }}</b-radio
>
</b-field>
<fieldset>
<legend>
{{ $t("Choose the source of the instance's Terms") }}
</legend>
<b-field>
<b-radio
v-model="adminSettings.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.DEFAULT"
>{{ $t("Default Mobilizon terms") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.URL"
>{{ $t("Custom URL") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.CUSTOM"
>{{ $t("Custom text") }}</b-radio
>
</b-field>
</fieldset>
</div>
<div class="column">
<div
@@ -215,30 +236,35 @@
<b-field :label="$t('Instance Privacy Policy Source')">
<div class="columns">
<div class="column is-one-third-desktop">
<b-field>
<b-radio
v-model="adminSettings.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.DEFAULT"
>{{ $t("Default Mobilizon privacy policy") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.URL"
>{{ $t("Custom URL") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.CUSTOM"
>{{ $t("Custom text") }}</b-radio
>
</b-field>
<fieldset>
<legend>
{{ $t("Choose the source of the instance's Privacy Policy") }}
</legend>
<b-field>
<b-radio
v-model="adminSettings.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.DEFAULT"
>{{ $t("Default Mobilizon privacy policy") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.URL"
>{{ $t("Custom URL") }}</b-radio
>
</b-field>
<b-field>
<b-radio
v-model="adminSettings.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.CUSTOM"
>{{ $t("Custom text") }}</b-radio
>
</b-field>
</fieldset>
</div>
<div class="column">
<div
@@ -430,13 +456,6 @@ export default class Settings extends Vue {
}
</script>
<style lang="scss" scoped>
.notification a {
color: $primary !important;
text-decoration: underline !important;
text-decoration-color: #fea72b !important;
text-decoration-thickness: 2px !important;
}
label.label.has-help {
margin-bottom: 0;
}

4
js/src/views/Admin/Users.vue
View File

@@ -41,9 +41,9 @@
<template #searchable="props">
<b-input
v-model="props.filters.email"
:placeholder="$t('Search…')"
:aria-label="$t('Filter')"
:placeholder="$t('Filter')"
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">

199
js/src/views/Event/Edit.vue
View File

@@ -18,6 +18,7 @@
<b-field
:label="$t('Title')"
label-for="title"
:type="checkTitleLength[0]"
:message="checkTitleLength[1]"
>
@@ -26,12 +27,18 @@
aria-required="true"
required
v-model="event.title"
id="title"
/>
</b-field>
<tag-input v-model="event.tags" :data="tags" path="title" />
<b-field horizontal :label="$t('Starts on…')" class="begins-on-field">
<b-field
horizontal
:label="$t('Starts on…')"
class="begins-on-field"
label-for="begins-on-field"
>
<b-datetimepicker
class="datepicker starts-on"
:placeholder="$t('Type or select a date…')"
@@ -40,11 +47,16 @@
v-model="event.beginsOn"
horizontal-time-picker
editable
:datepicker="{
id: 'begins-on-field',
'aria-next-label': $t('Next month'),
'aria-previous-label': $t('Previous month'),
}"
>
</b-datetimepicker>
</b-field>
<b-field horizontal :label="$t('Ends on…')">
<b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
<b-datetimepicker
class="datepicker ends-on"
:placeholder="$t('Type or select a date…')"
@@ -54,6 +66,11 @@
horizontal-time-picker
:min-datetime="event.beginsOn"
editable
:datepicker="{
id: 'ends-on-field',
'aria-next-label': $t('Next month'),
'aria-previous-label': $t('Previous month'),
}"
>
</b-datetimepicker>
</b-field>
@@ -70,12 +87,13 @@
<editor v-model="event.description" />
</div>
<b-field :label="$t('Website / URL')">
<b-field :label="$t('Website / URL')" label-for="website-url">
<b-input
icon="link"
type="url"
v-model="event.onlineAddress"
placeholder="URL"
id="website-url"
/>
</b-field>
@@ -132,22 +150,31 @@
</p>
<event-metadata-list v-model="event.metadata" />
<subtitle>{{ $t("Who can view this event and participate") }}</subtitle>
<div class="field">
<b-radio
v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.PUBLIC"
>{{ $t("Visible everywhere on the web (public)") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.UNLISTED"
>{{ $t("Only accessible through link (private)") }}</b-radio
>
</div>
<fieldset>
<legend>
{{
$t(
"When the event is private, you'll need to share the link around."
)
}}
</legend>
<div class="field">
<b-radio
v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.PUBLIC"
>{{ $t("Visible everywhere on the web (public)") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.UNLISTED"
>{{ $t("Only accessible through link (private)") }}</b-radio
>
</div>
</fieldset>
<!-- <div class="field">
<b-radio v-model="event.visibility"
name="eventVisibility"
@@ -196,11 +223,14 @@
</div>
<div class="box" v-if="limitedPlaces">
<b-field :label="$t('Number of places')">
<b-field :label="$t('Number of places')" label-for="number-of-places">
<b-numberinput
controls-position="compact"
:aria-minus-label="$t('Decrease')"
:aria-plus-label="$t('Increase')"
min="1"
v-model="eventOptions.maximumAttendeeCapacity"
id="number-of-places"
/>
</b-field>
<!--
@@ -219,63 +249,75 @@
<subtitle>{{ $t("Public comment moderation") }}</subtitle>
<div class="field">
<b-radio
v-model="eventOptions.commentModeration"
name="commentModeration"
:native-value="CommentModeration.ALLOW_ALL"
>{{ $t("Allow all comments from users with accounts") }}</b-radio
>
</div>
<fieldset>
<legend>{{ $t("Who can post a comment?") }}</legend>
<div class="field">
<b-radio
v-model="eventOptions.commentModeration"
name="commentModeration"
:native-value="CommentModeration.ALLOW_ALL"
>{{ $t("Allow all comments from users with accounts") }}</b-radio
>
</div>
<!-- <div class="field">-->
<!-- <b-radio v-model="eventOptions.commentModeration"-->
<!-- name="commentModeration"-->
<!-- :native-value="CommentModeration.MODERATED">-->
<!-- {{ $t('Moderated comments (shown after approval)') }}-->
<!-- </b-radio>-->
<!-- </div>-->
<!-- <div class="field">-->
<!-- <b-radio v-model="eventOptions.commentModeration"-->
<!-- name="commentModeration"-->
<!-- :native-value="CommentModeration.MODERATED">-->
<!-- {{ $t('Moderated comments (shown after approval)') }}-->
<!-- </b-radio>-->
<!-- </div>-->
<div class="field">
<b-radio
v-model="eventOptions.commentModeration"
name="commentModeration"
:native-value="CommentModeration.CLOSED"
>{{ $t("Close comments for all (except for admins)") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="eventOptions.commentModeration"
name="commentModeration"
:native-value="CommentModeration.CLOSED"
>{{ $t("Close comments for all (except for admins)") }}</b-radio
>
</div>
</fieldset>
<subtitle>{{ $t("Status") }}</subtitle>
<b-field class="event__status__field">
<b-radio-button
v-model="event.status"
name="status"
type="is-warning"
:native-value="EventStatus.TENTATIVE"
>
<b-icon icon="calendar-question" />
{{ $t("Tentative: Will be confirmed later") }}
</b-radio-button>
<b-radio-button
v-model="event.status"
name="status"
type="is-success"
:native-value="EventStatus.CONFIRMED"
>
<b-icon icon="calendar-check" />
{{ $t("Confirmed: Will happen") }}
</b-radio-button>
<b-radio-button
v-model="event.status"
name="status"
type="is-danger"
:native-value="EventStatus.CANCELLED"
>
<b-icon icon="calendar-remove" />
{{ $t("Cancelled: Won't happen") }}
</b-radio-button>
</b-field>
<fieldset>
<legend>
{{
$t(
"Does the event needs to be confirmed later or is it cancelled?"
)
}}
</legend>
<b-field class="event__status__field">
<b-radio-button
v-model="event.status"
name="status"
type="is-warning"
:native-value="EventStatus.TENTATIVE"
>
<b-icon icon="calendar-question" />
{{ $t("Tentative: Will be confirmed later") }}
</b-radio-button>
<b-radio-button
v-model="event.status"
name="status"
type="is-success"
:native-value="EventStatus.CONFIRMED"
>
<b-icon icon="calendar-check" />
{{ $t("Confirmed: Will happen") }}
</b-radio-button>
<b-radio-button
v-model="event.status"
name="status"
type="is-danger"
:native-value="EventStatus.CANCELLED"
>
<b-icon icon="calendar-remove" />
{{ $t("Cancelled: Won't happen") }}
</b-radio-button>
</b-field>
</fieldset>
</form>
</div>
<div class="container section" v-else>
@@ -370,6 +412,16 @@
<style lang="scss" scoped>
main section > .container {
background: $white;
form {
h2 {
margin: 15px 0 7.5px;
}
legend {
margin-bottom: 0.75rem;
}
}
}
.save__navbar {
@@ -412,6 +464,9 @@ h2.subtitle {
section {
& > .container {
padding: 2rem 1.5rem;
@media screen and (max-width: 768px) {
padding: 2rem 0.5rem;
}
}
.begins-on-field {

18
js/src/views/Group/Create.vue
View File

@@ -7,12 +7,19 @@
</b-message>
<form @submit.prevent="createGroup">
<b-field :label="$t('Group display name')">
<b-input aria-required="true" required v-model="group.name" />
<b-field :label="$t('Group display name')" label-for="group-display-name">
<b-input
aria-required="true"
required
v-model="group.name"
id="group-display-name"
/>
</b-field>
<div class="field">
<label class="label">{{ $t("Federated Group Name") }}</label>
<label class="label" for="group-preferred-username">{{
$t("Federated Group Name")
}}</label>
<div class="field-body">
<b-field
:message="
@@ -28,6 +35,7 @@
expanded
v-model="group.preferredUsername"
pattern="[a-z0-9_]+"
id="group-preferred-username"
:useHtml5Validation="true"
:validation-message="
group.preferredUsername
@@ -52,8 +60,8 @@
/>
</div>
<b-field :label="$t('Description')">
<b-input v-model="group.summary" type="textarea" />
<b-field :label="$t('Description')" label-for="group-summary">
<b-input v-model="group.summary" type="textarea" id="group-summary" />
</b-field>
<div>

2
js/src/views/Group/GroupFollowers.vue
View File

@@ -87,7 +87,7 @@
props.row.actor.name
}}</span
><br />
<span class="is-size-7 has-text-grey"
<span class="is-size-7 has-text-grey-dark"
>@{{ usernameWithDomain(props.row.actor) }}</span
>
</div>

14
js/src/views/Group/GroupMembers.vue
View File

@@ -39,6 +39,7 @@
<b-field
:label="$t('Invite a new member')"
custom-class="add-relay"
label-for="new-member-field"
horizontal
>
<b-field
@@ -50,6 +51,7 @@
>
<p class="control">
<b-input
id="new-member-field"
v-model="newMemberUsername"
:placeholder="$t('Ex: someone@mobilizon.org')"
/>
@@ -63,8 +65,12 @@
</b-field>
</form>
<h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
<b-field :label="$t('Status')" horizontal>
<b-select v-model="roles">
<b-field
:label="$t('Status')"
horizontal
label-for="group-members-status-filter"
>
<b-select v-model="roles" id="group-members-status-filter">
<option value="">
{{ $t("Everything") }}
</option>
@@ -122,7 +128,7 @@
<img
class="is-rounded"
:src="props.row.actor.avatar.url"
alt=""
:alt="props.row.actor.avatar.alt || ''"
/>
</figure>
<b-icon
@@ -137,7 +143,7 @@
props.row.actor.name
}}</span
><br />
<span class="is-size-7 has-text-grey"
<span class="is-size-7 has-text-grey-dark"
>@{{ usernameWithDomain(props.row.actor) }}</span
>
</div>

4
js/src/views/Group/GroupSettings.vue
View File

@@ -37,8 +37,8 @@
v-if="group && isCurrentActorAGroupAdmin"
>
<form @submit.prevent="updateGroup">
<b-field :label="$t('Group name')">
<b-input v-model="editableGroup.name" />
<b-field :label="$t('Group name')" label-for="group-settings-name">
<b-input v-model="editableGroup.name" id="group-settings-name" />
</b-field>
<b-field :label="$t('Group short description')">
<editor mode="basic" v-model="editableGroup.summary" :maxSize="500"

12
js/src/views/Home.vue
View File

@@ -278,13 +278,11 @@
}
)
}}
<router-link :to="{ name: RouteName.PREFERENCES }">
<b-icon
class="clickable"
icon="pencil"
:title="$t('Change')"
size="is-small"
/>
<router-link
:to="{ name: RouteName.PREFERENCES }"
:title="$t('Change')"
>
<b-icon class="clickable" icon="pencil" size="is-small" />
</router-link>
<b-loading :active.sync="$apollo.loading" />
</p>

1
js/src/views/Moderation/Logs.vue
View File

@@ -21,6 +21,7 @@
<img
class="image"
:src="log.actor.avatar.url"
:alt="log.actor.avatar.alt || ''"
v-if="log.actor.avatar"
/>
<i18n

66
js/src/views/Posts/Edit.vue
View File

@@ -54,6 +54,7 @@
<b-field
:label="$t('Title')"
label-for="post-title"
:type="errors.title ? 'is-danger' : null"
:message="errors.title"
>
@@ -62,6 +63,7 @@
aria-required="true"
required
v-model="editablePost.title"
id="post-title"
/>
</b-field>
@@ -73,30 +75,39 @@
<editor v-model="editablePost.body" />
</div>
<subtitle>{{ $t("Who can view this post") }}</subtitle>
<div class="field">
<b-radio
v-model="editablePost.visibility"
name="postVisibility"
:native-value="PostVisibility.PUBLIC"
>{{ $t("Visible everywhere on the web") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="editablePost.visibility"
name="postVisibility"
:native-value="PostVisibility.UNLISTED"
>{{ $t("Only accessible through link") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="editablePost.visibility"
name="postVisibility"
:native-value="PostVisibility.PRIVATE"
>{{ $t("Only accessible to members of the group") }}</b-radio
>
</div>
<fieldset>
<legend>
{{
$t(
"When the post is private, you'll need to share the link around."
)
}}
</legend>
<div class="field">
<b-radio
v-model="editablePost.visibility"
name="postVisibility"
:native-value="PostVisibility.PUBLIC"
>{{ $t("Visible everywhere on the web") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="editablePost.visibility"
name="postVisibility"
:native-value="PostVisibility.UNLISTED"
>{{ $t("Only accessible through link") }}</b-radio
>
</div>
<div class="field">
<b-radio
v-model="editablePost.visibility"
name="postVisibility"
:native-value="PostVisibility.PRIVATE"
>{{ $t("Only accessible to members of the group") }}</b-radio
>
</div>
</fieldset>
</div>
<nav class="navbar">
<div class="container">
@@ -414,6 +425,13 @@ form {
}
}
}
h2 {
margin: 15px 0 7.5px;
}
legend {
margin-bottom: 0.75rem;
}
}
.breadcrumb li.is-active > span {

31
js/src/views/Resources/ResourceFolder.vue
View File

@@ -187,8 +187,12 @@
<div class="modal-card">
<section class="modal-card-body">
<form @submit.prevent="createResource">
<b-field :label="$t('Title')">
<b-input aria-required="true" v-model="newResource.title" />
<b-field :label="$t('Title')" label-for="new-resource-title">
<b-input
aria-required="true"
v-model="newResource.title"
id="new-resource-title"
/>
</b-field>
<b-button native-type="submit">{{
@@ -202,6 +206,7 @@
:active.sync="createLinkResourceModal"
has-modal-card
class="link-resource-modal"
aria-modal
>
<div class="modal-card">
<section class="modal-card-body">
@@ -209,8 +214,9 @@
{{ modalError }}
</b-message>
<form @submit.prevent="createResource">
<b-field :label="$t('URL')">
<b-field :label="$t('URL')" label-for="new-resource-url">
<b-input
id="new-resource-url"
type="url"
required
v-model="newResource.resourceUrl"
@@ -222,12 +228,23 @@
<resource-item :resource="newResource" :preview="true" />
</div>
<b-field :label="$t('Title')">
<b-input aria-required="true" v-model="newResource.title" />
<b-field :label="$t('Title')" label-for="new-resource-link-title">
<b-input
aria-required="true"
v-model="newResource.title"
id="new-resource-link-title"
/>
</b-field>
<b-field :label="$t('Text')">
<b-input type="textarea" v-model="newResource.summary" />
<b-field
:label="$t('Description')"
label-for="new-resource-summary"
>
<b-input
type="textarea"
v-model="newResource.summary"
id="new-resource-summary"
/>
</b-field>
<b-button native-type="submit">{{

13
js/src/views/Settings/Notifications.vue
View File

@@ -86,6 +86,7 @@
<b-field
:label="$t('Send notification e-mails')"
label-for="groupNotifications"
:message="
$t(
'Announcements and mentions notifications are always sent straight away.'
@@ -95,6 +96,7 @@
<b-select
v-model="groupNotifications"
@input="updateSetting({ groupNotifications })"
id="groupNotifications"
>
<option
v-for="(value, key) in groupNotificationsValues"
@@ -186,9 +188,13 @@
<h2>{{ $t("Organizer notifications") }}</h2>
</div>
<div class="field is-primary">
<strong>{{
$t("Notifications for manually approved participations to an event")
}}</strong>
<label
class="has-text-weight-bold"
for="notificationPendingParticipation"
>{{
$t("Notifications for manually approved participations to an event")
}}</label
>
<p>
{{
$t(
@@ -198,6 +204,7 @@
</p>
<b-select
v-model="notificationPendingParticipation"
id="notificationPendingParticipation"
@input="updateSetting({ notificationPendingParticipation })"
>
<option

21
js/src/views/Settings/Preferences.vue
View File

@@ -15,22 +15,28 @@
</ul>
</nav>
<div>
<b-field :label="$t('Language')">
<b-field :label="$t('Language')" label-for="setting-language">
<b-select
:loading="!config || !loggedUser"
v-model="locale"
:placeholder="$t('Select a language')"
id="setting-language"
>
<option v-for="(language, lang) in langs" :value="lang" :key="lang">
{{ language }}
</option>
</b-select>
</b-field>
<b-field :label="$t('Timezone')" v-if="selectedTimezone">
<b-field
:label="$t('Timezone')"
v-if="selectedTimezone"
label-for="setting-timezone"
>
<b-select
:placeholder="$t('Select a timezone')"
:loading="!config || !loggedUser"
v-model="selectedTimezone"
id="setting-timezone"
>
<optgroup
:label="group"
@@ -57,19 +63,25 @@
}}</b-message>
<hr />
<b-field grouped>
<b-field :label="$t('City or region')" expanded>
<b-field
:label="$t('City or region')"
expanded
label-for="setting-city"
>
<address-auto-complete
v-if="loggedUser && loggedUser.settings"
:type="AddressSearchType.ADMINISTRATIVE"
:doGeoLocation="false"
v-model="address"
id="setting-city"
>
</address-auto-complete>
</b-field>
<b-field :label="$t('Radius')">
<b-field :label="$t('Radius')" label-for="setting-radius">
<b-select
:placeholder="$t('Select a radius')"
v-model="locationRange"
id="setting-radius"
>
<option
v-for="index in [1, 5, 10, 25, 50, 100]"
@@ -85,6 +97,7 @@
@click="resetArea"
class="reset-area"
icon-left="close"
:aria-label="$t('Reset')"
/>
</b-field>
<p>