Finished UI for DetailedView

src/FOSSDB/urls.py

@@ -19,9 +19,9 @@ from django.urls import include, path
 
 urlpatterns = [
     path("admin/", admin.site.urls),
-    path("", include("account.urls")),
     path("", include("fossdb.urls")),
     path("", include("main.urls")),
+    path("", include("account.urls")),
     path("", include("django.contrib.auth.urls")),
     path("__reload__/", include("django_browser_reload.urls")),
 ]

src/apps/fossdb/migrations/0005_operatingsystem_is_linux.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.2 on 2023-06-28 22:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('fossdb', '0004_alter_tag_icon_star'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='operatingsystem',
+            name='is_linux',
+            field=models.BooleanField(blank=True, default=False),
+        ),
+    ]

src/apps/fossdb/models.py

@@ -18,6 +18,7 @@ class License(models.Model):
 class OperatingSystem(models.Model):
     name = models.CharField(max_length=100, unique=True)
     description = models.TextField(blank=True, default="")
+    is_linux = models.BooleanField(blank=True, default=False)
 
     def __str__(self):
         return self.name
@@ -75,6 +76,26 @@ class Project(models.Model):
     def star_amount(self):
         return self.star.count()
 
+    @property
+    def runs_on_macos(self):
+        return self.operating_system.filter(operating_system__name="macOS").exists()
+
+    @property
+    def runs_on_linux(self):
+        return self.operating_system.filter(operating_system__is_linux=True).exists()
+
+    @property
+    def runs_on_windows(self):
+        return self.operating_system.filter(operating_system__name="Windows").exists()
+
+    @property
+    def runs_on_ios(self):
+        return self.operating_system.filter(operating_system__name="iOS").exists()
+
+    @property
+    def runs_on_android(self):
+        return self.operating_system.filter(operating_system__name="Android").exists()
+
     def get_absolute_url(self):
         return f"/{self.owner}/{self.name}"
 

src/apps/fossdb/templates/detailed_view.html

@@ -1,48 +1,123 @@
 {% extends "base.html" %}
 {% load static %}
 {% block title %}{{ project.owner }}/{{ project.name }}{% endblock %}
-{% block meta %}{% endblock %}
+{% block meta %}
+    <script src="{% static 'js/buttons.js' %}" defer></script>
+{% endblock meta %}
 {% block content %}
