From 3be5e5574b2cc40b6159c1276be594c0c6e0b64e Mon Sep 17 00:00:00 2001 From: Tvangeste Date: Sun, 2 Jun 2013 14:28:38 +0200 Subject: [PATCH] Adjust Modern and Lingoes-Blue styles to handle expand/collapse buttons better --- article-style-st-lingoes-blue.css | 70 +++++++++++++++++++++++++---- article-style-st-modern.css | 61 +++++++++++++++++++++++-- article_maker.cc | 6 +-- icons/collapse_article.png | Bin 0 -> 216 bytes icons/collapse_article_hovered.png | Bin 0 -> 219 bytes icons/expand_article.png | Bin 0 -> 214 bytes icons/expand_article_hovered.png | Bin 0 -> 217 bytes resources.qrc | 4 ++ 8 files changed, 126 insertions(+), 15 deletions(-) create mode 100644 icons/collapse_article.png create mode 100644 icons/collapse_article_hovered.png create mode 100644 icons/expand_article.png create mode 100644 icons/expand_article_hovered.png diff --git a/article-style-st-lingoes-blue.css b/article-style-st-lingoes-blue.css index af1f52dc..5005b05d 100644 --- a/article-style-st-lingoes-blue.css +++ b/article-style-st-lingoes-blue.css @@ -35,6 +35,7 @@ a:hover { } .gddictname { + display: -webkit-box; /* needed to be able to reorder elements, e.g. icon, dictionary name, collapse icon */ font-size: 12px; font-weight: normal; float: right; @@ -54,6 +55,13 @@ a:hover { cursor: default; } +/* Actual text with the dictionary title */ +.gddicttitle +{ + display:block; + -webkit-box-ordinal-group: 1; +} + .gdactivearticle .gddictname { border-top: 1px solid #92B0DD; border-right: 1px solid #92B0DD; @@ -61,6 +69,60 @@ a:hover { background: #CFDDF0; } +.gdcollapsedarticle .gddictname +{ + opacity: 0.7; +} + +/* Nice diagonal pattern for the collapsed article */ +.gdcollapsedarticle +{ + background-image: -webkit-linear-gradient(left top, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%); + background-size: 50px 50px; +} + +/* Move the collapse/expand buttons to the last, 3rd position */ +.collapse_expand_area +{ + display: block; + -webkit-box-ordinal-group: 3; +} + +.gddicticon +{ + display: block; + vertical-align: text-bottom; + padding-right: -1em; + padding-left: 0.3em; + -webkit-box-ordinal-group: 2; +} + +.gdexpandicon, .gdexpandicon:hover, .gdcollapseicon, .gdcollapseicon:hover +{ + width:15px; + background-position: center 25%; + background-repeat:no-repeat; + vertical-align: top; + padding-left: -5px; + margin-left: 0px; +} + +.gdexpandicon { + background-image: url('qrcx://localhost/icons/expand_article.png'); +} + +.gdexpandicon:hover { + background-image: url('qrcx://localhost/icons/expand_article_hovered.png'); +} + +.gdcollapseicon { + background-image: url('qrcx://localhost/icons/collapse_article.png'); +} + +.gdcollapseicon:hover { + background-image: url('qrcx://localhost/icons/collapse_article_hovered.png'); +} + .gdarticleseparator { display: none; } @@ -81,14 +143,6 @@ a:hover { display:none } -/* Dictionary icon is to the right */ -.gddicticon { - display: inline; - vertical-align: center; - float: right; - padding-right: 5px; - padding-left: 0.3em; -} .gddicticon img { border: 0; diff --git a/article-style-st-modern.css b/article-style-st-modern.css index 5eff9318..542a7bbf 100644 --- a/article-style-st-modern.css +++ b/article-style-st-modern.css @@ -57,6 +57,7 @@ a:hover .gddictname { + display: -webkit-box; /* needed to be able to reorder elements, e.g. icon, dictionary name, collapse icon */ font-size: 12px; font-weight: normal; float: right; @@ -66,7 +67,7 @@ a:hover margin: -6px; margin-bottom: 5px; margin-left: 2px; - padding-right: 0.4em; + padding-right: 0.3em; color: #4480f8; background: #E0E8F0; @@ -75,6 +76,13 @@ a:hover cursor: default; } +/* Actual text with the dictionary title */ +.gddicttitle +{ + display:block; + -webkit-box-ordinal-group: 1; +} + .gdactivearticle .gddictname { font-size: 13px; @@ -89,13 +97,58 @@ a:hover background: #deecf8; } +.gdcollapsedarticle .gddictname +{ + opacity: 0.7; +} + +/* Nice diagonal pattern for the collapsed article */ +.gdcollapsedarticle +{ + background-image: -webkit-linear-gradient(left top, #ccc 0%, #ccc 25%, #bbb 25%, #bbb 50%, #ccc 50%, #ccc 75%, #bbb 75%); + background-size: 50px 50px; +} + +/* Move the collapse/expand buttons to the last, 3rd position */ +.collapse_expand_area +{ + display: block; + -webkit-box-ordinal-group: 3; +} + .gddicticon { - display: inline; + display: block; vertical-align: text-bottom; - float: right; - padding-right: 0em; + padding-right: -1em; padding-left: 0.3em; + -webkit-box-ordinal-group: 2; +} + +.gdexpandicon, .gdexpandicon:hover, .gdcollapseicon, .gdcollapseicon:hover +{ + width:15px; + background-position: center 35%; + background-repeat:no-repeat; + vertical-align: text-bottom; + padding-left: -5px; + margin-left: 0px; +} + +.gdexpandicon { + background-image: url('qrcx://localhost/icons/expand_article.png'); +} + +.gdexpandicon:hover { + background-image: url('qrcx://localhost/icons/expand_article_hovered.png'); +} + +.gdcollapseicon { + background-image: url('qrcx://localhost/icons/collapse_article.png'); +} + +.gdcollapseicon:hover { + background-image: url('qrcx://localhost/icons/collapse_article_hovered.png'); } /* The first headword in a (possibly) multi-headword DSL article */ diff --git a/article_maker.cc b/article_maker.cc index de55347e..46d85b9e 100644 --- a/article_maker.cc +++ b/article_maker.cc @@ -537,9 +537,9 @@ void ArticleRequest::bodyFinished() + ( collapse ? string( " title=\"" ) + tr( "Expand article" ).toUtf8().data() + "\"" : "" ) + ">" + - Html::escape( tr( "From " ).toUtf8().data() ) + "" + - Html::escape( activeDict->getName().c_str() ) - + "" + + Html::escape( activeDict->getName().c_str() ) + "" + + "I?ZQJF&mZjF;KGaMntm)fUpXpsj>e-{?vLx6bd(rArkXo&b$x@O1TaS?83{ F1OV49Ld*aF literal 0 HcmV?d00001 diff --git a/icons/collapse_article_hovered.png b/icons/collapse_article_hovered.png new file mode 100644 index 0000000000000000000000000000000000000000..9155ad3a309f0aed0302b811041e192dcf965551 GIT binary patch literal 219 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhjKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1qucL8%hgh?3y^w370~qEv=}#LT=BJwMkFg)(D3 zQ$0figD*u3fvUVbT^vI+f_qON~>RzX_i=oiLwk_|s7?NFvyDNr8mv677nK3){9aH1CYt`eOQ_IH0Kvp00i_ I>zopr0M2klga7~l literal 0 HcmV?d00001 diff --git a/icons/expand_article.png b/icons/expand_article.png new file mode 100644 index 0000000000000000000000000000000000000000..0720a08c2f67391d4e2dc965b1cbef973cf15330 GIT binary patch literal 214 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhjKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1qucL8%hgh?3y^w370~qEv=}#LT=BJwMkFg)(D3 zQ$0figD*u3fvQ|RT^vI+f_u9S`4}8H4*mHb{6|HcO}H~7??pfm(*bj(nVgrl_jw$> zoyc?Damfunq0&2vE=O8jls2`xJmKm*Au42DCBU!qJ9DY-QpawffefCmelF{r5}E)w C3qa5S literal 0 HcmV?d00001 diff --git a/icons/expand_article_hovered.png b/icons/expand_article_hovered.png new file mode 100644 index 0000000000000000000000000000000000000000..7434f70fc3502a8b2f3fef6be29229cd3c02bdeb GIT binary patch literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhjKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1qucL8%hgh?3y^w370~qEv=}#LT=BJwMkFg)(D3 zQ$0figD*u3fvP+_T^vI+f_u9+axxh39R3yB|9bV`qeq<;)cjs7aCD1f*e7`NdD9bJ zWud}yjl(4ZoV%J`B+E4f3l%4Jlqd?$bW$>EJ<=z)hP`=b+}7}icons/mdict.png icons/downarrow.png icons/blank.png + icons/expand_article_hovered.png + icons/expand_article.png + icons/collapse_article_hovered.png + icons/collapse_article.png