Adjust Modern and Lingoes-Blue styles to handle expand/collapse buttons better

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;

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 */

article_maker.cc

@@ -537,9 +537,9 @@ void ArticleRequest::bodyFinished()
           + ( collapse ? string( " title=\"" ) + tr( "Expand article" ).toUtf8().data() + "\"" : "" )
           + "><span class=\"gddicticon\"><img src=\"gico://" + Html::escape( dictId )
           + "/dicticon.png\"></span><span class=\"gdfromprefix\">"  +
-          Html::escape( tr( "From " ).toUtf8().data() ) + "</span>" +
-          Html::escape( activeDict->getName().c_str() )
-          + "<span><img src=\"qrcx://localhost/icons/blank.png\" class=\""
+          Html::escape( tr( "From " ).toUtf8().data() ) + "</span><span class=\"gddicttitle\">" +
+          Html::escape( activeDict->getName().c_str() ) + "</span>"
+          + "<span class=\"collapse_expand_area\"><img src=\"qrcx://localhost/icons/blank.png\" class=\""
           + ( collapse ? "gdexpandicon" : "gdcollapseicon" )
           + "\" id=\"expandicon-" + Html::escape( dictId ) + "\""
           + ( collapse ? "" : string( " title=\"" ) + tr( "Collapse article" ).toUtf8().data() + "\"" )

resources.qrc

@@ -67,5 +67,9 @@
         <file>icons/mdict.png</file>
         <file>icons/downarrow.png</file>
         <file>icons/blank.png</file>
+        <file>icons/expand_article_hovered.png</file>
+        <file>icons/expand_article.png</file>
+        <file>icons/collapse_article_hovered.png</file>
+        <file>icons/collapse_article.png</file>
     </qresource>
 </RCC>