Skip to content

Commit e1e8f98

Browse files
AdityaSingh-7AdityaSingh-7
committed
made changes in popup component
1 parent edf5a0a commit e1e8f98

File tree

1 file changed

+110
-121
lines changed

1 file changed

+110
-121
lines changed

‎src/components/Popup.astro‎

Lines changed: 110 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
---
2-
---
3-
4-
<div id="state-popup">
5-
<span class="close-popup">&times;</span>
6-
<div id="popup-state-name">State Name</div>
7-
<img id="popup-state-image" src="" alt="State Image">
8-
<div id="popup-state-info">State Information</div>
9-
<div id="pop-up-buttons">
10-
<button class="copy-button">Copy Info</button>
11-
<button id="see-more-button">See More</button>
1+
<!-- HTML Structure -->
2+
<div class="state-popup">
3+
<span class="state-popup__close">&times;</span>
4+
<div class="state-popup__name">State Name</div>
5+
<img class="state-popup__image" src="" alt="State Image">
6+
<div class="state-popup__info">State Information</div>
7+
<div class="state-popup__buttons">
8+
<button class="state-popup__button state-popup__button--copy">Copy Info</button>
9+
<button class="state-popup__button state-popup__button--more">See More</button>
1210
</div>
1311
</div>
1412

1513
<script>
16-
// Initialize DOM elements once
17-
const popup = document.getElementById('state-popup') as HTMLElement;
18-
const popupStateName = document.getElementById('popup-state-name') as HTMLElement;
19-
const popupStateInfo = document.getElementById('popup-state-info') as HTMLElement;
20-
const popupStateImage = document.getElementById('popup-state-image') as HTMLElement;
21-
const seeMoreButton = document.getElementById('see-more-button') as HTMLElement;
22-
const closePopup = document.querySelector('.close-popup') as HTMLElement;
23-
const copyButton = document.querySelector('.copy-button') as HTMLElement;
14+
// Initialize DOM elements using classes
15+
const popup = document.querySelector('.state-popup') as HTMLElement;
16+
const popupStateName = document.querySelector('.state-popup__name') as HTMLElement;
17+
const popupStateInfo = document.querySelector('.state-popup__info') as HTMLElement;
18+
const popupStateImage = document.querySelector('.state-popup__image') as HTMLElement;
19+
const seeMoreButton = document.querySelector('.state-popup__button--more') as HTMLElement;
20+
const closePopup = document.querySelector('.state-popup__close') as HTMLElement;
21+
const copyButton = document.querySelector('.state-popup__button--copy') as HTMLElement;
2422

