First working version

.gitignore

@@ -94,3 +94,7 @@ ENV/
 # Rope project settings
 .ropeproject
 
+# emacs
+#*#
+.#*
+*~

linkstore/admin.py

@@ -1,5 +1,20 @@
 from django.contrib import admin
 
 # Register your models here.
-from .models import Link
-admin.site.register(Link)
+from linkstore.models import Category, Link
+
+
+class LinkInline(admin.TabularInline):
+    model = Link
+    extra = 4
+
+
+class CategoryAdmin(admin.ModelAdmin):
+    fieldset = [
+        (None, {'fields': ['name']}),
+    ]
+    inlines = [LinkInline]
+
+
+admin.site.register(Link)
+admin.site.register(Category, CategoryAdmin)

linkstore/migrations/0001_initial.py

@@ -0,0 +1,31 @@
+# Generated by Django 2.1.7 on 2019-04-06 18:50
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Category',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=40)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Link',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('friendly_name', models.CharField(max_length=40)),
+                ('url', models.CharField(max_length=255)),
+                ('category', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='linkstore.Category')),
+            ],
+        ),
+    ]

linkstore/migrations/0002_auto_20190406_1546.py

@@ -0,0 +1,17 @@
+# Generated by Django 2.1.7 on 2019-04-06 20:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('linkstore', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='category',
+            options={'verbose_name_plural': 'categories'},
+        ),
+    ]

linkstore/models.py

@@ -1,8 +1,22 @@
 from django.db import models
 
 # Create your models here.
+
+
+class Category(models.Model):
+    class Meta(object):
+        verbose_name_plural = "categories"
+
+    name = models.CharField(max_length=40)
+
+    def __str__(self):
+        return self.name
+
+
 class Link(models.Model):
     friendly_name = models.CharField(max_length=40)
-    url = models.CharField(max_length = 255)
+    url = models.CharField(max_length=255)
+    category = models.ForeignKey(Category, on_delete=models.CASCADE)
+
     def __str__(self):
-        return self.url
+        return self.url

linkstore/static/linkstore/css/styles.css

@@ -0,0 +1,51 @@
+/* Style the button that is used to open and close the collapsible content */
+.collapsible {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+}
+
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsible:hover {
+    background-color: #ccc;
+}
+.collapsible:after {
+    content: '\02795'; /* Unicode character for "plus" sign (+) */
+    font-size: 13px;
+    color: white;
+    float: right;
+    margin-left: 5px;
+}
+.active:after {
+    content: "\2796"; /* Unicode character for "minus" sign (-) */
+}
+/* Style the collapsible content. Note: hidden by default */
+.content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+    background-color: #f1f1f1;
+}
+ul.no_bullets {
+    list-style-type: none;
+}
+.collapsible-like {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+}
+.active, .collapsible-like:hover {
+    background-color: #ccc;
+}

linkstore/static/linkstore/js/collapse.js

@@ -0,0 +1,25 @@
+function set_interactive () {
+    var coll = document.getElementsByClassName("collapsible");
+    var i;
+
+    for (i = 0; i < coll.length; i++) {
+	coll[i].addEventListener("click", function() {
+	    this.classList.toggle("active");
+	    var content = this.nextElementSibling;
+	    if (content.style.display === "block") {
+		content.style.display = "none";
+	    } else {
+		content.style.display = "block";
+	    }
+	});
+    }
+}
+function collapse_all () {
+    colls = document.getElementsByClassName("collapsible");
+    for (i = 0; i < colls.length; i++) {
+        content = colls[i].nextElementSibling;
+        if (content.style.display === "block") {
+	    content.style.display = "none";
+	}
+    }
+}

linkstore/static/linkstore/styles.css

@@ -1,30 +0,0 @@
-.button {
-    /* margin: 25px 50px 75px 100px; */
-    background-color: white;
-    color: black;
-    padding: 15px 32px;
-    font-size: 16px;
-    text-align: center;
-    border: 2px solid #4CAF50; /* Green */
-    -webkit-transition-duration: 0.2s; /* Safari */
-    transition-duration: 0.2s;
-    text-decoration: none;
-}
-
-.button:hover {
-    background-color: #4CAF50; /* Green */
-    color: white;
-}
-
-li.button-div {
-  background: white;
-  margin-bottom: 50px;
-}
-
-li.button-div:last-child {
- margin-bottom: 0px;
-}
-
-ul {
-    list-style-type: none;
-}

linkstore/templates/linkstore/index.djhtml

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+{% load static %}
+<html>
+    <head>
+	<link rel="stylesheet" type="text/css" href="{% static "linkstore/css/styles.css" %}">
+	<script src="{% static "linkstore/js/collapse.js" %}"></script>
+	<title>Landing</title>
+    </head>
+    <body onload="set_interactive();">
+	<h1>Useful Links</h1>
+	<button class="collapsible-like" onclick="collapse_all();">Collapse All</button>
+	{% for category in categories %}
+	    <button class="collapsible">{{ category.name }}</button>
+	    <div class="content">
+		<ul class="no_bullets">
+		    {% for link in category.link_set.all %}
+			<li>
+			    <a href="{{ link.url }}">{{ link.friendly_name }}</a>
+			</li>
+		    {% endfor %}
+		</ul>
+	    </div>
+	{% endfor %}
+    </body>
+</html>

linkstore/templates/linkstore/index.html

@@ -1,19 +0,0 @@
-<html>
-    <head>
-        <title>Useful links</title>
-        {% load static %}
-        <link rel="stylesheet" type="text/css" href="{% static "linkstore/styles.css" %}">
-    </head>
-    <body>
-        <h1>Useful Links</h1>
-        {% if linklist %}
-            <ul>
-            {% for link in linklist %}
-                <li class="button-div"><a href="{{ link.url }}" class="button">{{ link.friendly_name }}</a></li>
-            {% endfor %}
-            </ul>
-        {% else %}
-            <p>No links inputted</p>
-        {% endif %}
-    </body>
-</html>

linkstore/urls.py

@@ -1,8 +1,8 @@
 from django.urls import path
 
-from . import views
+from linkstore import views
 
 urlpatterns = [
     path('', views.index, name='index'),
     # path('/static/*'
-]
+]

linkstore/views.py

@@ -1,9 +1,11 @@
 from django.shortcuts import render
 from django.http import HttpResponse
 # Create your views here.
-from .models import Link
+from linkstore.models import Category
+
+
 def index(request):
     # return HttpResponse("links will show up here...")
-    linklist = Link.objects.all()
-    context = {'linklist':linklist}
-    return render(request,'linkstore/index.html',context)
+    categories = Category.objects.all()
+    context = {'categories': categories}
+    return render(request, 'linkstore/index.djhtml', context)

requirements.txt

@@ -0,0 +1 @@
+django

setup.py

@@ -1 +1,14 @@
+from distutils.core import setup
 
+with open('requirements.txt') as file:
+    INSTALL_REQUIRES = file.readlines()
+
+setup(
+    version='1.0',
+    name='linkstore',
+    description='Django app for collapsible link categories',
+    author='Raphael Roberts',
+    packages=['linkstore'],
+    author_email='raphael.roberts48@gmail.com',
+    install_requires=INSTALL_REQUIRES,
+)