floatingTitle-related fixes

css/cdm.less

@@ -216,18 +216,36 @@ div#floatingTitle {
 	border-bottom-width: 1px;
 	background : white;
 	color : @default-text;
+	display : flex;
+	flex-direction : row;
+	flex-wrap : nowrap;
 	box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 
 	> * {
-		display : table-cell;
+		align-self: center;
 		white-space : nowrap;
-		vertical-align : middle;
-		padding : 9px 5px;
+		padding : 4px;
 	}
 
-	img {
-		margin-right : 4px;
-		margin-left : 4px;
+	.left, .right {
+		display : flex;
+
+		> * {
+			align-self : center;
+		}
+
+		i.material-icons {
+			margin-left : 2px;
+			font-size : 20px;
+			padding : 2px;
+			user-select: none;
+		}
+
+		i.anchor {
+			margin-left : 0px;
+			padding : 0px;
+			color : #ccc;
+		}
 	}
 
 	span.author {
@@ -284,7 +302,6 @@ div#floatingTitle {
 		white-space : normal;
 	}
 
-	.dijit,
 	img.score-pic {
 		display : none;
 	}

css/default.css

@@ -1175,17 +1175,36 @@ div#floatingTitle {
   border-bottom-width: 1px;
   background: white;
   color: #555555;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
 div#floatingTitle > * {
-  display: table-cell;
+  align-self: center;
   white-space: nowrap;
-  vertical-align: middle;
-  padding: 9px 5px;
+  padding: 4px;
 }
-div#floatingTitle img {
-  margin-right: 4px;
-  margin-left: 4px;
+div#floatingTitle .left,
+div#floatingTitle .right {
+  display: flex;
+}
+div#floatingTitle .left > *,
+div#floatingTitle .right > * {
+  align-self: center;
+}
+div#floatingTitle .left i.material-icons,
+div#floatingTitle .right i.material-icons {
+  margin-left: 2px;
+  font-size: 20px;
+  padding: 2px;
+  user-select: none;
+}
+div#floatingTitle .left i.anchor,
+div#floatingTitle .right i.anchor {
+  margin-left: 0px;
+  padding: 0px;
+  color: #ccc;
 }
 div#floatingTitle span.author {
   color: #555555;
@@ -1233,7 +1252,6 @@ div#floatingTitle span.titleWrap {
   width: 100%;
   white-space: normal;
 }
-div#floatingTitle .dijit,
 div#floatingTitle img.score-pic {
   display: none;
 }

js/Article.js

@@ -233,7 +233,6 @@ define(["dojo/_base/declare"], function (declare) {
 			if (force || e.offsetTop + e.offsetHeight > (ctr.scrollTop + ctr.offsetHeight) ||
 				e.offsetTop < ctr.scrollTop) {
 
-				// expanded cdm has a 4px margin now
 				ctr.scrollTop = e.offsetTop;
 
 				Element.hide("floatingTitle");

js/Headlines.js

@@ -173,15 +173,11 @@ define(["dojo/_base/declare"], function (declare) {
 
 							ft.setAttribute("data-article-id", id);
 							ft.innerHTML = header.innerHTML;
-							ft.firstChild.innerHTML = "<img class='anchor marked-pic' src='images/page_white_go.png' " +
-								"onclick=\"Article.cdmScrollToId(" + id + ", true)\">" + ft.firstChild.innerHTML;
 
-							this.initFloatingMenu();
+							ft.select(".dijitCheckBox")[0].outerHTML = "<i class=\"material-icons anchor\" onclick=\"Article.cdmScrollToId(" + id + ", true)\">expand_more</i>";
 
-							const cb = ft.select(".rchk")[0];
+							this.initFloatingMenu();
 
-							if (cb)
-								cb.parentNode.removeChild(cb);
 						}
 
 						if (row.hasClassName("Unread"))
@@ -1005,6 +1001,7 @@ define(["dojo/_base/declare"], function (declare) {
 
 				const menu = new dijit.Menu({
 					id: "floatingMenu",
+					selector: ".hlMenuAttach",
 					targetNodeIds: ["floatingTitle"]
 				});
 

themes/night.css

@@ -1175,17 +1175,36 @@ div#floatingTitle {
   border-bottom-width: 1px;
   background: white;
   color: #555555;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
 }
 div#floatingTitle > * {
-  display: table-cell;
+  align-self: center;
   white-space: nowrap;
-  vertical-align: middle;
-  padding: 9px 5px;
+  padding: 4px;
 }
-div#floatingTitle img {
-  margin-right: 4px;
-  margin-left: 4px;
+div#floatingTitle .left,
+div#floatingTitle .right {
+  display: flex;
+}
+div#floatingTitle .left > *,
+div#floatingTitle .right > * {
+  align-self: center;
+}
+div#floatingTitle .left i.material-icons,
+div#floatingTitle .right i.material-icons {
+  margin-left: 2px;
+  font-size: 20px;
+  padding: 2px;
+  user-select: none;
+}
+div#floatingTitle .left i.anchor,
+div#floatingTitle .right i.anchor {
+  margin-left: 0px;
+  padding: 0px;
+  color: #ccc;
 }
 div#floatingTitle span.author {
   color: #555555;
@@ -1233,7 +1252,6 @@ div#floatingTitle span.titleWrap {
   width: 100%;
   white-space: normal;
 }
-div#floatingTitle .dijit,
 div#floatingTitle img.score-pic {
   display: none;
 }