chris/bpb-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

center and fit modal

Browse Source
This commit is contained in:
chris 2025-02-20 21:11:43 -05:00
parent a2549ff7db
commit f6141b0047
9 changed files with 343 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/pics/gallery/centerpiece/20230108_112718.jpg}.txt
View File

@ -1 +1 @@
Cocktail Arrangements

112
gallery/centerpiece/index.html
View File

@ -56,16 +56,25 @@
}
.modal-image {
max-width: 90vw;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
@ -77,8 +86,18 @@
background-color: transparent !important;
}
.modal-card-body{
overflow: clip !important;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>
@ -120,19 +139,19 @@
<div class="gallery">
<div class="gallery-item">
<figure class="image is-square">
<img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="" data-target="modal1" aria-haspopup="true">
<img loading=lazy src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements" data-target="modal1" aria-haspopup="true">
</figure>
<p class="caption"></p>
<p class="caption">Cocktail Arrangements</p>
</div>
<div class="modal" id="modal1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title has-size-4"></p>
<p class="modal-card-title has-size-4">Cocktail Arrangements</p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
<img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="">
<img class="modal-image" src="../../assets/pics/gallery/centerpiece/20230108_112718.jpg}.webp" alt="Cocktail Arrangements">
</section>
</div>
</div>
@ -141,40 +160,43 @@
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
}
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
document.body.classList.add('modal-open'); // Prevent background scroll
}
function closeModal(modal) {
modal.classList.remove('is-active');
}
function closeModal(modal) {
modal.classList.remove('is-active');
document.body.classList.remove('modal-open'); // Allow scrolling again
}
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
});
</script>
<footer class="footer has-background-primary-light">
<div class="content has-text-centered">

104
gallery/centerpiece/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
}
.modal-image {
max-width: 90vw;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important;
}
.modal-card-body{
overflow: clip !important;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>
@ -178,40 +197,43 @@ cat >> "$OUTPUT_FILE" <<EOL
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
}
document.addEventListener('DOMContentLoaded', () => {
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('is-active');
document.body.classList.add('modal-open'); // Prevent background scroll
}
function closeModal(modal) {
modal.classList.remove('is-active');
}
function closeModal(modal) {
modal.classList.remove('is-active');
document.body.classList.remove('modal-open'); // Allow scrolling again
}
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
const targetModal = image.dataset.target;
openModal(targetModal);
});
});
const closeButtons = document.querySelectorAll('.modal .delete[data-action="close"]');
closeButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal');
closeModal(modal);
});
});
const modalBackgrounds = document.querySelectorAll('.modal-background');
modalBackgrounds.forEach(background => {
background.addEventListener('click', () => {
const modal = background.closest('.modal');
closeModal(modal);
});
});
});
</script>
<footer class="footer has-background-primary-light">
<div class="content has-text-centered">

52
gallery/classic/index.html
View File

@ -18,7 +18,7 @@
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.gallery {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
@ -50,16 +50,33 @@
font-family: 'Autour One', cursive;
}
.modal-image {
max-width: 90%;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: auto;
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
@ -68,6 +85,19 @@
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>
@ -109,7 +139,7 @@
<div class="gallery">
<div class="gallery-item">
<figure class="image is-square">
<img src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
<img loading=lazy src="../../assets/pics/gallery/classic/20230617_131551.webp" alt="20' Classic Arch" data-target="modal1" aria-haspopup="true">
</figure>
<p class="caption">20' Classic Arch</p>
</div>
@ -127,7 +157,7 @@
</div>
<div class="gallery-item">
<figure class="image is-square">
<img src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
<img loading=lazy src="../../assets/pics/gallery/classic/_Photos_20241207_083534.webp" alt="Classic Columns" data-target="modal2" aria-haspopup="true">
</figure>
<p class="caption">Classic Columns</p>
</div>

39
gallery/classic/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
}
.modal-image {
max-width: 90vw;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important;
}
.modal-card-body{
overflow: clip !important;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>

56
gallery/organic/index.html
View File

@ -18,7 +18,7 @@
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.gallery {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
@ -50,16 +50,33 @@
font-family: 'Autour One', cursive;
}
.modal-image {
max-width: 90%;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: auto;
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
@ -68,6 +85,19 @@
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>
@ -110,7 +140,7 @@
<div class="gallery">
<div class="gallery-item">
<figure class="image is-square">
<img src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
<img loading=lazy src="../../assets/pics/gallery/organic/20241121_200047~2.jpg" alt="" data-target="modal1" aria-haspopup="true">
</figure>
<p class="caption"></p>
</div>
@ -118,7 +148,7 @@
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title"></p>
<p class="modal-card-title has-size-4"></p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">
@ -128,7 +158,7 @@
</div>
<div class="gallery-item">
<figure class="image is-square">
<img src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
<img loading=lazy src="../../assets/pics/gallery/organic/20250202_133930~2.jpg" alt="" data-target="modal2" aria-haspopup="true">
</figure>
<p class="caption"></p>
</div>
@ -136,7 +166,7 @@
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title"></p>
<p class="modal-card-title has-size-4"></p>
<button class="delete" aria-label="close" data-action="close"></button>
</header>
<section class="modal-card-body">

41
gallery/organic/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
}
.modal-image {
max-width: 90vw;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important;
}
.modal-card-body{
overflow: clip !important;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>
@ -160,7 +179,7 @@ for img in "$IMAGE_DIR"/*.{jpg,jpeg,png,gif,webp}; do
printf " <div class=\"modal-background\"></div>\n" >> "$OUTPUT_FILE"
printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
printf " <header class=\"modal-card-head\">\n" >> "$OUTPUT_FILE"
printf " <p class=\"modal-card-title\ has-size-4">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
printf " <p class=\"modal-card-title has-size-4\">%s</p>\n" "$caption" >> "$OUTPUT_FILE"
printf " <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
printf " </header>\n" >> "$OUTPUT_FILE"
printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"

48
gallery/sculpture/index.html
View File

@ -18,7 +18,7 @@
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.gallery {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
@ -50,16 +50,33 @@
font-family: 'Autour One', cursive;
}
.modal-image {
max-width: 90%;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
}
.modal{
--bulma-modal-content-width: 95vw;
--bulma-modal-content-height: 95vh;
}
.modal-image {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: auto;
overflow-y: none;
max-height: 95vh;
background-color: transparent !important;
}
@ -68,6 +85,19 @@
font-family: 'Autour One', cursive;
background-color: transparent !important;
}
.modal-card-body{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>

41
gallery/sculpture/updateGallery.sh
View File

@ -33,7 +33,7 @@ cat > "$OUTPUT_FILE" <<EOL
<link rel="stylesheet" href="../../style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.gallery {
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
}
.modal-image {
max-width: 90vw;
max-height: 90vh;
display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block;
}
.modal-card {
width: auto;
max-width: 90vw; /* Ensures the modal is responsive */
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent; /* Keeps the background consistent */
overflow: hidden;
}
.modal-content {
overflow-y: none;
max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important;
}
.modal-card-body{
overflow: clip !important;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body.modal-open {
overflow: hidden;
}
.delete{
margin-left: 10px;}
</style>
</head>
<body>