From 4570d042a94053b5b486174b812f757fd16f3776 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Wed, 8 Sep 2021 08:56:13 -0700 Subject: [PATCH] Tooltip icon --- bookwyrm/static/css/bookwyrm.css | 14 +- bookwyrm/static/css/fonts/icomoon.eot | Bin 10012 -> 10100 bytes bookwyrm/static/css/fonts/icomoon.svg | 56 +++--- bookwyrm/static/css/fonts/icomoon.ttf | Bin 9848 -> 9936 bytes bookwyrm/static/css/fonts/icomoon.woff | Bin 9924 -> 10012 bytes bookwyrm/static/css/vendor/icons.css | 193 ++++++++++----------- bookwyrm/templates/components/tooltip.html | 2 +- 7 files changed, 128 insertions(+), 137 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 0724c7f1..3529afc2 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -96,7 +96,7 @@ body { @see https://www.youtube.com/watch?v=9xXBYcWgCHA */ .shelf-option:disabled > *::after { font-family: "icomoon"; /* stylelint-disable font-family-no-missing-generic-family-keyword */ - content: "\e918"; + content: "\e919"; /* icon-check */ margin-left: 0.5em; } @@ -167,21 +167,21 @@ body { /* All stars are visually filled by default. */ .form-rate-stars .icon::before { - content: '\e9d9'; + content: '\e9d9'; /* icon-star-full */ } /* Icons directly following inputs that follow the checked input are emptied. */ .form-rate-stars input:checked ~ input + .icon::before { - content: '\e9d7'; + content: '\e9d7'; /* icon-star-empty */ } /* When a label is hovered, repeat the fill-all-then-empty-following pattern. */ .form-rate-stars:hover .icon.icon::before { - content: '\e9d9'; + content: '\e9d9'; /* icon-star-full */ } .form-rate-stars .icon:hover ~ .icon::before { - content: '\e9d7'; + content: '\e9d7'; /* icon-star-empty */ } /** Book covers @@ -292,13 +292,13 @@ body { } .quote > blockquote::before { - content: "\e906"; + content: "\e907"; /* icon-quote-open */ top: 0; left: 0; } .quote > blockquote::after { - content: "\e905"; + content: "\e906"; /* icon-quote-close */ right: 0; } diff --git a/bookwyrm/static/css/fonts/icomoon.eot b/bookwyrm/static/css/fonts/icomoon.eot index 2c801b2b6993e16343c4b9a3d0e8dd505819653f..12526617af79957878616604a812cd9e20ce02fc 100644 GIT binary patch delta 555 zcmbQ^_r;I3M4f@*!bDbcmdbcPy@?Lxf{Y9d410h$Avrg(;1&CFvxz5U>bZpbl^GZq zXD~1*iDaZErpT#8IWRCNuK}tv%K!>+aI=^I`A>j+m5khyiWznsuYpVsAb&+pesbcP z8_VQ?{0%^USZ-oP0fRA<3voVziF)-&b=P?K{I5WfpHJX~JX)`LZ$uf$FSu+}$nF^bz z>oKaUDJ!wDvx&(w$}t)nnVH)$0+F$in5YOFJ0Bxlt)U4>%2a&vS}|!eCI)WyJPs}{ zjy!hmNkYOls;a7PnW`+zY~D<4%q$#Cq9UB^QUcQ25>oPxU`660if(r%|KpMHU7E|m z&CLNO7#q|Tl??fKZEV^2SS*>CSeT_m*;qMbg~g?K_#CxF*}1vdxs-W?Y@PC=0|LsG zl$Djr0|KIv*qck4RD?GNik)U*(l*^JC;f;+M$a$4GM?Y&D+4zRC~z3=#&tb|(UWCV zJeZjCCMT(cP2Qv8?Y)fQ8PL;Oj8ho5F-b60F`Z(TW1hl%i|qls0tX+*Db4`SIb1wk wQd}BbW?VnGjkpuIXK-KQ5#U+GYs0&Ue~o~cfSW*(zyyISf?S(}R8KJi0CQY+zyJUM delta 518 zcmXxfO=uHA6bJD4W_CBbnWVG%TEQk-^9e2Z(Iy+g9Ha+nTIfMa=}8SuA&2GzT+>`6 zJxD!N!MIo=dQcG!A|gceQq*ISg5F!DikJ2fRP>^_b#m}9Jbv?k!+Y~{`tGzGP60Gp za#q^!?NnN)mwXfe*2TFnUoO=4ypMCOjc{}Kjrkb>+W<$_OACc!TXHqO1EQdioopF2fwJ{%1&?pJkR|CCiQ;}AM>~V{;#$bpRnJ? zXC(Rx0(LMlHFXZw-~oE@DBi#yWSp!~4?U~QDQ(w^I<9VLLG6lmQ@f` - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/bookwyrm/static/css/fonts/icomoon.ttf b/bookwyrm/static/css/fonts/icomoon.ttf index 242ca7392024660f56d38ed4c663daf0daa2aeed..b0567ff8f5a3cd3220af5691dd415f2bad1b0e6f 100644 GIT binary patch delta 616 zcmez2bHTTsfsuiMft#U$ftkU;KUm+0Ux*zfvImG0l5-OaUa>DXV_;yE0rE@I6N?Lg zv;dGl0Z4PC=TxR~3HK`l`7;<8lteO86I0|=q8u0)l-B^|%`$)j9Na7>K>iaTUnL{A zq+*60$7>*y1IS;Ilb`IExaP((IiSD>pg>q|VnqRiF%!@-RgeOOyu{qpnO>Z~fqV_1 zC2a-y#U((80)ZMxy#fO>^Vx|9y2V9bD!goadFvI||G)qLgQOW0UNXECpPa;49>l<$ z$D9Xrvok|H&=^w_HEl*EHd#gyF>6L6GgDy`bv;IPHDx6>b~Z72Mma`fBQtY5Mj$da z5)&0+W9MUpt2HzMNtudI<`k2zXJX)H&*R|Y;>cs?o+Kn}qpGUvmZ{3Z%;wF+#>~RO zBr3wmE+rtXEg>cE2v#I6qUd%Dbz$`CJ$)A)-;(4c4HUPw2Gjmbfu1MZ5DY!W33BG z77`bAQ4N-g8x_$mM1+WLindau0`6SAnP5#f%=B-l8`*;)pgPh9?)?$gP#(9;iypX$c(SB`y<-87Xa5Fn^ z&4vDy3IN6w&&@11WK~FUzQH+~&6k(gugh)D&p2=7inGV8C$H{5=h+N5rt{Wv35E$D z7IhlJ1uH*)XF~bQxygsrO2x%8UzESN(;o&(-`{+*(!0+N+co=R%iY=QbetH%HrS#1 z1-#s_Nzh**;D-!-NMjHH=bY{yaRAdsz=*`t-6`|1fMC!r;jKmWPc3~nCAH=vh zf@bmnrc>roOzI)*-H#HD>1?~c&2+?Z%wWZ!A|--I+U52oDhX5~hKsoHu5Z}4qRM$$ zz3Mu`x!T@k`p%Bd(1!$B`v<{9KM@GQiS`RZQ6T*ybKx{&<)W;rvYmA?u_5SNJTMy{ z`o77*!k697IX3zWRN?=TpE9@ioWjw1(-^M@qf-KX3I2L1Iyre3*5Cnp@DQ%zPclZ< zsE3{wXT)`>CXdN)l^*4qa!a|VJaxO>TdJt0)SUWA{q9-vYThMQWi72wJFd-X8`|fF I7<-5R0GrQ;6aWAK diff --git a/bookwyrm/static/css/fonts/icomoon.woff b/bookwyrm/static/css/fonts/icomoon.woff index 67b0f0a693f8809a23ecb8560549312a767effa2..60d1742c187d598066e7d52cd8f489b37caad36a 100644 GIT binary patch delta 685 zcmYL_O=uHA7=~wd*WJy`CSAL`*%Fg9-Q8@YfnxKsBBsSE1Th$MkRB`;Lt7i6*%n(! z>m{Cg(1SnQLxr9SRu4sxfM*ZILq!njK}rP?DWsl-`bV6JRhM~YzW1GXzFB7T;%ZT? zU&`kJ1msJE0j8_{)_ZO%-ba;!IWMsJBbBc!)eTy?C8? zp8+sb3R3Qw)yc{P0OkS7IFzV$;*p<&OO!_!d_QJq=7_fG**`g!R4n_(li*!l zYsFeit(|?;{?%?1pJZB~rF+j{y#ZL4b%6}dfimft&Dcq3@DZp6Ps5axRWgYIn6OQQ z7x-W=jKXxvIXMi;NT-6D$_oMbFFTl_TUlKtrofv<=VUfR<4!uIN1+~M02W*kA<-4^ z!)_%Pk2m7^8*z^13k=V4BBQB3AtWD5_Jn#zIw@W4%kP>-y;K?-E0yY|VVHkw!+cy5 zF%~-$yq)MX1_S=w5Fg-9F$~9sH2#PfQS^`$80pspj0I#$-9u+x+Q%>td!qlM8DT7? z`AvJxG0AN6Rp^r#9w?R<%U!vz0CSyZ`*8Kn9xdqVZJOs9*7cAz>P=XM!aCR^@6!*L z;R~jRxy5X;QFfW#;Xev7F(7XFO1@Pjp%6Nb9CUzF_!?fp?<84T^XL3)T^n*x&dWFD N`||ct)ckI3!QWAKk;wo6 delta 601 zcmXYsO=uHA7>4JY*=%;RNoSj%t=Od2WV3-*{ArV|U`{=Rro}2niYFzswR^}PG`8^| z=|SS57j>~z^iZW}57J9SFGVjsh!nhvjiS=a=1@@ZqITnKbl~Cp-gn-aZ|2eD&iUZd zg-iwkVoTdWQm0l;NF2F)B2XhUgL5s5(kN7_%=^Riro-B8!OoXvSZ-3?V8*n= z^Vg4G6mnHISapK^9fonZm@CX76c4lEb%zJz;_q^4fjw4p&i>00))DgF^ukI{uhnnW zt&c5F`>@?+KFe6hikMrl)JTzVpoUQZWyuDKqYz57E4zdIAf#fUSX4`OC-pNToK`|3 z?k*UFsFo0+3ldT76lnSg=tIXKmDJC{kP?BOK5&z`Lifx)ssM~Z7HToV6U_10uGrU! zn8Y_{BqE~O4C1)#C1OTDSQ9WX`E_?)iKjhFLC4*3YgpK z#KaY}ik^TMPQo4dfk*Kw@scV2GQZ}o3!}nYF(}>=?}_W;mdE4Sm3S#B<)x?6zIV|l X`xfakZOKRFj65rE%AXrk@pteS|0Rrd diff --git a/bookwyrm/static/css/vendor/icons.css b/bookwyrm/static/css/vendor/icons.css index db783c24..e9216e24 100644 --- a/bookwyrm/static/css/vendor/icons.css +++ b/bookwyrm/static/css/vendor/icons.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('../fonts/icomoon.eot?19nagi'); - src: url('../fonts/icomoon.eot?19nagi#iefix') format('embedded-opentype'), - url('../fonts/icomoon.ttf?19nagi') format('truetype'), - url('../fonts/icomoon.woff?19nagi') format('woff'), - url('../fonts/icomoon.svg?19nagi#icomoon') format('svg'); + src: url('../fonts/icomoon.eot?wjd7rd'); + src: url('../fonts/icomoon.eot?wjd7rd#iefix') format('embedded-opentype'), + url('../fonts/icomoon.ttf?wjd7rd') format('truetype'), + url('../fonts/icomoon.woff?wjd7rd') format('woff'), + url('../fonts/icomoon.svg?wjd7rd#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -25,6 +25,90 @@ -moz-osx-font-smoothing: grayscale; } +.icon-book:before { + content: "\e901"; +} +.icon-envelope:before { + content: "\e902"; +} +.icon-arrow-right:before { + content: "\e903"; +} +.icon-bell:before { + content: "\e904"; +} +.icon-x:before { + content: "\e905"; +} +.icon-quote-close:before { + content: "\e906"; +} +.icon-quote-open:before { + content: "\e907"; +} +.icon-image:before { + content: "\e908"; +} +.icon-pencil:before { + content: "\e909"; +} +.icon-list:before { + content: "\e90a"; +} +.icon-unlock:before { + content: "\e90b"; +} +.icon-globe:before { + content: "\e90c"; +} +.icon-lock:before { + content: "\e90d"; +} +.icon-chain-broken:before { + content: "\e90e"; +} +.icon-chain:before { + content: "\e90f"; +} +.icon-comments:before { + content: "\e910"; +} +.icon-comment:before { + content: "\e911"; +} +.icon-boost:before { + content: "\e912"; +} +.icon-arrow-left:before { + content: "\e913"; +} +.icon-arrow-up:before { + content: "\e914"; +} +.icon-arrow-down:before { + content: "\e915"; +} +.icon-local:before { + content: "\e917"; +} +.icon-dots-three:before { + content: "\e918"; +} +.icon-check:before { + content: "\e919"; +} +.icon-dots-three-vertical:before { + content: "\e91a"; +} +.icon-bookmark:before { + content: "\e91b"; +} +.icon-warning:before { + content: "\e91c"; +} +.icon-rss:before { + content: "\e91d"; +} .icon-graphic-heart:before { content: "\e91e"; } @@ -34,102 +118,6 @@ .icon-graphic-banknote:before { content: "\e920"; } -.icon-warning:before { - content: "\e91b"; -} -.icon-book:before { - content: "\e900"; -} -.icon-bookmark:before { - content: "\e91a"; -} -.icon-rss:before { - content: "\e91d"; -} -.icon-envelope:before { - content: "\e901"; -} -.icon-arrow-right:before { - content: "\e902"; -} -.icon-bell:before { - content: "\e903"; -} -.icon-x:before { - content: "\e904"; -} -.icon-quote-close:before { - content: "\e905"; -} -.icon-quote-open:before { - content: "\e906"; -} -.icon-image:before { - content: "\e907"; -} -.icon-pencil:before { - content: "\e908"; -} -.icon-list:before { - content: "\e909"; -} -.icon-unlock:before { - content: "\e90a"; -} -.icon-unlisted:before { - content: "\e90a"; -} -.icon-globe:before { - content: "\e90b"; -} -.icon-public:before { - content: "\e90b"; -} -.icon-lock:before { - content: "\e90c"; -} -.icon-followers:before { - content: "\e90c"; -} -.icon-chain-broken:before { - content: "\e90d"; -} -.icon-chain:before { - content: "\e90e"; -} -.icon-comments:before { - content: "\e90f"; -} -.icon-comment:before { - content: "\e910"; -} -.icon-boost:before { - content: "\e911"; -} -.icon-arrow-left:before { - content: "\e912"; -} -.icon-arrow-up:before { - content: "\e913"; -} -.icon-arrow-down:before { - content: "\e914"; -} -.icon-home:before { - content: "\e915"; -} -.icon-local:before { - content: "\e916"; -} -.icon-dots-three:before { - content: "\e917"; -} -.icon-check:before { - content: "\e918"; -} -.icon-dots-three-vertical:before { - content: "\e919"; -} .icon-search:before { content: "\e986"; } @@ -148,3 +136,6 @@ .icon-plus:before { content: "\ea0a"; } +.icon-question-circle:before { + content: "\e900"; +} diff --git a/bookwyrm/templates/components/tooltip.html b/bookwyrm/templates/components/tooltip.html index 35225b6f..06b13f34 100644 --- a/bookwyrm/templates/components/tooltip.html +++ b/bookwyrm/templates/components/tooltip.html @@ -1,7 +1,7 @@ {% load i18n %} {% trans "Help" as button_text %} -{% include 'snippets/toggle/open_button.html' with text=button_text class="ml-2 is-rounded is-small" icon="heart" controls_text=controls_text controls_uid=controls_uid %} +{% include 'snippets/toggle/open_button.html' with text=button_text class="ml-3 is-rounded is-small is-white p-0 pb-1" icon="question-circle is-size-6" controls_text=controls_text controls_uid=controls_uid %}