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
Hide 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) { ...@@ -39,6 +39,7 @@ function DevServer(port, config) {
if (url.pathname === '/document/license') { if (url.pathname === '/document/license') {
content = ` content = `
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
...@@ -51,6 +52,7 @@ function DevServer(port, config) { ...@@ -51,6 +52,7 @@ function DevServer(port, config) {
`; `;
} else if (url.pathname === '/document/code_of_conduct') { } else if (url.pathname === '/document/code_of_conduct') {
content = ` content = `
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
...@@ -63,6 +65,7 @@ function DevServer(port, config) { ...@@ -63,6 +65,7 @@ function DevServer(port, config) {
`; `;
} else { } else {
content = ` content = `
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
......
src/styles/annotator/annotator.scss
View file @ 5277df4c
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
@use '../mixins/reset'; @use '../mixins/reset';
@use '../mixins/shadow'; @use '../mixins/shadow';
// Shared components.
@use '../components/svg-icon';
// Annotator-specific components.
@use './adder'; @use './adder';
@use './bucket-bar'; @use './bucket-bar';
@use './highlights'; @use './highlights';
...@@ -107,7 +111,6 @@ $sidebar-collapse-transition-time: 150ms; ...@@ -107,7 +111,6 @@ $sidebar-collapse-transition-time: 150ms;
text-decoration: none; text-decoration: none;
height: 30px; height: 30px;
width: 30px; width: 30px;
padding: 0;
margin-bottom: 5px; margin-bottom: 5px;
&:active { &:active {
......
src/styles/sidebar/sidebar.scss
View file @ 5277df4c
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
@use '../util'; @use '../util';
@use './elements'; @use './elements';
// Shared components
// -----------------
@use '../components/svg-icon';
// Components // Components
// ---------- // ----------
@use './components/annotation-action-bar'; @use './components/annotation-action-bar';
...@@ -46,7 +50,6 @@ ...@@ -46,7 +50,6 @@
@use './components/share-links'; @use './components/share-links';
@use './components/sidebar-content-error'; @use './components/sidebar-content-error';
@use './components/sidebar-panel'; @use './components/sidebar-panel';
@use './components/svg-icon';
@use './components/spinner'; @use './components/spinner';
@use './components/tag-editor'; @use './components/tag-editor';
@use './components/tag-list'; @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