-    <h2>@{{ project.owner }}</h2>
-    <h3>{{ project.name }}</h3>
-    <p>{{ project.description }}</p>
+    <div class="mx-auto font-condensed max-w-[60%]">
+        <div class="p-8">
+            <h1 class="text-center text-4xl font-abel">{{ project.name }}</h1>
+            <h2 class="text-center text-2xl font-abel">
+                <a href="{% url 'profile' project.owner.username %}">By <span class="underline">{{ project.owner }}</span></a>
+            </h2>
+            <!-- os platform icons -->
+            <div class="my-4 flex justify-center items-center gap-x-4">
+                <a href=""><i class="fa-brands fa-linux fa-lg hover:text-lightsteelblue-200 transform duration-300 ease-in-out
+          {% if project.runs_on_linux %}
+              text-lightsteelblue-100
+          {% else %}
+              text-slategray-200
+          {% endif %}"></i></a>
+                <a href=""><i class="fa-brands fa-windows fa-lg hover:text-lightsteelblue-200 transform duration-300 ease-in-out
+          {% if project.runs_on_windows %}
+              text-lightsteelblue-100
+          {% else %}
+              text-slategray-200
+          {% endif %}"></i></a>
+                <a href=""><i class="fa-brands fa-apple fa-lg hover:text-lightsteelblue-200 transform duration-300 ease-in-out
+          {% if project.runs_on_macos %}
+              text-lightsteelblue-100
+          {% else %}
+              text-slategray-200
+          {% endif %}"></i></a>
+                <a href=""><i id="ios"
+   class="fa-brands fa-app-store-ios fa-lg hover:text-lightsteelblue-200 transform duration-300 ease-in-out
+          {% if project.runs_on_ios %}
+              text-lightsteelblue-100
+          {% else %}
+              text-slategray-200
+          {% endif %}"></i></a>
+                <a href=""><i id="android"
+   class="fa-brands fa-android fa-lg hover:text-lightsteelblue-200 transform duration-300 ease-in-out
+          {% if project.runs_on_android %}
+              text-lightsteelblue-100
+          {% else %}
+              text-slategray-200
+          {% endif %}"></i></a>
+            </div>
+            <!-- tags -->
+            <div class="my-8 flex flex-wrap justify-center items-start gap-2">
+                {% for tag in project.tag.all|dictsort:"name" %}
+                    <a href="">
+                        <span title="{{ tag.description }}"
+                              class="bg-opacity-0 border rounded-xl border-slategray-200 px-3 text-xs min-w-16 hover:bg-steelblue-400 hover:bg-opacity-60 transform duration-300 ease-in-out">
+                            {{ tag }}
+                        </span>
+                    </a>
+                {% endfor %}
+            </div>
+            <!-- programming languages -->
+            <div class="my-8 flex flex-wrap justify-center items-start gap-2">
+                {% for language in project.projectprogramminglanguage_set.all|dictsortreversed:"percentage" %}
+                    <a href="">
+                        <span title="{{ language.percentage }}%"
+                              class="bg-opacity-0 border rounded-xl border-slategray-200 px-3 text-xs min-w-16 hover:bg-steelblue-400 hover:bg-opacity-60 transform duration-300 ease-in-out">
+                            {{ language.programming_language }}
+                        </span>
+                    </a>
+                {% endfor %}
+            </div>
+            <!-- text -->
+            <p class="text-justify font-roboto my-12">{{ project.description }}</p>
+            <div class="">
+                <!-- hosting platform and licenses on one line -->
+                <div class="flex justify-between w-full mt-4 font-abel">
+                    <!-- licenses -->
+                    <div>
+                        <button class="text-xl underline font-abel hover:text-lightsteelblue-200 transform duration-300 ease-in-out"
+                                id="menu-button"
+                                aria-haspopup="true"
+                                aria-expanded="true">Licenses</button>
+                    </div>
+                    <!-- hosting platform -->
+                    <div class="">
                         <p>
-        <a href="{{ project.projecthostingplatform.url }}" target="_blank">{{ project.projecthostingplatform.hosting_platform }}</a>
+                            See project source code and read more <a class="underline text-skyblue-300 hover:text-cadetblue-300 transform duration-300 ease-in-out"
+    href="{{ project.projecthostingplatform.url }}"
+    target="_blank">here</a>!
                         </p>
-    <ul>
-        {% for license in project.license.all %}
-            <li>
-                <a href="{{ license.url }}">{{ license }}</a>
-            </li>
-        {% empty %}
-            <p>No license</p>
+                    </div>
+                </div>
+                <div class="w-full">
+                    <div class="my-4 flex flex-wrap justify-center items-start gap-2"
+                         role="menu"
+                         id="dropdown-menu"
+                         aria-orientation="vertical"
+                         aria-labelledby="menu-button"
+                         tabindex="-1"
+                         style="display:none">
+                        {% for license in project.license.all|dictsort:"short_name" %}
+                            <a href="{{ license.url }}">
+                                <span title="{{ license.full_name }}"
+                                      class="bg-opacity-0 border rounded-xl border-slategray-200 px-3 text-xs min-w-16 hover:bg-steelblue-400 hover:bg-opacity-60">
+                                    {{ license }}
+                                </span>
+                            </a>
                         {% endfor %}
