[homepage] przyjaźniejszy interfejs kreatorów
This commit is contained in:
Avris
parent
6f6b559506
commit
0567da451a
231
pages/index.vue
231
pages/index.vue
|
|
@ -25,10 +25,6 @@
|
||||||
<Separator icon="link"/>
|
<Separator icon="link"/>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p>
|
|
||||||
Wybierz sposród najpopularniejszych:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li v-for="[group, groupTemplates] in templateLibrary.split()" class="list-group-item">
|
<li v-for="[group, groupTemplates] in templateLibrary.split()" class="list-group-item">
|
||||||
<p class="h5">
|
<p class="h5">
|
||||||
|
|
@ -51,90 +47,85 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<li class="list-group-item">
|
||||||
</section>
|
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-block">
|
||||||
|
<Icon v="sliders-h-square"/>
|
||||||
<section>
|
Wygeneruj link do form wymiennych
|
||||||
<p>
|
</a>
|
||||||
Wybierz formy wymienne:
|
<div v-else class="card">
|
||||||
</p>
|
<div class="card-header">
|
||||||
|
<Icon v="sliders-h-square"/>
|
||||||
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-block">
|
Formy wymienne:
|
||||||
<Icon v="sliders-h-square"/>
|
</div>
|
||||||
Wybierz formy wymienne
|
<div class="card-body">
|
||||||
</a>
|
<div class="card-title">
|
||||||
<div v-else class="card mb-5">
|
<ul class="list-inline d-inline mb-0">
|
||||||
<div class="card-header">
|
<li class="list-inline-item" v-for="(template, pronoun) in templates">
|
||||||
<Icon v="sliders-h-square"/>
|
<button :class="['btn', multiple.includes(pronoun) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||||
Formy wymienne:
|
@click="toggleMultiple(pronoun)"
|
||||||
</div>
|
>
|
||||||
<div class="card-body">
|
{{template.name()}}
|
||||||
<div class="card-title">
|
</button>
|
||||||
<ul class="list-inline d-inline mb-0">
|
</li>
|
||||||
<li class="list-inline-item" v-for="(template, pronoun) in templates">
|
</ul>
|
||||||
<button :class="['btn', multiple.includes(pronoun) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
</div>
|
||||||
@click="toggleMultiple(pronoun)"
|
</div>
|
||||||
>
|
<div class="card-footer" v-if="linkMultiple">
|
||||||
{{template.name()}}
|
<LinkInput :link="linkMultiple"/>
|
||||||
</button>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
<div class="card-footer" v-if="linkMultiple">
|
<li class="list-group-item">
|
||||||
<LinkInput :link="linkMultiple"/>
|
<p class="h5">
|
||||||
</div>
|
Generator form
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<p>
|
|
||||||
Lub dopasuj bardziej szczegółowo:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary btn-block">
|
|
||||||
<Icon v="sliders-h-square"/>
|
|
||||||
Kreator
|
|
||||||
</a>
|
|
||||||
<div v-else class="card mb-5">
|
|
||||||
<div class="card-header">
|
|
||||||
<Icon v="sliders-h-square"/>
|
|
||||||
Kreator
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="card-title border-bottom pb-3">
|
|
||||||
<ul class="list-inline d-inline mb-0">
|
|
||||||
<li class="list-inline-item pt-1 h5">
|
|
||||||
Sugestie:
|
|
||||||
</li>
|
|
||||||
<li class="list-inline-item" v-for="(template, pronoun) in templates">
|
|
||||||
<button :class="['btn', template.name() === selectedTemplate.name() ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
|
||||||
@click="selectedTemplate = templates[pronoun].clone()"
|
|
||||||
>
|
|
||||||
{{template.name()}}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="alert alert-primary">
|
|
||||||
<p class="h3 mb-0 text-center">
|
|
||||||
{{ selectedTemplate.name() }}
|
|
||||||
<br/>
|
|
||||||
<input v-model="selectedTemplate.description"
|
|
||||||
class="form-control form-input p-0 form-control-sm"
|
|
||||||
:size="selectedTemplate.description.length + 3"
|
|
||||||
maxlength="48"
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Przykłady użycia w zdaniu:
|
|
||||||
</p>
|
</p>
|
||||||
<template v-for="isHonorific in [false, true]">
|
<p>
|
||||||
<ul>
|
Możesz także użyć poniższego narzędzia, w którym uzupełnisz luki w zdaniach
|
||||||
<li v-for="example in examples" v-if="example.isHonorific === isHonorific">
|
zgodnie z formami, których używasz, by wygenerować gotowy do udostępniania innym link.
|
||||||
|
</p>
|
||||||
|
<a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary btn-block">
|
||||||
|
<Icon v="sliders-h-square"/>
|
||||||
|
Pokaż generator
|
||||||
|
</a>
|
||||||
|
<div v-else class="card mb-5">
|
||||||
|
<div class="card-header">
|
||||||
|
<Icon v="sliders-h-square"/>
|
||||||
|
Wygeneruj link
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title border-bottom pb-3">
|
||||||
|
<ul class="list-inline d-inline mb-0">
|
||||||
|
<li class="list-inline-item pt-1 h5">
|
||||||
|
Na podstawie:
|
||||||
|
</li>
|
||||||
|
<li class="list-inline-item" v-for="(template, pronoun) in templates">
|
||||||
|
<button :class="['btn', template.name() === selectedTemplate.name() ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
|
||||||
|
@click="selectedTemplate = templates[pronoun].clone()"
|
||||||
|
>
|
||||||
|
{{template.name()}}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-primary">
|
||||||
|
<p class="h3 mb-0 text-center">
|
||||||
|
{{ selectedTemplate.name() }}
|
||||||
|
<br/>
|
||||||
|
<input v-model="selectedTemplate.description"
|
||||||
|
class="form-control form-input p-0 form-control-sm"
|
||||||
|
:size="selectedTemplate.description.length + 3"
|
||||||
|
maxlength="48"
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Przykłady użycia w zdaniu:
|
||||||
|
</p>
|
||||||
|
<template v-for="isHonorific in [false, true]">
|
||||||
|
<ul>
|
||||||
|
<li v-for="example in examples" v-if="example.isHonorific === isHonorific">
|
||||||
<span v-for="part in example[(isHonorific ? selectedTemplate.pluralHonorific : selectedTemplate.plural) ? 'pluralParts' : 'singularParts']">
|
<span v-for="part in example[(isHonorific ? selectedTemplate.pluralHonorific : selectedTemplate.plural) ? 'pluralParts' : 'singularParts']">
|
||||||
<input v-if="part.variable" v-model="selectedTemplate.morphemes[part.str]"
|
<input v-if="part.variable" v-model="selectedTemplate.morphemes[part.str]"
|
||||||
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
|
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
|
||||||
|
|
@ -145,42 +136,44 @@
|
||||||
/>
|
/>
|
||||||
<span v-else>{{part.str}}</span>
|
<span v-else>{{part.str}}</span>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="my-3">
|
<div class="my-3">
|
||||||
<div class="custom-control custom-switch" v-if="isHonorific">
|
<div class="custom-control custom-switch" v-if="isHonorific">
|
||||||
<input type="checkbox" class="custom-control-input" id="pluralHonorific" v-model="selectedTemplate.pluralHonorific">
|
<input type="checkbox" class="custom-control-input" id="pluralHonorific" v-model="selectedTemplate.pluralHonorific">
|
||||||
<label class="custom-control-label" for="pluralHonorific">Liczba mnoga <Icon v="level-up"/></label>
|
<label class="custom-control-label" for="pluralHonorific">Liczba mnoga <Icon v="level-up"/></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-control custom-switch" v-else>
|
<div class="custom-control custom-switch" v-else>
|
||||||
<input type="checkbox" class="custom-control-input" id="plural" v-model="selectedTemplate.plural">
|
<input type="checkbox" class="custom-control-input" id="plural" v-model="selectedTemplate.plural">
|
||||||
<label class="custom-control-label" for="plural">Liczba mnoga <Icon v="level-up"/></label>
|
<label class="custom-control-label" for="plural">Liczba mnoga <Icon v="level-up"/></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<p class="small">
|
||||||
|
<Icon v="info-circle"/>
|
||||||
|
Możesz tu również wpisać formy wymienne w każdym polu z osobna, np. <code>jego&jej</code> = „jego” lub „jej”.
|
||||||
|
</p>
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
<p class="mb-0 small">
|
||||||
|
<Icon v="exclamation-triangle"/>
|
||||||
|
Strona jest w wersji βeta!
|
||||||
|
Przykłady, formy gramatyczne i linki mogą się jeszcze mocno zmienić!
|
||||||
|
Jeśli masz jakieś sugestie lub uwagi, daj mi proszę znać
|
||||||
|
<a href="https://twitter.com/AvrisIT" target="_blank" rel="noopener">na Twitterze</a>
|
||||||
|
lub
|
||||||
|
<a href="mailto:andrea@avris.it" target="_blank" rel="noopener">przez maila</a>.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="card-footer" v-if="link">
|
||||||
<p class="small">
|
<LinkInput :link="link"/>
|
||||||
<Icon v="info-circle"/>
|
</div>
|
||||||
Możesz tu również wpisać formy wymienne w każdym polu z osobna, np. <code>jego&jej</code> = „jego” lub „jej”.
|
<div class="card-body border-top" v-if="Object.keys(sources).length">
|
||||||
</p>
|
<Literature :sources="sources"/>
|
||||||
<div class="alert alert-warning">
|
</div>
|
||||||
<p class="mb-0 small">
|
|
||||||
<Icon v="exclamation-triangle"/>
|
|
||||||
Strona jest w wersji βeta!
|
|
||||||
Przykłady, formy gramatyczne i linki mogą się jeszcze mocno zmienić!
|
|
||||||
Jeśli masz jakieś sugestie lub uwagi, daj mi proszę znać
|
|
||||||
<a href="https://twitter.com/AvrisIT" target="_blank" rel="noopener">na Twitterze</a>
|
|
||||||
lub
|
|
||||||
<a href="mailto:andrea@avris.it" target="_blank" rel="noopener">przez maila</a>.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
<div class="card-footer" v-if="link">
|
</ul>
|
||||||
<LinkInput :link="link"/>
|
|
||||||
</div>
|
|
||||||
<div class="card-body border-top" v-if="Object.keys(sources).length">
|
|
||||||
<Literature :sources="sources"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Separator icon="bookmark"/>
|
<Separator icon="bookmark"/>
|
||||||
|
|
|
||||||
Reference in New Issue