Skip to content

Commit

Permalink
gallery and index update to match styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@schoad
schoad committed Jan 16, 2025
1 parent 199fb0a commit bef8213
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 123 deletions.
154 changes: 50 additions & 104 deletions gallery.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
/* Gallery-specific styles */

/* Base container adjustments */
.gallery {
background-color: black;
padding-top: max(60px, env(safe-area-inset-top));
Expand All @@ -13,85 +11,10 @@
overflow: auto;
}

/* Header bar optimizations */
.header-bar {
position: fixed;
top: max(20px, env(safe-area-inset-top));
left: 0;
width: 100%;
padding: 0;
background: transparent;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
gap: 130px; /* Add space between elements */
}

/* Style for COSMOS text to match back button */
.header-bar p {
margin: 0;
background-color: #E7B5A6;
padding: 12px 24px; /* Match back button padding */
border-radius: 8px; /* Match back button border-radius */
height: 44px;
min-height: unset;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box; /* Include padding in height calculation */
}

/* Back button mobile optimizations */
.back-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background-color: #E7B5A6;
padding: 12px 24px;
min-height: 44px;
border-radius: 8px;
}

/* Gallery grid mobile optimizations */
.nft-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Default to 3 columns on mobile */
gap: 20px;
overflow-y: auto;
padding: 20px;
margin-bottom: max(20px, env(safe-area-inset-bottom));
height: auto;
max-height: calc(100vh - 160px);
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.nft-gallery::-webkit-scrollbar {
display: none;
}

/* Improved touch targets for gallery items */
.nft-gallery img {
width: 100%;
aspect-ratio:initial;
object-fit: cover;
display: block; /* Remove any inline spacing */
cursor: pointer;
border-radius: 8px;
touch-action: manipulation; /* Optimize for touch */
/* min-height: 44px; */
}

.nft-gallery img:hover {
transform: scale(1.05);
}

/* Toggle switch container */
.toggle-switch {
margin: 0; /* Remove margin */
width: 60px;
height: 34px;
width: 46px;
height: 28px;
position: relative;
display: flex;
align-items: center;
Expand All @@ -104,36 +27,71 @@
.slider {
position: absolute;
cursor: pointer;
top: 5px; /* Center vertically */
top: 0;
left: 0;
right: 0;
height: 34px; /* Reduce height to match design */
background-color: #E7B5A6;
bottom: 0;
background-color: transparent;
border: 2px solid white;
transition: .4s;
border-radius: 34px;
min-height: unset; /* Remove min-height */
border-radius: 28px;
height: 28px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px; /* Center the circle vertically */
height: 20px;
width: 20px;
left: 2px;
top: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #D83F31;
border-color: #D83F31;
}

input:checked + .slider:before {
transform: translateX(26px);
transform: translateX(18px);
}

/* Gallery grid styling */
.nft-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
overflow-y: auto;
padding: 20px;
margin-bottom: max(20px, env(safe-area-inset-bottom));
height: auto;
max-height: calc(100vh - 160px);
-webkit-overflow-scrolling: touch;
}

.nft-gallery::-webkit-scrollbar {
display: none;
}

/* Gallery items */
.nft-gallery img {
width: 100%;
aspect-ratio: initial;
object-fit: cover;
display: block;
cursor: pointer;
border-radius: 8px;
touch-action: manipulation;
}

.nft-gallery img:hover {
transform: scale(1.05);
}

/* Full screen image view */
.full-screen-image {
display: none;
position: fixed;
Expand All @@ -157,14 +115,10 @@ input:checked + .slider:before {
@media (max-width: 390px) {
/* iPhone 15 and similar */
.nft-gallery {
grid-template-columns: 3fr; /* Single column for smaller devices */
grid-template-columns: 3fr;
gap: 16px;
padding: 0 12px;
}

.header-bar {
font-size: 0.9em; /* Slightly smaller text for compact screens */
}
}

@media (min-width: 391px) and (max-width: 428px) {
Expand All @@ -178,7 +132,7 @@ input:checked + .slider:before {
/* Portrait orientation optimizations */
@media (orientation: portrait) {
.nft-gallery {
height: calc(100dvh - 180px); /* More space for header/footer in portrait */
height: calc(100dvh - 180px);
}
}

Expand All @@ -189,11 +143,3 @@ input:checked + .slider:before {
height: calc(100dvh - 120px);
}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
.header-bar {
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
}
}
12 changes: 8 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
</head>
<body>
<div class="container">
<div class="auction-time">
<!-- Updated header class to match gallery page -->
<div class="header-bar">
<div class="week-selector">
<select id="weekSelect">
<!-- Changed value attributes to strings for consistency with gallery.html -->
Expand All @@ -24,9 +25,10 @@
<option value="7">Week - 7</option> -->
</select>
</div>
<p>COSMOS Auctions</p>
<p>COSMOS</p>
<p><span id="timeRemaining"></span></p>
</div>
<!-- Added margin-top to account for fixed header -->
<div id="bidsContainer">
<table id="bidsTable">
<thead>
Expand All @@ -53,8 +55,10 @@
<p>No auctions have started for this period.</p>
</div>
</div>
<button class="connect-wallet-btn" id="connectWalletBtn">Connect</button>
<button class="gallery-btn" id="galleryBtn" onclick="location.href='gallery.html'">Gallery</button>
<div class="button-container">
<button class="connect-wallet-btn" id="connectWalletBtn">Connect</button>
<button class="gallery-btn" id="galleryBtn" onclick="location.href='gallery.html'">Gallery</button>
</div>
</div>
</body>
</html>
73 changes: 58 additions & 15 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,42 @@ th {
}

.auction-time, .header-bar {
font-size: 1.2em; /* Standardize font size */
text-align: center;
position: fixed;
top: max(20px, env(safe-area-inset-top));
left: 50%;
transform: translateX(-50%);
width: calc(100% - 40px);
max-width: 600px;
background-color: #E7B5A6;
color: white;
border-radius: 5px;
padding: 5px 10px; /* Standardize padding */
margin-bottom: 10px; /* Standardize margin */
height: 40px; /* Fixed height for consistency */
padding: 8px 20px;
border-radius: 8px;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}

.gallery-btn, .back-btn {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background-color: #E7B5A6;
padding: 12px 24px;
height: 44px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between; /* Space elements across the bar */
justify-content: center;
box-sizing: border-box;
margin: 0; /* Override default button margin */
transition: background-color 0.3s;
}

.gallery-btn:hover, .back-btn:hover {
background-color: #D8A495;
}

.header-bar p {
Expand Down Expand Up @@ -122,15 +147,15 @@ button:hover {
}

.week-selector select {
padding: 12px 24px;
background-color: #E7B5A6;
background-color: transparent;
color: white;
border: none;
border-radius: 8px;
font-size: 1em;
border: 2px solid white;
border-radius: 6px;
font-size: 0.9em;
appearance: none;
height: 44px; /* Match exact height */
box-sizing: border-box;
padding: 4px 12px;
height: 28px;
cursor: pointer;
}

.week-selector select::after {
Expand All @@ -154,6 +179,24 @@ button:hover {
background-color: #D8A495;
}

.container > div:first-of-type:not(.auction-time),
.nft-gallery {
margin-top: 84px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
.auction-time, .header-bar {
width: calc(100% - 24px);
padding: 8px 12px;
}

.gallery-btn, .back-btn {
padding: 8px 16px;
height: 36px;
}
}

@media (max-width: 600px) {
.container, .gallery {
padding: 5px;
Expand Down

0 comments on commit bef8213

Please sign in to comment.