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