Skip to content

Commit

Permalink
chore(deps): update dependency bootstrap to v5 (#723)
Browse files Browse the repository at this point in the history 
* chore(deps): update dependency bootstrap to v5

* chore(deps): update dependency bootstrap to v5

* removed enable-print-styles variable

* renamed .no-gutters to .g-0 to match new gutter utilities

* replace data- attributes with data-bs-

* renamed custom bootstrap classes in forms

* removed input-group-prepend wrapper as it is no longer needed

* fixed input-group border-radius and replaced misplaced input-group classnames

* re-added -bs- to the modal toggle button

* reverted link behaviour back to underline only on hover

* fixed price-list table borders

* fixed .form-group layout removal

* set display property for form-text

* removed bootstrap-vue and vue-simple-spinner dependencies and fixed modal close buttons

* renamed all left and right classes to start and end

* fixed the blockquote on the front page

* fixed full-width buttons

* fixed dropdown alignments

* fixed navbar padding

* fixed font-weight renaming

* do not send request to server if mutation in orderscreen is not valid

* revert of accidentally renaming css in the mailer template

* some minor adjustments and fixing invoice view

* renamed tomato to sofia

* fixed canceling name change of activity and some minor inconsistencies

* other half of the last commit that I forgot to save, oops

* hopefully fixed a linting issue

* added ability to click outside of sumup error modal to close it

* fixed user page sorting

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Ellen-Wittingen <[email protected]>
  • Loading branch information
@renovate @Ellen-Wittingen
renovate[bot] and Ellen-Wittingen authored Feb 8, 2023
1 parent 398b48a commit a19324f
Show file tree
Hide file tree
Showing 55 changed files with 1,211 additions and 885 deletions.
1 change: 1 addition & 0 deletions app/assets/javascripts/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,5 @@ document.addEventListener( 'turbolinks:load', function() {
duration: '0.15s',
});
});

/* eslint-enable no-undef */
25 changes: 19 additions & 6 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import 'theme_tomato';
@import 'theme_sofia';
@import 'bootstrap';
@import 'font-awesome';

Expand All @@ -11,6 +11,16 @@ body {
min-height: 100vh;
}

// Only underline links on hover
a {
text-decoration: none;

&:hover {
text-decoration: underline;
}
}


// ANIMATIONS
.slide-fade-enter-active,
.slide-fade-leave-active {
Expand All @@ -35,7 +45,7 @@ body {
}
}

