Cambio de boton a switch y estilos

This commit is contained in:
Ale 2022-10-21 19:17:52 -03:00
parent 5c134989d2
commit 155a86975c
8 changed files with 50 additions and 15 deletions

13
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "pedi2",
"name": "www",
"lockfileVersion": 2,
"requires": true,
"packages": {
@ -7,6 +7,7 @@
"dependencies": {
"animate.css": "^4.1.1",
"bulma": "^0.9.4",
"bulma-switch": "^2.0.4",
"bulma-toast": "^2.4.1"
},
"devDependencies": {
@ -3006,6 +3007,11 @@
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
},
"node_modules/bulma-switch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.4.tgz",
"integrity": "sha512-kMu4H0Pr0VjvfsnT6viRDCgptUq0Rvy7y7PX6q+IHg1xUynsjszPjhAdal5ysAlCG5HNO+5YXxeiu92qYGQolw=="
},
"node_modules/bulma-toast": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-2.4.1.tgz",
@ -15942,6 +15948,11 @@
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
"integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
},
"bulma-switch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.4.tgz",
"integrity": "sha512-kMu4H0Pr0VjvfsnT6viRDCgptUq0Rvy7y7PX6q+IHg1xUynsjszPjhAdal5ysAlCG5HNO+5YXxeiu92qYGQolw=="
},
"bulma-toast": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/bulma-toast/-/bulma-toast-2.4.1.tgz",

View File

@ -26,6 +26,7 @@
"dependencies": {
"animate.css": "^4.1.1",
"bulma": "^0.9.4",
"bulma-switch": "^2.0.4",
"bulma-toast": "^2.4.1"
}
}

View File

@ -21,7 +21,6 @@ export default {
},
mounted() {
Event.$on('sync-aprobacion', (unSubpedido) => {
console.log(unSubpedido);
if (this.pedido.id === unSubpedido.id) {
this.pedido = unSubpedido
}

View File

@ -1,10 +1,8 @@
<template>
<button class="button" :class="pedido.aprobado ? 'is-danger' : 'is-success'" @click="toggleAprobacion">
<span class="icon is-small">
<i class="fas" :class="pedido.aprobado ? 'fa-times' : 'fa-check'"></i>
</span>
<span>{{ mensaje }}</span>
</button>
<div class="field">
<input :id="'switch'+this.pedido.id" type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success" :checked="pedido.aprobado" @change="toggleAprobacion">
<label :for="'switch'+this.pedido.id"><span class="is-hidden-mobile">{{ mensaje }}</span></label>
</div>
</template>
<script>
@ -18,7 +16,7 @@ export default {
},
computed: {
mensaje: function () {
return this.pedido.aprobado ? "Desaprobar" : "Aprobar"
return this.pedido.aprobado ? "Aprobado" : "No aprobado"
}
},
methods: {

View File

@ -17,7 +17,7 @@
<div v-if="subpedidosExistentes.length" class="block">
<label class="label">Si ya comenzaste a hacer tu pedido este mes, elegilo en esta lista:</label>
<p class="help">Podés seguir escribiendo en el campo de arriba para refinar la búsqueda.</p>
<div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes" :class="{'has-background-grey-lighter': index % 2}">
<div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes" :class="{'has-background-grey-lighter': index % 2}" :key="index">
<div class="column is-half-mobile is-two-thirds-desktop is-two-thirds-tablet">
<p style="padding-top: calc(.5em - 1px); margin-bottom: .5rem" v-text="subpedidoExistente.nombre"></p>
</div>

View File

@ -23,7 +23,7 @@
<tr>
<th>Núcleo</th>
<th><abbr title="Total a Pagar">Total $</abbr></th>
<th><abbr title="Aprobacion">Aprobación</abbr></th>
<th class="is-1"><abbr title="Aprobacion">Aprobación</abbr></th>
</tr>
</thead>
<tfoot>
@ -52,7 +52,7 @@ export default {
components: {SubpedidoRow},
data() {
return {
gdc: null,
gdc: 0,
subpedidos: []
}
},
@ -89,6 +89,6 @@ export default {
}
</script>
<style scoped>
<style>
</style>

View File

@ -4,6 +4,9 @@
// Variables
@import 'variables';
@import 'bulma';
@import '~bulma-switch';
main.has-top-padding {
padding-top: 4.5rem !important;
}
@ -33,4 +36,28 @@ main.chisma-abierta {
.container {
max-height: 100% !important;
}
/*
Author: Aseem Lalfakawma <alalfakawma.github.io>
This SCSS mixin will allow sizing of table columns in Bulma CSS Framework.
The Bulma framework does not support this yet, this small code snippet fixes this.
USAGE:
* Should be applied on TH element, it controls all the columns under it *
The class should be "is-#",
is-1 will give the first widthamount, is-2 will give the second.
Eg. The code below shows the widthAmounts as (1, 2.5, 3, 4 , 5, 6, 7)
When typing <th class="is-2">, the width will be 2.5em, as the second value in widthAmounts array is 2.5
*/
$widthAmounts: (15); // Just add the numbers here, you can use points too.
$widthUnit: "em"; // Add the unit here (rem|em|px|%)
@each $width in $widthAmounts {
$i: index($widthAmounts, $width);
@media only screen and (min-width: 768px) {
.table thead th.is-#{$i} {
width: #{$width}#{$widthUnit} !important;
}
}
}

View File

@ -12,7 +12,6 @@
<!-- Fonts -->
<script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@yield('stylesheets')