diff --git a/apps/accessibility/css/style.scss b/apps/accessibility/css/style.scss
index 5c262605f06ac269612ee52cba7e4f86089f8be6..dc304a8f67448e62ae28b2fffc30dbf6bd9cd128 100644
--- a/apps/accessibility/css/style.scss
+++ b/apps/accessibility/css/style.scss
@@ -1,59 +1,49 @@
+#accessibility {
+ max-width: 800px;
+}
+
+#accessibility a {
+ border-bottom: 1px dotted;
+
+ &:hover,
+ &:focus {
+ border-bottom-style: solid;
+ }
+}
+
.preview-list {
display: flex;
- flex-wrap: wrap;
+ flex-direction: column;
}
+
.preview {
display: flex;
- flex-direction: column;
- min-width: 250px;
- max-width: 400px;
- flex: 1 1 300px;
- border: 1px solid var(--color-border);
- padding: 10px;
- border-radius: var(--border-radius);
- transition: all 200ms ease-in-out;
- filter: drop-shadow(0 1px 2px var(--color-box-shadow));
- background-color: var(--color-main-background);
- opacity: 0.9;
- margin: 10px;
+ justify-content: flex-start;
+ margin: 1em;
+ margin-left: 0;
position: relative;
+
&,
* {
- cursor: pointer;
user-select: none;
}
- &:hover,
- &:focus,
- &.selected {
- filter: drop-shadow(0 1px 4px var(--color-box-shadow));
- opacity: 1;
- }
+
.preview-image {
- height: 200px;
+ flex-basis: 200px;
+ flex-shrink: 0;
+ margin-right: 1em;
background-position: top left;
background-size: cover;
background-repeat: no-repeat;
+ border-radius: var(--border-radius);
}
- h3 {
+
+ .preview-description {
display: flex;
- justify-content: space-between;
- line-height: 1em;
- align-items: center;
- }
- p {
- text-align: justify;
- }
- .icon-checkmark-color {
- transition: all 100ms ease-in-out;
- border-radius: 1em;
- padding: 4px 5px 4px 20px;
- background-position: 4px center;
- opacity: 0;
- visibility: hidden;
- }
- &.selected .icon-checkmark-color {
- opacity: 1;
- visibility: visible;
- box-shadow: 0 0 0 1px var(--color-success);
+ flex-direction: column;
+
+ label {
+ padding: 12px 0;
+ }
}
}
diff --git a/apps/accessibility/lib/AccessibilityProvider.php b/apps/accessibility/lib/AccessibilityProvider.php
index c1a69b55f4d21c5f3f81b28404663836cadfef01..6bd548680e9b4597975c512a22ab69c4c1288469 100644
--- a/apps/accessibility/lib/AccessibilityProvider.php
+++ b/apps/accessibility/lib/AccessibilityProvider.php
@@ -75,7 +75,7 @@ class AccessibilityProvider {
'id' => 'fontdyslexic',
'img' => $this->urlGenerator->imagePath($this->appName, 'font-opendyslexic.jpg'),
'title' => $this->l->t('Dyslexia font'),
- 'text' => $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia. The typeface was created by Abelardo Gonzalez, who released it through an open-source license.')
+ 'text' => $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia.')
]
);
}
diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
index 8983ecc1976d0a2bf4eaa4f0c924f22a9032d278..7c86b4287f018c8a66a14fe4d9a8143785b7ce3d 100644
--- a/apps/accessibility/src/App.vue
+++ b/apps/accessibility/src/App.vue
@@ -1,21 +1,18 @@
<template>
<div id="accessibility" class="section">
<h2>{{t('accessibility', 'Accessibility')}}</h2>
- <p class="settings-hint">
- {{t('accessibility', 'Universal access is very important to us. We follow web standards and check to make everything usable also without mouse, and assistive software such as screenreaders.')}}</br>
- We aim to be compliant with the <a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">Web Content Accessibility Guidelines</a> 2.1 on AA level, with the high contrast theme even on AAA level.</br>
+ <p>
+ {{t('accessibility', 'Universal access is very important to us. We follow web standards and check to make everything usable also without mouse, and assistive software such as screenreaders.')}} We aim to be compliant with the <a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">Web Content Accessibility Guidelines</a> 2.1 on AA level, with the high contrast theme even on AAA level.</br>
If you find any issues, don’t hesitate to report them on <a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">our issue tracker</a>. And if you want to get involved, come join <a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">our design team</a>!
</p>
- <div class="themes-list preview-list">
+ <div class="preview-list">
<preview v-for="preview in themes" :preview="preview"
- :key="preview.id" :selected="selected.theme"
- v-on:select="selectTheme"></preview>
- </div>
- <div class="fonts-list preview-list">
+ :key="preview.id" :selected="selected.theme"
+ v-on:select="selectTheme"></preview>
<preview v-for="preview in fonts" :preview="preview"
- :key="preview.id" :selected="selected.font"
- v-on:select="selectFont"></preview>
+ :key="preview.id" :selected="selected.font"
+ v-on:select="selectFont"></preview>
</div>
</div>
</template>
diff --git a/apps/accessibility/src/components/itemPreview.vue b/apps/accessibility/src/components/itemPreview.vue
index 64a82059faf1b3e26eb4f00535fa7ac45acd818f..f6c84d7e302e8d70655e05f365d2d137b73f6fd7 100644
--- a/apps/accessibility/src/components/itemPreview.vue
+++ b/apps/accessibility/src/components/itemPreview.vue
@@ -1,13 +1,13 @@
<template>
- <a :class="{preview: true, selected: preview.id === selected}"
- href="#" @click="selectItem">
+ <div :class="{preview: true}">
<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
- <h3>
- <span>{{preview.title}}</span>
- <div class="icon-checkmark-color">{{t('accessibility', 'enabled')}}</div>
- </h3>
- <p>{{preview.text}}</p>
- </a>
+ <div class="preview-description">
+ <h3>{{preview.title}}</h3>
+ <p>{{preview.text}}</p>
+ <input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="selected" />
+ <label :for="'accessibility-' + preview.id" @click="selectItem">{{t('accessibility', 'Enable')}}</label>
+ </div>
+ </div>
</template>
<script>