saulteafarmer/appticles
1
0
Fork 0
mirror of https://github.com/minimo-io/appticles.git synced 2025-06-23 16:05:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

app v0.1 done

Browse Source
This commit is contained in:
minimo-io 2022-10-19 14:50:31 -03:00
parent baf37b7c66
commit 7374f1c83b
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
mo-lunfardo/lunfardo.js
View File

@ -6,10 +6,7 @@ const App = Vue.createApp({
return { return {
placeholder: 'Buscá che...', placeholder: 'Buscá che...',
searchQuery: '', searchQuery: '',
wordsJson: { wordsJson: []
'word-1': { "title": "sonamos", "description": "pop. ¡Estamos perdidos!"},
'word-2': { "title": "percanta", "description": "(pop.) Mujer (LCV.), amante (LCV.), querida (LCV.), concubina."},
}
} }
}, },
methods:{ methods:{
@ -34,7 +31,8 @@ const App = Vue.createApp({
}, },
filteredList() { filteredList() {
if (!this.searchQuery) { if (!this.searchQuery) {
return this.listValues; //return this.listValues.slice(0, 10);
return this.listValues.slice(0, 5);
} }
return this.listValues return this.listValues

14
mo-lunfardo/test.html
View File

@ -10,7 +10,7 @@
<body> <body>
<div class="lunfardo-app card card bg-light mb-3"> <div class="lunfardo-app card card bg-light mb-3">
<div class="card-body"> <div class="card-body">
<div id="app"> <div id="app">
<form @submit.prevent="searchLunfardo"> <form @submit.prevent="searchLunfardo">
<div class="search-wrapper form-group mb-0"> <div class="search-wrapper form-group mb-0">
@ -20,13 +20,23 @@
</form> </form>
<h3 v-if="searchQuery" class="mt-2 mb-0">Estas buscando «{{ searchQuery }}»</h3> <h3 v-if="searchQuery" class="mt-2 mb-0">Estas buscando «{{ searchQuery }}»</h3>
<div class="row"><div class="col text-right"><span class="badge badge-warning mt-0 text-right">{{ countWords }} palabras</span></div></div> <div class="row"><div class="col text-right"><span class="badge badge-warning mt-0 text-right">{{ countWords }} palabras</span></div></div>
<div class="lunfardo-info-box" v-if="!searchQuery">
<i class="fa fa-info-circle" aria-hidden="true"></i> Ingresá tu búsqueda en cuadro de arriba y encontrala entre mas de {{ countWords }} palabras del lunfardo.
</div>
<h2 v-if="!searchQuery">Algunos ejemplos de términos lunfardos</h2>
<ul class="mt-4"> <ul class="mt-4">
<li v-for="(data, index) in filteredList"><strong>{{ data.title }}</strong>: {{ data.description }}</li> <li v-for="(data, index) in filteredList"><strong>{{ data.title }}</strong>: {{ data.description }}</li>
</ul> </ul>
</div>
</div>
</div> </div>
</div> </div>
<style> <style>
.lunfardo-info-box{
padding: 1rem;
background-color: #D0E2FE;
border-radius: 10px;
}
.lunfardo-search-bar{ .lunfardo-search-bar{
width: 100%; width: 100%;
margin: 0; margin: 0;