augie/webapp/lib/augie_web/live/orientation_live.html.leex

<div class="card">
  <div class="card-divider">
    <h4>Orientation</h4>
  </div>
  <%= if @data_ready do %>
    <div class="card-section">
      <div class="grid-x">
        <div class="cell small-6"><strong>Pitch</strong></div>
        <div class="cell small-6 text-right"><%= Float.round(@pitch, 2) %>&deg;</div>
      </div>
      <div class="grid-x">
        <div class="cell small-6"><strong>Roll</strong></div>
        <div class="cell small-6 text-right"><%= Float.round(@roll, 2) %>&deg;</div>
      </div>
      <div class="grid-x">
        <div class="cell small-6"><strong>Yaw</strong></div>
        <div class="cell small-6 text-right"><%= Float.round(@yaw, 2) %>&deg;</div>
      </div>
    </div>
  <% else  %>
    <p> No data available </p>
  <% end  %>
</div>