diff --git a/static/css/oml.css b/static/css/oml.css
index aae24a4..6ab6c64 100644
--- a/static/css/oml.css
+++ b/static/css/oml.css
@@ -1,16 +1,28 @@
+.OMLQuoteBox {
+ position: relative;
+}
.OMLQuote {
+ position: relative;
padding: 8px;
color: rgb(0, 0, 0);
- background-color: rgb(255, 255, 255);
font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
font-size: 14px;
line-height: 21px;
}
-.OMLAnnotation.selected .OMLQuote {
+.OMLAnnotation .OMLQuoteBackground {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: rgb(255, 255, 255);
+}
+.OMLAnnotation.selected .OMLQuoteBackground {
background-color: rgb(128, 192, 255);
}
+
.OMLAnnotation .OxPlaceholder {
display: none;
}
diff --git a/static/js/annotation.js b/static/js/annotation.js
index ee77fc3..5fcc4e8 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,18 +1,24 @@
'use strict';
oml.ui.annotation = function(annotation, $iframe) {
+ var $quotetext = Ox.Element()
+ .addClass('OxSelectable OMLQuote')
+ .html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '
'))
+ .on({
+ click: function(event) {
+ that.select()
+ $iframe.postMessage('selectAnnotation', {
+ id: annotation.id
+ })
+ }
+ })
var $quote = Ox.Element()
- .addClass('OxSelectable OMLQuote')
- .append(
- Ox.Element().html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '
'))
- ).on({
- click: function(event) {
- that.select()
- $iframe.postMessage('selectAnnotation', {
- id: annotation.id
- })
- }
- })
+ .addClass('OMLQuoteBox')
+ .append(
+ Ox.Element().addClass('OMLQuoteBackground')
+ ).append(
+ $quotetext
+ )
var notes = annotation.notes.length ? annotation.notes.map(function(note) {
note.editable = !note.user
return note