added version

TealCode/main/migrations/0003_topic_version.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.9 on 2021-11-10 12:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0002_auto_20211110_0912'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='topic',
+            name='version',
+            field=models.CharField(blank=True, max_length=100),
+        ),
+    ]

TealCode/main/models.py

@@ -11,10 +11,11 @@ class Category(models.Model):
 
 
 class Topic(models.Model):
-    title = models.CharField(max_length= 200)
+    title = models.CharField(max_length=200)
     code_text = models.TextField()
     date_created = models.DateTimeField(default=timezone.now)
     category = models.ForeignKey(Category, on_delete=models.CASCADE)
+    version = models.CharField(max_length=100, blank=True)
 
     def __str__(self):
         return self.category.title + " - " + self.title

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

@@ -31,12 +31,14 @@ body header div{
 
 body header div a{
     letter-spacing: 1.5px;
-    padding-right: 30px;
+    padding-right: 10px;
+    padding-left: 10px; 
     cursor:pointer;
     transition: 0.1s;
     transition-timing-function: linear;    
     text-decoration: none;
     font-weight: bold;
+    text-align: center ;
 }
 
 body header div .a-current{
@@ -49,8 +51,6 @@ body header div a:hover{
     text-decoration: underline;
 }
 
-
-
 body main #main-content{
     background-color: rgb(26, 26, 29);
     width: 700px;
@@ -111,4 +111,54 @@ body main #main-content #list .list-item img{
     height: 32px;
     margin-left: 10px;
     margin-top: -5px;
+}
+
+body main #main-content .note{
+    margin-top: 20px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    background-color: rgb(80, 83, 82);
+    
+}
+
+body main #main-content .note p{
+    color: rgb(202, 202, 202);
+    font-size: 10pt;
+}
+
+#button-content{
+    height: 60px;
+    width: 100%;
+    display: block;
+    float:left;
+    margin-bottom: 20px;
+}
+
+#button-content div{
+    height: 60px;
+    width: 200px;
+    margin-left: 25px;
+    display: block;
+    float:left;
+}
+
+#button-content div a{
+    width: 100%;
+    display: block;
+    text-align: center;
+    font-size: 13pt;
+    font-weight: bold;
+    text-decoration: none;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background-color: rgba(95, 255, 175, 0.1);
+    border: 5px solid rgb(34, 102, 71);
+    transition: 0.1s;
+    transition-timing-function: linear;
+}
+
+#button-content div a:hover{
+    background-color: rgba(137, 250, 194, 0.3);
+    border: 5px solid rgb(107, 255, 181);
 }

TealCode/main/templates/main/topic.html

@@ -1,12 +1,39 @@
 {% extends "main/base.html" %}
 {% block content %}
+    <div id="button-content">
+
+        <div>
+            {% if previous %}
+            <a href="/topic/{{ category_title }}/{{ previous.title }}/">Previous</a>
+            {% endif %}
+        </div>
+        
+
+        <div>
+            <a href="/category/{{ category_title }}/">Back To List</a>
+        </div>
+        
+
+        <div>
+            {% if next %}
+            <a href="/topic/{{ category_title }}/{{ next.title }}/">Next</a>
+            {% endif %}
+        </div>
+    </div>
+
     <div id="main-headline">
                 <h2>{{ title }}</h2>
             </div>
 
     <div id="main-content-code">
-        
+
         <pre><code  style="padding-top: 5px; padding-bottom: 5px;"class="language-{{category_title}}">{{code}}</code></pre>
+        
+        {% if version %}
+        <div class="note">
+            <p>{{version}}</p>
+        </div>
+        {% endif %}
     </div>
 
 {% endblock content %}

TealCode/main/views.py

@@ -10,11 +10,17 @@ def topic(req, category, topic):
         category_obj = Category.objects.filter(title = category).first()
         if category_obj:
             topic_obj = Topic.objects.filter(title=topic, category = category_obj).first()
+            previous_obj = Topic.objects.filter(id = topic_obj.id-1, category = category_obj).first()
+            next_obj = Topic.objects.filter(id = topic_obj.id+1, category = category_obj).first()
+
             if topic_obj:
                 context = {
                     'title': topic_obj.title,
                     'code': topic_obj.code_text,
                     'category_title': category_obj.title,
+                    'version': topic_obj.version,
+                    'previous': previous_obj,
+                    'next': next_obj,
                 }
 
                 return render(req, "main/topic.html", context)