j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2026-09-06 02:27:17 +02:00
parent 7135fce421
commit 44f5666417
4 changed files with 40 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/scss/_breakpoints.scss Normal file
View file

@ -0,0 +1,24 @@
// Single source of truth for the grid breakpoints, shared between toolshed.scss
// (which feeds them into Bootstrap's own grid/container generation) and any
// component's <style lang="scss"> block that needs a matching media query
// via media-breakpoint-up()/-down()/-between() (see mixins/_breakpoints.scss).
//
// Bootstrap 4 stops at xl; xxl is faked here for grid sizing until the
// Bootstrap 5 upgrade brings a real one.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 3000px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 2960px
);
@import "bootstrap/scss/mixins/breakpoints";

2
frontend/src/scss/toolshed.scss
View file

@ -27,6 +27,8 @@ $h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base;
@import "breakpoints";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

18
frontend/src/views/Inventory.vue
View file

@ -121,7 +121,7 @@
</div>
<div class="card-body" v-else>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="item in items"
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 d-flex" v-for="item in items"
:key="item.id">
<div class="card w-100 d-flex flex-column">
<authenticated-image v-if="only_images(item.files).length > 0"
@ -299,7 +299,9 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
@import "../scss/breakpoints";
.img-preview-grid {
height: 160px;
object-fit: cover;
@ -325,24 +327,30 @@ export default {
margin-bottom: 1rem;
}
@media (min-width: 768px) {
@include media-breakpoint-up(md) {
.masonry-grid {
column-count: 3;
}
}
@media (min-width: 992px) {
@include media-breakpoint-up(lg) {
.masonry-grid {
column-count: 4;
}
}
@media (min-width: 1200px) {
@include media-breakpoint-up(xl) {
.masonry-grid {
column-count: 6;
}
}
@include media-breakpoint-up(xxl) {
.masonry-grid {
column-count: 12;
}
}
.unguarded.btn-danger,
.unguarded.btn-danger:hover,
.unguarded.btn-danger:focus {

2
frontend/src/views/StorageLocation.vue
View file

@ -112,7 +112,7 @@
</div>
<div class="card-body" v-else>
<div class="row">
<div class="col-12 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="location in locations"
<div class="col-12 col-md-4 col-lg-3 col-xl-2 col-xxl-1 d-flex" v-for="location in locations"
:key="location.id">
<div class="card w-100 d-flex flex-column">
<div class="card-body d-flex flex-column flex-grow-1">