.order-history--details-expand {
.order-history-details-expand {
color: $gray-500;

&:hover {
Expand All @@ -53,13 +63,16 @@ body {
width: 150px;
}

.b-table-details--header {
.table-group-divider {
border-top-color: $gray-300;
}

.table-details-header {
background-color: $gray-200;
text-transform: uppercase;
}

.b-table-details--item {
.order-history--item-edit {
.table-details-item {
.order-history-item-edit {
color: $gray-700;
}
}
Expand Down
15 changes: 5 additions & 10 deletions app/assets/stylesheets/order_screen.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import 'theme_tomato';
@import 'theme_sofia';
@import 'bootstrap';

.order-screen {
Expand Down Expand Up @@ -51,9 +51,10 @@

.header-nav-home {
a {
nav-link {
i {
padding: 0;
color: $font-color-dark;
padding-left: 1rem;
color: $gray-600;
}
}
}
Expand Down Expand Up @@ -121,7 +122,7 @@

z-index: 4;

border-right: 1px solid $gray-600;
border-right: 2px solid $gray-400;
box-shadow: 2px 0 4px -2px $transparent-200;
background-color: $gray-200;
color: $font-color-dark;
Expand Down Expand Up @@ -292,12 +293,6 @@
}
}

.product-grid-product-requires-age {
top: -50px;
flex-basis: 0;
align-self: right;
}

.product-grid-product-name {
text-align: center;
color: $font-color-dark;
Expand Down
23 changes: 12 additions & 11 deletions app/assets/stylesheets/price_lists.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
@import 'theme_tomato';
@import 'theme_sofia';

.center-text {
margin: 0 auto;
text-align: center;
}

th {
&.products-id,
&.products-alcohol {
&.products-id {
width: 1.75rem;
}

Expand All @@ -16,6 +15,16 @@ th {
}
}

.price_lists_table {
tr {
&:last-child {
td {
border-bottom-width: 0;
}
}
}
}

td {
&.products-new-edit-button {
padding: .5rem 1rem;
Expand Down Expand Up @@ -49,11 +58,3 @@ td {
vertical-align: middle;
}
}

.products-product {
&:hover { // sass-lint:disable-line force-element-nesting
.edit-product-row i { // sass-lint:disable-line force-element-nesting
color: $font-color-dark;
}
}
}
9 changes: 2 additions & 7 deletions app/assets/stylesheets/theme_tomato.scss → app/assets/stylesheets/theme_sofia.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ $gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
Expand All @@ -20,10 +20,6 @@ $transparent-800: rgba(0, 0, 0, .8);
// Typography
$font-family-sans-serif: Roboto, 'Helvetica Neue', Arial, sans-serif;

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 500;

$font-size-base: .93rem;
$font-size-xl: ($font-size-base * 2);

Expand All @@ -36,7 +32,6 @@ $alpha-primary: #ff0;
// Basic layout
$body-bg: $gray-100;
$body-color: $font-color-dark;
$enable-print-styles: false;

// Custom stuff
.table-header-rotated {
Expand All @@ -54,7 +49,7 @@ $enable-print-styles: false;
}
}

.tomato-header {
.sofia-header {
margin-bottom: .5rem;
line-height: 1.2;
color: inherit;
Expand Down
4 changes: 2 additions & 2 deletions app/javascript/components/FlashNotification.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="flash-text">
<i :class="activeNotification.iconObject"/>

<span class="font-weight-light" :class="{'mr-4': activeNotification.actionText}">
<span class="fw-light" :class="{'me-4': activeNotification.actionText}">
{{activeNotification.message}}
</span>

Expand Down Expand Up @@ -45,7 +45,7 @@ export default {
icons: {
type: Object,
default: () => ({
base: 'fa fa-lg mr-2',
base: 'fa fa-lg me-2',
error: 'fa-exclamation-circle',
success: 'fa-check-circle',
info: 'fa-info-circle',
Expand Down
48 changes: 24 additions & 24 deletions app/javascript/components/ProductTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
<template lang="html">
<b-container>
<b-row class="b-table-details--header px-2 py-1 mb-2">
<b-col sm="5">product</b-col>
<b-col sm="2" class="text-right">aantal</b-col>
<b-col sm="3" class="text-right">prijs per stuk</b-col>
<b-col sm="2" class="text-right pr-3">
<span :class="editable ? 'pr-3' : ''">totaal</span>
</b-col>
</b-row>
<b-row v-for="orderRow in order.order_rows" class="b-table-details--item px-2" :key="orderRow.id">
<b-col sm="5" >
<div class="container">
<div class="row table-details-header text-uppercase px-2 py-1 mb-2">
<div class="col-sm-5 fw-normal">product</div>
<div class="col-sm-2 fw-normal text-end">aantal</div>
<div class="col-sm-3 fw-normal text-end">prijs per stuk</div>
<div class="col-sm-2 fw-normal text-end">
<span :class="editable ? 'pe-3' : ''">totaal</span>
</div>
</div>
<div v-for="orderRow in order.order_rows" class="row table-details-item px-2" :key="orderRow.id">
<div class="col-sm-5 ps-3" >
{{orderRow.product.name}}
<div v-if="orderRowErrors[orderRow.id]">
<small class="text-danger"><em>{{orderRowErrors[orderRow.id]}}</em></small>
</div>
</b-col>
<b-col sm="2" class="text-right">
</div>
<div class="col-sm-2 text-end">
<template v-if="editable && orderRow.editing">
<i @click="increaseProductCount(orderRow)"
class="fa fa-plus-square-o order-history--item-count"></i>
class="fa fa-plus-square-o order-history-item-count"></i>
<span class="px-2">{{orderRow.product_count}}</span>
<i @click="decreaseProductCount(orderRow)"
class="fa fa-minus-square-o order-history--item-count"></i>
class="fa fa-minus-square-o order-history-item-count"></i>
</template>
<template v-else>
{{orderRow.product_count}}
</template>
</b-col>
<b-col sm="3" class="text-right">
</div>
<div class="col-sm-3 text-end">
{{doubleToCurrency(orderRow.price_per_product)}}
</b-col>
<b-col sm="2" :class="['text-right', editable ? 'pr-1' : 'pr-3']">
</div>
<div :class="['col-sm-2 text-end', editable ? 'pe-1' : 'pe-3']">
{{doubleToCurrency(orderRow.product_count * orderRow.price_per_product)}}
<template v-if="editable">
<i v-if="orderRow.editing" @click="saveOrderRow(orderRow)" class="order-history--item-save fa fa-save pl-3"></i>
<i v-else @click="editOrderRow(orderRow)" class="order-history--item-edit fa fa-pencil pl-3"></i>
<i v-if="orderRow.editing" @click="saveOrderRow(orderRow)" class="fa fa-save ps-3"></i>
<i v-else @click="editOrderRow(orderRow)" class="order-history-item-edit fa fa-pencil ps-3"></i>
</template>
</b-col>
</b-row>
</b-container>
</div>
</div>
</div>
</template>

<script>
Expand Down
4 changes: 2 additions & 2 deletions app/javascript/components/UserInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template lang="html">
<div class="user-input position-relative">
<input type="text" class="d-none" :name="name" :value="selectedSuggestion.id">
<input type="text" class="form-control" v-model="query" placeholder="Begin met typen..."
<input type="text" class="form-control bg-white" v-model="query" placeholder="Begin met typen..."
@input="updateValue"
@keydown.enter="selectFirstSuggestion"
aria-haspopup="true" v-bind:aria-expanded="dropdownOpened"
required="true" autocomplete="off">

<div class="row">
<div class="row g-0">
<ul class="dropdown-menu" v-bind:class="{'show':dropdownOpened}">
<li class="dropdown-item" v-for="(suggestion, index) in suggestions" :key="suggestion.id"
v-on:click.prevent="suggestionClicked(index)">
Expand Down
31 changes: 22 additions & 9 deletions app/javascript/components/activity/ProductTotals.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,48 @@
<div class="product-totals">
<user-input class="mb-3" v-model="user" :include-pin="true" :include-cash="true"></user-input>

<spinner class="pb-3 m-auto" size="large" v-if="isLoading" />
<div class="pb-3" v-if="isLoading">
<div class="spinner-border text-primary d-block m-auto" style="width: 2.5rem; height: 2.5rem;" role="status">
<span class="visually-hidden">Laden...</span>
</div>
</div>

<div class="table-responsive" v-else>
<table class="table table-sm" v-if="orderTotals.length > 0">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Aantal keer besteld</th>
<th class="text-right" scope="col">Totaalbedrag</th>
<th class="text-end" scope="col">Totaalbedrag</th>
</tr>
</thead>
<tbody>
<tbody class="table-group-divider">
<tr v-for="orderTotal in orderTotals" :key="orderTotal.name">
<td>{{orderTotal.name}}</td>
<td>{{orderTotal.amount}} x</td>
<td class="text-right">{{doubleToCurrency(orderTotal.price)}}</td>
<td class="text-end">{{doubleToCurrency(orderTotal.price)}}</td>
</tr>
</tbody>
</table>
<table v-else class="table table-striped">
<tbody>
<tr>
<td class="text-center" colspan="4">
<p class="my-1">
<em>
Er zijn nog geen producten verkocht
</em>
</p>
</td>
</tr>
</tbody>
</table>
<div v-else>
Er zijn geen producten verkocht
</div>
</div>
</div>
</template>

<script>
import UserInput from '../UserInput.vue';
import Spinner from 'vue-simple-spinner';
export default {
props: {
Expand Down Expand Up @@ -72,7 +86,6 @@ export default {
},
components: {
Spinner,
UserInput
}
};
Expand Down
Loading

0 comments on commit a19324f

Please sign in to comment.