nathalie
/
pedi2
3
3
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

cambios en la nav bar y barra de búsqueda

This commit is contained in:
Alejandro Tasistro 2023-05-24 22:00:04 -03:00
parent 4acc2b0605
commit 599d55b684
2 changed files with 80 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
resources/js/components/NavBar.vue
View File

@ -1,28 +1,42 @@
<template> <template>
<nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation"> <nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="https://mps.org.uy"> <a class="navbar-item" href="https://mps.org.uy">
<img src="/assets/logoMPS.png" height="28"> <img src="/assets/logoMPS.png" height="28">
</a> </a>
<p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p> <!-- Styles nombre del barrio-->
<a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa"> <p class="navbar-item">
<img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28"> <slot name="gdc"></slot>
<p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p> </p>
</a> <p class="navbar-item">
<a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState"> <slot name="subpedido"></slot>
</p>
<a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}"> <div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
<div class="navbar-start has-text-right-mobile"> <div class="navbar-start"></div>
<!-- Styles nombre del barrio--> <div class="navbar-end">
<p class="navbar-item"><slot name="gdc"></slot></p> <div class="control mt-auto mb-auto has-icons-left margin-in-burger">
<input class="input is-small" type="text" placeholder="Harina" :v-model="searchString">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</div>
<a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
<span class="icon is-small mr-1" id="chismosa">
<img class="invert-in-burger" src="/assets/chismosa.png">
</span>
<span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
</a>
<a class="navbar-item" <a class="navbar-item"
onclick="event.preventDefault(); onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
document.getElementById('logout-form').submit();">
Cerrar sesión Cerrar sesión
</a> </a>
<slot name="logout-form"></slot> <slot name="logout-form"></slot>
@ -36,25 +50,31 @@
data() { data() {
return { return {
isActive: false, isActive: false,
subpedido: null subpedido: null,
searchString: ""
} }
}, },
methods: { methods: {
toggleState() { toggleState() {
this.isActive = !this.isActive; this.isActive = !this.isActive
}, },
actualizarSubpedido(){ actualizarSubpedido(){
axios.get("/api/subpedidos/" + this.subpedido.id) axios.get("/api/subpedidos/" + this.subpedido.id)
.then(response => { .then(response => {
this.subpedido = response.data.data; this.subpedido = response.data.data
}); });
}, },
toggleChismosa(){ toggleChismosa(){
Event.$emit("toggle-chismosa"); if (this.isActive) this.toggleState()
Event.$emit("toggle-chismosa")
},
buscar() {
Event.$emit("buscar-productos",this.searchString)
} }
}, mounted() { },
mounted() {
axios.get("/subpedidos/obtener_sesion").then(response => { axios.get("/subpedidos/obtener_sesion").then(response => {
this.subpedido = response.data.subpedido; this.subpedido = response.data.subpedido
this.actualizarSubpedido() this.actualizarSubpedido()
}); });
//Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
@ -97,5 +117,13 @@
p.navbar-item:empty { p.navbar-item:empty {
display: none; display: none;
} }
@media (max-width: 1023px) {
.invert-in-burger {
filter: invert(.5);
}
.margin-in-burger {
margin-left: .75rem;
margin-right: .75rem;
}
}
</style> </style>

2
resources/js/components/NavMigas.vue
View File

@ -43,8 +43,8 @@ nav.breadcrumb.is-fixed-top {
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 30;
top: 3.25rem; top: 3.25rem;
height: 3.25rem; height: 3.25rem;
z-index: -10;
} }
</style> </style>