From 2aff73e029c1f4e181a05e53183e310f4a75cc3b Mon Sep 17 00:00:00 2001 From: Erik Lindsay Date: Mon, 24 Apr 2017 13:51:44 -0400 Subject: [PATCH] style and details enhancements --- Wello/www/css/main.css | 66 +++++---- Wello/www/css/well-card.css | 9 +- Wello/www/details-content.php | 2 +- Wello/www/details.php | 17 ++- Wello/www/img/add.svg | 10 +- Wello/www/img/back.svg | 13 +- Wello/www/img/close.svg | 11 +- Wello/www/img/edit.svg | 14 +- Wello/www/img/gps.svg | 15 ++- Wello/www/img/list.svg | 13 ++ Wello/www/img/map.svg | 14 +- Wello/www/img/menu.svg | 10 +- Wello/www/img/problem.svg | 13 +- Wello/www/img/search.svg | 14 +- Wello/www/img/{well.png => well-black.png} | Bin Wello/www/img/well-default.png | Bin 0 -> 16689 bytes Wello/www/img/well-list.png | Bin 0 -> 833 bytes Wello/www/map.php | 13 +- Wello/www/wells-list.php | 147 +++++++++------------ 19 files changed, 221 insertions(+), 160 deletions(-) create mode 100644 Wello/www/img/list.svg rename Wello/www/img/{well.png => well-black.png} (100%) create mode 100644 Wello/www/img/well-default.png create mode 100644 Wello/www/img/well-list.png diff --git a/Wello/www/css/main.css b/Wello/www/css/main.css index 2fbd39b..63aa9d5 100644 --- a/Wello/www/css/main.css +++ b/Wello/www/css/main.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i'); + /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. @@ -10,7 +12,8 @@ html { color: #222; font-size: 1em; - line-height: 1.4; } + line-height: 1.4; +} /* * Remove text-shadow in selection highlight: @@ -84,6 +87,9 @@ textarea { box-sizing: border-box; font-family: "roboto"; } +body{ +width: 100vw; +} main.intro{ margin: 0; padding: 0; @@ -132,6 +138,7 @@ nav h1{ margin: 0 0; font-size: 1.5rem; margin-left: 1.25rem; + color: white; } h1.title{ display: none; @@ -164,6 +171,11 @@ div.slide-menu{ box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.35); } +nav img{ + max-width: 3rem; + width: 100%; +} + div.main-bttns{ display: flex; align-items: center; @@ -192,6 +204,15 @@ div.close-menu{ h3{ margin: 0; font-size: 1.25rem; + font-weight: 600; +} +h4{ + font-weight: 400; + font-size: 1.1rem; + margin-bottom: 0; +} +p{ + font-weight: 300; } a.settings{ position: absolute; @@ -273,29 +294,6 @@ button, a { button.gps img { width: 100%; } - -/* -#map { - width: 100vw !important; - height: 100vh !important; - height: calc(100vh - 8.1rem); -} -*/ -/* -#map { - position: relative; - padding-bottom: 75%; // This is the aspect ratio - height: 0; - overflow: hidden; - } - #map iframe { - position: absolute; - top: 0; - left: 0; - width: 100% !important; - height: 100% !important; - } -*/ .google-maps { position: relative; @@ -311,24 +309,16 @@ button, a { height: 100% !important; } main{ -/* margin-top: 4.1rem;*/ margin-top: 0; } -/* -main.map { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} -*/ main.details { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; + width: 100%; } nav.form a{ text-decoration: none; @@ -361,6 +351,10 @@ h2{ border-bottom: 1px solid black; } +h3{ + font-weight: 500; +} + label { display: block; font-weight: 500; @@ -459,9 +453,11 @@ div.group{ main.search{ margin-top: 4.2rem; } - +main.details{ + margin-top: 53px; +} main.list{ - margin-top: 66px; + margin-top: 64px; margin-bottom: 66px; } diff --git a/Wello/www/css/well-card.css b/Wello/www/css/well-card.css index 3516958..cf66c0f 100644 --- a/Wello/www/css/well-card.css +++ b/Wello/www/css/well-card.css @@ -8,15 +8,18 @@ div.well-card h2{ border-bottom: none; margin: 0; font-size: 1rem; + color: black; } div.well-card p{ + font-size: 1rem; border-bottom: none; margin-top: .25rem; + color: black; } div.well-card { border-bottom: 2px solid #4d4d4d; max-width: 41rem; - width: calc(100% - 16px); + width: 100%; box-sizing: border-box; /* display: block;*/ /* margin-left: 0;*/ @@ -24,7 +27,7 @@ div.well-card { } div.well-card .well-img{ - background-image: url(https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg); + background-image: url("../img/well-default.png"); background-size: cover; background-position: center; float: left; @@ -33,7 +36,7 @@ div.well-card .well-img{ } a.search-result{ - color: inherit; + color: black; } div.pending{ position: relative; diff --git a/Wello/www/details-content.php b/Wello/www/details-content.php index 306e55b..ef85173 100644 --- a/Wello/www/details-content.php +++ b/Wello/www/details-content.php @@ -1,6 +1,6 @@
- +
- - -
-

Nearby Wells

- + +
+

Nearby Wells

+ query($query)) { /* fetch associative array */ @@ -82,42 +66,33 @@ $query = "SELECT CONCAT(Well_Street_Number, ' ', Well_Street_Name) AS 'WellAddre /* free result set */ $result->free(); } - ?> -
- - - - - - - - - - - - - - - - - - + ?>
+ + + + + + + + + + \ No newline at end of file