Cambio de boton a switch y estilos
This commit is contained in:
parent
5c134989d2
commit
155a86975c
|
@ -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",
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
"dependencies": {
|
||||
"animate.css": "^4.1.1",
|
||||
"bulma": "^0.9.4",
|
||||
"bulma-switch": "^2.0.4",
|
||||
"bulma-toast": "^2.4.1"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,7 +21,6 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
Event.$on('sync-aprobacion', (unSubpedido) => {
|
||||
console.log(unSubpedido);
|
||||
if (this.pedido.id === unSubpedido.id) {
|
||||
this.pedido = unSubpedido
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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')
|
||||
|
||||
|
|
Loading…
Reference in New Issue