-    </ul>
-    <ul>
-        {% for os in project.operating_system.all %}
-            <li>{{ os }}</li>
-        {% empty %}
-            <p>No OS</p>
-        {% endfor %}
-    </ul>
-    <ul>
-        {% for tag in project.tag.all %}
-            <li>{{ tag }}</li>
-        {% empty %}
-            <p>No tag</p>
-        {% endfor %}
-    </ul>
-    <ul>
-        {% for language in project.projectprogramminglanguage_set.all %}
-            <li>{{ language.programming_language }} {{ language.percentage }}&#37;</li>
-        {% empty %}
-            <p>No language</p>
-        {% endfor %}
-    </ul>
-    <button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% if user == project.owner %}
+            <div class="flex justify-between mt-8 mx-16">
+                <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-skyblue-300 hover:opacity-60 transform ease-in-out duration-500">
                     <a href="{% url 'project-update' project.owner project.name %}">Update</a>
                 </button>
-    <button>
+                <button class="px-12 py-2 border border-transparent rounded-md text-gray-500 bg-skyblue-300 hover:opacity-60 transform ease-in-out duration-500">
                     <a href="{% url 'project-delete' project.owner project.name %}">Delete</a>
                 </button>
+            </div>
+        {% endif %}
+    </div>
 {% endblock %}

src/apps/fossdb/templates/explore.html

@@ -3,18 +3,6 @@
 {% block title %}{{ title }}{% endblock %}
 {% block meta %}{% endblock %}
 {% block content %}
-    <p>{{ username }}</p>
-    <button>
-        <a href="{% url 'add-project' %}">Add Project</a>
-    </button>
-    <button>
-        <a href="/admin">Admin</a>
-    </button>
-    <br />
-    <form action="get">
-        {{ filter.form.as_p }}
-        <button type="submit">Filter</button>
-    </form>
     {% for project in projects %}
         <div>
             <a href="{{ project.get_absolute_url }}">{{ project }}</a>

src/apps/fossdb/urls.py

@@ -4,7 +4,7 @@ from . import views
 
 urlpatterns = [
     path("explore/", views.ProjectListView.as_view(), name="explore"),
-    path("add/", views.ProjectCreateView.as_view(), name="add-project"),
+    path("contribute/", views.ProjectCreateView.as_view(), name="contribute"),
     path("<str:owner>/<str:project_name>/", views.ProjectDetailView.as_view(), name="project-detail"),
     path("<str:owner>/<str:project_name>/edit/", views.ProjectUpdateView.as_view(), name="project-update"),
     path("<str:owner>/<str:project_name>/delete/", views.ProjectDeleteView.as_view(), name="project-delete"),

src/apps/fossdb/views.py

@@ -23,7 +23,7 @@ class ProjectListView(FilterView):
     template_name = "explore.html"
     filterset_class = ProjectFilter
     context_object_name = "projects"
-    paginate_by = 10  # optional 10 projects a page
+    paginate_by = 100  # optional 10 projects a page
 
 
 class ProjectCreateView(LoginRequiredMixin, CreateView):

src/apps/tokyonight_night/static_src/tailwind.config.js

@@ -126,6 +126,8 @@ module.exports = {
         fontSize: {
             base: "1rem",
             xl: "1.25rem",
+            "2xl": "1.5rem",
+            "3xl": "2rem",
             "4xl": "4rem",
             xs: "0.75rem",
         },

src/apps/tokyonight_night/templates/base.html

@@ -75,7 +75,7 @@
         <main class="flex flex-col flex-grow">
             {% block content %}{% endblock %}
         </main>
-        <footer class="w-full h-32 flex items-center text-slategray-200 bg-gray-500 mt-4 font-condensed border-gradient-horizontal">
+        <footer class="w-full h-32 flex items-center text-slategray-200 bg-gray-500 mt-32 font-condensed border-gradient-horizontal">
             <div class="p-8">
                 <div class="space-y-4 text-left">
                     <p>

src/static/js/buttons.js

@@ -39,3 +39,13 @@ window.addEventListener("DOMContentLoaded", () => {
         })
     })
 })
+
+window.addEventListener("DOMContentLoaded", () => {
+    document
+        .getElementById("menu-button")
+        .addEventListener("click", function() {
+            document.getElementById("dropdown-menu").style.display =
+                this.ariaExpanded === "true" ? "none" : "flex"
+            this.ariaExpanded = this.ariaExpanded === "true" ? "false" : "true"
+        })
+})