TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-22 12:03:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

#19 formy wymienne - interfejs

Browse Source
This commit is contained in:
Andrea Vos 2020-07-26 14:52:01 +02:00
parent 1a042f43ea
commit f589587d80
3 changed files with 77 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/style.scss
View File

@ -71,3 +71,18 @@ body {
section {
margin: 2*$spacer 0;
}
code {
@include font-size($code-font-size);
color: $code-color;
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
border: 1px solid $code-color;
padding: .2em;
border-radius: $border-radius-sm;
}

65
pages/index.vue
View File

@ -21,6 +21,39 @@
</nuxt-link>
</section>
<section>
<p>
Wybierz formy wymienne:
</p>
<a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-lg btn-block">
<Icon v="sliders-h-square"/>
Wybierz formy wymienne
</a>
<div v-else class="card mb-5">
<div class="card-header">
<Icon v="sliders-h-square"/>
Formy wymienne:
</div>
<div class="card-body">
<div class="card-title">
<ul class="list-inline d-inline mb-0">
<li class="list-inline-item" v-for="(template, pronoun) in templates">
<button :class="['btn', multiple.includes(pronoun) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
@click="toggleMultiple(pronoun)"
>
{{template.name()}}
</button>
</li>
</ul>
</div>
</div>
<div class="card-footer" v-if="linkMultiple">
<LinkInput :link="linkMultiple"/>
</div>
</div>
</section>
<section>
<p>
Lub dopasuj bardziej szczegółowo:
@ -35,14 +68,14 @@
<Icon v="sliders-h-square"/>
Kreator
</div>
<div class="card-body" v-if="customise">
<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']"
<button :class="['btn', template.name() === selectedTemplate.name() ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
@click="selectedTemplate = templates[pronoun].clone()"
>
{{template.name()}}
@ -73,7 +106,7 @@
<input v-if="part.variable" v-model="selectedTemplate.morphemes[part.str]"
:class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
:size="selectedTemplate.morphemes[part.str] ? selectedTemplate.morphemes[part.str].length : 0"
maxlength="7"
maxlength="12"
@focus="selectedMorpheme = part.str"
@blur="selectedMorpheme = ''"
/>
@ -92,8 +125,12 @@
</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>
<div class="card-footer" v-if="customise && link">
<div class="card-footer" v-if="link">
<LinkInput :link="link"/>
</div>
<div class="card-body border-top" v-if="getTemplate(templates, selectedTemplate.name()) && getTemplate(templates, selectedTemplate.name()).sources.length">
@ -167,6 +204,9 @@
selectedTemplate: templates['on'].clone(),
selectedMorpheme: '',
customiseMultiple: false,
multiple: [],
customise: false,
}
},
@ -204,6 +244,23 @@
}
return process.env.baseUrl + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink);
},
linkMultiple() {
if (!this.multiple.length) {
return null;
}
return process.env.baseUrl + '/' + this.multiple.join('&');
},
},
methods: {
toggleMultiple(name) {
const index = this.multiple.indexOf(name);
if (index > -1) {
this.multiple.splice(index, 1);
} else {
this.multiple.push(name);
}
}
},
}
</script>

2
src/classes.js
View File

@ -209,7 +209,7 @@ export class Template {
|| data[data.length - 1].length > 48
|| ![0, 1].includes(parseInt(data[MORPHEMES.length]))
|| ![0, 1].includes(parseInt(data[MORPHEMES.length + 1]))
|| data.slice(1, data.length - 3).filter(s => s.length > 7).length
|| data.slice(1, data.length - 3).filter(s => s.length > 12).length
) {
return null;
}