Merge pull request #741 from dbmi-bgm/cfm-style_updates

Style updates for item-pages

CHANGELOG.rst

@@ -6,6 +6,14 @@ cgap-portal
 Change Log
 ----------
 
+14.2.2
+======
+`PR 741: Style updates for cgap-portal item-pages <https://github.com/dbmi-bgm/cgap-portal/pull/741>`_
+
+* Fixed bug occurring in collapsible text box
+* Changed green color for links to a less fluorescent green
+
+
 14.2.1
 ======
 
@@ -1178,4 +1186,4 @@ the ``poetry.app`` section of ``pyproject.toml`` for the corresponding change, a
    version = "100.200.300"
    ...etc.
 
-This would correspond with ``cgap-portal 100.200.300``.
+This would correspond with ``cgap-portal 100.200.300``.

pyproject.toml

@@ -1,7 +1,7 @@
 [tool.poetry]
 # Note: Various modules refer to this system as "encoded", not "cgap-portal".
 name = "encoded"
-version = "14.2.0.1b1"  # TODO: To become 14.2.1
+version = "14.2.2"
 description = "Computational Genome Analysis Platform"
 authors = ["4DN-DCIC Team <[email protected]>"]
 license = "MIT"

src/encoded/static/scss/encoded/modules/_item-pages.scss

@@ -840,6 +840,43 @@ i.status-indicator-dot {
 			> div {
 				border-bottom: 1px solid #eee;
 				padding-bottom: 8px;
+
+				// For toggling descriptions with more than one line
+				& .flexible-description-box {
+					display: flex;
+					flex-direction: row-reverse;
+					overflow: hidden;
+					justify-content: start;
+					transition: height 350ms ease-in-out;
+
+					button {
+						position: absolute;
+						right: 10px;
+					}
+
+					p {
+						width: 100%;
+						padding-right: 35px;
+					}
+
+					&.expanded {
+						overflow: hidden;
+						white-space: nowrap;
+
+						p {
+							white-space: normal;
+							word-break: break-word;
+						}
+					}
+					&.collapsed {
+
+						p {
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+				}
 			}
 		}
 		ol {
@@ -853,10 +890,10 @@ i.status-indicator-dot {
 			display: inline-block;
 			> .link {
 				@include user-select(none);
-				color: #00cca3; // temporary?
+				color: #3F9067;
 				cursor:pointer;
 				&:hover {
-					color: #00cca3;
+					color: #3F9067;
 					text-shadow : 0 0 0;
 				}
 			}
@@ -951,12 +988,14 @@ i.status-indicator-dot {
 		}
 		.detail-embedded-table-container {
 			overflow-x: auto;
+			margin-bottom: 20px;
 			table.detail-embedded-table {
 				min-width: 100%;
 				tr th {
 					white-space: normal;
 					word-break: normal;
 					padding: 7px 4px;
+					text-align: left;
 
 					&.has-children {
 						> .tooltip-info-container {
@@ -981,11 +1020,12 @@ i.status-indicator-dot {
 				tr td {
 					word-break: normal;
 					padding: 7px 8px;
+					text-align: left;
 					&.child-list-row-container {
 						padding: 0;
-						border-left: 1px dotted #ccc;
-						border-right: 1px dotted #ccc;
-						border-bottom: 1px solid #ddd;
+						// border-left: 1px dotted #ccc;
+						// border-right: 1px dotted #ccc;
+						// border-bottom: 1px solid #ddd;
 					}
 					&.no-word-break {
 						white-space: nowrap;