Browse Source

combined mode (and more) css class name updates

Andrew Dolgov 5 months ago
parent
commit
8359ca6dad

+ 16 - 16
classes/feeds.php

@@ -345,7 +345,7 @@ class Feeds extends Handler_Protected {
 
 				$score_pic = "images/" . get_score_pic($score);
 
-				$score_pic = "<img class='hlScorePic' score='$score' onclick='changeScore($id, this)' src=\"$score_pic\"
+				$score_pic = "<img class='score-pic' score='$score' onclick='changeScore($id, this)' src=\"$score_pic\"
                 title=\"$score\">";
 
 				if ($score > 500) {
@@ -390,7 +390,7 @@ class Feeds extends Handler_Protected {
 
 							$vf_catchup_link = "<a class='catchup' onclick='catchupFeedInGroup($feed_id);' href='#'>".__('mark feed as read')."</a>";
 
-							$reply['content'] .= "<div data-feed-id='$feed_id' class='cdmFeedTitle'>".
+							$reply['content'] .= "<div data-feed-id='$feed_id' class='feed-titl'>".
 								"<div style='float : right'>$feed_icon_img</div>".
 								"<a class='title' href=\"#\" onclick=\"viewfeed({feed:$feed_id})\">".
 								$line["feed_title"]."</a>
@@ -414,7 +414,7 @@ class Feeds extends Handler_Protected {
 					$reply['content'] .= "</div>";
 
 					$reply['content'] .= "<div onclick='return hlClicked(event, $id)'
-                    class=\"hlTitle\"><span class='hlContent $hlc_suffix'>";
+                    class=\"title\"><span class='hlContent $hlc_suffix'>";
 					$reply['content'] .= "<a class=\"title $hlc_suffix\"
                     href=\"" . htmlspecialchars($line["link"]) . "\"
                     onclick=\"\">" .
@@ -434,7 +434,7 @@ class Feeds extends Handler_Protected {
 						if (@$line["feed_title"]) {
 							$rgba = @$rgba_cache[$feed_id];
 
-							$reply['content'] .= "<span class=\"hlFeed\"><a style=\"background : rgba($rgba, 0.3)\" href=\"#\" onclick=\"viewfeed({feed:$feed_id})\">".
+							$reply['content'] .= "<span class=\"feed\"><a style=\"background : rgba($rgba, 0.3)\" href=\"#\" onclick=\"viewfeed({feed:$feed_id})\">".
 								truncate_string($line["feed_title"],30)."</a></span>";
 						}
 					}
@@ -486,7 +486,7 @@ class Feeds extends Handler_Protected {
 							$feed_icon_src = Feeds::getFeedIcon($feed_id);
 							$feed_icon_img = "<img class=\"tinyFeedIcon\" src=\"$feed_icon_src\">";
 
-							$reply['content'] .= "<div data-feed-id='$feed_id' class='cdmFeedTitle'>".
+							$reply['content'] .= "<div data-feed-id='$feed_id' class='feed-title'>".
 								"<div style=\"float : right\">$feed_icon_img</div>".
 								"<a href=\"#\" class='title' onclick=\"viewfeed({feed:$feed_id})\">".
 								$line["feed_title"]."</a> $vf_catchup_link</div>";
@@ -499,7 +499,7 @@ class Feeds extends Handler_Protected {
                     $tmp_content = "<div class=\"cdm expanded $hlc_suffix $class\"
                         id=\"RROW-$id\" data-content=\"$content_encoded\" data-article-id='$id' data-orig-feed-id='$feed_id' $mouseover_attrs>";
 
-					$tmp_content .= "<div class=\"cdmHeader\">";
+					$tmp_content .= "<div class=\"header\">";
 					$tmp_content .= "<div style=\"vertical-align : middle\">";
 
 					$tmp_content .= "<input dojoType=\"dijit.form.CheckBox\"
@@ -540,7 +540,7 @@ class Feeds extends Handler_Protected {
 						if (@$line["feed_title"]) {
 							$rgba = @$rgba_cache[$feed_id];
 
-							$tmp_content .= "<div class=\"hlFeed\">
+							$tmp_content .= "<div class=\"feed\">
                             <a href=\"#\" style=\"background-color: rgba($rgba,0.3)\"
                             onclick=\"viewfeed({feed:$feed_id})\">".
 								truncate_string($line["feed_title"],30)."</a>
@@ -550,7 +550,7 @@ class Feeds extends Handler_Protected {
 
 					$tmp_content .= "<span class='updated' title='$date_entered_fmt'>$updated_fmt</span>";
 
-					$tmp_content .= "<div class='scoreWrap' style=\"vertical-align : middle\">";
+					$tmp_content .= "<div style=\"vertical-align : middle\">";
 					$tmp_content .= "$score_pic";
 
 					if (!get_pref("VFEED_GROUP_BY_FEED") && $line["feed_title"]) {
@@ -558,11 +558,11 @@ class Feeds extends Handler_Protected {
                         title=\"".htmlspecialchars($line["feed_title"])."\"
                         onclick=\"viewfeed({feed:$feed_id})\">$feed_icon_img</span>";
 					}
-					$tmp_content .= "</div>"; //scoreWrap
+					$tmp_content .= "</div>"; //score wrapper2
 
-					$tmp_content .= "</div>"; //cdmHeader
+					$tmp_content .= "</div>"; //header
 
-					$tmp_content .= "<div class=\"cdmContent\" onclick=\"return cdmClicked(event, $id, true);\">";
+					$tmp_content .= "<div class=\"content\" onclick=\"return cdmClicked(event, $id, true);\">";
 
 					$tmp_content .= "<div id=\"POSTNOTE-$id\">";
 					if ($line['note']) {
@@ -573,7 +573,7 @@ class Feeds extends Handler_Protected {
 					if (!$line['lang']) $line['lang'] = 'en';
 
 					// this is filled from RROW data-content
-					$tmp_content .= "<div class=\"cdmContentInner\" lang=\"".$line['lang']."\">";
+					$tmp_content .= "<div class=\"content-inner\" lang=\"".$line['lang']."\">";
 
 					if ($line["orig_feed_id"]) {
 
@@ -601,8 +601,8 @@ class Feeds extends Handler_Protected {
 						}
 					}
 
-					$tmp_content .= "</div>"; //cdmContentInner
-					$tmp_content .= "<div class=\"cdmIntermediate\">";
+					$tmp_content .= "</div>"; //content-inner
+					$tmp_content .= "<div class=\"intermediate\">";
 
 					$always_display_enclosures = $line["always_display_enclosures"];
 					$tmp_content .= Article::format_article_enclosures($id, $always_display_enclosures,
@@ -610,7 +610,7 @@ class Feeds extends Handler_Protected {
 
 					$tmp_content .= "</div>"; // cdmIntermediate
 
-					$tmp_content .= "<div class=\"cdmFooter\" onclick=\"event.stopPropagation()\">";
+					$tmp_content .= "<div class=\"footer\" onclick=\"event.stopPropagation()\">";
 
 					foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_ARTICLE_LEFT_BUTTON) as $p) {
 						$tmp_content .= $p->hook_article_left_button($line);
@@ -655,7 +655,7 @@ class Feeds extends Handler_Protected {
 
 					$tmp_content .= "</div>"; // buttons
 
-					$tmp_content .= "</div>"; // cdmFooter
+					$tmp_content .= "</div>"; // cdm footer
 					$tmp_content .= "</div>"; // cdmContent
 					$tmp_content .= "</div>"; // RROW.cdm
 

+ 44 - 44
css/cdm.less

@@ -1,27 +1,27 @@
 .cdm {
 	margin-right : 4px;
 
-	.cdmHeader, .cdmFooter {
+	.header, .footer {
 		display : table;
 	}
 
-	.cdmHeader img, .cdmHeader input, .cdmFooter img {
+	.header img, .header input, .footer img {
 		vertical-align : middle;
 	}
 
-	.cdmHeader > div, .cdmFooter > div {
+	.header > div, .footer > div {
 		white-space : nowrap;
 	}
 
-	.cdmHeader > span, .cdmFooter > span.left {
+	.header > span, .footer > span.left {
 		width : 100%;
 	}
 
-	.cdmHeader img, .cdmFooter img {
+	.header img, .footer img {
 		margin : 0px 4px;
 	}
 
-	.cdmHeader {
+	.header {
 		> * {
 			display : table-cell;
 			padding : 5px;
@@ -55,7 +55,7 @@
 		}
 	}
 
-	.cdmFooter {
+	.footer {
 		height : 30px;
 		padding-left : 5px;
 		font-weight : normal;
@@ -68,11 +68,11 @@
 		}
 	}
 
-	.cdmIntermediate {
+	.intermediate {
 		margin : 10px;
 	}
 
-	.cdmContentInner {
+	.content-inner {
 		margin : 10px;
 		line-height : 1.5;
 		font-size : 16px;
@@ -89,10 +89,10 @@
 
 	}
 
-	.cdmIntermediate img,
-	.cdmIntermediate video,
-	.cdmContentInner img,
-	.cdmContentInner video {
+	.intermediate img,
+	.intermediate video,
+	.content-inner img,
+	.content-inner video {
 		border-width : 0px;
 		max-width : 98%;
 		height : auto;
@@ -103,7 +103,7 @@
 	margin-top : 4px;
 	margin-bottom : 4px;
 
-	.cdmFooter {
+	.footer {
 		border: 0px solid #ddd;
 		border-bottom-width: 1px;
 	}
@@ -115,11 +115,11 @@
 
 }
 
-div.cdm.expanded div.cdmHeader {
+div.cdm.expanded div.header {
 	background : transparent ! important;
 }
 
-div.cdm.expanded div.cdmHeader a.title {
+div.cdm.expanded div.header a.title {
 	font-size : 16px;
 	color : #999;
 	font-weight : 600;
@@ -132,23 +132,23 @@ div.cdm.expanded.active {
 	background : white;
 }
 
-div.cdm.expanded.active div.cdmHeader a.title {
+div.cdm.expanded.active div.header a.title {
 	color : @color-link;
 }
 
-div.cdm.expanded.Unread div.cdmHeader a.title {
+div.cdm.expanded.Unread div.header a.title {
 	color : black;
 }
 
-div.cdm.expanded div.cdmContent {
+div.cdm.expanded div.content {
 	color : @default-text;
 }
 
-div.cdm.expanded.Unread div.cdmContent {
+div.cdm.expanded.Unread div.content {
 	color : black;
 }
 
-div.cdm.active div.cdmContent {
+div.cdm.active div.content {
 	color : black;
 }
 
@@ -160,37 +160,37 @@ span.cdmExcerpt {
 	cursor : pointer;
 }
 
-div.cdmContent div.postEnclosures {
+div.content div.postEnclosures {
 	margin-top : 1em;
 	color : @default-text;
 }
 
-div.cdmFeedTitle {
+div.feed-title {
 	border: 0px solid @color-link;
 	border-bottom-width: 1px;
 	padding : 5px 3px 5px 5px;
 }
 
-div.cdmFeedTitle a.title {
+div.feed-title a.title {
 	color : @default-text;
 	font-weight : bold;
 }
 
-div.cdmFeedTitle a {
+div.feed-title a {
 	color : @default-text;
 }
 
-div.cdmFeedTitle a:hover {
+div.feed-title a:hover {
 	color : @color-link;
 }
 
-div.cdmHeader span.hlFeed {
+div.header span.feed {
 	float : right;
 	font-weight : normal;
 	font-style : italic;
 }
 
-div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
+div.header div.feed, div.header div.feed a {
 	vertical-align : middle;
 	color : @default-text;
 	font-weight : normal;
@@ -198,25 +198,25 @@ div.cdmHeader div.hlFeed, div.cdmHeader div.hlFeed a {
 	font-size : 11px;
 }
 
-div.cdm .hlFeed a {
+div.cdm .feed a {
 	border-radius : 4px;
 	display : inline-block;
 	padding : 1px 4px 1px 4px;
 }
 
-div.cdmContentInner p {
+div.content-inner p {
 	/*max-width : 650px;*/
 	-webkit-hyphens: auto;
 	-moz-hyphens: auto;
 	hyphens: auto;
 }
 
-div.cdmContentInner iframe {
+div.content-inner iframe {
 	min-width : 50%;
 	max-width : 98%;
 }
 
-div.cdmHeader span.author {
+div.header span.author {
 	white-space : nowrap;
 	color : @default-text;
 	font-size : 11px;
@@ -266,7 +266,7 @@ div#floatingTitle {
 		margin-left : 0px;
 	}
 
-	div.hlFeed {
+	div.feed {
 		padding-right : 10px;
 		color : @default-text;
 		font-weight : normal;
@@ -275,7 +275,7 @@ div#floatingTitle {
 		white-space : nowrap;
 	}
 
-	div.hlFeed a {
+	div.feed a {
 		border-radius : 4px;
 		display : inline-block;
 		padding : 1px 4px 1px 4px;
@@ -288,7 +288,7 @@ div#floatingTitle {
 		font-size : 11px;
 	}
 
-	div.hlFeed a {
+	div.feed a {
 		color : @default-text;
 	}
 
@@ -298,7 +298,7 @@ div#floatingTitle {
 	}
 
 	.dijit,
-	img.hlScorePic {
+	img.score-pic {
 		display : none;
 	}
 
@@ -308,7 +308,7 @@ div#floatingTitle.Unread a.title {
 	color : black;
 }
 
-.cdm.high .cdmHeader {
+.cdm.high .header {
 	a.title.high,
 	.cdmExcerpt,
 	span.author {
@@ -316,7 +316,7 @@ div#floatingTitle.Unread a.title {
 	}
 }
 
-.cdm.Unread.high .cdmHeader {
+.cdm.Unread.high .header {
 	a.title.high,
 	.cdmExcerpt,
 	span.author {
@@ -324,16 +324,16 @@ div#floatingTitle.Unread a.title {
 	}
 }
 
-.cdm .cdmHeader a.title.low,
-.cdm.low .cdmHeader .cdmExcerpt,
-.cdm.Unread .cdmHeader a.title.low,
-.cdm.Unread.low .cdmHeader .cdmExcerpt,
-.cdm.low .cdmHeader span.author {
+.cdm .header a.title.low,
+.cdm.low .header .cdmExcerpt,
+.cdm.Unread .header a.title.low,
+.cdm.Unread.low .header .cdmExcerpt,
+.cdm.low .header span.author {
 	color : #909090;
 	text-decoration : line-through;
 }
 
-.cdmFeedTitle {
+.feed-title {
 
 	> * {
 		display : table-cell;

File diff suppressed because it is too large
+ 1 - 1
css/default.css


+ 11 - 11
css/tt-rss.less

@@ -221,7 +221,7 @@ body.ttrss_main {
 		padding : 1px;
 		transition : color 0.2s, background 0.2s;
 
-		div.hlTitle {
+		div.title {
 			display : table-cell;
 			cursor : pointer;
 			width : 100%;
@@ -251,13 +251,13 @@ body.ttrss_main {
 			max-height : 16px;
 		}
 
-		span.hlFeed {
+		span.feed {
 			display : table-cell;
 			vertical-align : middle;
 			text-align : right;
 		}
 
-		span.hlFeed a {
+		span.feed a {
 			border-radius : 4px;
 			display : inline-block;
 			padding : 1px 4px 1px 4px;
@@ -268,7 +268,7 @@ body.ttrss_main {
 			white-space : nowrap;
 		}
 
-		span.hlFeed a:hover {
+		span.feed a:hover {
 			color : @color-accent;
 		}
 
@@ -304,7 +304,7 @@ body.ttrss_main {
 			height : 16px;
 		}
 
-		div.hlTitle a {
+		div.title a {
 			font-weight : 600;
 			text-rendering: optimizelegibility;
 			font-family : @fonts-ui;
@@ -326,11 +326,11 @@ body.ttrss_main {
 		text-decoration : line-through;
 	}
 
-	.hl.Unread div.hlTitle a {
+	.hl.Unread div.title a {
 		color : black;
 	}
 
-	.hl.active div.hlTitle a {
+	.hl.active div.title a {
 		color : @color-accent;
 		/* text-shadow : 1px 1px 2px #fff; */
 	}
@@ -345,7 +345,7 @@ body.ttrss_main {
 		background : desaturate(@color-accent, 25%);
 
 		a,
-		.hlFeed a,
+		.feed a,
 		.hlContent a.title,
 		span {
 			color : white;
@@ -704,17 +704,17 @@ body.ttrss_main {
 	}
 
 
-	div#headlines-frame.wide .hlTitle {
+	div#headlines-frame.wide .title {
 		max-width : none;
 		overflow : visible;
 		white-space : normal;
 	}
 
-	div#headlines-frame.wide .hl .hlFeed {
+	div#headlines-frame.wide .hl .feed {
 		display : none;
 	}
 
-	img.hlScorePic {
+	img.score-pic {
 		vertical-align : middle;
 		width : 16px;
 		height : 16px;

+ 1 - 1
js/feedlist.js

@@ -452,7 +452,7 @@ function catchupFeedInGroup(id) {
 
 			});
 
-			const feedTitles = $$("#headlines-frame > div[class='cdmFeedTitle']");
+			const feedTitles = $$("#headlines-frame > div[class='feed-title']");
 
 			for (let i = 0; i < feedTitles.length; i++) {
 				if (feedTitles[i].getAttribute("data-feed-id") == id) {

+ 5 - 5
js/viewfeed.js

@@ -86,7 +86,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
 			while (tmp.hasChildNodes()) {
 				var row = tmp.removeChild(tmp.firstChild);
 
-				if (loaded_article_ids.indexOf(row.id) == -1 || row.hasClassName("cdmFeedTitle")) {
+				if (loaded_article_ids.indexOf(row.id) == -1 || row.hasClassName("feed-title")) {
 					dijit.byId("headlines-frame").domNode.appendChild(row);
 
 					loaded_article_ids.push(row.id);
@@ -127,7 +127,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
 				while (tmp.hasChildNodes()) {
 					let row = tmp.removeChild(tmp.firstChild);
 
-					if (loaded_article_ids.indexOf(row.id) == -1 || row.hasClassName("cdmFeedTitle")) {
+					if (loaded_article_ids.indexOf(row.id) == -1 || row.hasClassName("feed-title")) {
 						dijit.byId("headlines-frame").domNode.appendChild(row);
 
 						loaded_article_ids.push(row.id);
@@ -1018,7 +1018,7 @@ function unpackVisibleHeadlines() {
 
 			const content = row.getAttribute("data-content");
 
-			row.select(".cdmContentInner")[0].innerHTML = content;
+			row.select(".content-inner")[0].innerHTML = content;
 			row.removeAttribute("data-content");
 
 			PluginHost.run(PluginHost.HOOK_ARTICLE_RENDERED_CDM, row);
@@ -1672,7 +1672,7 @@ function setSelectionScore() {
 						const row = $("RROW-" + id);
 
 						if (row) {
-							const pic = row.getElementsByClassName("hlScorePic")[0];
+							const pic = row.getElementsByClassName("score-pic")[0];
 
 							if (pic) {
 								pic.src = pic.src.replace(/score_.*?\.png/,
@@ -1739,7 +1739,7 @@ function updateFloatingTitle(unread_only) {
 
 		if (child && child.offsetTop + child.offsetHeight > hf.scrollTop) {
 
-			const header = child.getElementsByClassName("cdmHeader")[0];
+			const header = child.getElementsByClassName("header")[0];
 
 			if (unread_only || child.getAttribute("data-article-id") != $("floatingTitle").getAttribute("data-article-id")) {
 				if (child.getAttribute("data-article-id") != $("floatingTitle").getAttribute("data-article-id")) {

+ 1 - 1
plugins/embed_original/init.js

@@ -10,7 +10,7 @@ function embedOriginalArticle(id) {
 		let c = false;
 
 		if (isCdmMode()) {
-			c = $$("div#RROW-" + id + " div[class=cdmContentInner]")[0];
+			c = $$("div#RROW-" + id + " div[class=content-inner]")[0];
 		} else if (id == getActiveArticleId()) {
 			c = $$("div[class=postContent]")[0];
 		}

+ 2 - 2
plugins/shorten_expanded/init.js

@@ -28,8 +28,8 @@ require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 		PluginHost.register(PluginHost.HOOK_ARTICLE_RENDERED_CDM, function(row) {
 			window.setTimeout(function() {
 				if (row) {
-					const c_inner = row.select(".cdmContentInner")[0];
-					const c_inter = row.select(".cdmIntermediate")[0];
+					const c_inner = row.select(".content-inner")[0];
+					const c_inter = row.select(".intermediate")[0];
 
 					if (c_inner && c_inter &&
 						row.offsetHeight >= _shorten_expanded_threshold * window.innerHeight) {

+ 1 - 1
tests/functional/BasicTest.php

@@ -41,6 +41,6 @@ class BasicTest extends PHPUnit_Extensions_Selenium2TestCase {
 
 		$this->byCssSelector('#dijit__TreeNode_3')->click();
 
-		$this->byCssSelector('#RROW-1 > div.cdmHeader')->displayed();
+		$this->byCssSelector('#RROW-1 > .header')->displayed();
 	}
 }