Updated channel page styles

assets/styles/drake.scss

@@ -10,7 +10,7 @@ body{
 
 a{
   color: $highlight-color;
-  transition: color 230ms ease-in-out;
+  transition: all 230ms ease-in-out;
   &:hover{
     color: $highlight-color-dark;
   }
@@ -60,3 +60,74 @@ hr{
 #site-header{
   margin-bottom: 10px;
 }
+
+#channel-header{
+  .channel-name{
+    margin-bottom: 5px;
+  }
+  .channel-created,
+  .channel-updated,
+  .video-created,
+  .video-updated{
+    margin-bottom: 5px;
+    color: #666;
+    font-size: 1.5rem;
+    font-style: italic;
+  }
+
+  .channel-description{
+    margin-top: 10px;
+    font-size: 1.75rem;
+  }
+
+  #sidebar{
+    background: #ddd;
+    border: 1px solid #666;
+
+    div:not(:last-child){
+      border-bottom: 1px solid #666;
+    }
+
+    > div{
+      padding: 10px 15px 9px;
+
+      p{
+        margin: 0;
+        font-size: 2rem;
+        text-align: left;
+      }
+    }
+
+    .actions-bar{
+      padding: 0;
+
+      span{
+        display: inline-block;
+        width: calc(50% - 1px);
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      span:not(:last-child){
+        width: 50%;
+        border-right: 1px solid #666;
+      }
+
+      a{
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        padding-top: 10px;
+        padding-bottom: 9px;
+        background: rgba(0, 0, 0, 0);
+        font-size: 2rem;
+        text-align: center;
+        text-decoration: none;
+
+        &:hover{
+          background: rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+  }
+}

views/channel/view.erb

@@ -1,18 +1,54 @@
 <div id="channel-header" class="row">
-  <div class="twelve columns">
+  <div class="eight columns">
     <h1 class="channel-name"><%= channel.name %></h1>
     <h4 class="channel-created">Item added at: <%= date_format(channel.created_at) %></h4>
     <% if channel.updated_at %>
     <h4 class="channel-updated">Last updated at: <%= date_format(channel.updated_at) %></h4>
     <% end %>
-  </div>  
+
+    <p class="channel-description"><%= channel.description %></p>
+  </div>
+
+  <div id="sidebar" class="four columns">
+    <div class="actions-bar">
+      <span><a href="/channel/<%= channel.id %>/edit">Edit <i class="fa-solid fa-pen-to-square"></i></a></span><span>
+        <a href="/channel/<%= channel.id %>/delete">Delete <i class="fa-solid fa-trash"></i></a></span>
+    </div>
+    <div class="channel-open">
+      <p>Open projects: <span><%= channel.openProjects() %></span></p>
+    </div>
+    <div class="channel-videos">
+      <p>Total videos: <span><%= channel.videos.length %></span></p>
+    </div>
+  </div>
 </div>
 
+<hr>
+
 <div class="row">
   <div class="twelve columns">
-    <p class="inventory-actions">
-      <a href="/channel/<%= channel.id %>/edit"><i class="fa-solid fa-pen-to-square"></i></a>
-      <a href="/channel/<%= channel.id %>/delete"><i class="fa-solid fa-trash"></i></a>
-    </p>
+    <h3>Channel videos</h3>
+    <% if channel.videos.length > 0 %>
+      <table class="u-full-width">
+        <thead>
+          <tr>
+            <th>Video name</th>
+            <th>Video serial</th>
+            <th>Video description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% channel.videos.each do |v| %>
+            <tr>
+              <td><a href="/video/<%= v.id %>"><%= v.name %></a></td>
+              <td><%= serialize(v.serial) %></td>
+              <td><%= v.description %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p>There are no videos associated with this project yet.</p>
+    <% end %>
   </div>
 </div>