Add separator between length and complexity

Automattic · Apr 28, 2021 · b7602c5 · b7602c5
1 parent 88e3bcd
commit b7602c5
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/assets/blocks/lesson-metadata/lesson-metadata-edit.js b/assets/blocks/lesson-metadata/lesson-metadata-edit.js
@@ -70,6 +70,10 @@ const LessonMetadataEdit = ( props ) => {
 					</span>
 				) }
 
+				{ !! length && complexity && (
+					<span className="separator">|</span>
+				) }
+
 				{ complexity && (
 					<span className="lesson-complexity">
 						{ __( 'Complexity', 'sensei-lms' ) +

diff --git a/assets/blocks/lesson-metadata/lesson-metadata-editor.scss b/assets/blocks/lesson-metadata/lesson-metadata-editor.scss
@@ -2,7 +2,7 @@
 	font-size: .9em;
 	font-style: italic;
 
-	.lesson-length {
-		margin-right: 0.5em;
+	.separator {
+		margin: 0 0.5em 0;
 	}
 }
diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss
@@ -238,8 +238,8 @@ a.sensei-certificate-link {
     font-size: .9em;
     font-style: italic;
 
-    .lesson-length {
-      margin-right: 0.5em;
+    .separator {
+      margin: 0 0.5em 0;
     }
   }
   .lesson-meta  {

diff --git a/includes/blocks/class-sensei-lesson-metadata-block.php b/includes/blocks/class-sensei-lesson-metadata-block.php
@@ -54,6 +54,10 @@ public function render( array $attributes, string $content ) : string {
 				'</span>';
 		}
 
+		if ( $length && $complexity ) {
+			$content .= '<span class="separator">|</span>';
+		}
+
 		if ( $complexity ) {
 			$complexities      = Sensei()->lesson->lesson_complexities();
 			$lesson_complexity = $complexities[ $complexity ];