SAK-43993 Library,Simple RSS Portlet - fix news feed formatting (sakaiproject#8613)

* SAK-43993 Library,Simple RSS Portlet - fix news feed formatting

Co-authored-by: Michael Greene <[email protected]>

Co-authored-by: Shawn Foster <[email protected]>

Author: profmikegreene

library/src/morpheus-master/sass/modules/tool/simplerss/_simplerss.scss

@@ -0,0 +1,40 @@
+.#{$namespace}sakai-simple-rss {
+    .#{$namespace}toolBody--sakai-simple-rss {
+        padding: 0 $standard-spacing $standard-spacing;
+    }
+    .simple-rss-portlet form p {
+        margin-top: $standard-spacing;
+        margin-bottom: 0;
+    }
+    .news-items ul {
+        padding:0;
+        display:flex;
+        flex-direction: column;
+    }
+    .news-items li {
+        list-style-type: none;
+        display:flex;
+        flex-direction: row;
+        margin-bottom: $standard-spacing;
+    }
+    /** overrides for CSyndFeed **/
+    /** Sakai version **/
+    .news-item-img {
+        flex: 1 0 0 ;
+        margin-right: $standard-spacing;
+    }
+    .news-item-content {
+        flex: 4 0px;
+    }
+    .news-items h4 {
+        margin-top:0;
+        line-height: 1.25;
+    }
+    .news-item-attachment {
+        font-size: 0.9em;
+        flex: auto;
+        background-color: var(--sakai-background-color-2);
+        border: 1px solid var(--sakai-border-color);
+
+    }
+}

library/src/morpheus-master/sass/modules/tool/synoptic/_synoptic.scss

@@ -24,4 +24,4 @@ body > .portletBody > #calendarForm{
 	.navIntraTool {
 		margin: 0;
 	}
-}
+} 

library/src/morpheus-master/sass/tool.scss

@@ -56,6 +56,7 @@
 @import "modules/tool/rubrics/rubrics";
 @import "modules/tool/authz/authz";
 @import "modules/tool/delegatedaccess/delegatedaccess";
+@import "modules/tool/simplerss/simplerss";
 
 @import "base/rtl";
 

simple-rss-portlet/src/main/webapp/css/simple-rss-portlet.css

@@ -33,7 +33,6 @@
 <fmt:setLocale value="${language}" />
 <fmt:setBundle basename="au.edu.anu.portal.portlets.rss.utils.messages" />
 
-<link type="text/css" rel="stylesheet"  href="<%=request.getContextPath()%>/css/simple-rss-portlet.css" />
 
 <div class="simple-rss-portlet">
 

simple-rss-portlet/src/main/webapp/pages/edit.jsp

@@ -21,7 +21,6 @@
 <%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %>
 
 <portlet:defineObjects />
-<link type="text/css" rel="stylesheet"  href="<%=request.getContextPath()%>/css/simple-rss-portlet.css" />
 
 <div class="news-feed">
 
@@ -31,39 +30,42 @@
       			<img src="${SyndFeed.image.url}" alt="${SyndFeed.image.description}" class="news-feed-img"/>
     		</a>
     	</c:if>
-		<p>${SyndFeed.description}</p>
+		<h1>${SyndFeed.description}</h1>
 	</div>
 
 	<div class="news-items">
 		<ul>
 			<c:forEach items="${SyndFeed.entries}" var="SyndEntry" end="${maxItems}">
 				<li>
 					<c:if test="${not empty Media[SyndEntry.uri] && Media[SyndEntry.uri].image}">
-						<img src="${Media[SyndEntry.uri].url}" class="news-item-img"/>
-					</c:if>
-					<h3>
-					<c:choose>
-						<c:when test="${not empty SyndEntry.link}">
-	      					<a target="_blank" href="${SyndEntry.link}" class="news-item-title">${SyndEntry.title}</a>
-	      				</c:when>
-	      				<c:otherwise>
-		      				${SyndEntry.title}
-		      			</c:otherwise>
-		      		</c:choose>
-		      		</h3>
-	      			<span class="news-item-excerpt">${SyndEntry.description.value}</span>
-	      			
-	      			<c:if test="${not empty Media[SyndEntry.uri] && !Media[SyndEntry.uri].image}">
-						<div class="news-item-attachment">
-							<a href="${Media[SyndEntry.uri].url}">${Media[SyndEntry.uri].displayName}</a>
-							 (${Media[SyndEntry.uri].type}, ${Media[SyndEntry.uri].displayLength})
+						<div class="news-item-img">
+							<img src="${Media[SyndEntry.uri].url}" />
 						</div>
 					</c:if>
-	      				      			
+					<div class="news-item-content">
+						<h2>
+						<c:choose>
+							<c:when test="${not empty SyndEntry.link}">
+								<a target="_blank" href="${SyndEntry.link}" class="news-item-title">${SyndEntry.title}</a>
+							</c:when>
+							<c:otherwise>
+								${SyndEntry.title}
+							</c:otherwise>
+						</c:choose>
+						</h2>
+						<span class="news-item-excerpt">${SyndEntry.description.value}</span>
+						
+						<c:if test="${not empty Media[SyndEntry.uri] && !Media[SyndEntry.uri].image}">
+							<div class="news-item-attachment">
+								<a href="${Media[SyndEntry.uri].url}">${Media[SyndEntry.uri].displayName}</a>
+								(${Media[SyndEntry.uri].type}, ${Media[SyndEntry.uri].displayLength})
+							</div>
+						</c:if>
+					</div>
 	    		</li>
     		</c:forEach>
 
 		</ul>
 	</div>
 </div>
-		
+