From c9ab48d6acea0986067e0ff0b4bd6a1e07b98150 Mon Sep 17 00:00:00 2001 From: ccd0 Date: Tue, 14 Apr 2020 14:25:27 -0700 Subject: [PATCH] Trim SVGs but specify their intended dimensions with width and height attributes. #2395 --- src/Icons/angle_down.svg | 2 +- src/Icons/bolt.svg | 2 +- src/Icons/book.svg | 2 +- src/Icons/clipboard.svg | 2 +- src/Icons/clock_o.svg | 2 +- src/Icons/close.svg | 2 +- src/Icons/comment_o.svg | 2 +- src/Icons/compress.svg | 2 +- src/Icons/download.svg | 2 +- src/Icons/edit.svg | 2 +- src/Icons/expand.svg | 2 +- src/Icons/eye.svg | 2 +- src/Icons/heart.svg | 2 +- src/Icons/link.svg | 2 +- src/Icons/minus_square.svg | 2 +- src/Icons/minus_square_o.svg | 2 +- src/Icons/picture_o.svg | 2 +- src/Icons/plus_square.svg | 2 +- src/Icons/plus_square_o.svg | 2 +- src/Icons/refresh.svg | 2 +- src/Icons/times_circle.svg | 2 +- src/Icons/wrench.svg | 2 +- src/css/style.css | 22 +++++++++++++--------- tools/icons.js | 10 +++++++++- 24 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/Icons/angle_down.svg b/src/Icons/angle_down.svg index 6e95549bd7..d3a5c4e9ee 100644 --- a/src/Icons/angle_down.svg +++ b/src/Icons/angle_down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/bolt.svg b/src/Icons/bolt.svg index 7b49e42fd1..3b9abba944 100644 --- a/src/Icons/bolt.svg +++ b/src/Icons/bolt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/book.svg b/src/Icons/book.svg index e0770f8a87..32e4a08412 100644 --- a/src/Icons/book.svg +++ b/src/Icons/book.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/clipboard.svg b/src/Icons/clipboard.svg index 4ec87a3650..216b0c34a3 100644 --- a/src/Icons/clipboard.svg +++ b/src/Icons/clipboard.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/clock_o.svg b/src/Icons/clock_o.svg index 071d71a6a9..59b3f69ab6 100644 --- a/src/Icons/clock_o.svg +++ b/src/Icons/clock_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/close.svg b/src/Icons/close.svg index f836affed8..1a11765c6c 100644 --- a/src/Icons/close.svg +++ b/src/Icons/close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/comment_o.svg b/src/Icons/comment_o.svg index 865fea73a3..5c8eae0532 100644 --- a/src/Icons/comment_o.svg +++ b/src/Icons/comment_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/compress.svg b/src/Icons/compress.svg index 3f42d66543..dcbdf0ec46 100644 --- a/src/Icons/compress.svg +++ b/src/Icons/compress.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/download.svg b/src/Icons/download.svg index 09314514a3..d4ef4bebad 100644 --- a/src/Icons/download.svg +++ b/src/Icons/download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/edit.svg b/src/Icons/edit.svg index f4300556dc..f57e3400ec 100644 --- a/src/Icons/edit.svg +++ b/src/Icons/edit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/expand.svg b/src/Icons/expand.svg index 5e75b083d1..1a927faaf4 100644 --- a/src/Icons/expand.svg +++ b/src/Icons/expand.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/eye.svg b/src/Icons/eye.svg index 68314a8c9a..ea5bbf8287 100644 --- a/src/Icons/eye.svg +++ b/src/Icons/eye.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/heart.svg b/src/Icons/heart.svg index 389141807f..89427a04d4 100644 --- a/src/Icons/heart.svg +++ b/src/Icons/heart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/link.svg b/src/Icons/link.svg index fa0d6c0edf..b7b27dd780 100644 --- a/src/Icons/link.svg +++ b/src/Icons/link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/minus_square.svg b/src/Icons/minus_square.svg index f398964242..0297dd0f8f 100644 --- a/src/Icons/minus_square.svg +++ b/src/Icons/minus_square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/minus_square_o.svg b/src/Icons/minus_square_o.svg index 08219d3a4d..f95b5c3e65 100644 --- a/src/Icons/minus_square_o.svg +++ b/src/Icons/minus_square_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/picture_o.svg b/src/Icons/picture_o.svg index c9ceb4ddf7..77effc4b27 100644 --- a/src/Icons/picture_o.svg +++ b/src/Icons/picture_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/plus_square.svg b/src/Icons/plus_square.svg index 9d0e168949..420585004f 100644 --- a/src/Icons/plus_square.svg +++ b/src/Icons/plus_square.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/plus_square_o.svg b/src/Icons/plus_square_o.svg index 01fab9a032..facb9fa9be 100644 --- a/src/Icons/plus_square_o.svg +++ b/src/Icons/plus_square_o.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/refresh.svg b/src/Icons/refresh.svg index 32cc00850a..772b51283a 100644 --- a/src/Icons/refresh.svg +++ b/src/Icons/refresh.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/times_circle.svg b/src/Icons/times_circle.svg index 4df76e7189..c626545c1f 100644 --- a/src/Icons/times_circle.svg +++ b/src/Icons/times_circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/Icons/wrench.svg b/src/Icons/wrench.svg index 9a3ab2042e..b658caeee8 100644 --- a/src/Icons/wrench.svg +++ b/src/Icons/wrench.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 961471721e..152721148b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -76,8 +76,7 @@ body.hasDropDownNav{ /* Icons */ .fourchan-x--icon > .inline-svg--fa { - height: 14px; - margin: -11px 0 -3px; + vertical-align: middle; } :root.shortcut-icons #shortcuts .icon--alt-text, :root:not(.shortcut-icons) #shortcuts .fourchan-x--icon > .inline-svg--fa { @@ -105,6 +104,15 @@ body.hasDropDownNav{ 0% {transform:rotate(0deg);} 100% {transform:rotate(359deg);} } +.catalog-stats > .menu-button > .inline-svg--fa, +#thread-watcher > .move .inline-svg--fa, +#qr-filename-container .inline-svg--fa { + position: relative; + top: -.1em; +} +.watch-thread-link > .inline-svg--fa { + vertical-align: text-top; +} /* 4chan style fixes */ /* overrides 4chan CSS on div.opContainer, div.op */ @@ -410,14 +418,13 @@ audio.controls-added { } .shortcut { margin-left: 3px; - vertical-align: middle; } :root.shortcut-icons .native-settings { font-size: 0; color: transparent; display: inline-block; - vertical-align: top; - height: 12px; + vertical-align: middle; + height: 13px; width: 14px; background: url('//s.4cdn.org/image/favicon.ico') 0px -1px no-repeat; } @@ -1245,8 +1252,6 @@ textarea.copy-text-element { } .watch-thread-link { opacity: 0.2; - position: relative; - top: -2px; } .watch-thread-link.watched { opacity: 1; @@ -1545,7 +1550,7 @@ input[name="Default Volume"] { .hide-reply-button { float: left; margin-right: 4px; - padding: 2px; + padding: 0 2px; } $site$infoRoot a.hide-reply-button { margin-right: 6px; @@ -1564,7 +1569,6 @@ $site$infoRoot a.hide-reply-button { left: 1px; } .hide-thread-button { - margin-top: -1px; width: 11px; } .stub ~ :not(.threadDivider) { diff --git a/tools/icons.js b/tools/icons.js index 43565b4baa..207cb1c054 100644 --- a/tools/icons.js +++ b/tools/icons.js @@ -1,8 +1,11 @@ var fs = require('fs'); var path = require('path'); var parser = require('sax').parser(true); +var BoundingHelper = require('svg-boundings'); var svgo = new (require('svgo'))(); +var PIXEL = 128; + var variables = require.resolve('font-awesome/less/variables.less'); var font = require.resolve('font-awesome/fonts/fontawesome-webfont.svg'); @@ -31,7 +34,12 @@ async function generate(name) { if (!glyph) { throw new Error('Icon not found'); } - var svg = ``; + var width = Math.ceil((glyph['horiz-adv-x'] || 1536) / PIXEL); + var bounds = BoundingHelper.path({type: 'path', d: glyph.d}, true); + var top = Math.floor(bounds.top / PIXEL); + var bottom = Math.ceil(bounds.bottom / PIXEL); + var height = bottom - top; + var svg = ``; svg = (await svgo.optimize(svg)).data; return svg; }