From d84c89a8dd770ea174a7d2ac90927046a5f4b5f6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 11 Aug 2015 16:50:31 -0400
Subject: blueprint upload styling

---
 views/controls/blueprint/editor.ejs | 122 ++++++++++++++++++++++++++++++------
 views/partials/scripts.ejs          |   2 +-
 2 files changed, 103 insertions(+), 21 deletions(-)

(limited to 'views')

diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 6b80287..aec5e25 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -33,13 +33,88 @@ body {
 .hud span.active { color: #000; }
 
 .blueprintUpload {
-  width: 240px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  width: 340px;
+  position: absolute;
+  top: 50%; left: 50%;
+  background: white;
+  padding: 10px;
+  border: 1px solid black;
+  box-shadow: -3px 3px #000;
+  -webkit-transform: translate3D(0%,-200%,0);
+  transform: translate3D(0%,-200%,0);
+  margin-left: -175px;
+  margin-top: -200px;
+  opacity: 0;
+}
+.blueprintUpload.active {
+  -webkit-transform: translate3D(0,0,0);
+  transform: translate3D(0,0,0);
+  opacity: 1;
+}
+.blueprintUpload .toolButton {
+  float: none;
+  width: 108px;
+  display: inline-block;
+}
+.blueprintUpload .url {
+  font-size: 15px;
+  border: 1px solid #888;
+  padding: 2px;
+  font-weight: 300;
+  position: relative;
+  top: 3px;
+  margin-right: 10px;
+  width: 190px;
+}
+.blueprintUpload p {
+  font-weight: 300;
+  font-size: 13px;
+}
+.blueprintUpload .blueprints {
+  display: none;
+}
+.blueprintUpload .blueprints h5 {
+  width: 250px;
+  margin: 10px auto;
+  padding-top: 9px;
 }
 .blueprints .blueprint {
   border: 1px solid black;
-  padding: 5px;
+  background: white;
+  padding: 0px;
+  position: relative;
+  display: inline-block;
+}
+.blueprints .blueprint img {
   height: 100px;
   max-width: 200px;
+  display: block;
+  cursor: pointer;
+}
+.blueprints .blueprint .remove {
+  box-shadow: 0 1px 2px #888;
+  cursor: pointer;
+  position: absolute;
+  color: red;
+  top: 7px;
+  right: 7px;
+  width: 20px; height: 20px;
+  text-align: center;
+  background: #fff;
+  border-radius: 50%;
+}
+.blueprints .blueprint .remove span {
+  position: relative;
+  top: -2px;
+}
+.blueprintUpload .wallpaperUpload .upload-icon {
+  margin: 0 4px;
+}
+.uploadNewBlueprint {
+  color: #333;
+  border-bottom: 1px solid;
   cursor: pointer;
 }
 </style>
@@ -63,42 +138,49 @@ body {
 </div>
 
 <div class="mediaDrawer fixed animate active blueprintEditor">
-  <span class="close">X</span>
   <div class="box">
   
-    <h2>Upload your Blueprint</h2>
-  
     <div class="blueprintUpload">
+      <h2>Upload your Blueprint</h2>
+      <p>
+        Upload an image which you will trace to make a floor plan.
+        Images should be at least 1000x1000.
+      </p>
       <input type="hidden" name="_csrf" value="[[- token ]]">
+      <input type="text" class="url" placeholder="Enter an image URL or...">
       <div class="wallpaperUpload toolButton">
         <form>
           <span class="ion-ios-upload-outline upload-icon"></span>
-          <label>Upload</label>
+          <label>Upload a File</label>
           <input type="file" accept="image/*" multiple>
         </form>
       </div>
-      <input type="text" class="url" placeholder="Enter an image URL or...">
       <div class="blueprints">
         <h5>Your uploaded blueprints</h5>
       </div>
     </div>
     
-    Please tell us the scale of your blueprint.
-    Click both corners of a wall, and then enter how long the wall is.
-    https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg
+    <div class="blueprintScaler">
+      <div class="blueprintInfo">
+        Please tell us the scale of your blueprint.
+        Click both corners of a wall, and then enter how long the wall is.
+        <br><br>
+        Do you want to <span class="uploadNewBlueprint">upload a blueprint?</span>
+      </div>
 
-    <div id="blueprintMap">
-    </div>
+      <div id="blueprintMap">
+      </div>
   
-    <div id="blueprintDimensions">
-      <input type="text" name="blueprint-dimensions">
-      <select id="blueprint-units" name="blueprint-units">
-        <option value="ft">foot</option>
-        <option value="m">meter</option>
-      </select>
+      <div id="blueprintDimensions">
+        <input type="text" name="blueprint-dimensions">
+        <select id="blueprint-units" name="blueprint-units">
+          <option value="ft">foot</option>
+          <option value="m">meter</option>
+        </select>
   
-      <button id="saveBlueprint">Save</button>
+        <button id="saveBlueprint">Save</button>
+      </div>
     </div>
-
+    
   </div>
 </div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 2a93e9b..136bd4d 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -128,7 +128,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
-- 
cgit v1.2.3-70-g09d2