Skip to content

C
coopwire-hypothesis
Commit 5277df4c authored by Robert Knight's avatar Robert Knight
Browse files
Options

Fix sidebar vertical toolbar button alignment 

The client's test page was missing a `<!DOCTYPE html>` declaration and
as a result rendered in _quirks mode_ rather than _standards mode_. This
hid an issue where the toolbar buttons were not centered correctly in
standards-mode documents.

This incorrect centering was caused by:

 1. The CSS bundle for the "annotator" part of the app not including the
    CSS styles for the `SvgIcon` component
 2. An unnecessary `padding` declaration on the `.annotator-frame-button`
    class

I haven't investigated in detail exactly which quirks-vs-standards mode
difference resulted in the centering still being OK in quirks-mode.

This commit fixes these two issues and fixes toolbar button centering in
both quirks and standards-mode documents.

It also updates the client's test page to add the `<!DOCTYPE html>`
declaration since standards mode is what most web content uses.
parent fdbd0f4a
Show whitespace changes
Inline Side-by-side
Showing with 11 additions and 2 deletions
scripts/gulp/dev-server.js
View file @ 5277df4c
......@@ -39,6 +39,7 @@ function DevServer(port, config) {
if (url.pathname === '/document/license') {
content = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
......@@ -51,6 +52,7 @@ function DevServer(port, config) {
`;
} else if (url.pathname === '/document/code_of_conduct') {
content = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
......@@ -63,6 +65,7 @@ function DevServer(port, config) {
`;
} else {
content = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
......
src/styles/annotator/annotator.scss
View file @ 5277df4c
......@@ -5,6 +5,10 @@
@use '../mixins/reset';
@use '../mixins/shadow';
// Shared components.
@use '../components/svg-icon';
// Annotator-specific components.
@use './adder';
@use './bucket-bar';
@use './highlights';
......@@ -107,7 +111,6 @@ $sidebar-collapse-transition-time: 150ms;
text-decoration: none;
height: 30px;
width: 30px;
padding: 0;
margin-bottom: 5px;
&:active {
......
src/styles/sidebar/sidebar.scss
View file @ 5277df4c
......@@ -9,6 +9,10 @@
@use '../util';
@use './elements';
// Shared components
// -----------------
@use '../components/svg-icon';
// Components
// ----------
@use './components/annotation-action-bar';
......@@ -46,7 +50,6 @@
@use './components/share-links';
@use './components/sidebar-content-error';
@use './components/sidebar-panel';
@use './components/svg-icon';
@use './components/spinner';
@use './components/tag-editor';
@use './components/tag-list';
......
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