Improve Lesson View in Rails App

Notes


Let's go ahead and give some love to Lesson object's show view for the base LessonsController. The breadcrumbs we set up last lesson allow us to delete some pretty unsightly back links towards the bottom of the page. Let's set the width for the video HTML tag to 100%. Also, we're going to wrap the content we display in an if conditional similar to what we did with the video. We'll only display the content if it exists since some lessons could only have a video and no content. Let's insert some code directly underneath the if conditional for the video.

<% if @lesson.content.present? %>

   <h1 class="mt-5">
      Article
   <h1>
   
   <hr>
   
   <div class="lesson-content mt-5">
      <%= @lesson.content.html_safe %>
   </div>

<% end %>

The lesson-content class gives us the ability to add some styling that only affects this div. Let's go to our app/assets/stylesheets/application.css file and create a few CSS classes to improve the fidelity of our lesson content.

.lesson-content {
   h1 {
      font-size: 2rem;
   }
 
   div {
      font-size: 1.2rem;
   }
}

Now take a look at the show view! Still room for improvement but definitely looking a ton better.

Happy coding!!!!