framer has better styling

app/assets/javascripts/app/views/comment_stream_view.js

@@ -38,7 +38,7 @@ app.views.CommentStream = app.views.Base.extend({
 
   createComment: function(evt) {
     if(evt){ evt.preventDefault(); }
-    this.model.comment(this.$(".comment_box").val());
+    this.model.comment(this.$(".comment_box").val())
     this.$(".comment_box").val("")
     return this;
   },

app/assets/javascripts/app/views/template_picker_view.js

@@ -1,20 +1,28 @@
 app.views.TemplatePicker = app.views.Base.extend({
   templateName : "template-picker",
 
+  events : {
+    "click .mood" : "setModelTemplate"
+  },
+
   initialize : function(){
     this.model.set({frame_name : 'Day'})
   },
 
-  events : {
-    "change select" : "setModelTemplate"
-  },
-
   postRenderTemplate : function(){
-    this.$("select[name=template]").val(this.model.get("frame_name"))
+    this.setSelectedMoodAttribute()
   },
 
   setModelTemplate : function(evt){
-    this.model.set({"frame_name": this.$("select[name=template]").val()})
+    evt.preventDefault();
+    var selectedMood = $(evt.target);
+    this.model.set({"frame_name": selectedMood.data("mood")})
+    this.setSelectedMoodAttribute()
+  },
+
+  setSelectedMoodAttribute : function(){
+    this.$("#selected_mood").removeAttr("id")
+    this.$(".mood[data-mood=" + this.model.get("frame_name") + "]").attr("id", "selected_mood")
   },
 
   presenter : function() {

app/assets/stylesheets/_mixins.css.scss

@@ -1,6 +1,6 @@
 /* Mixin file for sass.  Here is where we define our variables and
    browser compatability functions used in all scss/sass files */
-
+@import 'new_styles/new_mixins';
 
 /* Diapora's default color palate */
 $blue: #3f8fba;
@@ -18,23 +18,14 @@ $red: #a80000;
 $background: #fff;
 $creation-blue: #0097ff;
 
-
 /* Transision defaults */
 $speed: 0.1s;
 $easing: linear;
 
+$default-border-radius: 3px;
 
 /* Style includes */
-@mixin mobile-box {
-  margin: 10px;
-  padding: 0 15px;
-  border: 1px #999 solid;
-  -moz-border-radius: 15px;
-  border-radius: 15px;
-}
-
-/* Style includes */
-@mixin border-radius($tl, $tr:$tl, $br:$tl, $bl:$tl){
+@mixin border-radius($tl:$default-border-radius, $tr:$tl, $br:$tl, $bl:$tl){
   -moz-border-radius: $tl $tr $br $bl;
   -webkit-border-radius: $tl $tr $br $bl;
   border-radius: $tl $tr $br $bl;
@@ -64,7 +55,7 @@ $easing: linear;
 }
 
 @mixin linear-gradient($from, $to, $start:0%, $end:100%){
-  background-color: mix($from,$to);
+  background-image: mix($from,$to);
 
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
@@ -93,3 +84,8 @@ $easing: linear;
   transition: $type $speed $easing;
 }
 
+@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
+  -webkit-animation: $name $speed $easing;
+  -moz-animation: $name $speed $easing;
+  -ms-animation: $name $speed $easing;
+}

app/assets/stylesheets/new-templates.css.scss

@@ -1,3 +1,4 @@
+@import 'mixins';
 @import 'new_styles/base';
 @import 'new_styles/composer';
 @import 'new_styles/interactions';

app/assets/stylesheets/new_styles/_base.scss

@@ -1,11 +1,5 @@
 @import "_new_mixins";
 
-/* variables */
-$light-grey: #999;
-$pane-width: 420px;
-$night-background-color : #333;
-$night-text-color : #999;
-
 /* bootstrap extentions and overrides for asset pipeline */
 .icon-white { background-image: image_url("img/glyphicons-halflings-white.png"); }
 .icon-black { background-image: image_url("img/glyphicons-halflings.png");       }
@@ -170,14 +164,6 @@ $night-text-color : #999;
   width: 100%;
 }
 
-//this is for the framer button, I should be removed
-#post-content {
-  button {
-    position: absolute;
-  }
-}
-
-
 #post-content {
   display: table;
   position: absolute;
@@ -293,3 +279,42 @@ article { //mood posts
     @include opacity(0.2)
   }
 }
+
+$bring-dark-accent-forward-color: #DDD;
+
+.framer-controls {
+  @include info-container-base();
+
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+
+  .controls {
+    margin: 20px auto;
+    max-width: 960px;
+
+    text-align: center;
+
+    button {
+      float : right;
+    }
+  }
+
+  a.mood {
+    @include border-radius();
+    margin-right: 20px;
+    padding: 5px;
+    color: #999;
+    font-size: 20px;
+
+    &#selected_mood {
+      background-color: #222;
+    }
+
+    &:hover {
+      background-color: #222;
+      text-decoration: none;
+    }
+  }
+}
+

app/assets/stylesheets/new_styles/_interactions.scss

@@ -1,4 +1,4 @@
-@import "base";
+@import '../mixins';
 
 #post-interactions {
   position: fixed;

app/assets/stylesheets/new_styles/_new_mixins.scss

@@ -1,3 +1,7 @@
+$light-grey: #999;
+$pane-width: 420px;
+$night-background-color : #333;
+$night-text-color : #999;
 
 /* mixins */
 @mixin center($orient:vertical) {
@@ -17,12 +21,6 @@
   box-align: center;
 }
 
-@mixin box-shadow($left, $top, $blur, $color) {
-  -webkit-box-shadow: $left $top $blur $color;
-  -moz-box-shadow: $left $top $blur $color;
-  box-shadow: $left $top $blur $color;
-}
-
 @mixin pane-width() {
   width: $pane-width;
   max-width: 100%;
@@ -36,48 +34,27 @@
   background-size: cover;
 }
 
-@mixin opacity($val) {
-  -moz-opacity: $val;
-  filter:alpha(opacity=$val*100);
-  opacity: $val;
-}
+@mixin info-container-base() {
+  @include box-shadow(0, 6px, 20px, #000);
+  @include dark-hatched-bg();
 
-@mixin border-radius($top:3px, $bottom:$top) {
-  -webkit-border-radius: $top $top $bottom $bottom;
-  -moz-border-radius: $top $top $bottom $bottom;
-  border-radius: $top $top $bottom $bottom;
-}
-
-@mixin transition($type, $speed:0.2s) {
-  -o-transition: $type $speed;
-  -moz-transition: $type $speed;
-  -webkit-transition: $type $speed;
-  transition: $type $speed;
-}
-
-@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
-  -webkit-animation: $name $speed $easing;
-  -moz-animation: $name $speed $easing;
-  -ms-animation: $name $speed $easing;
+  border-top: 1px solid #555;
+  color: #ddd;
 }
 
 @mixin info-container() {
-  @include box-shadow(0, 6px, 20px, #000);
+  @include info-container-base();
   @include border-radius(3px, 0px);
-  @include dark-hatched-bg();
   @include pane-width();
 
   display: inline-block;
   position: relative;
 
-  border-top: 1px solid #555;
   border-right: 1px solid #444;
   border-left: 1px solid #444;
 
   padding-top: 25px;
 
-  color: #ddd;
-
 /* webkit acceleration */
   -webkit-transform: translateZ(0);
 }
@@ -88,7 +65,7 @@
 }
 
 @mixin photo-shadow() {
-  @include box-shadow(0, 3px, 15px, #999);
+  @include box-shadow(0, 3px, 15px, rgba(0,0,0,0.7));
 }
 
 @mixin media-text() {

app/assets/stylesheets/new_styles/_viewer_nav.scss

@@ -1,4 +1,4 @@
-@import "base";
+@import '../mixins';
 
 #post-nav {
   @include transition(opacity, 0.5s);

app/assets/templates/framer.jst.hbs

@@ -1,5 +1,7 @@
-<div class="controls">
-    <div class='template-picker'></div>
-    <button class="done btn-primary">done</button>
+<div class="framer-controls">
+    <div class="controls">
+        <button class="done btn-primary">done</button>
+        <div class='template-picker'></div>
+    </div>
 </div>
 <div class="post-view"></div>

app/assets/templates/template-picker.jst.hbs

@@ -1,5 +1,3 @@
-<select name="template">
-    {{#each templates}}
-        <option value="{{.}}">{{.}}</option>
-    {{/each}}
-</select>
+{{#each templates}}
+    <a class="mood" data-mood={{.}} href="#">{{.}}</a>
+{{/each}}

spec/javascripts/app/views/template_picker_view_spec.js

@@ -5,7 +5,7 @@ describe("app.views.TemplatePicker", function(){
   })
 
   describe("initialization", function(){
-    it("sets the frame_name of the model to 'status' by default", function(){
+    it("sets the frame_name of the model to 'Day' by default", function(){
       expect(this.view.model.get("frame_name")).toBe("Day")
     })
   })
@@ -16,12 +16,12 @@ describe("app.views.TemplatePicker", function(){
     })
 
     it("selects the model's frame_name from the dropdown", function(){
-      expect(this.view.$("select[name=template]").val()).toBe("Day")
+      expect(this.view.$(".mood#selected_mood").data("mood")).toBe("Day")
     })
 
     it("changes the frame_name on the model when is is selected", function(){
-      this.view.$("select[name=template]").val("Night")
-      this.view.$("select[name=template]").trigger("change")
+      this.view.$(".mood[data-mood=Night]").click()
+      expect(this.view.$(".mood#selected_mood").data("mood")).toBe("Night")
       expect(this.model.get("frame_name")).toBe('Night')
     })
   })