desktop looks

etl12003 · Mar 27, 2017 · f7ae17c · f7ae17c
1 parent 9d93939
commit f7ae17c
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 32 deletions.
diff --git a/html-ONLY-site/css/desktop.css b/html-ONLY-site/css/desktop.css
@@ -1,12 +1,23 @@
-@media only screen and (min-width: 65em) {
-
+@media only screen and (min-width: 40.75em) {
+	div.well-card {
+    	border: 2px solid #4d4d4d;
+		margin: 1.5rem;
+		width: 41rem;
+	}
 
+	main.list {
+		display: flex;
+		flex-direction: column;
+/*		justify-content: center;*/
+		align-items: center;
+	}
 }
 
 @media only screen and (min-width: 45em) {
 	div.well-card {
     	border: 2px solid #4d4d4d;
 		margin: 1.5rem;
+		width: 41rem;
 	}
 	main.search{
 		display: flex;
@@ -17,5 +28,20 @@
 		color: inherit;
 		width: 50%;
 	}
+
+
+}
 
+@media only screen and (min-width: 25em) {
+	main.details{
+		max-width: 25rem;
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 8rem;
+	}
+	#add-well{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
 }
diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
@@ -389,7 +389,10 @@ div.desk-details {
 }
 
 
-
+div.group{
+	width: 100%;
+	max-width: 26rem;
+}
 
 
 

diff --git a/html-ONLY-site/css/map-desktop.css b/html-ONLY-site/css/map-desktop.css
@@ -24,7 +24,7 @@
         margin-bottom: 3rem;
     }
 
