martin/Freewheeling
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make site design slightly more responsive for mobile

Browse Source
This commit is contained in:
Martin Asprusten 2025-07-02 17:33:55 +02:00
parent a41bb64284
commit d07c040d95
3 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -36,7 +36,7 @@
<table id="search-result-table" style="display: none;"> <table id="search-result-table" style="display: none;">
<thead> <thead>
<tr> <tr>
<th>Distance</th><th>Latitude</th><th>Longitude</th><th>Show in map</th> <th>Distance</th><th class="hidable">Latitude</th><th class="hidable">Longitude</th><th>Show in map</th>
</tr> </tr>
</thead> </thead>
<tbody id="search-result-table-body"> <tbody id="search-result-table-body">

3
src/main.ts
View File

@ -118,6 +118,9 @@ routeWorker.onmessage = e => {
latitudeCell.setHTMLUnsafe(result.latitude.toFixed(6)); latitudeCell.setHTMLUnsafe(result.latitude.toFixed(6));
longitudeCell.setHTMLUnsafe(result.longitude.toFixed(6)); longitudeCell.setHTMLUnsafe(result.longitude.toFixed(6));
latitudeCell.classList.add('hidable');
longitudeCell.classList.add('hidable');
let button = document.createElement('button'); let button = document.createElement('button');
buttonCell.appendChild(button); buttonCell.appendChild(button);

21
src/style.css
View File

@ -35,7 +35,7 @@ p {
} }
#settings-div { #settings-div {
width: 40vw; width: max(40vw, 800px);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border-style: solid; border-style: solid;
@ -72,3 +72,22 @@ th {
td { td {
border: solid 1px; border: solid 1px;
} }
@media only screen and (max-width: 800px) {
.hidable {
display: none;
}
table {
width: max(30vw, 400px);
}
#settings-div {
width: 80vw;
}
.settings-line {
display: flex;
flex-direction: column;
}
}