projects/fipamo
projects/fipamo
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 24 Packages Wiki Activity Actions

improved file upload accessibility

Browse source 
the label for uploading files in the meta ui was not accessible by
keyboard, so that element was changed to a button that can be tabbed to
and clicked to open the file upload ui

there were also so minor css issues with the options toolbar, so those
have been tweaked
This commit is contained in:
RXP 2025-05-13 12:56:55 -06:00
parent 6c44f58448
commit 5e3d2ea49f
Signed by: ro
GPG key ID: 976711B5057688B7
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
public/assets/css/dash/page-editor.css
View file

@ -6,7 +6,7 @@ section.meta {
max-width: 800px;
margin: 50px auto 0;
position: absolute;
top: 215px;
top: 225px;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
@ -22,6 +22,10 @@ main > section > div.file-manager {
width: 100%;
}
button#files-upload {
background: var(--secondary);
}
main > section > div.file-manager label.list-title {
width: 100%;
max-width: 900px;
@ -173,11 +177,16 @@ main div.page-meta div.page-options button {
text-align: center;
}
main > div.page-meta > div.page-options > button.post-option-btn:nth-child(3) {
main
> section.meta
> div.page-meta
> div.page-options
> div
> button.post-option-btn:nth-child(1) {
border-radius: 3px 0 0 3px;
}
main > section > div.page-meta > div.page-options > a > button {
main > section.meta > div.page-meta > div.page-options > div > a > button {
border-radius: 0 3px 3px 0;
}

5
public/assets/scripts/dash/app/controllers/PageEditor.js
View file

@ -145,6 +145,11 @@ export default class PostEditor {
meta.classList.remove('show-grid');
}
});
document.getElementById('files-upload').addEventListener('click', e => {
console.log('TOUCHED');
document.getElementById('page-files-upload').click();
});
}
//--------------------------
// event handlers

12
resources/views/back/page.blade.php
View file

@ -5,19 +5,17 @@
@include('includes.editor')
<section class="meta hide-el">
<div data-index="{{$id}}" data-uuid="{{$uuid}}" data-slug="{{$slug}}" data-layout="{{$layout}}" class="file-manager">
ADD ATTACHMENTS
ADD IMAGES AND FILES
<div class="file-drop">
<button id="files-upload" title="upload files">DRAG AND DROP FILES OR CLICK TO SELECT</button>
</div>
<div class="page-files-list"></div>
@if($feature == '')
<div class="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label class="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" class="page-images-list"></div>
<label class="list-title">FILES</label>
<div class="page-files-list"></div>
@else
<div class="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label class="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" class="page-images-list">
@include('includes.media-list')