Skip to content

Making Find Distance card more engaging #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Making Find Distance card more engaging #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 31 additions & 24 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,40 +88,47 @@ <h3>coordinates:</h3>

<!-- Box that appears on icon click -->
<div class="box" id="box" tabindex="0" aria-label="distance finder opened">
<button class="fas fa-times-circle" id="closeBtn" aria-label="close distance finder" tabindex="0"
<button class="fas fa-times-circle close-btn" id="closeBtn" aria-label="close distance finder"
onclick="notifySreenReader(`distance finder closed`)"></button>
<h1>Find Distance</h1>


<h1 class="distance-title">
<i class="fas fa-route"></i> Find Distance
</h1>

<p class="distance-subtext">Measure the road distance and time between two locations.</p>

<div class="box-input">
<span><i class="fas fa-circle"></i></span>
<div class="dist-input" id="c-beginning"><input type="text" tabindex="0" id="beginning"
placeholder="Enter Starting point" aria-label="type place and press enter" />
<button tabindex="0" aria-label="click to see suggessions" id="b-searchbutton"><i
class="fa fa-search"></i></button>
<label for="beginning"><i class="fas fa-circle icon-start"></i></label>
<div class="dist-input" id="c-beginning">
<input type="text" id="beginning" placeholder="Enter Starting point"
aria-label="Type starting place and press enter" />
<button aria-label="Search starting location" id="b-searchbutton"><i class="fa fa-search"></i></button>
</div>
</div>



<div class="box-input">
<span><i class="fas fa-map-marker-alt"></i></span>
<div class="dist-input" id="c-destination"><input tabindex="0" type="text" id="destination"
placeholder="Enter Destination" aria-label="type place and press enter" />
<button id="d-searchbutton" tabindex="0" aria-label="click to see suggessions"><i
class="fa fa-search"></i></button>
<label for="destination"><i class="fas fa-map-marker-alt icon-end"></i></label>
<div class="dist-input" id="c-destination">
<input type="text" id="destination" placeholder="Enter Destination"
aria-label="Type destination and press enter" />
<button aria-label="Search destination location" id="d-searchbutton"><i class="fa fa-search"></i></button>
</div>
</div>

<button class="fas fa-map-marked-alt" aria-hidden="true" title="Choose from map" id="fromMap"
tabindex="-1"></button>
<button class="fas fa-arrow-circle-right" tabindex="0" id="find" title="Find Distance"
aria-label=" click to Find distance"></button>

<div class="button-row">
<button class="fas fa-map-marked-alt" title="Choose from map" id="fromMap" aria-label="Choose from map"></button>
<button class="fas fa-route find-btn" id="find" title="Find Distance" aria-label="Click to find distance"></button>
</div>

<div tabindex="0" id="distanceResult" aria-live="polite">
Distance : <span id="dist"></span><br />
Time : <span id="time"></span>
<strong>Distance:</strong> <span id="dist"></span><br />
<strong>Estimated Time:</strong> <span id="time"></span>
</div>
<p style="font-size: 10px;" class="text-center"><br>Directions courtesy of <a
href="https://gis-ops.com/global-open-valhalla-server-online/" target="_blank">Valhalla (FOSSGIS)</a></p>

<p class="source-credit">Directions courtesy of <a href="https://gis-ops.com/global-open-valhalla-server-online/"
target="_blank">Valhalla (FOSSGIS)</a></p>
</div>


<div tabindex="0" aria-label="focused on map. use arrow keys to navigate" id="map"></div>

Expand Down
36 changes: 34 additions & 2 deletions public/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ header button{
position: relative;
width: 100%;
min-width: 200px;

height: 30px;
}
#c-search-input input {
Expand Down Expand Up @@ -461,4 +460,37 @@ footer {
align-items: right;
float: right;
margin-left: 10px;
}
}

.box-input span i {
font-size: 18px;
margin-right: 10px;
color: #6F0E0E;
}

.dist-input {
display: flex;
align-items: center;
flex: 1;
background-color: white;
border: 2px solid black;
border-radius: 10px;
padding: 5px 10px;
}

.dist-input input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background-color: transparent;
}

.dist-input button {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #777;
margin-left: 5px;
}