Skip to content

C
coopwire-hypothesis
Commit 17cea23b authored by Randall Leeds's avatar Randall Leeds
Browse files
Options

{tool,top}bar fixes for high dpi 

This moves away from measuring layout of non-typographical elements
in ems, favoring px for better consistency across devices with different
pixel densities. While that may sound backward, the reality is that CSS
pixels are device independent, and non-integer em values seem to be handled
less consistently.

Finally, there were some font size and line height tweaks made here to match
the new measurements of the top bar. This provides a consistent feel to the
top bar across devices and dpi.
parent 812efa1f
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 101 deletions
h/css/common.scss
View file @ 17cea23b
...@@ -363,7 +363,7 @@ blockquote { ...@@ -363,7 +363,7 @@ blockquote {
content: ''; content: '';
position: absolute; position: absolute;
height: 0; height: 0;
left: 5px; left: 0;
width: 0; width: 0;
} }
...@@ -387,7 +387,7 @@ blockquote { ...@@ -387,7 +387,7 @@ blockquote {
// Align the tail // Align the tail
&:before, &:after { &:before, &:after {
left: auto; left: auto;
right: 5px; right: 0;
} }
} }
} }
...@@ -503,7 +503,7 @@ blockquote { ...@@ -503,7 +503,7 @@ blockquote {
//TABS//////////////////////////////// //TABS////////////////////////////////
.nav-tabs { .nav-tabs {
@include pie-clearfix; @include pie-clearfix;
margin: 0 .2em; margin: 0;
a { a {
font-family: $sansFontFamily; font-family: $sansFontFamily;
...@@ -513,15 +513,15 @@ blockquote { ...@@ -513,15 +513,15 @@ blockquote {
& > li { & > li {
@include box-shadow(inset 2px -10px 13px -8px hsla(0, 0%, 0%, .1)); @include box-shadow(inset 2px -10px 13px -8px hsla(0, 0%, 0%, .1));
background: darken($white, 2%); background: darken($white, 2%);
border-top-right-radius: 2em 5em; border-top-right-radius: 32px 80px;
border-top-left-radius: 2em 5em; border-top-left-radius: 32px 80px;
border: .1em solid $grayLighter; border: 1px solid $grayLighter;
border-bottom: none; border-bottom: none;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
margin-right: -.5em; margin-right: -8px;
padding: .25em 1em .5em; padding: 4px 16px 8px;
position: relative; position: relative;
&:hover { &:hover {
...@@ -541,11 +541,11 @@ blockquote { ...@@ -541,11 +541,11 @@ blockquote {
} }
.tab-content { .tab-content {
@include border-radius(.1em); @include border-radius(1px);
background: $white; background: $white;
border: solid .1em $grayLighter; border: solid 1px $grayLighter;
margin-top: -.1em; margin-top: -1px;
padding: 1em; padding: 16px;
position: relative; position: relative;
.tab-pane { .tab-pane {
...@@ -560,10 +560,10 @@ blockquote { ...@@ -560,10 +560,10 @@ blockquote {
//KNOCKOUT/////////// //KNOCKOUT///////////
//Provides a knockout background //Provides a knockout background
.knockout { .knockout {
@include border-radius(.5em); @include border-radius(8px);
@include pie-clearfix; @include pie-clearfix;
@include box-shadow(inset 1px 1px 3px hsla(0, 0%, 0%, .1)); @include box-shadow(inset 1px 1px 3px hsla(0, 0%, 0%, .1));
padding: 1em; padding: 16px;
} }
...@@ -584,11 +584,13 @@ blockquote { ...@@ -584,11 +584,13 @@ blockquote {
background: $white; background: $white;
border: solid 1px $grayLighter; border: solid 1px $grayLighter;
border-style: solid none; border-style: solid none;
height: 2em; height: 30px;
font-size: 1.3em;
line-height: 28px;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
top: .5em; top: 8px;
z-index: 5; z-index: 5;
.barbutton { .barbutton {
...@@ -602,7 +604,11 @@ blockquote { ...@@ -602,7 +604,11 @@ blockquote {
} }
.inner > * { .inner > * {
padding: .3em; margin-right: 8px;
&:last-child {
margin-right: 0;
}
&.pull-right { &.pull-right {
display: inline-block; display: inline-block;
...@@ -610,14 +616,10 @@ blockquote { ...@@ -610,14 +616,10 @@ blockquote {
} }
&.search-upper { &.search-upper {
padding: 0em; padding: 0;
padding-top: .15em; padding-top: 1px;
} }
} }
.right-border {
padding-right: 3.7em;
}
} }
...@@ -625,19 +627,19 @@ blockquote { ...@@ -625,19 +627,19 @@ blockquote {
//MAIN CONTENT/////// //MAIN CONTENT///////
.content { .content {
margin: 0 auto; margin: 0 auto;
padding: 1em; padding: 16px;
padding-top: 3.5em; padding-top: 44px;
.domain { .domain {
margin: .2em 0 .3em; margin: 3px 0 4px;
} }
.domain .favicon { .domain .favicon {
margin: 0 .5em; margin: 0 8px;
} }
.page { .page {
margin-bottom: 1em; margin-bottom: 16px;
a { a {
font-weight: bold; font-weight: bold;
......
h/css/inject.scss
View file @ 17cea23b
...@@ -16,7 +16,7 @@ $baseFontSize: 14px; ...@@ -16,7 +16,7 @@ $baseFontSize: 14px;
padding: 0; padding: 0;
position: absolute; position: absolute;
border: 4px solid $border; border: 4px solid $border;
border-radius: 7px; border-radius: 8px;
width: 40px; width: 40px;
z-index: 999; z-index: 999;
...@@ -73,16 +73,15 @@ $baseFontSize: 14px; ...@@ -73,16 +73,15 @@ $baseFontSize: 14px;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
width: $heatmap-width + 17px; width: $heatmap-width + 18px;
left: -($heatmap-width + 18px);
left: -($heatmap-width + 17px);
svg { svg {
@include stretch-y; @include stretch-y;
background: hsla(0, 0, 0, .1); background: hsla(0, 0, 0, .1);
border-left: solid 1px $grayLighter; border-left: solid 1px $grayLighter;
height: 100%; height: 100%;
left: 17px; left: 18px;
width: $heatmap-width; width: $heatmap-width;
} }
} }
...@@ -94,7 +93,7 @@ $baseFontSize: 14px; ...@@ -94,7 +93,7 @@ $baseFontSize: 14px;
left: 0; left: 0;
position: absolute; position: absolute;
height: 20px; height: 20px;
width: 40px; width: $heatmap-width + 18px;
margin-top: -10px; margin-top: -10px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: center; text-align: center;
...@@ -117,76 +116,85 @@ $baseFontSize: 14px; ...@@ -117,76 +116,85 @@ $baseFontSize: 14px;
font-weight: bold; font-weight: bold;
font-family: $sansFontFamily; font-family: $sansFontFamily;
font-size: 11px; font-size: 11px;
line-height: 17.5px; line-height: 20px;
left: 5px; left: 5px;
right: 2px; right: 2px;
position: absolute; position: absolute;
bottom: 2px;
} }
&:hover { &:hover {
left: 2px; left: 2px;
} }
&.lower, &.upper { &.lower, &.upper, &.commenter {
@include single-transition(margin-top, .2s);
left: 7px; left: 7px;
width: 33.1px; width: 33px;
height: 26.1px;
&:hover {
left: 7px;
}
.label { .label {
left: 0; left: 0;
right: 0; right: 0;
} }
}
&:hover { &.lower, &.upper {
left: 7px; @include single-transition(margin-top, .2s);
} height: 30px;
} }
&.upper { &.upper {
margin-top: -18px;
.svg { .svg {
background-image: url("../images/up_tab.svg"); background-image: url("../images/up_tab.svg");
} }
.label { .label {
bottom: 1px; bottom: 1px;
} }
&:hover { &:hover {
margin-top: -1.2em; margin-top: -20px;
} }
} }
&.lower { &.lower {
margin-top: -1.2em; margin-top: -20px;
.svg { .svg {
background-image: url("../images/down_tab.svg"); background-image: url("../images/down_tab.svg");
} }
.label { .label {
top: 1px; top: 1px;
} }
&:hover { &:hover {
margin-top: -1.6em; margin-top: -18px;
} }
} }
&.flip { &.flip {
@include rotateY(180deg); @include rotateY(180deg);
.label { .label {
@include rotateY(180deg); @include rotateY(180deg);
} }
} }
&.commenter { &.commenter {
@include single-transition(margin-top, .2s); @include single-transition(margin-top, .2s);
left: 3px; margin-top: -18px;
width: 37px;
margin-top: -1.2em;
.svg { .svg {
background-image: url("../images/comment_tab.svg"); background-image: url("../images/comment_tab.svg");
} }
.label {
bottom: 1px;
}
&:hover { &:hover {
margin-top: -1.2em; margin-top: -18px;
} }
} }
} }
...@@ -260,14 +268,15 @@ $baseFontSize: 14px; ...@@ -260,14 +268,15 @@ $baseFontSize: 14px;
.annotator-toolbar { .annotator-toolbar {
@include transition( @include transition(
height .25s, height .25s,
min-height .25s min-height .25s,
max-height .25s
); );
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
height: 200px; height: 200px;
left: -($heatmap-width + 17px - 7px); left: -($heatmap-width + 18px - 7px);
top: .5em; top: 8px;
width: 2.5em; right: 0;
z-index: 2; z-index: 2;
ul, li { ul, li {
...@@ -278,26 +287,27 @@ $baseFontSize: 14px; ...@@ -278,26 +287,27 @@ $baseFontSize: 14px;
li { li {
border-width: 1px; border-width: 1px;
max-height: 35px; max-height: 30px;
margin-bottom: 5px; margin-bottom: 5px;
min-height: 30px;
} }
} }
.annotator-toolbar.annotator-hide { .annotator-toolbar.annotator-hide {
@include transition-delay(.25s); @include transition-delay(.25s);
height: 2.2em; height: 32px;
li { li {
@include transition-delay(.2s, 0, 0); @include transition-delay(.2s, 0, 0);
//@include transition-duration(0 .25s);
border-width: 0; border-width: 0;
max-height: 0;
margin-bottom: 0; margin-bottom: 0;
max-height: 0;
min-height: 0;
&:first-child, &.pushed { &:first-child, &.pushed {
margin-bottom: 5px;
border-width: 1px; border-width: 1px;
max-height: 35px; max-height: 30px;
margin-bottom: 5px;
} }
} }
} }
...@@ -305,35 +315,30 @@ $baseFontSize: 14px; ...@@ -305,35 +315,30 @@ $baseFontSize: 14px;
.annotator-toolbar li { .annotator-toolbar li {
@include border-radius(4px); @include border-radius(4px);
@include smallshadow(0); @include smallshadow(0);
@include transition( @include transition(max-height .25s);
border-width .05s,
margin-bottom .25s,
max-height .25s
);
background: $white; background: $white;
border: solid 1px $grayLighter; border: solid 1px $grayLighter;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
// left: 2px; height: 30px;
height: 2em; width: 30px;
width: 2em;
&:first-child { &:first-child {
@include border-radius(4px 0 0 4px); @include border-radius(4px 0 0 4px);
border-right-style: none; border-right-style: none;
left: 0; left: 0;
width: 2.3em; width: 36px;
} }
a, a:hover, a:active, a:visited, a:link, a:link:hover { a, a:hover, a:active, a:visited, a:link, a:link:hover {
font-size: $baseFontSize * 1.3; font-size: 1.3em;
line-height: $baseLineHeight * 1.3; line-height: 28px;
font-smoothing: antialiased; font-smoothing: antialiased;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
position: absolute; position: absolute;
left: .2em; left: 5px;
color: rgba(200, 200, 200, .3); color: rgba(200, 200, 200, .3);
text-decoration: none; text-decoration: none;
...@@ -364,10 +369,6 @@ $baseFontSize: 14px; ...@@ -364,10 +369,6 @@ $baseFontSize: 14px;
} }
} }
} }
&.pushed {
max-height: 35px;
}
} }
// Toolbar Icons // Toolbar Icons
...@@ -393,10 +394,10 @@ $baseFontSize: 14px; ...@@ -393,10 +394,10 @@ $baseFontSize: 14px;
font-family: $sansFontFamily; font-family: $sansFontFamily;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
margin-left: .7em; margin-left: 11px;
margin-top: .25em; margin-top: 4px;
z-index: 2; z-index: 2;
font-size: $baseFontSize * .86; font-size: .86em;
} }
...@@ -435,8 +436,8 @@ $baseFontSize: 14px; ...@@ -435,8 +436,8 @@ $baseFontSize: 14px;
@media screen and (min-width: 37.5em) { @media screen and (min-width: 37.5em) {
.annotator-frame { .annotator-frame {
@include single-transition(margin-left, .4s); @include single-transition(margin-left, .4s);
width: 428px;// + $heatmap-width + 17px; width: 428px;
margin-left: -428px;// - $heatmap-width - 17px; margin-left: -428px;
} }
} }
......
h/css/sidebar.scss
View file @ 17cea23b
...@@ -8,7 +8,6 @@ $baseFontSize: 14px; ...@@ -8,7 +8,6 @@ $baseFontSize: 14px;
@import 'common'; @import 'common';
//ELEMENT STYLES//////////////////////////////// //ELEMENT STYLES////////////////////////////////
body { body {
background-color: transparent; background-color: transparent;
...@@ -72,10 +71,8 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } ...@@ -72,10 +71,8 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
} }
.topbar { .topbar {
top: .5em;
.inner { .inner {
margin: 0 .5em 0 .5em; margin: 0 8px 0 8px;
} }
} }
...@@ -92,10 +89,10 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } ...@@ -92,10 +89,10 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
} }
.top-padding { .top-padding {
padding-top: .5em; padding-top: 8px;
} }
.bottom-padding { .bottom-padding {
padding-bottom: .5em; padding-bottom: 8px;
} }
.notif-text { .notif-text {
...@@ -111,17 +108,17 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } ...@@ -111,17 +108,17 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
.sheet { .sheet {
@include smallshadow; @include smallshadow;
font-family: $sansFontFamily; font-family: $sansFontFamily;
max-height: 30em; max-height: 480px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 2px; top: 0;
.close { .close {
position: absolute; position: absolute;
right: 1em; right: 1em;
top: .25em; top: .5em;
} }
&.collapsed { &.collapsed {
......
h/css/site.scss
View file @ 17cea23b
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
@import 'compass/css3/images'; @import 'compass/css3/images';
@import 'compass/utilities/color'; @import 'compass/utilities/color';
$baseFontSize: 16px; $baseFontSize: 18px;
@import 'common'; @import 'common';
...@@ -77,16 +77,14 @@ ol { ...@@ -77,16 +77,14 @@ ol {
.topbar { .topbar {
position: fixed; position: fixed;
.inner { .inner {
padding-left: .6em;
margin: 0 auto; margin: 0 auto;
max-width: $break-large; max-width: $break-large;
@include respond-to(tablets) { @include respond-to(tablets) {
padding-left: 3.6em;
margin: 0 auto; margin: 0 auto;
max-width: $break-large; max-width: $break-large;
} }
@include respond-to(wide-handhelds handhelds) { @include respond-to(wide-handhelds handhelds) {
padding: 0 .6em; padding: 0 8px;
margin: 0 auto; margin: 0 auto;
max-width: $break-large; max-width: $break-large;
} }
......
h/js/plugin/heatmap.coffee
View file @ 17cea23b
...@@ -2,7 +2,7 @@ $ = Annotator.$ ...@@ -2,7 +2,7 @@ $ = Annotator.$
class Annotator.Plugin.Heatmap extends Annotator.Plugin class Annotator.Plugin.Heatmap extends Annotator.Plugin
# prototype constants # prototype constants
BUCKET_THRESHOLD_PAD: 25 BUCKET_THRESHOLD_PAD: 30
BUCKET_SIZE: 50 BUCKET_SIZE: 50
BOTTOM_CORRECTION: 14 BOTTOM_CORRECTION: 14
......
h/js/plugin/toolbar.coffee
View file @ 17cea23b
...@@ -110,10 +110,10 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin ...@@ -110,10 +110,10 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
_updateStickyButtons: -> _updateStickyButtons: ->
count = $(@buttons).filter(-> $(this).hasClass('pushed')).length count = $(@buttons).filter(-> $(this).hasClass('pushed')).length
if count if count
height = (count + 1) * 32 # +1 -- top button is always visible height = (count + 1) * 35 # +1 -- top button is always visible
this.toolbar.css("min-height", "#{height}px") this.toolbar.css("min-height", "#{height}px")
else else
height = 32 height = 35
this.toolbar.css("min-height", "") this.toolbar.css("min-height", "")
this.annotator.plugins.Heatmap?.BUCKET_THRESHOLD_PAD = height - 9 this.annotator.plugins.Heatmap?.BUCKET_THRESHOLD_PAD = height
this.annotator.plugins.Heatmap?._update(); this.annotator.plugins.Heatmap?._update();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment