Skip to content

Commit af84369

Browse files
aparatextaparatext
committed
Revert "Fix some layout bugs"
This reverts commit ca28a8a.
1 parent ca28a8a commit af84369

File tree

1 file changed

+76
-32
lines changed

1 file changed

+76
-32
lines changed

‎index.html‎

Lines changed: 76 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,67 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>What Free Words</title>
8-
<link href="lib/tailwind.css" rel="stylesheet" />
9-
<link rel="stylesheet" href="lib/openLayers/ol.css" type="text/css" />
10-
<link rel="stylesheet" href="style.css" type="text/css" />
8+
<link
9+
href="lib/tailwind.css"
10+
rel="stylesheet"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="lib/openLayers/ol.css"
15+
type="text/css"
16+
/>
17+
<link
18+
rel="stylesheet"
19+
href="style.css"
20+
type="text/css"
21+
/>
1122
<script src="https://kit.fontawesome.com/bc15aa5425.js" crossorigin="anonymous"></script>
1223
</head>
1324
<body>
1425
<script src="lib/openLayers/ol.js"></script>
26+
1527
<script src="geocode.js"></script>
16-
<script src="script.js"></script>
17-
18-
<div class="header flex justify-between w-full content-center items-center font-medium py-3 bg-cyan-900 text-white">
19-
<div class="logo text-xl ml-3.5">What Free Words</div>
2028

21-
<nav class="links font-normal">
22-
<a href="https://github.com/pballett/whatfreewords" class="px-5">GitHub</a>
23-
<a href="#" class="px-5">About</a>
29+
<div
30+
class="
31+
header
32+
flex
33+
justify-between
34+
w-full
35+
content-center
36+
items-center
37+
font-medium
38+
py-3
39+
bg-cyan-900
40+
text-white">
41+
<div class="logo text-xl ml-3.5">What Free Words</div>
42+
43+
<nav class="links font-normal">
44+
<a href="https://github.com/pballett/whatfreewords" clas="px-5">GitHub</a>
45+
<a href="#" class="px-5">About</a>
2446
</nav>
2547
</div>
2648

2749
<div
2850
id="infoBox"
2951
class="shadow-md items-center absolute top-16 bottom-0 left-0 right-0 h-12 lg:h-14 w-96 p-3 flex-nowrap bg-white flex-row justify-between z-10"
30-
style="max-width: 95vw; display: flex;">
31-
52+
style="max-width: 95vw; overflow-x: clip; white-space: nowrap; display: flex;"
53+
>
3254
<span class="text-lg sm:text-xl lg:text-xl">
33-
<span class="text-red-500 font-medium font-mono tracking-tighter">/|/</span>
34-
<span id="words" class="truncate">woodworking.android.creaky</span>
55+
<span class="text-red-500 font-medium">/|/ </span>
56+
<span id="words">woodworking.android.creaky</span>
3557
</span>
36-
3758
<div class="controls flex-row flex gap-1">
38-
<button onclick="shareWords()" class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 w-8 h-8 active:shadow-md">
59+
<button
60+
onclick="shareWords()"
61+
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 w-8 h-8 active:shadow-md"
62+
>
3963
<i class="fa-solid fa-copy"></i>
4064
</button>
41-
<button onclick="TogglePopup()" class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 w-8 h-8 active:shadow-md">
65+
<button
66+
onclick="TogglePopup()"
67+
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 w-8 h-8 active:shadow-md"
68+
>
4269
<i class="fa-solid fa-magnifying-glass"></i>
4370
</button>
4471
</div>
@@ -47,8 +74,8 @@
4774
<div
4875
id="searchBox"
4976
class="shadow-md absolute top-16 bottom-0 left-0 right-0 h-52 w-96 flex-nowrap overflow-clip flex-col bg-white z-10"
50-
style="max-width: 95vw; overflow-x: clip; white-space: nowrap; display: none;">
51-
77+
style="max-width: 95vw; overflow-x: clip; white-space: nowrap; display: none;"
78+
>
5279
<div class="searchbox p-3 flex flex-row justify-between border-b">
5380
<input
5481
id="searchInput"
@@ -57,21 +84,32 @@
5784
class="text-lg hover:border-gray-400 focus:border-gray-500 outline-none w-3/4 px-2"
5885
/>
5986
<div class="controls flex-row flex gap-1">
60-
<button onclick="Search()" class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 active:shadow-md w-8 h-8">
87+
<button
88+
onclick="Search()"
89+
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 active:shadow-md w-8 h-8"
90+
>
6191
<i class="fa-solid fa-arrow-left"></i>
6292
</button>
63-
<button onclick="TogglePopup()" class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 active:shadow-md w-8 h-8">
93+
<button
94+
onclick="TogglePopup()"
95+
class="bg-yellow-300 hover:bg-yellow-200 font-medium hover:shadow duration-100 active:shadow-md w-8 h-8"
96+
>
6497
<i class="fa-solid fa-xmark"></i>
6598
</button>
6699
</div>
67100
</div>
68-
69101
<div class="searchResults bg-gray-100 flex-grow flex flex-col h-0">
70102
<div id="searchResults" class="overflow-y-auto overflow-x-hidden">
71-
<div class="border-b-2 border-gray-300 py-2.5 px-4 duration-100 hover:bg-gray-200 active:bg-gray-300">placeholder</div>
103+
<div
104+
class="border-b-2 border-gray-300 py-2.5 px-4 duration-100 hover:bg-gray-200 active:bg-gray-300"
105+
>
106+
placeholder
107+
</div>
72108
</div>
73-
74-
<div id="searchPlaceholder" class="not-hidden flex-grow flex-col justify-center flex text-center">
109+
<div
110+
id="searchPlaceholder"
111+
class="not-hidden flex-grow flex-col justify-center flex text-center"
112+
>
75113
Search for any place or word address e.g.
76114
<div class="examples pt-3 flex flex-col gap-2">
77115
<div>Pechers'kyi District, Kyyiv</div>
@@ -80,10 +118,16 @@
80118
</div>
81119
</div>
82120
</div>
83-
84-
<div id="map" class="flex-grow overflow-hidden"></div>
85-
<div id="marker">
86-
<img src="https://cdn.mapmarker.io/api/v1/pin?size=35&voffset=0&hoffset=0" />
87-
</div>
88-
</body>
89-
</html>
121+
122+
<div id="map" class="flex-grow overflow-hidden"></div>
123+
<div id="marker">
124+
<img
125+
src="https://cdn.mapmarker.io/api/v1/pin?size=35&background=%23D33115&color=%23FFFFFF&voffset=0&hoffset=0"
126+
/>
127+
</div>
128+
129+
<script src="script.js"></script>
130+
131+
</body>
132+
</html>
133+

0 commit comments

Comments
 (0)