Skip to content
Snippets Groups Projects
Commit d5f22fbb authored by Yassine Doghri's avatar Yassine Doghri
Browse files

revert: use basic input file for episodes audio files instead of button for better UX

replace platform visible checkbox with switch
parent 7661734e
No related branches found
No related tags found
No related merge requests found
......@@ -23,7 +23,8 @@ return [
'go_to_page' => 'Go to page',
'create' => 'Add an episode',
'form' => [
'enclosure' => 'Choose an .mp3 or .m4a audio file…',
'enclosure' => 'Audio file',
'enclosure_hint' => 'Choose an .mp3 or .m4a audio file.',
'info_section_title' => 'Episode info',
'info_section_subtitle' => '',
'image' => 'Cover image',
......
......@@ -23,7 +23,8 @@ return [
'go_to_page' => 'Voir',
'create' => 'Ajouter un épisode',
'form' => [
'enclosure' => 'Sélectionnez un fichier audio .mp3 ou .m4a…',
'enclosure' => 'Fichier audio',
'enclosure_hint' => 'Sélectionnez un fichier audio .mp3 ou .m4a.',
'info_section_title' => 'Informations épisode',
'info_section_subtitle' => '',
'image' => 'Image de couverture',
......
import Dropdown from "./modules/Dropdown";
import EnclosureInput from "./modules/EnclosureInput";
import MarkdownEditor from "./modules/MarkdownEditor";
import MultiSelect from "./modules/MultiSelect";
import SidebarToggler from "./modules/SidebarToggler";
......@@ -12,4 +11,3 @@ MarkdownEditor();
MultiSelect();
Slugify();
SidebarToggler();
EnclosureInput();
const EnclosureInput = (): void => {
const enclosureInput = document.querySelector(
".form-enclosure-input"
) as HTMLInputElement;
if (enclosureInput) {
const label = enclosureInput?.nextElementSibling?.querySelector(
"span"
) as HTMLSpanElement;
const labelVal = label.innerHTML;
enclosureInput.addEventListener("change", (e: Event) => {
const fileName = (e.target as HTMLInputElement).value.split("\\").pop();
if (fileName) {
label.innerHTML = fileName;
} else {
label.innerHTML = labelVal;
}
});
}
};
export default EnclosureInput;
.form-enclosure-input {
@apply absolute w-0 h-0 opacity-0;
}
.form-enclosure-input + label {
@apply inline-flex items-center justify-center w-full py-2 text-lg font-semibold text-green-600 bg-white border-2 border-green-500 rounded-lg shadow cursor-pointer;
}
.form-enclosure-input:focus + label,
.form-enclosure-input + label:hover {
@apply text-green-700 border-green-700 shadow-md;
}
.form-enclosure-input:focus + label {
@apply shadow-outline;
}
......@@ -4,5 +4,4 @@
@import "./multiSelect.css";
@import "./radioBtn.css";
@import "./switch.css";
@import "./enclosureInput.css";
@import "./charts.css";
......@@ -17,24 +17,26 @@
]) ?>
<?= csrf_field() ?>
<div class="flex w-full mb-6">
<?= form_input([
'id' => 'enclosure',
'name' => 'enclosure',
'class' => 'form-enclosure-input',
'required' => 'required',
'type' => 'file',
'accept' => '.mp3,.m4a',
]) ?>
<label for="enclosure"><?= icon('upload', 'mr-2 text-') ?>
<span><?= lang('Episode.form.enclosure') ?></span></label>
</div>
<?= form_section(
lang('Episode.form.info_section_title'),
lang('Episode.form.info_section_subtitle')
) ?>
<?= form_label(
lang('Episode.form.enclosure'),
'enclosure',
[],
lang('Episode.form.enclosure_hint')
) ?>
<?= form_input([
'id' => 'enclosure',
'name' => 'enclosure',
'class' => 'form-input mb-4',
'required' => 'required',
'type' => 'file',
'accept' => '.mp3,.m4a',
]) ?>
<?= form_label(
lang('Episode.form.image'),
'image',
......@@ -130,11 +132,7 @@
<?= lang('Episode.form.type.trailer') ?>
</label>
<?= form_radio(
[
'id' => 'bonus',
'name' => 'type',
'class' => 'form-radio-btn',
],
['id' => 'bonus', 'name' => 'type', 'class' => 'form-radio-btn'],
'bonus',
old('type') ? old('type') == 'bonus' : false
) ?>
......
......@@ -17,23 +17,25 @@
]) ?>
<?= csrf_field() ?>
<div class="flex w-full mb-6">
<?= form_input([
'id' => 'enclosure',
'name' => 'enclosure',
'class' => 'form-enclosure-input',
'type' => 'file',
'accept' => '.mp3,.m4a',
]) ?>
<label for="enclosure"><?= icon('upload', 'mr-2 text-') ?>
<span><?= lang('Episode.form.enclosure') ?></span></label>
</div>
<?= form_section(
lang('Episode.form.info_section_title'),
lang('Episode.form.info_section_subtitle')
) ?>
<?= form_label(
lang('Episode.form.enclosure'),
'enclosure',
[],
lang('Episode.form.enclosure_hint')
) ?>
<?= form_input([
'id' => 'enclosure',
'name' => 'enclosure',
'class' => 'form-input mb-4',
'type' => 'file',
'accept' => '.mp3,.m4a',
]) ?>
<?= form_label(
lang('Episode.form.image'),
'image',
......@@ -134,6 +136,7 @@
</label>
<?= form_radio(
['id' => 'bonus', 'name' => 'type', 'class' => 'form-radio-btn'],
'bonus',
old('type') ? old('type') === 'bonus' : $episode->type === 'bonus'
) ?>
......
......@@ -72,21 +72,19 @@
'type' => 'url',
'placeholder' => 'https://...',
]) ?>
<label class="inline-flex items-center mb-4 text-sm">
<?= form_checkbox(
[
'id' => $platform->name . '_visible',
'name' => 'platforms[' . $platform->name . '][visible]',
'class' => 'form-checkbox',
],
'yes',
old(
$platform->name . '_visible',
$platform->visible ? $platform->visible : false
)
) ?>
<span class="ml-2"><?= lang('Platforms.visible') ?></span>
</label>
<?= form_switch(
lang('Platforms.visible'),
[
'id' => $platform->name . '_visible',
'name' => 'platforms[' . $platform->name . '][visible]',
],
'yes',
old(
$platform->name . '_visible',
$platform->visible ? $platform->visible : false
),
'text-sm'
) ?>
</div>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment