Skip to content

Commit 969f998

Browse files
one-communityone-community
authored
Merge pull request #3293 from OneCommunityGlobal/bhavpreet_create_choosing_village_map_frontend
Bhavpreet- Create choosing village map frontend
2 parents b22baf8 + 9a050a0 commit 969f998

6 files changed

Lines changed: 426 additions & 0 deletions

File tree

‎src/assets/images/masterMap.png‎

936 KB
Loading

‎src/assets/images/pin-point.png‎

6.15 KB
Loading

‎src/assets/images/routeMarker.png‎

389 KB
Loading

‎src/components/LBDashboard/Map/MasterPlan/MasterPlan.css‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
.main-container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
background-color: #e0e0e0;
6+
width: 100%;
7+
min-height: 100vh;
8+
padding: 20px;
9+
overflow: hidden;
10+
}
11+
12+
.logo-container {
13+
text-align: center;
14+
margin-bottom: 20px;
15+
}
16+
17+
.logo-container img {
18+
max-width: 30%;
19+
height: auto;
20+
min-width: 250px;
21+
}
22+
.content-container {
23+
display: flex;
24+
flex-direction: column;
25+
background-color: white;
26+
border: 1px solid #ccc;
27+
border-radius: 8px;
28+
width: 85%;
29+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
30+
height: max-content;
31+
}
32+
33+
.container-top {
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
width: 100%;
38+
height: 60px;
39+
background-color: #9dd425;
40+
}
41+
42+
.container-main {
43+
background-color: #e0e0e0;
44+
display: flex;
45+
flex-direction: column;
46+
margin: 20px 40px 30px 40px !important;
47+
padding: 20px 20px 50px 20px !important;
48+
width: auto;
49+
min-height: 560px;
50+
height: 100%;
51+
}
52+
53+
.container-map {
54+
display: flex;
55+
height: 100%;
56+
width: 100%;
57+
flex-direction: column;
58+
justify-content: space-evenly;
59+
align-items: center;
60+
background-color: #839a4a;
61+
}
62+
63+
.map-details {
64+
width: 100%;
65+
height: 75%;
66+
display: flex;
67+
}
68+
.pin-point {
69+
position: absolute;
70+
width: 5.5% !important;
71+
height: 6% !important;
72+
z-index: 9;
73+
top: calc(var(--top) * 580 / 700 - 3%);
74+
left: calc(var(--left) - 1%);
75+
}
76+
77+
78+
.map {
79+
width: 65%;
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
padding: 0;
84+
}
85+
86+
.image-wrapper {
87+
position: relative;
88+
height: 100%;
89+
display: inline-block;
90+
}
91+
92+
.image-wrapper img {
93+
height: 100%;
94+
width: 100%;
95+
max-width: none;
96+
}
97+
98+
.village-marker {
99+
border-radius: 50%;
100+
position: absolute;
101+
cursor: pointer;
102+
opacity: 0;
103+
width: 3.5%;
104+
height: 4%;
105+
z-index: 10;
106+
top: calc(var(--top) * 580 / 700);
107+
left: calc(var(--left));
108+
}
109+
110+
111+
.route {
112+
width: 35%;
113+
height: 100%;
114+
display: flex;
115+
flex-direction: column;
116+
justify-content: center;
117+
align-items: center;
118+
padding: 10px 0;
119+
border-left: solid 1px #e0e0e0;
120+
}
121+
122+
.route p {
123+
font-size: 0.5em;
124+
margin-top: 0;
125+
margin-bottom: 0;
126+
font-weight: 600;
127+
text-align: center;
128+
color: #e0e0e0;
129+
}
130+
131+
.route img {
132+
width: 100%;
133+
height: 100%;
134+
}
135+
136+
.villages {
137+
width: 100%;
138+
height: 25%;
139+
display: flex;
140+
justify-content: flex-start;
141+
align-items: center;
142+
overflow-x: scroll;
143+
}
144+
145+
.village {
146+
display: flex;
147+
height: 100%;
148+
padding: 5px;
149+
align-items: center;
150+
}
151+
152+
.village:hover {
153+
background-color: #768b43;
154+
}
155+
156+
.village img {
157+
width: auto;
158+
height: 75%;
159+
cursor: pointer;
160+
}
161+
162+
.selected {
163+
background-color: #768b43;
164+
}
165+
166+
167+
@media (max-width: 990px) {
168+
.main-container {
169+
padding: 0;
170+
}
171+
.container-main {
172+
flex-direction: column;
173+
align-items: center;
174+
}
175+
.map-details {
176+
flex-direction: column;
177+
height: 100%;
178+
}
179+
.map {
180+
width: 100%;
181+
}
182+
183+
.image-wrapper {
184+
position: relative;
185+
min-height: 100%;
186+
display: inline-block;
187+
}
188+
.image-wrapper img {
189+
width: 100%;
190+
height: auto;
191+
max-width: none;
192+
}
193+
.route {
194+
width: 100%;
195+
border-left: none;
196+
border-top: solid 1px #e0e0e0;
197+
}
198+
.villages{
199+
height: auto;
200+
}
201+
202+
}
203+
204+
.village-details{
205+
display: flex;
206+
flex-direction: column;
207+
padding-left: 20px;
208+
width: 100%;
209+
height: 100%;
210+
}
211+
212+
.village-details h3{
213+
margin: 0;
214+
padding: 0;
215+
font-size: 1.5em;
216+
font-weight: 600;
217+
color:#839a4a;
218+
}
219+
220+
.village-details p{
221+
margin: 0;
222+
padding: 0;
223+
font-size: 1em;
224+
font-weight: 400;
225+
color:#839a4a;
226+
}
227+
228+
229+
@media (max-width: 580px) {
230+
.container-main {
231+
padding: 10px;
232+
margin: 10px;
233+
}
234+
.village-details{
235+
padding-left: 0;
236+
}
237+
238+
}
239+

0 commit comments

Comments
 (0)