Commit 868cbd8a

mo <mokha@cisco.com>
2017-09-01 02:17:53
start to convert some of the backbone views.
master
1 parent 193e62a
Changed files (5)
app
assets
javascripts
backbone
templates
cakes
edit.jst.ejs
new.jst.ejs
photos
new-modal.jst.ejs
stylesheets
application.css.scss
views
my
kitchens
show.html.erb
app/assets/javascripts/backbone/templates/cakes/edit.jst.ejs
@@ -1,56 +1,41 @@
-<div class="row-fluid">
-  <div class="span12">
+<div class="row">
+  <div class="col">
     <h1><small>Edit</small> <%= cake.name %></h1>
     <hr />
     <form id="edit-cake" name="cake" class="form-horizontal">
-      <fieldset>
-        <div class="control-group">
-          <label class="control-label"></label>
-          <div class="controls">
-            <a class="btn btn-primary add-photo">Upload Photo...</a>
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="cake_name">Name*</label>
-          <div class="controls">
-            <input class="input-xxlarge" id="cake_name" name="name" type="text" value="<%= cake.name %>" />
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Category</label>
-          <div class="controls">
-            <select id="cake_category_id" name="category_id">
-              <% _.each(categories, function(category) { %>
-                <option value="<%= category.id %>"><%= category.name %></option>
-              <% }); %>
-            </select>
-          </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="cake_story">Description</label>
-          <div class="controls">
-            <textarea class="input-xxlarge" id="cake_story" name="story" rows="3"><%= cake.story %></textarea>
-          </div>
-        </div>
-        <div class="control-group">
-          <label for="cake_tags" class="control-label">Tags</label>
-          <div class="controls">
-          <% if (typeof(cake.tags) === "string") { %>
-            <% tags = _.map(cake.tags.split(','), function(x){ return x; }) %>
-          <% } else { %>
-            <% tags = _.map(cake.tags, function(x){ return x.name; }) %>
-          <% } %>
-          <input name="cake_tags" type="text" id="cake_tags" value="<%= tags %>" class="input-xxlarge" autocomplete="off" />
-          </div>
-        </div>
-        <div class="form-actions">
-          <button id='save-button' type="submit" class="btn btn-primary">Publish</button>
-          <a href="#cakes/<%= cake.id %>" class="btn">Cancel</a>
-        </div>
-      </fieldset>
+      <div class="form-group">
+        <a class="btn btn-primary add-photo">Upload Photo...</a>
+      </div>
+      <div class="form-group">
+        <label class="" for="cake_name">Name</label>
+        <input class="form-control" id="cake_name" name="name" type="text" value="<%= cake.name %>" required="required" />
+      </div>
+      <div class="form-group">
+        <label for="category_id">Category</label>
+        <select id="cake_category_id" name="category_id" class="form-control">
+          <% _.each(categories, function(category) { %>
+            <option value="<%= category.id %>"><%= category.name %></option>
+          <% }); %>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="" for="cake_story">Description</label>
+        <textarea class="form-control" id="cake_story" name="story" rows="3"><%= cake.story %></textarea>
+      </div>
+      <div class="form-group">
+        <label for="cake_tags" class="">Tags</label>
+        <% if (typeof(cake.tags) === "string") { %>
+          <% tags = _.map(cake.tags.split(','), function(x){ return x; }) %>
+        <% } else { %>
+          <% tags = _.map(cake.tags, function(x){ return x.name; }) %>
+        <% } %>
+        <input name="cake_tags" type="text" id="cake_tags" value="<%= tags %>" class="form-control" autocomplete="off" />
+      </div>
+      <button id='save-button' type="submit" class="btn btn-primary">Publish</button>
+      <a href="#cakes/<%= cake.id %>" class="btn btn-secondary">Cancel</a>
     </form>
   </div>
 </div>
-<div class="row-fluid">
+<div class="row">
   <ul class="thumbnails"></ul>
 </div>
