ncue/dreamgirl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make layout full-width responsive

Browse Source
This commit is contained in:
dsyoon
2025-12-27 15:41:17 +09:00
parent 9dbf273304
commit a9d35c63a5
3 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/basic.css
View File

@@ -39,7 +39,8 @@ pre {
overflow-x: auto; overflow-x: auto;
} }
div#page { div#page {
width: 900px; /* Full-width, responsive container */
width: min(100vw, 1600px);
background-color: #fff; background-color: #fff;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;

49
css/galleriffic-2.css
View File

@@ -1,8 +1,9 @@
div.content { div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */ /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none; display: none;
float: right; float: none;
width: 550px; flex: 1 1 auto;
min-width: 0;
} }
div.content a, div.navigation a { div.content a, div.navigation a {
text-decoration: none; text-decoration: none;
@@ -27,7 +28,8 @@ div.nav-controls {
div.slideshow-container { div.slideshow-container {
position: relative; position: relative;
clear: both; clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ height: 70vh; /* responsive */
min-height: 420px;
} }
div.loader { div.loader {
position: absolute; position: absolute;
@@ -36,8 +38,8 @@ div.loader {
background-image: url('loader.gif'); background-image: url('loader.gif');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
width: 550px; width: 100%;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ height: 100%;
} }
div.slideshow { div.slideshow {
@@ -50,9 +52,9 @@ div.slideshow span.image-wrapper {
} }
div.slideshow a.advance-link { div.slideshow a.advance-link {
display: block; display: block;
width: 550px; width: 100%;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ height: 100%;
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */ line-height: 1;
text-align: center; text-align: center;
} }
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
@@ -61,10 +63,9 @@ div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.sli
div.slideshow img { div.slideshow img {
vertical-align: middle; vertical-align: middle;
border: 1px solid #ccc; border: 1px solid #ccc;
min-height: 510px; max-width: 100%;
min-height: 510px; max-height: 100%;
max-width: 520px; height: auto;
max-height: 520px;
} }
div.download { div.download {
float: right; float: right;
@@ -77,7 +78,7 @@ div.caption-container {
span.image-caption { span.image-caption {
display: block; display: block;
position: absolute; position: absolute;
width: 550px; width: 100%;
top: 0; top: 0;
left: 0; left: 0;
} }
@@ -95,6 +96,28 @@ div.image-desc {
div.navigation { div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
} }
/* ---- Layout: thumbs (left) + slideshow (right), full width ---- */
div#gallery {
display: flex;
gap: 20px;
align-items: flex-start;
}
div#thumbs.navigation {
flex: 0 0 360px;
max-width: 40vw;
}
@media (max-width: 900px) {
div#gallery {
flex-direction: column;
}
div#thumbs.navigation {
flex: 1 1 auto;
max-width: none;
}
}
ul.thumbs { ul.thumbs {
clear: both; clear: both;
margin: 0; margin: 0;

3
js/bestpic.js
View File

@@ -29,7 +29,8 @@ function onLoad() {
function initGallery() { function initGallery() {
// We only want these styles applied when javascript is enabled // We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'}); // Layout is now handled by CSS (flex). Keep JS from forcing a fixed width.
$('div.navigation').css({'width' : '', 'float' : ''});
$('div.content').css('display', 'block'); $('div.content').css('display', 'block');
// Initially set opacity on thumbs and add additional styling for hover effect on thumbs // Initially set opacity on thumbs and add additional styling for hover effect on thumbs