rdelaage
/
castopod
mirror of https://code.castopod.org/adaures/castopod.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

replace platform visible checkbox with switch
This commit is contained in:
Yassine Doghri 2020-10-15 11:07:32 +00:00
parent 7661734ed2
commit d5f22fbb38
9 changed files with 48 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Language/en/Episode.php
View File

@ -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',

3
app/Language/fr/Episode.php
View File

@ -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',

2
app/Views/_assets/admin.ts
View File

@ -1,5 +1,4 @@
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();

24
app/Views/_assets/modules/EnclosureInput.ts
View File

@ -1,24 +0,0 @@
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;

16
app/Views/_assets/styles/enclosureInput.css
View File

@ -1,16 +0,0 @@
.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;
}

1
app/Views/_assets/styles/index.css
View File

@ -4,5 +4,4 @@
@import "./multiSelect.css";
@import "./radioBtn.css";
@import "./switch.css";
@import "./enclosureInput.css";
@import "./charts.css";

34
app/Views/admin/episode/create.php
View File

@ -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
) ?>

27
app/Views/admin/episode/edit.php
View File

@ -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'
) ?>

28
app/Views/admin/podcast/settings/platforms.php
View File

@ -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>