a-current

a

TealCode/main/static/main/css/style.css

@@ -34,14 +34,18 @@ body header div a{
     padding-right: 30px;
     cursor:pointer;
     transition: 0.1s;
-    transition-timing-function: linear;
+    transition-timing-function: linear;    
+    text-decoration: none;
     font-weight: bold;
 }
 
+body header div .a-current{
+    color:rgb(0, 255, 106);
+    text-decoration: underline;
+}
 
 body header div a:hover{
-    color:rgb(226, 4, 255);
+    color:rgb(0, 255, 106);
-    
     text-decoration: underline;
 }
 
@@ -62,6 +66,7 @@ body main #main-content{
 body main #main-content #main-headline h2{
     text-align: center;
     letter-spacing: 2.5px;
+    text-transform: capitalize;
 }
 
 body main #main-content #main-content-code{

TealCode/main/templates/main/base.html

@@ -20,12 +20,12 @@
         <h1>TealFire</h1>
 
         <div>
-            <a href="/category/python/">Python</a>
+            <a id="a-python" href="/category/python/">Python</a>
-            <a>C#</a>
+            <a id="a-cs" href="/category/cs/">C#</a>
-            <a>C++</a>
+            <a id="a-c++" href="/category/c++/">C++</a>
-            <a>C</a>
+            <a id="a-c" href="/category/c/">C</a>
-            <a>Java</a>
+            <a id="a-java" href="/category/java/">Java</a>
-            <a>JavaScript</a>
+            <a id="a-javascript" href="/category/javascript/">JavaScript</a>
         </div>
     </header>
     <main>
@@ -37,5 +37,15 @@
 
     <script src="{% static 'main/highlight/highlight.min.js' %}"></script>
     <script>hljs.highlightAll();</script>
+
+    <script>
+        {% if category_title %}
+            document.getElementById("a-{{ category_title }}").classList.add("a-current");
+        {% else %}
+            document.getElementById("a-{{ category_obj.title }}").classList.add("a-current");
+        {% endif %}
+        
+        
+    </script>
 </body>
 </html>

TealCode/main/templates/main/category.html

@@ -2,36 +2,27 @@
 {% block content %}
     
     <div id="main-headline">
+    {% if category_obj.title == "cs" %}
+        <h2>C#</h2>
+
+    {% else %}
         <h2>{{ category_obj.title }}</h2>
+    {% endif %}
     </div>
     <div id="list">
-        <div class="list-item">
+        {% for topic in topics %}
-            <img src="c_icon.png"/>
+        <div class="list-item" onclick="openTopic('{{ topic.title }}')">
-            <p>How To 1 in c</p>
+            <!--<img src="c_icon.png"/>-->
-        </div>
+            <p>{{ topic.title }}</p>
-        <div class="list-item">
-            <img src="c_icon.png"/>
-            <p>How To 1 in c</p>
-        </div>
-        <div class="list-item">
-            <img src="c_icon.png"/>
-            <p>How To 1 in c</p>
-        </div>
-        <div class="list-item">
-            <img src="c_icon.png"/>
-            <p>How To 1 in c</p>
-        </div>
-        <div class="list-item">
-            <img src="c_icon.png"/>
-            <p>How To 1 in c</p>
-        </div>
-        <div class="list-item">
-            <img src="c_icon.png"/>
-            <p>How To 1 in c</p>
-        </div>
-        <div class="list-item">
-            <img src="c_icon.png"/>
-            <p>How To 1 in c</p>
         </div>
+        {% endfor %}
+
+        
     </div>   
+
+    <script>
+        function openTopic(topic){
+            window.open("/topic/{{ category_obj.title }}/" + topic, "_self");
+        }
+    </script>
 {% endblock content %}

TealCode/main/templates/main/topic.html

@@ -5,6 +5,7 @@
             </div>
 
     <div id="main-content-code">
+        
         <pre><code  style="padding-top: 5px; padding-bottom: 5px;"class="language-{{category_title}}">{{code}}</code></pre>
     </div>
 

TealCode/main/views.py

@@ -28,7 +28,8 @@ def category(req, category):
     if category:
         category_obj = Category.objects.filter(title = category).first()
         if category_obj:
-            return render(req, "main/category.html", {'category_obj': category_obj})
+            topics_obj = Topic.objects.filter(category=category_obj)
+            return render(req, "main/category.html", {'category_obj': category_obj, 'topics': topics_obj})
         
     
     return redirect("main-index")