feat: show subtopics inside a topic page

makigas · May 16, 2024 · a07d8ea · a07d8ea
1 parent 2bef1e7
commit a07d8ea
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 18 deletions.
diff --git a/app/components/six/explorer/child_topics_component.html.erb b/app/components/six/explorer/child_topics_component.html.erb
@@ -0,0 +1,12 @@
+<div class="topicexplorer">
+  <%= render Six::Base::WrapperComponent.new(classes: 'topicexplorer__wrap') do %>
+    <h2 class="topicexplorer__title">Subcategorías de este tema</h2>
+    <div class="topicexplorer__topics">
+      <% @topic.child_topics.each do |topic| %>
+        <div class="topicexplorer__topic">
+        <%= render Six::Explorer::TopicThumbnailComponent.new(topic: topic, name: topic.title) %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>
diff --git a/app/components/six/explorer/child_topics_component.rb b/app/components/six/explorer/child_topics_component.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Six
+  module Explorer
+    class ChildTopicsComponent < ViewComponent::Base
+      include ViewComponent::Translatable
+
+      with_collection_parameter :topic
+
+      def render?
+        @topic.child_topics.present?
+      end
+
+      def initialize(topic:)
+        super
+        @topic = topic
+      end
+    end
+  end
+end
diff --git a/app/components/six/front/topic_explorer_component.rb b/app/components/six/front/topic_explorer_component.rb
@@ -10,7 +10,8 @@ class TopicExplorerComponent < ViewComponent::Base
         'desarrollo-web' => 'Desarrollo web',
         'lenguajes-de-programacion' => 'Programación',
         'java' => 'Java',
-        'desarrollo-de-juegos' => 'Desarrollo de juegos'
+        'elixir' => 'Elixir',
+        'creamos-una-api-rest-con-quarkus' => 'Quarkus',
       }.freeze
 
       def topics

diff --git a/app/javascript/six/components/topicthumb.scss b/app/javascript/six/components/topicthumb.scss
@@ -21,15 +21,15 @@
     margin: 0;
     padding: 0;
 
-    @include desktop-layout {
+    @include wide-layout {
       display: block;
     }
   }
 
   &__icon {
     max-width: 96px;
 
-    @include desktop-layout {
+    @include wide-layout {
       max-width: 100%;
     }
   }

diff --git a/app/javascript/six/front/topics.scss b/app/javascript/six/front/topics.scss
@@ -18,29 +18,23 @@
     }
   }
 
+  &__topics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 320px);
+    justify-content: center;
+    gap: 10px;
+  }
+
   @include desktop-layout {
     &__title {
       text-align: center;
       font-size: 1.8rem;
     }
-
-    &__topics {
-      display: flex;
-      margin-left: -10px;
-      margin-right: -10px;
-    }
-
-    &__topic {
-      flex: 1;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
   }
 
   @include wide-layout {
     &__topics {
-      width: 1100px;
-      margin: 0 auto;
+      grid-template-columns: repeat(auto-fit, 180px);
     }
   }
 }
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
@@ -30,4 +30,5 @@
 <% content_for(:hero) do %>
   <h1><%= @topic.title %></h1>
 <% end %>
-<%= render Six::Explorer::PlaylistListComponent.new(playlists: @topic.playlists_with_children.with_public_videos.order('playlists.topic_position' => :asc)) %>
+<%= render Six::Explorer::ChildTopicsComponent.new(topic: @topic) %>
+<%= render Six::Explorer::PlaylistListComponent.new(playlists: @topic.playlists.with_public_videos.order('playlists.topic_position' => :asc)) %>