droom 0.2.1 → 0.4.1

data/app/assets/javascripts/droom.js.coffee

@@ -8,7 +8,6 @@
 #= require droom/lib/kalendae
 #= require droom/lib/wysihtml5
 #= require droom/lib/parser_rules/advanced
-#= require cropper
 #= require droom/extensions
 #= require droom/utilities
 #= require droom/ajax
@@ -17,6 +16,7 @@
 #= require droom/widgets
 #= require droom/stream
 #= require droom/map
+#= require cropper
 #= require_self
 
 jQuery ($) ->
@@ -32,8 +32,6 @@ jQuery ($) ->
     
     @find_including_self('[data-action="popup"]').popup()
     @find_including_self('[data-action="close"]').closes()
-    @find_including_self('[data-action="upload"]').uploader()
-    @find_including_self('[data-action="recrop"]').recropper()
     @find_including_self('[data-action="affect"]').affects()
     @find_including_self('[data-action="reveal"]').reveals()
     @find_including_self('[data-action="remove"]').removes()
@@ -48,6 +46,7 @@ jQuery ($) ->
     @find_including_self('[data-action="fit"]').self_sizes()
     @find_including_self('form[data-action="filter"]').filter_form()
     @find_including_self('[data-menu]').action_menu()
+    @find_including_self('td[data-hoverable]').hover_column()
     
     # it's not very easy to add data attributes to kaminari pagination links
     
@@ -68,7 +67,8 @@ jQuery ($) ->
     @find_including_self('.person_picker').person_picker()
     @find_including_self('.group_picker').group_picker()
     @find_including_self('.drag_sort').drag_sort()
-    @find_including_self('input.password').password_field()
+    # @find_including_self('input.password').password_field()
+    @find_including_self('form.password').password_form()
     @find_including_self('input[type="submit"]').submitter()
     @find_including_self('form.preferences').preferences_form()
     @find_including_self('form.scrap').scrap_form()

data/app/assets/javascripts/droom/actions.js.coffee

@@ -141,11 +141,12 @@ jQuery ($) ->
   class Toggle
     constructor: (element, @_selector, @_name) ->
       @_container = $(element)
+      @_remembered = @_container.attr('data-remembered') != 'false'
       @_name ?= "droom_#{@_selector}_state"
       @_showing_text = @_container.text().replace('show', 'hide').replace('Show', 'Hide').replace('more', 'less').replace('More', 'Less')
       @_hiding_text = @_showing_text.replace('hide', 'show').replace('Hide', 'Show').replace('less', 'more').replace('Less', 'More')
       @_container.click @toggle
-      if cookie = $.cookie(@_name)
+      if @_remembered and cookie = $.cookie(@_name)
         @_showing = cookie is "showing"
         @apply()
       else
@@ -164,6 +165,7 @@ jQuery ($) ->
       @_container.addClass('showing')
       $(@_selector).slideDown () =>
         @show()
+        @_container.trigger('toggled')
 
     show: =>
       $(@_selector).show()
@@ -175,6 +177,7 @@ jQuery ($) ->
     slideUp: =>
       $(@_selector).slideUp () =>
         @hide()
+        @_container.trigger('toggled')
       
     hide: =>
       $(@_selector).hide()
@@ -184,9 +187,10 @@ jQuery ($) ->
       @store()
       
     store: () =>
-      value = if @_showing then "showing" else "hidden"
-      $.cookie @_name, value,
-         path: '/'
+      if @_remembered
+        value = if @_showing then "showing" else "hidden"
+        $.cookie @_name, value,
+           path: '/'
 
 
   # The collapser is a self-expanding unit. Basically a toggle. #todo: amalgamate!
@@ -200,7 +204,7 @@ jQuery ($) ->
     constructor: (element, opts) ->
       @container = $(element)
       @options = $.extend {
-        toggle: ".heading a.name"
+        toggle: "a.name"
         body: ".detail"
         preview: ".preview"
       }, opts
@@ -337,6 +341,13 @@ jQuery ($) ->
 
 
 
+  $.fn.hover_column = ->
+    @each ->
+      classes = @className.split(' ').join('.')
+      $(@).bind "mouseenter", (e) ->
+        $("td.#{classes}").addClass('hover')
+      $(@).bind "mouseleave", (e) ->
+        $("td.#{classes}").removeClass('hover')
 
 
 