2523
function showPopup(event: MouseEvent, stateInfo: any) {
2624
// Update popup content
@@ -29,11 +27,9 @@
2927
popupStateImage.src = `/map_assets/images/${stateInfo.image}`;
3028
popupStateImage.alt = `${stateInfo.name} state image`;
3129

32-
3330
const viewportWidth = window.innerWidth;
3431
const viewportHeight = window.innerHeight;
3532

36-
3733
popup.style.display = 'flex';
3834
const popupWidth = popup.offsetWidth;
3935
const popupHeight = popup.offsetHeight;
@@ -42,27 +38,23 @@
4238
const clickX = event.clientX;
4339
const clickY = event.clientY;
4440

45-
4641
let left = clickX;
4742
let top = clickY + 20;
4843

49-
5044
if (left + popupWidth > viewportWidth - 20) {
5145
left = viewportWidth - popupWidth - 20;
5246
}
5347
if (left < 20) {
5448
left = 20;
5549
}
5650

57-
5851
if (top + popupHeight > viewportHeight - 20) {
5952
top = clickY - popupHeight - 20;
6053
}
6154
if (top < 20) {
6255
top = 20;
6356
}
6457

65-
6658
popup.style.left = `${left}px`;
6759
popup.style.top = `${top}px`;
6860
popup.style.opacity = '1';
@@ -111,107 +103,104 @@
111103
</script>
112104

113105
<style>
114-
#state-popup {
115-
display: none;
116-
flex-direction: column;
117-
position: absolute;
118-
background-color: #fff;
119-
padding: 20px;
120-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
121-
border-radius: 12px;
122-
width: 90%;
123-
max-width: 400px;
124-
z-index: 1000;
125-
opacity: 0;
126-
transition: opacity 0.3s ease;
127-
max-height: 90vh;
128-
overflow-y: auto;
129-
}
130-
131-
#popup-state-name {
132-
font-size: 1.8rem;
133-
font-weight: bold;
134-
margin-bottom: 12px;
135-
color: #333;
136-
}
137-
138-
#popup-state-info {
139-
font-size: 1.4rem;
140-
margin: 12px 0;
141-
color: #444;
142-
line-height: 1.4;
143-
}
144-
145-
#state-popup img {
146-
width: 100%;
147-
height: auto;
148-
max-height: 200px;
149-
object-fit: cover;
150-
border-radius: 8px;
151-
margin: 10px 0;
152-
}
153-
154-
.close-popup {
155-
position: absolute;
156-
top: 10px;
157-
right: 15px;
158-
font-size: 1.8rem;
159-
cursor: pointer;
160-
color: #666;
161-
transition: color 0.2s ease;
162-
}
163-
164-
.close-popup:hover {
165-
color: #333;
166-
}
167-
168-
#pop-up-buttons {
169-
display: flex;
170-
gap: 12px;
171-
margin-top: 15px;
172-
}
173-
174-
.copy-button,
175-
#see-more-button {
176-
flex: 1;
177-
padding: 10px 16px;
178-
font-size: 1.2rem;
179-
cursor: pointer;
180-
border: none;
181-
border-radius: 8px;
182-
transition: all 0.2s ease;
183-
}
184-
185-
.copy-button {
186-
background-color: #4caf50;
187-
color: white;
188-
}
189-
190-
#see-more-button {
191-
background-color: #007bff;
192-
color: white;
193-
}
194-
195-
.copy-button:hover,
196-
#see-more-button:hover {
197-
transform: translateY(-2px);
198-
opacity: 0.9;
199-
}
200-
201-
@media (max-width: 768px) {
202-
#state-popup {
203-
width: 85%;
204-
padding: 15px;
205-
margin: 0 auto;
106+
.state-popup {
107+
display: none;
108+
flex-direction: column;
109+
position: absolute;
110+
background-color: #fff;
111+
padding: 20px;
112+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
113+
border-radius: 12px;
114+
width: 90%;
115+
max-width: 400px;
116+
z-index: 1000;
117+
opacity: 0;
118+
transition: opacity 0.3s ease;
119+
max-height: 90vh;
120+
overflow-y: auto;
121+
}
122+
123+
.state-popup__name {
124+
font-size: 1.8rem;
125+
font-weight: bold;
126+
margin-bottom: 12px;
127+
color: #333;
128+
}
129+
130+
.state-popup__info {
131+
font-size: 1.4rem;
132+
margin: 12px 0;
133+
color: #444;
134+
line-height: 1.4;
135+
}
136+
137+
.state-popup__image {
138+
width: 100%;
139+
height: auto;
140+
max-height: 200px;
141+
object-fit: cover;
142+
border-radius: 8px;
143+
margin: 10px 0;
144+
}
145+
146+
.state-popup__close {
147+
position: absolute;
148+
top: 10px;
149+
right: 15px;
150+
font-size: 1.8rem;
151+
cursor: pointer;
152+
color: #666;
153+
transition: color 0.2s ease;
154+
}
155+
156+
.state-popup__close:hover {
157+
color: #333;
206158
}
207159

208-
#popup-state-name {
209-
font-size: 1.6rem;
160+
.state-popup__buttons {
161+
display: flex;
162+
gap: 12px;
163+
margin-top: 15px;
210164
}
211165

212-
#popup-state-info {
166+
.state-popup__button {
167+
flex: 1;
168+
padding: 10px 16px;
213169
font-size: 1.2rem;
170+
cursor: pointer;
171+
border: none;
172+
border-radius: 8px;
173+
transition: all 0.2s ease;
174+
}
175+
176+
.state-popup__button--copy {
177+
background-color: #4caf50;
178+
color: white;
179+
}
180+
181+
.state-popup__button--more {
182+
background-color: #007bff;
183+
color: white;
184+
}
185+
186+
.state-popup__button:hover {
187+
transform: translateY(-2px);
188+
opacity: 0.9;
214189
}
215-
}
216190

191+
@media (max-width: 768px) {
192+
.state-popup {
193+
width: 85%;
194+
padding: 15px;
195+
margin: 0 auto;
196+
}
197+
198+
.state-popup__name {
199+
font-size: 1.6rem;
200+
}
201+
202+
.state-popup__info {
203+
font-size: 1.2rem;
204+
}
205+
}
217206
</style>

0 commit comments

Comments
 (0)