-    div.well-card{
+    main.map div.well-card{
         margin-left: 0;
         margin-right: 0;
         top: auto;
@@ -57,4 +57,9 @@
     main.details{
         margin-top: 0rem;
     }
+	a.go-to{
+		float: right;
+		margin: 1rem;
+
+	}
 }
diff --git a/html-ONLY-site/details-content.php b/html-ONLY-site/details-content.php
@@ -1,4 +1,5 @@
 
+<div class="group">
             <img src="https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg"/>
 
         <ul class="inputs" id="report-metadata">
@@ -31,8 +32,8 @@
                 <p id="other-number" class="long-num">n/a</p>
             </li>
         </ul>
-
-
+</div>
+<div class="group">
         <h2>Owner Info</h2>
         <ul class="inputs" id="owner-info">
             <li><h3>Name</h3>
@@ -54,7 +55,8 @@
                 <p id="zip-code" class="med-num">06235</p>
             </li>
         </ul>
-
+</div>
+<div class="group">
         <h2>Well location</h2>
         <ul class="inputs" id="owner-info">
 
@@ -103,7 +105,9 @@
             </li>
 
         </ul>
+</div>
 
+<div class="group">
         <h2>Casing Details</h2>
         <ul class="inputs" id="casing-details">
             <li>
@@ -135,7 +139,8 @@
                 <p>yes</p>
             </li>
         </ul>
-
+</div>
+<div class="group">
         <h2>Yield Test</h2>
         <ul class="inputs" id="yield-test">
             <li>
@@ -158,7 +163,8 @@
             </li>
 
         </ul>
-
+</div>
+<div class="group">
         <h2>Water Level</h2>
         <ul class="inputs" id="yield-test">
             <li>
@@ -177,7 +183,8 @@
             </li>
 
         </ul>
-
+</div>
+<div class="group">
         <h2>Screen Details</h2>
         <ul class="inputs" id="screen-details">
             <li>
@@ -223,7 +230,8 @@
             </li>
 
         </ul>
-
+</div>
+<div class="group">
         <h2>Other Notes</h2>
         <ul class="inputs" id="notes">
 
@@ -232,6 +240,6 @@
             </li>
 
         </ul>
-
+</div>
         <p type="submit" value="Submit">
   
diff --git a/html-ONLY-site/details.php b/html-ONLY-site/details.php
@@ -11,6 +11,7 @@
     <!-- Place favicon.ico in the root directory -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/desktop.css">
     <script src="js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
 
@@ -31,8 +32,8 @@
 
 
     <nav class="top-nav">
-        <button><a href="map.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>
+        <button><a href="map.php"><img alt="back" src="img/back.svg" ></a></button> <h1>Details</h1>
+        <button><a href="form.php"><img alt="edit" src="img/edit.svg" ></a></button>
     </nav>
 <main class="details">
 

diff --git a/html-ONLY-site/form.html b/html-ONLY-site/form.html
@@ -11,6 +11,7 @@
     <!-- Place favicon.ico in the root directory -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/desktop.css">
     <script src="js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
 
@@ -35,12 +36,14 @@
         <button>Save Draft</button>
     </nav>
 
-    <form>
+    <form id="add-well">
+		<div class="group">
         <label for="well-picture">
             <img src="img/add-img-icon.png"/>
         </label>
         <input type="file" id="well-picture" accept="image/*">
-
+</div>
+		<div class="group">
         <ul class="inputs" id="report-metadata">
             <li><label for="well-completion-date">Date well completed</label>
             <input type="date" id="well-completion-date"></li>
@@ -70,7 +73,8 @@
                 <input type="number" min="1" id="other-number" class="long-num">
             </li>
         </ul>
-
+		</div>
+		<div class="group">
 
         <h2>Owner Info</h2>
         <ul class="inputs" id="owner-info">
@@ -92,7 +96,8 @@ <h2>Owner Info</h2>
                 <input type="number" min="1" id="zip-code" class="med-num">
             </li>
         </ul>
-
+		</div>
+		<div class="group">
         <h2>Well location</h2>
         <ul class="inputs" id="owner-info">
 
@@ -160,7 +165,8 @@ <h2>Well location</h2>
             </li>
 
         </ul>
-
+		</div>
+		<div class="group">
         <h2>Casing Details</h2>
         <ul class="inputs" id="casing-details">
             <li>
@@ -194,7 +200,8 @@ <h2>Casing Details</h2>
                 <input type="radio" name="casing-grouting" value="no"> no
             </li>
         </ul>
-
+		</div>
+		<div class="group">
         <h2>Yield Test</h2>
         <ul class="inputs" id="yield-test">
             <li>
@@ -221,7 +228,8 @@ <h2>Yield Test</h2>
             </li>
 
         </ul>
-
+		</div>
+		<div class="group">
         <h2>Water Level</h2>
         <ul class="inputs" id="yield-test">
             <li>
@@ -240,7 +248,8 @@ <h2>Water Level</h2>
             </li>
 
         </ul>
-
+		</div>
+		<div class="group">
         <h2>Screen Details</h2>
         <ul class="inputs" id="screen-details">
             <li>
@@ -287,7 +296,8 @@ <h2>Screen Details</h2>
             </li>
 
         </ul>
-
+		</div>
+		<div class="group">
         <h2>Other Notes</h2>
         <ul class="inputs" id="notes">
 
@@ -298,6 +308,7 @@ <h2>Other Notes</h2>
         </ul>
 
         <input type="submit" value="Submit">
+		</div>
     </form>
 
 

diff --git a/html-ONLY-site/map.php b/html-ONLY-site/map.php
@@ -76,6 +76,7 @@
         </div>
 
         <div class="desk-details">
+			<a href="details.php" class="go-to" > go to > </a>
         <?php
             include 'details-content.php';
             ?>

diff --git a/html-ONLY-site/wells-list.php b/html-ONLY-site/wells-list.php
@@ -25,7 +25,9 @@
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/well-card.css">
-
+    <link rel="stylesheet" href="css/map-desktop.css">
+    <link rel="stylesheet" href="css/desktop.css">
+
     <script src="js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
 
@@ -46,36 +48,41 @@
 
 
     <nav class="top-nav">
+		<div class="main-bttns">
         <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button><h1>Nearby Wells</h1>
         <button><a href="search.html"><img src="img/search.svg" alt="menu" /></a></button>
-
+        </div>
+
         <div class="close-menu closed" id="close-menu" onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"></div>
         <div class="slide-menu closed" id="menu">
             <p>Currntly signed in as:
-                <h3>my.name@ct.gov</h3>
+<!--                <h3>-->
+					my.name@ct.gov
+<!--			</h3>-->
             </p>
             <a href="#">Logout</a>
             <a class="settings" href="#">Settings</a>
-
+        
         </div>
     </nav>
 
-    <main>
+    <main class="list">
+		<h1 class="title">Nearby Wells</h1>
     <?php
         if ($result = $mysqli->query($query)) {
 
             /* fetch associative array */
             while ($row = $result->fetch_assoc()) {
                 echo'
-                <a href="details.html">
+                <a href="details.php">
                     <div class="well-card clearfix">
                         <div class="well-img"></div>
                         <div>
                             <h2>'.$row["Well_Street_Name"].'</h2>
                             <p>short well description</p>
                         </div>
                     </div>
-                /a>';
+                </a>';
                 //printf ($row["Well_Street_Name"]);
             }
 
@@ -86,8 +93,8 @@
     </main>
 
     <nav class="bottom-nav">
-        <button><a href="map.html"><img src="img/map.svg" alt="menu" /></a></button>
-        <button><a href="wells-list.html"><img src="img/well.png" alt="menu" /></a></button>
+        <button><a href="map.php"><img src="img/map.svg" alt="menu" /></a></button>
+        <button><a href="wells-list.php"><img src="img/well.png" alt="menu" /></a></button>
     </nav>
-Original file line number
+Diff line change
@@ Expand Up / @@ -389,7 +389,10 @@ div.desk-details { @@
     }
+    div.group{
+    	width: 100%;
+    	max-width: 26rem;
+    }
@@ Expand Down @@