Fix annotations placement

Resize was bound to document rather than window.
joegattnet · Jul 19, 2013 · 638068a · 638068a
1 parent a4e5bc8
commit 638068a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/app/assets/javascripts/nembrot.document.js.coffee b/app/assets/javascripts/nembrot.document.js.coffee
@@ -9,17 +9,19 @@ content_initializers = () ->
   if $('hgroup').data('title')
     document.title = $('hgroup').data('title')
 
-  # needs to happen on resize
+  place_annotations()
+
+resize_initializers = () ->
   place_annotations()
 
 place_annotations = () ->
-  (if media_query('screen-and-min-width-1024px') then _place_annotations_do() else _place_annotations_undo())
+  (if _media_query('default') then _place_annotations_undo() else _place_annotations_do())
   true
 
 _place_annotations_do = () ->
   minimum = 0
-  new_top = undefined
-  corrected_top = undefined
+  new_top = 0
+  corrected_top = 0
   $("li[id*=annotation-]").each (i) ->
     new_top = $("a[id=annotation-mark-" + (i + 1) + "]").offset().top
     corrected_top = (if new_top <= minimum then minimum else new_top)
@@ -29,11 +31,12 @@ _place_annotations_do = () ->
 _place_annotations_undo = () ->
   $("li[id*=annotation-]").offset top: 'auto'
 
-media_query = (media_query_string) ->
+_media_query = (media_query_string) ->
   style = null
   if window.getComputedStyle and window.getComputedStyle(document.body, '::after')
     style = window.getComputedStyle(document.body, '::after')
     style = style.content.replace /"/g, ''
+    console.log style
   style is media_query_string
 
 $ ->
@@ -43,5 +46,5 @@ $ ->
 $(document).on 'pjax:end', ->
   content_initializers()
 
-$(document).on 'resize', ->
-  place_annotations()
+$(window).on 'resize', ->
+  resize_initializers()
diff --git a/app/assets/stylesheets/themes/default.css.sass b/app/assets/stylesheets/themes/default.css.sass
@@ -258,7 +258,7 @@ footer
 
 .annotations
   font:
-    size: $small-font-size
+    size: $small-font-size + 1px
   line-height: $line-height * 2/3
   text-align: left
   text-indent: 0
@@ -267,6 +267,7 @@ footer
     text-indent: $text-indent * -1
     &:target
       background-color: $selected-background-color
+      +transition
     a
       display: inline-block
       text-indent: 0
@@ -377,9 +378,9 @@ ul.citations
   a
     &[href*=http]:after
       //+icon-external-link
-      padding: 0 0 0 0.5em
+      // padding: 0 0 0 0.5em
     &[id*=annotation-mark]
-      font-size: $small-font-size
+      font-size: $small-font-size - 2px
       vertical-align: super
   section
     margin-bottom: $line-height
@@ -571,15 +572,16 @@ ol.books
         +push(9, 9)
         color: $headline-font-color
         display: block
-        margin-top: $line-height * ( ($small-font-size + 1px) / ($line-height * 2/3) ) * -1
         position: absolute
         top: 0
         li
+          font:
+            size: $small-font-size + 1px
           position: absolute
           a:first-of-type
             color: $headline-font-color
             font:
-              size: $small-font-size
+              size: $small-font-size - 2px
             padding-right: 3px
             text-align: right
             vertical-align: super
@@ -592,6 +594,7 @@ ol.books
   // Undo all...
   // Make sure this only applies to ltr pages
   // Maybe we need to always write dir in body / html
+  // Also annotations.
   [dir=ltr]
     #note-content[dir=rtl]
       #text
@@ -713,7 +716,7 @@ ol.books
         +fade(0)
         +hyphens
         +column(3, 6)
-        +push(6, 6)
+        +push(3, 6)
       &:hover
         .annotations
           +fade(1)