data/app/assets/javascripts/droom/lib/wysihtml5.js

@@ -5057,7 +5057,13 @@ wysihtml5.dom.parse = (function() {
   var attributeCheckMethods = {
     url: (function() {
       var REG_EXP = /^https?:\/\//i;
+      var MUSTACHE_REG_EXP = /^(\{\{\w+\}\}$)/i;
       return function(attributeValue) {
+        if (attributeValue.match(MUSTACHE_REG_EXP)) {
+          return attributeValue.replace(MUSTACHE_REG_EXP, function(match) {
+            return match.toLowerCase();
+          });
+        }
         if (!attributeValue || !attributeValue.match(REG_EXP)) {
           return null;
         }
@@ -5069,7 +5075,13 @@ wysihtml5.dom.parse = (function() {
 
     src: (function() {
       var REG_EXP = /^(\/|https?:\/\/)/i;
+      var MUSTACHE_REG_EXP = /^(\{\{\w+\}\}$)/i;
       return function(attributeValue) {
+        if (attributeValue.match(MUSTACHE_REG_EXP)) {
+          return attributeValue.replace(MUSTACHE_REG_EXP, function(match) {
+            return match.toLowerCase();
+          });
+        }
         if (!attributeValue || !attributeValue.match(REG_EXP)) {
           return null;
         }
@@ -5081,7 +5093,13 @@ wysihtml5.dom.parse = (function() {
 
     href: (function() {
       var REG_EXP = /^(\/|https?:\/\/|mailto:)/i;
+      var MUSTACHE_REG_EXP = /^(\{\{\w+\}\}$)/i;
       return function(attributeValue) {
+        if (attributeValue.match(MUSTACHE_REG_EXP)) {
+          return attributeValue.replace(MUSTACHE_REG_EXP, function(match) {
+            return match.toLowerCase();
+          });
+        }
         if (!attributeValue || !attributeValue.match(REG_EXP)) {
           return null;
         }

data/app/assets/javascripts/droom/widgets.js.coffee

@@ -217,81 +217,56 @@ jQuery ($) ->
       @_field.val(i)
 
 
-  $.fn.password_field = ->
+  $.fn.password_form = ->
     @each ->
-      new PasswordField(@)
+      new PasswordForm(@)
 
-  class PasswordField
+  class PasswordForm
     constructor: (element, opts) ->
       @options = $.extend
         length: 6
       , opts
-      @field = $(element)
-      @_notice = $('.password_notice')
-      @form = @field.parents('form')
+      @form = $(element)
+      @password_field = @form.find('input.password')
+      @confirmation_field = @form.find('input.password_confirmation')
+      @fields = @form.find('input')
+      @confirmation_holder = @confirmation_field.parents("p")
       @submit = @form.find('.submit')
-      @confirmation = $("#" + @field.attr("id") + "_confirmation")
-      @confirmation_holder = @confirmation.parents("p")
-      @mock_password = 'password'
-      @required = @field.attr('required')
-      @field.focus @wake
-      @field.blur @sleep
-      @field.keyup @check
-      @confirmation.keyup @check
-      @form.submit @stumbit
-      # to set up initial state
-      @check()
-      @sleep()
-
-    wake: () =>
-      if @field.val() is @mock_password
-        @field.removeClass "empty"
-        @field.val ""
-
-    sleep: () =>
-      v = @field.val()
-      if v is @mock_password or v is ""
-        @field.val @mock_password
-        @field.addClass("empty")
-        # if we're not required, then both-empty is also a submittable condition
-        if @confirmation.val() is "" and not @required
-          @submittable()
-
-    check: () =>
-      if @empty() and !@required
-        @field.removeClass("ok notok").addClass("empty")
-        @confirmation_holder.hide()
-        @submittable()
-        @notify ""
-      else if @valid()
-        @field.addClass("ok").removeClass "notok"
-        @confirmation_holder.show()
-        @notify "You must confirm your password before you can proceed."
-        if @matching()
-          @notify "Passwords match.", "successful"
-          @confirmation.addClass("ok").removeClass("notok")
-          @submittable()
-        else
-          if @confirmation_empty()
-            @notify "Please confirm your password."
-          else
-            @notify "The confirmation does not match your password.", "erratic"
-          @confirmation.addClass("notok").removeClass("ok")
-          @unsubmittable()
+      @required = @password_field.attr('required')
+
+      @fields.bind 'keyup', @checkForm
+      @password_field.bind 'keyup', @checkPassword
+      @fields.bind 'invalid', @invalidField
+      @form.bind 'submit', @submitIfValid
+      
+      @fields.attr('data-strict', false)
+      @unsubmittable()
+      @confirmation_holder.hide()
+
+    checkForm: () =>
+      @fields.removeClass('invalid').addClass('valid')
+      if @form.get(0).checkValidity() then @submittable() else @unsubmittable()
+    
+    invalidField: () ->
+      # note thin arrow: `this` is the failing input element
+      field = $(@)
+      field.removeClass('valid')
+      if !field.attr('data-strict') and !field.val() or field.val() is ""
+        field.addClass('empty')
       else
+        field.addClass("invalid")
+      
+    checkPassword: () =>
+      if @password_field.val() == "" and !@required
+        @confirmation_field.attr('pattern', '').attr('required', false)
         @confirmation_holder.hide()
-        @confirmation.val ""
-        @unsubmittable()
-        @field.addClass("notok").removeClass("ok")
-        @confirmation.addClass("notok").removeClass("ok")
-        if @empty()
-          @notify "Please enter a password."
+      else
+        @confirmation_field.attr('pattern', @password_field.val()).attr('required', true)
+        if @password_field.get(0).checkValidity()
+          @confirmation_holder.show()
         else
-          @notify "Your password should have least six letters.", "erratic"
-    
-    notify: (message, cssclass) =>
-      @_notice.removeClass('erratic successful').addClass(cssclass).text(message)
-      
+          @confirmation_holder.hide()
+          
     submittable: () =>
       @submit.removeClass("unavailable")
       @blocked = false
@@ -300,25 +275,15 @@ jQuery ($) ->
       @submit.addClass("unavailable")
       @blocked = true
 
-    empty: () =>
-      !@field.val() || @field.val().length == 0
-
-    confirmation_empty: () =>
-      !@confirmation.val() || @confirmation.val().length == 0
-      
-    valid: () =>
-      v = @field.val()
-      v.length >= @options.length and (!@options.validator? or @options.validator.test(v))
-
-    matching: () =>
-      @confirmation.val() is @field.val()
-
-    stumbit: (e) =>
+    submitIfValid: (e) =>
+      @fields.attr('data-strict', true)
+      @checkForm()
       if @blocked
         e.preventDefault()
       else
-        @field.val("") if @field.val() is @mock_password
-        
+        # might as well debounce, since we're here
+        @submit.val('please wait')
+        @unsubmittable()
 
 
   # A captive form submits via an ajax request and pushes its results into the present page in the place 
@@ -926,11 +891,11 @@ jQuery ($) ->
         afterSelect: null
       , options)
       if options.type
-        @url = "/suggestions/#{options.type}.json"
+        @options.url ?= "/suggestions/#{options.type}.json"
       else
-        @url = "/suggestions.json"
-      if options.preload
-        @url += "?empty=all"
+        @options.url ?= "/suggestions.json"
+      if @options.preload
+        @options.url += "?empty=all"
       @dropdown = new Dropdown @prompt,
         on_select: @select
         on_keyup: @get
@@ -961,7 +926,7 @@ jQuery ($) ->
           @suggest []
         else
           @request.abort() if @request
-          @request = $.getJSON(@url, "term=" + encodeURIComponent(query) + "&limit=" + @options.limit, (suggestions) =>
+          @request = $.getJSON(@options.url, "term=" + encodeURIComponent(query) + "&limit=" + @options.limit, (suggestions) =>
             @cache[query] = suggestions
             @blanks.push query if suggestions.length is 0
             @suggest suggestions
@@ -980,7 +945,7 @@ jQuery ($) ->
       @dropdown.show(suggestions)
       @options.afterSuggest.call(@, suggestions) if @options.afterSuggest
 
-    select: (value) =>
+    select: (value, id) =>
       if @options.fill_field?
         @prompt.val(value)
         @prompt.trigger('suggester.change')
@@ -1024,35 +989,31 @@ jQuery ($) ->
     constructor: () ->
       super
       @target = $('textarea#scrap_body')
+      @caption = $('textarea#scrap_note')
       @thumb = $('.scrapvideo .thumb')
 
     suggest: (suggestions) =>
-      @button.removeClass "waiting"
-      @prompt.removeClass "waiting"
+      @unwait()
       if suggestions.length > 0
-        $.each suggestions, (i, suggestion) =>
-          link = $("<a href=\"/videos/#{suggestion.unique_id}.js\"><img src='#{suggestion.thumbnails[2].url}' /><span class=\"title\">#{suggestion.title.truncate(36)}</span><br /><span class=\"description\">#{suggestion.description.truncate(48)}</span></a>")
-          value = suggestion.value || suggestion.prompt
-          link.remote
-            on_success: (response) =>
-              @select(response, suggestion)
-          link.hover () =>
-            @hover(link)
-          $("<li></li>").addClass("video").append(link).appendTo(@container)
-        @suggestions = @container.find("a")
-        @show()
+        detailed_suggestions = $.map suggestions, (suggestion, i) ->
+          {type: "video", id: suggestion.unique_id, value: "<img src='#{suggestion.thumbnails[0].url}' /><span class=\"title\">#{suggestion.title?.truncate(36)}</span><br /><span class=\"description\">#{suggestion.description?.truncate(48)}</span>"}
+        @dropdown.show(detailed_suggestions)
       else
         @hide()
-      @options.afterSuggest.call @, suggestions  if @options.afterSuggest
+      @options.afterSuggest.call @, suggestions if @options.afterSuggest
 
-    select: (response, selection) =>
+    select: (value, id) =>
       @hide()
       @prompt.trigger 'suggester.change'
-      @target.val selection.unique_id
-      @thumb.empty().html(response)
+      @target.val(id)
+      title = $("<div>#{value}</div>").find('.title')
+      @caption.val(title.text()) if @caption.val() is ""
+      $.get "/videos/#{id}.js", @preview, 'html'
       @options.afterSelect?.call(@, value)
-
-
+    
+    preview: (html) =>
+      @thumb.empty().html(html)
+      
 
   # I've just lifted this out of the suggester so that it can be used in other pickers.
 
@@ -1079,8 +1040,8 @@ jQuery ($) ->
       @reset()
       if items.length > 0
         $.each items, (i, item) =>
-          id = item.id || item.value
-          value = item.value || item.prompt || item.id
+          id = item.id ? item.value ? item.unique_id
+          value = item.title ? item.value ? item.prompt ? item.id
           link = $("<a href=\"#\">#{value}</a>")
           link.hover () =>
             @hover(link)
@@ -1088,7 +1049,7 @@ jQuery ($) ->
               e.preventDefault()
               e.stopPropagation()
               @item = i
-              @select(value)
+              @select(value, id)
           $("<li></li>").addClass(item.type).append(link).appendTo(@drop)
       @items = @drop.find("a")
         
@@ -1101,9 +1062,9 @@ jQuery ($) ->
         e.stopPropagation()
         @select $(highlit).text()
 
-    select: (value) =>
+    select: (value, id) =>
       @hide()
-      @options.on_select?(value)
+      @options.on_select?(value, id)
 
     cancel: (e) =>
       @hide()

data/app/assets/stylesheets/droom.css.sass

@@ -1,24 +1,48 @@
-//= depend_on _definitions.css.sass
-//= depend_on lib/_popups.css.sass
-//= depend_on lib/_kalendae.css.sass
-//= depend_on lib/_toolbar.css.sass
+@import compass/css3
+@import droom/variables
+
+$dark: #4d4e53 !default
+$mid: #9a9b9d !default
+$pale: #bdbdbd !default
+$verypale: #d6d6d4 !default
+$palest: #f2f0ed !default
+
+$blue: #00afdb
+$green: #74b87a
+$warmred: #ff625b
+$darkred: #b92a23
+$purple: #a27ec3
+$red: #ed1c24
+$palered: lighten($red, 30)
+
+$page: #ffffff !default
+$text: $green !default
+$link: #8f9cb8 !default
+$hover: #bec7d8 !default
+$active: #8c8d8e !default
+$submit: $green !default
+$error: #b92a23 !default
+$help: #e59811 !default
+$visited: $link !default
+$input: $blue !default
+$admin: $blue
 
 $datemark_width: 50px
 $datemark_margin: 5px
 $tool_button_height: 32px
 $tool_button_width: 32px
 
-@import compass/css3
-@import definitions
-@import lib/toolbar
+@import droom/mixins
+@import droom/toolbar
 @import lib/kalendae
-@import lib/popups
+@import droom/popups
+
 
 p.large
   font-size: 1.6em
   
 a.dropbox
-  +icon_link("droom/dropbox.png")
+  +big_icon_link("droom/dropbox.png")
   color: #4ea1ea
   &:visited
     color: #4ea1ea
@@ -29,25 +53,21 @@ a.dropbox
     color: $hover
 
 a.dropboxer
-  +icon_link("droom/dropbox_button_small.png")
-  margin-left: 10px
+  +icon_link("droom/dropbox_small.png")
+  margin-left: 0
   color: #4ea1ea
   &:visited
     color: #4ea1ea
   &:hover
     color: $hover
-  &.revoke
-    background-position: 0 -48px
-    color: $hover
-
 
 input.dropbox.revoke[type="submit"]
-  +icon_link("droom/revoke.png")
+  +icon_link("droom/revoke_small.png")
   background-color: none
   color: $blue
   padding: 0
   height: auto
-  line-height: 1
+  line-height: 20px
   &:hover
     color: $hover
   
@@ -58,10 +78,21 @@ a.cancel, a.cancel:visited
 a.external
   color: $mid
 
+a.toggle
+  +icon_link("droom/toggle.png")
+  color: $blue
+  &.showing
+    background-position: 0 -64px
+    &:hover
+      background-position: 0 -96px
+
 .unavailable
   +small
   +pale
 
+.suffix
+  clear: both
+
 a.autofetch
   display: inline-block
   &.waiting
@@ -118,10 +149,6 @@ p.stretcher
     a, a:visited
       color: $dark
 
-a.changed
-  color: $green
-  +hover
-
 
 h2.section
   font-size: 1.25em
@@ -359,14 +386,14 @@ form.person
     .img
       width: 130px
       height: 130px
-      .prompt
-        padding-top: 30px
-        +small
-      .scaler
-        width: 100px
-      p.range
-        .slider
-          width: 70px
+    .prompt
+      padding-top: 30px
+      +small
+    .scaler
+      width: 100px
+    p.range
+      .slider
+        width: 70px
   p.name
     margin: 0
     input
@@ -431,9 +458,6 @@ h2.name
   font-size: 2em
   margin: 0
 
-p.description.changed
-  color: $green
-  
 a.dl, a.ul
   display: inline-block
   min-height: 50px
@@ -455,7 +479,6 @@ a.dl, a.ul
     height: 50px
     overflow: hidden
 
-
 span.icon
   display: block
   float: left
@@ -629,28 +652,57 @@ table.people
 
 table.users
   margin-top: 40px
+  border-collapse: collapse
   thead
-    th.admin, th.invited, th.confirmed, th.directory, th.group, th.settings
+    th
       max-width: 24px
       height: 50px
       padding-top: 36px
       padding-left: 6px
-      line-height: 1
-      +rotate(-75deg)
+      span.rotated
+        display: block
+        line-height: 1
+        white-space: nowrap
+        +rotate(-75deg)
+    th.spacer
+      padding: 10px
+    th.note
+      font-weight: normal
+      height: 20px
+      color: $pale
+      font-size: 85%
+      padding: 5px
+      border-bottom: 1px solid $pale
+      text-align: center
+      &.spacer
+        border: none
   tbody
+    td
+      padding-top: 15px
+    td.hover
+      background-color: $palest
+    tr:hover
+      td
+        background-color: $palest
+        border-color: $palest
+    td[data-hoverable]:hover
+      background-color: $pale
     td.name
       min-width: 140px
       min-height: 36px
       line-height: 1
+      text-align: left
     td.email
       +small
       +pale
       line-height: 1.8em
-    td.admin, td.invited, td.confirmed, td.directory, td.group
-      padding-right: 2px
-      width: 36px
+      text-align: left
+    td.spacer
+      padding: 10px
+    td
+      width: 30px
       text-align: center
-      span, a
+      span, a.yes, a.no
         +icon("droom/minisymbols.png")
         &.yes
           background-position: 0 -384px
@@ -661,17 +713,14 @@ table.users
         &.waiting
           background-image: image-url('droom/spinner.gif')
           background-position: 2px 2px
-      span.no
-        background-position: 0 -504px
+      span.no, span.yes
+        +opacity(0.3)
       a.no
         &:hover
-          background-position: 0 -576px
-    td.settings
-      padding-right: 2px
-      width: 24px
-      overflow: hidden
-      a
-        +icon("droom/edit.png")
+          background-position: 0 -648px
+      a.yes
+        &:hover
+          background-position: 0 -480px
       
       
       
@@ -705,23 +754,6 @@ table.groups
   p
     margin-top: 0
 
-p.twister
-  &:first-child
-    margin-top: 0
-  a
-    display: block
-    padding-left: 18px
-    background: 
-      repeat: no-repeat
-      position: 0 -62px
-      image: image-url('droom/twister.png')
-    &:hover
-      background-position: 0 -94px
-  &.closed
-    a
-      background-position:  0 2px
-      &:hover
-        background-position: 0 -30px
 
 
 
@@ -801,7 +833,7 @@ div.menu
   z-index: 50
   display: none
   +box-shadow(0 4px 6px $dark)
-  background-color: $blue
+  background-color: $admin
   ul.actions
     padding: 0
     margin: 8px 10px 3px 5px
@@ -903,7 +935,11 @@ div.copyholder
   position: relative
   a.copy
     display: block
-    min-width: 40px
+    color: $mid
+    font-weight: normal
+    font-size: 16px
+    white-space: nowrap
+    +icon_link("droom/smallcopy.png")
     min-height: 15px
   embed
     position: absolute
@@ -963,7 +999,7 @@ ul.dropdown
         margin-top: 2px
       span.description
         white-space: nowrap
-        color: $pale
+        color: $mid
         font-size: 0.8em
       a
         padding: 8px 6px 6px 6px
@@ -1066,45 +1102,24 @@ input[type="text"], input[type="password"], input[type="email"], select, textare
     background-color: #fff
     border-color: $verypale
 
-input[type="submit"], a.submit, a.submit:visited
+input[type="submit"]
+  +button($green)
   display: inline-block
-  background: 
-    color: $submit 
-    image: image-url('droom/small_go.png') 
-    repeat: no-repeat 
-    position: 8px 14px
-  padding: 5px 12px 5px 24px
-  text-align: left
-  color: white
-  // height: 39px
-  border: none
-  font-size: 1em
-  line-height: 2
-  +border-radius(3px)
-  &:hover
-    background-color: $hover
-    color: white
   &.unavailable
     background-color: $mid
     +opacity(0.5)
     &:hover
       background-color: $mid
   &.waiting
-    background:
-      color: $pale
-      image: image-url('droom/smallspinner.gif')
-      position: 5px 11px
+    background-color: $pale
     &:hover
       background-color: $pale
 
-
 #account
   position: relative
   clear: both
   width: 600px
   label
-    font-weight: bold
-    color: $dark
     font-size: 1.1em
     &.minor
       font-size: 0.9em
@@ -1186,13 +1201,13 @@ div.timepicker
     cursor: pointer
     padding: 4px 3px
     &.selected
-      background: $rubine
+      background: $link
       color: #fff
       font-weight: bold
     &:hover
       background: $verypale
     &:active
-      background: $rubine
+      background: $link
       color: #fff
 
 #minicalendar
@@ -1370,6 +1385,24 @@ ul.tags
     display: inline-block
     
 
+p.twister
+  &:first-child
+    margin-top: 0
+  a
+    display: block
+    padding-left: 18px
+    background: 
+      repeat: no-repeat
+      position: 0 -62px
+      image: image-url('droom/twister.png')
+    &:hover
+      background-position: 0 -94px
+  &.closed
+    a
+      background-position:  0 2px
+      &:hover
+        background-position: 0 -30px
+
 .twisted
   display: none
 
@@ -1419,7 +1452,20 @@ a.expander
 ul.filing
   padding: 0
   list-style: none
-  
+
+ul.folder
+  position: relative
+  float: right
+  width: 240px
+  padding-left: 20px
+  margin-bottom: 10px
+  margin-top: 0
+  list-style: none
+  li.folder
+    a.folder
+      font-weight: bold
+      color: $text
+
 ul#folders, div.attachments
   padding-left: 0
   li
@@ -1460,7 +1506,7 @@ input.search_box
 #flashes
   position: absolute
   top: 20px
-  left: 50px
+  right: 50px
   width: 300px
   p
     display: none
@@ -1472,8 +1518,8 @@ input.search_box
       background-color: $green
       border-color: darken($green, 10%)
     &.alert
-      background-color: $rubine
-      border-color: darken($rubine, 10%)
+      background-color: $link
+      border-color: darken($link, 10%)
     a.closer
       display: block
       float: right
@@ -1510,7 +1556,7 @@ nav.icons
     +panel_icon("droom/integration_buttons.png", -192px, 0)
   a.keywords
     +panel_icon("droom/integration_buttons.png", -224px, 0)
-  a.search                          
+  a.suggestions                          
     +panel_icon("droom/integration_buttons.png", -256px, 0)
   a.devices
     +panel_icon("droom/integration_buttons.png", -288px, 0)
@@ -1616,7 +1662,6 @@ ul.documents
   margin: 20px 0 32px -2px
   padding: 0
   list-style: none
-  
 
 ul.people
   margin: 20px 0 32px -2px
@@ -1624,7 +1669,7 @@ ul.people
   list-style: none
   li.person
     display: inline-block
-    width: 280px
+    width: 190px
     height: 48px
     line-height: 1.1
     margin-bottom: 10px
@@ -1637,7 +1682,7 @@ ul.people
       width: 32px
       height: 32px
       margin-right: 9px
-      border: 4px solid white
+      border: 2px solid white
       +box-shadow(1px 2px 5px $mid)
       background:
         color: $mid
@@ -1669,7 +1714,7 @@ ul.people
       overflow: hidden
       padding-top: 4px
       span.name
-        font-size: 1.2em
+        font-size: 1em
 
 .search_results
   position: relative
@@ -1844,12 +1889,37 @@ div.popup
     background-color: white
     padding: 20px 140px
 
+  div.person
+    margin: 20px 20px
+    div.mugshot
+      position: relative
+      display: block
+      float: left
+      width: 130px
+      height: 130px
+      margin-right: 20px
+      margin-bottom: 10px
+      border: 2px solid white
+      +box-shadow(1px 2px 5px $mid)
+      background:
+        color: $mid
+        repeat: no-repeat
+        position: center center
+        size: cover
+    div.detail
+      overflow: hidden
+      h3
+        margin: 0
+        font-size: 2em
+      p.contact
+        +pale
+        margin-top: 0
+
   div.body
     position: relative
     margin-top: 0
     overflow: hidden
     height: 326px
-    background-color: white
     p
       margin: 20px 20px
       font-size: 1.5em
@@ -1888,6 +1958,7 @@ div.popup
         float: left
         margin: 0
         width: 170px
+      
     .icon
       width: 60px
       height: 60px
@@ -1899,7 +1970,7 @@ div.popup
       
   div.scrapevent, div.scrapdocument
     position: relative
-    margin: 0 40px 0 60px
+    margin: 0
     overflow: auto
     padding-top: 126px
     background-color: white
@@ -2072,23 +2143,28 @@ div.popup
     position: absolute
     top: 1000px
     left: 0
+  .prompt
+    text-align: center
+    padding: 20px
+    line-height: 1.25
+    a
+      color: white
+      +glow_on_hover
+    .note
+      color: $pale
+      margin-top: 2px
   .img
+    position: absolute
+    top: 0
+    left: 0
+    &:empty
+      display: none
+  &.hover
+    .img
     .prompt
-      text-align: center
-      padding: 50px
-      line-height: 1.25
       a
         color: white
-        +glow_on_hover
-      .note
-        color: $pale
-        margin-top: 2px
-  &.hover
-    .img
-      .prompt
-        a
-          color: white
-          text-shadow: 0 0 3px white
+        text-shadow: 0 0 3px white
       
   a.detach
     position: absolute