Put together the start to a template selector - added new classes to …

…gridlist
concerto · Feb 27, 2012 · 8e7c453 · 8e7c453
1 parent 142359e
commit 8e7c453
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 26 deletions.
diff --git a/app/assets/stylesheets/application/common/variables.scss.erb b/app/assets/stylesheets/application/common/variables.scss.erb
@@ -7,6 +7,7 @@ $concerto-blue-1:		#003366;
 $concerto-blue-2:		#0099cc;
 $concerto-blue-4:		#b0d3f1;
 $concerto-blue-5:		#dee7ee;
+$concerto-blue-6:   #e7f1f9;
 
 // Grays
 $black:             #000;

diff --git a/app/assets/stylesheets/application/layout/forms.scss.erb b/app/assets/stylesheets/application/layout/forms.scss.erb
@@ -155,8 +155,8 @@ textarea {
 input:focus,
 textarea:focus {
   outline: 0;
-  border-color: rgba(82,168,236,.8);
-  $shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 3px rgba(82,168,236,.6);
+  border-color: $concerto-blue-2;  //rgba(82,168,236,.8);
+  $shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 3px $concerto-blue-2; // rgba(82,168,236,.6);
   @include box-shadow($shadow);
 }
 input[type=file]:focus,

diff --git a/app/assets/stylesheets/application/layout/lists-grid-stacked.scss.erb b/app/assets/stylesheets/application/layout/lists-grid-stacked.scss.erb
@@ -14,7 +14,7 @@
 	width:20%;
 	min-height:80px;
 
-  > div {	 // in this case, the singular gridlist item is ul li a
+  > div, .cont {
 		padding: 12px;
 		border-right: solid 1px $grayLight;
 		border-bottom: solid 1px $grayLight;
@@ -32,19 +32,9 @@
 			display: block;
 			margin-top: 4px;
 			padding: 4px;
-		}
-
-	}
-
-  img {
-		@extend .with-shadow;
-		float: left;
-		margin-bottom:6px;
-		margin-right:10px;
-	}
+    }
 
-	.content {
-		h1 {
+    h1 {
 			font-size: 1.2em;
  			color: #333;
  			background:none;
@@ -55,11 +45,21 @@
 		}
 
 		p {
-			font-size:0.8em;
+      margin-bottom: 3px;
 		}
+
+
 
 	}
 
+  img {
+		@extend .with-shadow;
+		float: left;
+		margin-bottom:6px;
+		margin-right:10px;
+	}
+
+
 }
 
 ul.GL {
@@ -69,7 +69,57 @@ ul.GL {
 
   > li {
 		@include gridlist-item;		
-	}	
+  }
+
+  // inset-selection gridlists appear inside forms and while they use 
+  // the base styles of GL, several attributes are different
+  // these gridlists are used to make a selection of one or more items
+  // within them (hence their usage in forms)
+  &.inset-selection {
+    border-top: none;
+
+    // a common use for inset gridlists is to have each item in the GL
+    // be a clickable link - each item appears with a slight rounded 
+    // border and is a fully clickable region
+
+    > li {
+      margin-right: 6px;
+      margin-bottom: 6px;
+    }
+
+    > li > a {
+      @include border-radius(4px);
+      display: block;
+      border: solid 1px $grayLight;
+      color: $gray;
+      $transition: border linear .1s, background linear .1s;
+      @include transition($transition);
+
+      &:hover {
+        background: $concerto-blue-6;
+        border: solid 1px $concerto-blue-2;
+        text-decoration: none;
+      }
+    }
+
+    .cont {
+      border: none;
+    }
+  }
+
+  // this class can be applied to a GL to compress the size of each
+  // list item inside the grid
+  &.small {
+    > li {
+      min-height: 60px;
+
+      .cont {
+        padding: 8px;
+        min-height: 40px;
+      }
+    }
+
+  }
 }
 
 

diff --git a/app/controllers/screens_controller.rb b/app/controllers/screens_controller.rb
@@ -37,7 +37,10 @@ def new
   # GET /screens/1/edit
   def edit
     @screen = Screen.find(params[:id])
+    screen_aspect_ratio = @screen.width / @screen.height
     @templates = Template.all
+    #@templates_bestfit = Template.find(:all, :conditions => "width / height = #{screen_aspect_ratio}")
+    #@templates_other = Template.find(:all, :conditions => "width / height != #{screen.aspect_ratio}")
     @users = User.all
     @groups = Group.all
   end

diff --git a/app/views/screens/_form.html.erb b/app/views/screens/_form.html.erb
@@ -11,6 +11,7 @@
 	<% end %>
 
 	<fieldset>
+    <legend><span><%= t(:provide_details) %></span></legend>
 		<div class="clearfix">
 			<%= f.label :name %>
 			<div class="input">
@@ -34,13 +35,6 @@
 			</div>
 		</div>
 
-		<div class="clearfix">
-			<%= f.label :template %>
-			<div class="input">
-				<%= f.collection_select :template_id, @templates, :id, :name %>
-			</div>
-		</div>
-
 		<div class="clearfix">
 			<%= f.label :owner %>
 			<div class="input">
@@ -59,8 +53,55 @@
 		      </li>
 		    </ul>
 			</div>
-		</div>
-	</fieldset>
+    </div>
+
+  </fieldset>
+
+  <fieldset>
+    <legend><span><%= t(:select_template) %></span></legend>
+
+    <div class="clearfix">
+      <label><%= t(:current_template) %></label>
+      <div class="input">
+        <% if @screen.template %>
+        <ul class="GL inset-selection small">
+          <li>
+            <%= link_to "#" do %>
+              <div class="cont">
+                <p><b><%= @screen.template.name %></b></p>
+                <p>by <%= @screen.template.author %></p>
+              </div>
+            <% end %>
+          </li>
+        </ul>
+        <% else %>
+        <h3>None Selected</h3>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="clearfix">
+      <label><%= t(:select_new_template) %></label>
+      <div class="input">
+
+        <ul class="GL inset-selection small">
+          <% @templates.each do |template| %>
+          <li>
+            <%= link_to "#" do %>
+              <%= f.radio_button :template_id, template.id %>
+              <%= label_tag(:template_id, template.name) %>
+              <div class="cont">
+                <p><b><%= template.name %></b></p>
+                <p>by <%= template.author %></p>
+              </div>
+            <% end %>
+          </li>
+          <% end %>
+        </ul>
+
+      </div>
+    </div>
+  </fieldset>
 
 	<div class="submit_bar actions">
 		<%= f.submit %>

diff --git a/config/locales/views/screens/en.yml b/config/locales/views/screens/en.yml
@@ -1 +1,6 @@
 en:
+  #index
+  provide_details: "Provide Basic Details"
+  select_template: "Select Template"
+  current_template: "Current Selection"
+  select_new_template: "Select New"