Update sizes and colors for different parts

Basic styles for now
mauriciofierrom · Nov 21, 2023 · 925ccdf · 925ccdf
1 parent 61dfda1
commit 925ccdf
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/app/assets/stylesheets/layouts/lesson.css b/app/assets/stylesheets/layouts/lesson.css
@@ -1,8 +1,11 @@
 .lesson-grid {
   display: grid;
-  border: 2px solid yellow;
+  /* border: 2px solid yellow; */
+  color: white;
+  height: 100vh;
+  background-color: black;
   grid-template-columns: 5% minmax(0, 1fr) 5%;
-  grid-template-rows: auto;
+  grid-template-rows: 10% minmax(0, 1fr) 20%;
   row-gap: 10px;
   grid-template-areas:
     ". header ."
@@ -12,18 +15,38 @@
 
 .header {
   grid-area: header;
-  border: 2px solid green;
+  display: flex;
+  flex-flow: row no-wrap;
+  /* border: 2px solid white; */
+  align-items: center;
+}
+
+.header h1{
+  order: 0;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.header-actions {
+  display: flex;
+  order: 1;
+  justify-content: right;
+  margin-left: auto;
+  gap: 5px;
 }
 
 .video-player {
-  border: 2px solid red;
-  height: 480px;
+  display: flex;
+  flex-flow: row no-wrap;
+  justify-content: center;
+  align-items: center;
+  /* border: 2px solid red; */
   grid-area: video;
+  background-color: black;
 }
 
 .sections {
-  border: 2px solid blue;
-  height: 150px;
+  /* border: 2px solid blue; */
   grid-area: sections;
 }
 

diff --git a/app/assets/stylesheets/layouts/section.css b/app/assets/stylesheets/layouts/section.css
@@ -37,12 +37,19 @@
 .section-item {
   display: inline-grid;
   grid-template-rows: 50% 50%;
-  border: 2px solid black;
+  background-color: #3c3f49;
+  /* border: 2px solid black; */
   grid-template-areas:
     "section-item-top"
     "section-item-bottom";
   height: 100px;
   width: 250px;
+  padding: 10px;
+}
+
+.section-item a {
+  text-decoration: none;
+  color: white;
 }
 
 .section-playing {

diff --git a/app/views/lessons/show.html.erb b/app/views/lessons/show.html.erb
@@ -2,12 +2,10 @@
   <%# <p style="color: green"><%= notice %1></p> %>
 
   <div class="header">
-    <%# <%= render @lesson %1> %>
-    <%= @lesson.name %>
-    <div>
+    <h1><%= @lesson.name %></h1>
+    <div class="header-actions">
       <%= link_to "Edit this lesson", edit_lesson_path(@lesson) %> |
       <%= link_to "Back to lessons", lessons_path %>
-
       <%= button_to "Destroy this lesson", @lesson, method: :delete %>
     </div>
   </div>