Skip to content

Commit

Permalink
details and headers in place
Browse files Browse the repository at this point in the history
  • Loading branch information
@etl12003
etl12003 committed Mar 6, 2017
1 parent 30fc458 commit 55dda77
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 94 deletions.
20 changes: 18 additions & 2 deletions html-ONLY-site/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,18 @@ textarea {
font-family: "roboto";
}

nav h1{
flex-grow: 1;
margin: 0;
}

nav.top-nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #65b2ff;
z-index: 10; }

Expand All @@ -102,6 +108,7 @@ nav.top-nav button {
}
div.slide-menu{
position: fixed;
top: 0;
height: 100vh;
background-color: white;
width: 18rem;
Expand All @@ -125,6 +132,7 @@ div.slide-menu a{
}
div.close-menu{
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.42);
Expand Down Expand Up @@ -206,10 +214,17 @@ button {
main{
margin-top: 4.1rem;
}
form, main.details {
main.details {
display: flex;
flex-direction: column;

justify-content: flex-start;
align-items: flex-start
}
form{

}
main img{
width: 100%;
}
form ul, h2, main.details ul{
margin: 1rem
Expand All @@ -227,6 +242,7 @@ label[for=well-picture] {
}

h2{
width: calc(100% - 2rem);
font-weight: 700;
margin-bottom: 0;
border-bottom: 1px solid black;
Expand Down
165 changes: 75 additions & 90 deletions html-ONLY-site/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,54 +31,54 @@


<nav class="top-nav">
<button><a href="wells-list.html"><img alt="back" src="img/back.svg" ></a></button>
<button><a href="wells-list.html"><img alt="back" src="img/back.svg" ></a></button> <h1>Details</h1>
<button><a href="form.html"><img alt="edit" src="img/edit.svg" ></a></button>
</nav>

<main class="details">
<img src="img/add-img-icon.png"/>
<img src="https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg"/>

<ul class="inputs" id="report-metadata">
<li><h3>Date well completed</h3>
<p id="well-completion-date">date</p>
<p id="well-completion-date">10/2/09</p>
</li>

<li>
<h3>Date of report</h3>
<p id="report-completion-date">date</p>
<p id="report-completion-date">2/10/10</p>
</li>

<li>
<h3>Permit number</h3>
<p id="permit-number" class="long-num">364746</p>
<p id="permit-number" class="long-num">246724</p>
</li>

<li>
<h3>Registrant number</h3>
<p id="registrant-number" class="long-num">65146</p>
<p id="registrant-number" class="long-num">13</p>
</li>

<li>
<h3>State well number</h3>
<p id="state-well-number" class="long-num">380975</p>
<p id="state-well-number" class="long-num">n/a</p>
</li>

<li>
<h3>Other number</h3>
<p id="other-number" class="long-num">8960</p>
<p id="other-number" class="long-num">n/a</p>
</li>
</ul>


<h2>Owner Info</h2>
<ul class="inputs" id="owner-info">
<li><h3>Name</h3>
<p id="name">Joe</p>
<p id="name">University of Connecticut</p>
</li>

<li>
<h3>Address</h3>
<p id="address">98 Street rd</p>
<p id="address">321 Main st </p>
</li>

<li>
Expand All @@ -88,7 +88,7 @@ <h3>Town</h3>

<li>
<h3 >Zip code</h3>
<p id="zip-code" class="med-num">584758</p>
<p id="zip-code" class="med-num">06235</p>
</li>
</ul>

Expand All @@ -97,185 +97,170 @@ <h2>Well location</h2>

<li>
<h3>Address</h3>
<p type="text" id="address">4 Street rd</p>
<p id="address">Agronomy rd</p>
</li>

<li>
<h3>Town</h3>
<p type="text" id="town">Storrs</p>
<p id="town">Mansfield</p>
</li>

<li>
<h3 for="zip-code">Zip code</h3>
<p type="number" min="1" id="zip-code" class="med-num">
<h3>Zip code</h3>
<p id="zip-code" class="med-num">06235</p>
</li>

<li>
<h3 for="lot-number">Lot number</h3>
<p type="number" min="1" id="lot-number" class="med-num">
<h3>Lot number</h3>
<p id="lot-number" class="med-num">n/a</p>
</li>

<li id="get-gps-local">
<h3 for="gps-coordinates">GPS coordinates</h3>
<p type="text" id="gps-coordinates">
<button onclick="getLocation()"><img alt="get location" src="img/gps.svg"></button>
<h3>GPS coordinates </h3>
<h4>Latitude</h4>
<p id="gps-coordinates-latitude">41.794161</p>
<h4 for="gps-coordinates">Longitude</h4>
<p id="gps-coordinates-longitude">-72.230273</p>

</li>

<li>
<h3 for="relative-location">Location relative to three permanent landmarks</h3>
<textarea id="relative-location"></textarea>
<h3 >Location relative to three permanent landmarks</h3>
<p id="relative-location">13ft from light post, 16ft from water drain, 28ft from large rock</p>
</li>

<li>
<h3 for="use">Use</h3>

<p type="text" id="other-use-case" class="other">
<h3>Use</h3>
<p id="other-use-case" >Farm</p>
</li>

<li>
<h3 for="drilling-equipment">Drilling equipment</h3>
<select id="drilling-equipment">
<option value="Rotary">Rotary</option>
<option value="Compressed Air Percussion">Compressed Air Percussion</option>
<option value="Cable Percussion">Cable Percussion</option>
<option value="Other">Other</option>
</select>
<p type="text" id="other-equipment" class="other">
<h3>Drilling equipment</h3>
<p id="other-equipment" >Compressed Air Percussion</p>
</li>

</ul>

<h2>Casing Details</h2>
<ul class="inputs" id="casing-details">
<li>
<h3 for="length">Length</h3>
<p type="number" min="1" id="length"> feet
<h3>Length</h3>
<p id="length">100 feet</p>
</li>
<li>
<h3 for="diameter">Diameter</h3>
<p type="number" min="1" id="diameter"> inches
<h3>Diameter</h3>
<p id="diameter">6 inches</p>
</li>

<li>
<h3 for="weight">Weight per foot</h3>
<p type="number" min="1" id="weight"> lbs/feet
<h3>Weight per foot</h3>
<p id="weight">17 lbs/feet</p>
</li>

<li>
<p type="radio" name="threaded-vs-welded" value="Threaded"> Threaded
<p type="radio" name="threaded-vs-welded" value="Welded"> Welded
<h3>Threaded/Welded</h3>
<p> Threaded</p>
</li>

<li>
<h3 for="drive-shoe">Drive shoe</h3>
<p type="radio" name="drive-show" value="yes"> yes
<p type="radio" name="drive-show" value="no"> no
<h3>Drive shoe</h3>
<p>yes</p>
</li>

<li>
<h3 for="casing-grouting">Was casing grouted</h3>
<p type="radio" name="casing-grouting" value="yes"> yes
<p type="radio" name="casing-grouting" value="no"> no
<h3>Was casing grouted</h3>
<p>yes</p>
</li>
</ul>

<h2>Yield Test</h2>
<ul class="inputs" id="yield-test">
<li>
<h3 for="method">Method</h3>
<select id="method">
<option value="bailed">Bailed</option>
<option value="Compressed Air">Compressed Air</option>
<option value="Cable Percussion">Pumped</option>
</select>
<h3>Method</h3>
<p id="method">Compressed Air</p>
</li>
<li>
<h3 for="yield-hours">Test duration</h3>
<p type="number" min="1" id="yield-hours"> hours
<h3>Test duration</h3>
<p id="yield-hours">8 hours</p>
</li>

<li>
<h3 for="yield-gpm">Yield</h3>
<p type="number" min="1" id="yeld-gpm"> gallons per minute
<h3>Yield</h3>
<p id="yeld-gpm">18 gallons per minute</p>
</li>

</ul>

<h2>Water Level</h2>
<ul class="ps" id="yield-test">
<ul class="inputs" id="yield-test">
<li>
<h3 for="water-from-surface">From land surface</h3>
<p type="number" min="1" id="water-from-surface"> feet
<h3>From land surface</h3>
<p id="water-from-surface">44 feet</p>
</li>

<li>
<h3 for="water-level-during-yield-test">During yield test</h3>
<p type="number" min="1" id="water-level-during-yield-test"> feet
<h3>During yield test</h3>
<p id="water-level-during-yield-test">90 feet</p>
</li>

<li>
<h3 for="depth-of-well">Depth of complete well</h3>
<p type="number" min="1" id="water-from-surface"> feet
<h3>Depth of complete well</h3>
<p id="water-from-surface">620 feet</p>
</li>

</ul>

<h2>Screen Details</h2>
<ul class="inputs" id="screen-details">
<li>
<h3 for="make">Make</h3>
<p type="text" id="make">
<h3>Make</h3>
<p type="text" id="make">n/a</p>
</li>

<li>
<h3 for="length-open-to-aquifier">Length open to aquifier</h3>
<p type="number" min="1" id="length-open-to-aquifier"> feet
<h3>Length open to aquifier</h3>
<p id="length-open-to-aquifier">n/a</p>
</li>

<li>
<h3 for="slot-size">Slot size</h3>
<p type="number" min="1" id="slot-size">
<h3>Slot size</h3>
<p id="slot-size">n/a</p>
</li>

<li>
<h3 for="diameter">Diameter</h3>
<p type="number" min="1" id="diameter"> inches
<h3>Diameter</h3>
<p id="diameter">n/a</p>
</li>

<li>
<h3 for="gravel">Gravel</h3>
<p type="radio" name="gravel" value="Packed"> Packed
<p type="radio" name="gravel" value="Unpacked"> Unpacked
<h3>Gravel</h3>
<p>n/a</p>
</li>

<li>
<h3 for="diameter-including-gravel-pack">Diameter including gravel pack</h3>
<p type="number" min="1" id="diameter-including-gravel-pack"> inches
<h3>Diameter including gravel pack</h3>
<p id="diameter-including-gravel-pack">n/a</p>
</li>

<li>
<h3 for="gravel-size">Gravel size</h3>
<p type="number" min="1" id="gravel-size"> inches
<h3>Gravel size</h3>
<p id="gravel-size">n/a</p>
</li>

<li>
<h3 for="gravel-pack-location">Gravel pack location</h3>
<p type="number" min="1" id="gravel-pack-location-from"> feet
<br>to<br>
<p type="number" min="1" id="gravel-pack-location-to"> feet
<h3>Gravel pack location</h3>
<p id="gravel-pack-location-from">n/a</p>
to
<p id="gravel-pack-location-to">n/a</p>
</li>

</ul>

<h2>Depth From Land To Surface</h2>
<ul class="inputs" id="depth-from-surface">
<h2>Other Notes</h2>
<ul class="inputs" id="notes">

<li>
<p type="number" min="1"> feet
<p type="text">
<p type="number" min="1"> feet
<p type="text">
<p type="number" min="1"> feet
<p id="notes">0 - 2 | topsoil <br> 2 - 54 | Fine compact sands with small stones <br> 54 - 73 | wet cay</p>
</li>

</ul>
Expand Down
2 changes: 1 addition & 1 deletion html-ONLY-site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@


<nav class="top-nav">
<button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button>
<button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button> <h1>Well Report App</h1>
<button><a href="search.html"><img src="img/search.svg" alt="menu" /></a></button>

<div class="close-menu closed" id="close-menu" onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"></div>
Expand Down
Loading

0 comments on commit 55dda77

Please sign in to comment.