chris/beachPartyBalloons
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

42
gallery/centerpiece/index.html
View File

@ -56,16 +56,25 @@
} }
.modal-image { .modal-image {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block; display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
} }
.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 { .modal-content {
overflow-y: none; overflow-y: none;
max-height: 95vh; max-height: 95vh;
@ -77,8 +86,18 @@
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{ .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> </style>
</head> </head>
<body> <body>
@ -120,19 +139,19 @@
<div class="gallery"> <div class="gallery">
<div class="gallery-item"> <div class="gallery-item">
<figure class="image is-square"> <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> </figure>
<p class="caption"></p> <p class="caption">Cocktail Arrangements</p>
</div> </div>
<div class="modal" id="modal1"> <div class="modal" id="modal1">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <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> <button class="delete" aria-label="close" data-action="close"></button>
</header> </header>
<section class="modal-card-body"> <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> </section>
</div> </div>
</div> </div>
@ -145,10 +164,12 @@
function openModal(modalId) { function openModal(modalId) {
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
modal.classList.add('is-active'); modal.classList.add('is-active');
document.body.classList.add('modal-open'); // Prevent background scroll
} }
function closeModal(modal) { function closeModal(modal) {
modal.classList.remove('is-active'); modal.classList.remove('is-active');
document.body.classList.remove('modal-open'); // Allow scrolling again
} }
const images = document.querySelectorAll('.gallery img'); const images = document.querySelectorAll('.gallery img');
@ -175,6 +196,7 @@
}); });
}); });
}); });
</script> </script>
<footer class="footer has-background-primary-light"> <footer class="footer has-background-primary-light">
<div class="content has-text-centered"> <div class="content has-text-centered">

34
gallery/centerpiece/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal-image { .modal-image {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block; display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
} }
.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 { .modal-content {
overflow-y: none; overflow-y: none;
max-height: 95vh; max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{ .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> </style>
</head> </head>
<body> <body>
@ -182,10 +201,12 @@ cat >> "$OUTPUT_FILE" <<EOL
function openModal(modalId) { function openModal(modalId) {
const modal = document.getElementById(modalId); const modal = document.getElementById(modalId);
modal.classList.add('is-active'); modal.classList.add('is-active');
document.body.classList.add('modal-open'); // Prevent background scroll
} }
function closeModal(modal) { function closeModal(modal) {
modal.classList.remove('is-active'); modal.classList.remove('is-active');
document.body.classList.remove('modal-open'); // Allow scrolling again
} }
const images = document.querySelectorAll('.gallery img'); const images = document.querySelectorAll('.gallery img');
@ -212,6 +233,7 @@ cat >> "$OUTPUT_FILE" <<EOL
}); });
}); });
}); });
</script> </script>
<footer class="footer has-background-primary-light"> <footer class="footer has-background-primary-light">
<div class="content has-text-centered"> <div class="content has-text-centered">

50
gallery/classic/index.html
View File

@ -50,16 +50,33 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal-image { .modal{
max-width: 90%; --bulma-modal-content-width: 95vw;
max-height: 90vh; --bulma-modal-content-height: 95vh;
display: block;
margin: 0 auto;
border-radius: 10px;
}
}
.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 { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -68,6 +85,19 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; 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> </style>
</head> </head>
<body> <body>
@ -109,7 +139,7 @@
<div class="gallery"> <div class="gallery">
<div class="gallery-item"> <div class="gallery-item">
<figure class="image is-square"> <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> </figure>
<p class="caption">20' Classic Arch</p> <p class="caption">20' Classic Arch</p>
</div> </div>
@ -127,7 +157,7 @@
</div> </div>
<div class="gallery-item"> <div class="gallery-item">
<figure class="image is-square"> <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> </figure>
<p class="caption">Classic Columns</p> <p class="caption">Classic Columns</p>
</div> </div>

31
gallery/classic/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal-image { .modal-image {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block; display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
} }
.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 { .modal-content {
overflow-y: none; overflow-y: none;
max-height: 95vh; max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{ .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> </style>
</head> </head>
<body> <body>

54
gallery/organic/index.html
View File

@ -50,16 +50,33 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal-image { .modal{
max-width: 90%; --bulma-modal-content-width: 95vw;
max-height: 90vh; --bulma-modal-content-height: 95vh;
display: block;
margin: 0 auto;
border-radius: 10px;
}
}
.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 { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -68,6 +85,19 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; 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> </style>
</head> </head>
<body> <body>
@ -110,7 +140,7 @@
<div class="gallery"> <div class="gallery">
<div class="gallery-item"> <div class="gallery-item">
<figure class="image is-square"> <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> </figure>
<p class="caption"></p> <p class="caption"></p>
</div> </div>
@ -118,7 +148,7 @@
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <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> <button class="delete" aria-label="close" data-action="close"></button>
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
@ -128,7 +158,7 @@
</div> </div>
<div class="gallery-item"> <div class="gallery-item">
<figure class="image is-square"> <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> </figure>
<p class="caption"></p> <p class="caption"></p>
</div> </div>
@ -136,7 +166,7 @@
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <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> <button class="delete" aria-label="close" data-action="close"></button>
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">

33
gallery/organic/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal-image { .modal-image {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block; display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
} }
.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 { .modal-content {
overflow-y: none; overflow-y: none;
max-height: 95vh; max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{ .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> </style>
</head> </head>
<body> <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-background\"></div>\n" >> "$OUTPUT_FILE"
printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE" printf " <div class=\"modal-card\">\n" >> "$OUTPUT_FILE"
printf " <header class=\"modal-card-head\">\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 " <button class=\"delete\" aria-label=\"close\" data-action=\"close\"></button>\n" >> "$OUTPUT_FILE"
printf " </header>\n" >> "$OUTPUT_FILE" printf " </header>\n" >> "$OUTPUT_FILE"
printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE" printf " <section class=\"modal-card-body\">\n" >> "$OUTPUT_FILE"

46
gallery/sculpture/index.html
View File

@ -50,16 +50,33 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
} }
.modal-image { .modal{
max-width: 90%; --bulma-modal-content-width: 95vw;
max-height: 90vh; --bulma-modal-content-height: 95vh;
display: block;
margin: 0 auto;
border-radius: 10px;
}
}
.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 { .modal-content {
overflow-y: auto; overflow-y: none;
max-height: 95vh; max-height: 95vh;
background-color: transparent !important; background-color: transparent !important;
} }
@ -68,6 +85,19 @@
font-family: 'Autour One', cursive; font-family: 'Autour One', cursive;
background-color: transparent !important; 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> </style>
</head> </head>
<body> <body>

31
gallery/sculpture/updateGallery.sh
View File

@ -71,16 +71,25 @@ cat > "$OUTPUT_FILE" <<EOL
} }
.modal-image { .modal-image {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
object-fit: contain; /* Ensures the whole image is visible without cropping */
display: block; display: block;
margin: 0 auto;
border-radius: 10px;
max-width: 90vw;
max-height: 90vh;
overflow: clip;
} }
.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 { .modal-content {
overflow-y: none; overflow-y: none;
max-height: 95vh; max-height: 95vh;
@ -92,8 +101,18 @@ cat > "$OUTPUT_FILE" <<EOL
background-color: transparent !important; background-color: transparent !important;
} }
.modal-card-body{ .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> </style>
</head> </head>
<body> <body>