app/assets/javascripts/backbone/templates/cakes/new.jst.ejs
@@ -1,26 +1,18 @@
 <h1>Share cake</h1>
 <hr />
 <form id="new-cake" name="cake" class="form-horizontal">
-  <fieldset>
-    <div class="control-group">
-      <label class="control-label" for="cake_name">Name*</label>
-      <div class="controls">
-        <input class="input-xxlarge" id="cake_name" name="name" type="text">
-      </div>
-    </div>
-    <div class="control-group">
-      <label class="control-label">Category</label>
-      <div class="controls">
-        <select id="cake_category_id" name="category_id">
-          <% _.each(categories, function(category) { %>
-          <option value="<%= category.id %>"><%= category.name %></option>
-          <% }); %>
-        </select>
-      </div>
-    </div>
-    <div class="form-actions">
-      <button id='save-button' type="submit" class="btn btn-primary">Create</button>
-      <a href="#cakes" class="btn">Cancel</a>
-    </div>
-  </fieldset>
+  <div class="form-group">
+    <label for="cake_name">Name</label>
+    <input class="form-control" id="cake_name" name="name" type="text" required="required">
+  </div>
+  <div class="form-group">
+    <label for="category_id">Category</label>
+    <select id="cake_category_id" name="category_id" class="form-control" required="required">
+      <% _.each(categories, function(category) { %>
+      <option value="<%= category.id %>"><%= category.name %></option>
+      <% }); %>
+    </select>
+  </div>
+  <button id='save-button' type="submit" class="btn btn-primary">Create</button>
+  <a href="#cakes" class="btn btn-secondary">Cancel</a>
 </form>
app/assets/javascripts/backbone/templates/photos/new-modal.jst.ejs
@@ -1,18 +1,24 @@
-<div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-  <h4>Upload Photo</h4>
-</div>
-<div class="modal-body">
-  <span class="btn btn-default btn-file">
-    + Browse... <input id="photo-attachment" name="attachment" type="file" accept="image/*">
-  </span>
-  <p class='pull-right'>
-    <input id="watermark" name="watermark" maxlength="30" size="30" type="text" placeholder="watermark" /> on CakeSide.com
-    <a class="tooltip-item" data-placement="right" rel="tooltip" href="#" data-original-title="Watermark your name or company on each uploaded image" data-animation="true"><i class="icon-question-sign"></i></a>
-  </p>
-  <img id="preview-image" src="#" alt="your image" class="hide hidden-phone" />
-</div>
-<div class="modal-footer">
-  <a href="#" class="btn" data-dismiss="modal">Cancel</a>
-  <button id="upload-photo-button" type="submit" class="btn btn-primary">Upload Photo</button>
+<div class="modal-dialog" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h5 class="modal-title">Upload Photo</h5>
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <form class="form-horizontal">
+        <span class="btn btn-default btn-file">
+          <input id="photo-attachment" name="attachment" type="file" accept="image/*">
+        </span>
+        <input id="watermark" name="watermark" maxlength="30" size="30" type="text" placeholder="watermark" class="form-control" />
+        <small class="form-text muted"> on CakeSide.com</small>
+      </form>
+      <img id="preview-image" src="#" alt="your image" class="hide" />
+    </div>
+    <div class="modal-footer">
+      <button id="upload-photo-button" type="button" class="btn btn-primary">Save changes</button>
+      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+    </div>
+  </div>
 </div>
app/assets/stylesheets/application.css.scss
@@ -17,3 +17,7 @@
 
 @import "font-awesome";
 @import "bootstrap";
+
+.hide {
+  display: none;
+}
app/views/my/kitchens/show.html.erb
@@ -16,10 +16,10 @@
 <% end %>
 
 <div class="row">
-  <div class="span2">
+  <div class="col-3">
     <%= render partial: "my/shared/my_nav" %>
   </div>
-  <div id="backbone-content" class="span10"></div>
+  <div id="backbone-content" class="col-9"></div>
 </div>
-<div id="disqus_thread" class="row-fluid"></div>
+<div id="disqus_thread" class="row"></div>
 <div id="modal" class="modal hide fade"></div>