Merge pull request #17 from SADiLaR/feature/institutions_view

Feature/institutions view
SADiLaR · Apr 16, 2024 · 891f1e3 · 891f1e3
2 parents 117c794 + 5d61dd2
commit 891f1e3
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 46 deletions.
diff --git a/app/app/settings.py b/app/app/settings.py
@@ -43,7 +43,7 @@
 ]
 if DEBUG:
     INSTALLED_APPS += [
-       "django_extensions",
+        "django_extensions",
     ]
 
 AUTH_USER_MODEL = "users.CustomUser"

diff --git a/app/app/urls.py b/app/app/urls.py
@@ -27,4 +27,5 @@
     path("admin/", admin.site.urls),
     path("_health/", views.health, name="health"),
     path("", views.home, name="home"),
+    path("institutions/", views.institutions, name="institutions"),
 ]
diff --git a/app/app/views.py b/app/app/views.py
@@ -1,6 +1,8 @@
 from django.http import HttpResponse
 from django.shortcuts import render
 
+from general.models import Institution
+
 
 def health(request):
     """A very basic (minimal dependency) health endpoint."""
@@ -11,6 +13,15 @@ def health(request):
 
 def home(request):
     template = "app/home.html"
-    context = {}
+    context = {"home_page": "active"}
+
+    return render(request, template_name=template, context=context)
+
+
+def institutions(request):
+    template = "app/institutions.html"
+
+    institutions = Institution.objects.all()
+    context = {"institutions_page": "active", "institutions": institutions}
 
     return render(request, template_name=template, context=context)
diff --git a/app/general/tests/test_views.py b/app/general/tests/test_views.py
@@ -2,7 +2,6 @@
 
 
 class TestViews(TestCase):
-
     def test_health(self):
         response = Client().get("/_health/")
         self.assertIn(b"OK", response.content)
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
@@ -8,6 +8,8 @@
     --text-color: #000000;
 }
 
+
+/*General*/
 body {
     margin: 0;
     padding: 0;
@@ -79,15 +81,6 @@ body {
     color: var(--primary);
 }
 
-.card{
-    border-color: var(--primary-red);
-    margin-right: 50px;
-}
-
-.fa-search{
-    margin-right: 30px;
-}
-
 .footer {
     color: white;
     background: var(--primary);
@@ -104,16 +97,162 @@ body {
     margin-bottom: 10px;
 }
 
-.input-group{
-    margin: 10px 10px 10px 10px;
+.main-logo {
+    width: 140px;
+    height: 75px;
+    margin: 20px 10px 10px 10px;
 }
 
-.form-group{
-    margin-bottom: 10px;
+.page-link {
+    background-color: var(--primary) !important;
+    color: var(--primary-fg) !important;
 }
 
-.main-logo {
-    width: 140px;
-    height: 75px;
-    margin: 10px 10px 10px 10px;
+.page-link:hover{
+    background-color: var(--body-quiet-color) !important;
+    color: var(--primary-fg) !important;
+}
+
+.row {
+    margin: 10px;
+    padding: 10px;
+}
+
+/*Home page*/
+.content-card {
+    border-color: var(--primary-red);
+    margin: 0 10px 0 10px;
+    width: 100%;
+}
+
+/*Institutions page*/
+.uni-card {
+    border-color: var(--primary-red);
+    margin: 0 10px 0 10px;
+}
+
+.uni-logo {
+    width: 50px;
+    height: 50px;
+    margin: 10px 0 0 0;
+}
+
+/*bootstrap icons*/
+.bi {
+    font-size: 50px;
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+    /*General*/
+    .header-container {
+        width: 100%;
+    }
+    .section {
+      padding-right: 30px;
+    }
+
+    /*Institutions page*/
+    .uni-card {
+        width: 100%;
+        font-size: smaller;
+    }
+    .all-cards {
+        width: 98%;
+        padding-right: 30px;
+    }
+    .col-sm-6 {
+        width: 50%;
+    }
+
+    /*Home page*/
+    .content-card {
+        font-size: smaller;
+        padding-right: 20px;
+        margin-right: 10px;
+    }
+}
+
+/*small devices (tablets, 600px and up) */
+@media screen and (min-width: 600px) {
+    /*General*/
+    .header-container {
+        width: 100%;
+    }
+    .section {
+      padding-right: 20px;
+    }
+
+    /*Institutions page*/
+    .all-cards {
+        width: 100%;
+        padding-right: 10px;
+    }
+    .col-sm-6 {
+        width: 50%;
+    }
+    .uni-card {
+        width: 98%;
+        height: 200px;
+        padding-right: 20px;
+    }
+
+    /*Home page*/
+    .content-card {
+        font-size: smaller;
+    }
+}
+
+/*Medium screens (tablets, between 768px and 1001px)*/
+@media screen and (min-width: 768px) and (max-width: 1001px) {
+    /*General*/
+    .header-container {
+        width: 100%;
+    }
+    .section {
+      padding-right: 20px;
+    }
+
+    /*Institutions page*/
+    .uni-card {
+        width: 98%;
+        font-size: medium;
+        padding-right: 20px;
+        height: 200px;
+    }
+    .all-cards {
+        width: 100%;
+        padding-right: 10px;
+    }
+    .col-sm-6 {
+        width: 50%;
+    }
+}
+
+ /*Larger screens (desktops, 1001px and up)*/
+@media screen and (min-width: 1001px){
+  /*General*/
+  .section {
+      padding-right: 20px;
+  }
+
+  /*Institutions page*/
+  .institution-card{
+      overflow: hidden;
+  }
+  .all-cards {
+      width: 48%;
+      margin: 10px 10px 10px 10px;
+      float: left;
+      padding-right: 10px;
+    }
+  .col-sm-6 {
+      width: 50%;
+  }
+  .uni-card {
+      margin: 10px;
+      width: 100%;
+      height: 200px;
+      font-size: small;
+  }
 }
diff --git a/app/static/img/UP_logo.png b/app/static/img/UP_logo.png
diff --git a/app/templates/app/home.html b/app/templates/app/home.html
@@ -5,7 +5,7 @@
 
 <div class="body">
     <div class="section mt-3 mb-3">
-        <div class="card">
+        <div class="card content-card">
             <div class="card-body">
                 <h5 class="card-title">About SADiLaR</h5>
                 <p class="card-text">
@@ -19,26 +19,31 @@ <h5 class="card-title">About SADiLaR</h5>
     </div>
 
     <div class="section mt-3 mb-3">
-        <div class="card">
+        <div class="card content-card">
             <div class="card-body d-flex justify-content-between align-items-end">
                 <div class="card-items">
                     <h5 class="card-title">Search</h5>
-                       <button type="submit" class="btn btn-primary">Search a term</button>
+                    <p class="card-text">
+                        Terminology Search
+                    </p>
+                    <p class="card-text">
+                        Click here to search a term
+                    </p>
+                    <button type="submit" class="btn btn-primary">Search a term</button>
                 </div>
             </div>
         </div>
     </div>
 
-
     <div class="section mt-3 mb-3">
-        <div class="card">
+        <div class="card content-card">
             <div class="card-body">
-                <h5 class="card-title">Register to site</h5>
+                <h5 class="card-title">Institutions</h5>
                 <p class="card-text">
-                    Complete Registration
+                    View Institutions
                 </p>
-                <a href="#" class="btn btn-primary">
-                    Start
+                <a href="{% url 'institutions' %}" class="btn btn-primary">
+                    View
                 </a>
             </div>
         </div>

diff --git a/app/templates/app/institutions.html b/app/templates/app/institutions.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block content %}
+
+    <div class="institution-card w-100">
+    {% for institution in institutions %}
+    <div class="all-cards section">
+        <div class="card uni-card">
+            <div class="row">
+                <div class="col-sm-6">
+                    <h5 class="card-title">{{ institution.name }}</h5>
+                    <p class="card-text">
+                        {{ institution.abbreviation }}
+                    </p>
+                    <p class="card-text">
+                        4 applicable projects
+                    </p>
+                    <br>
+                </div>
+                <div class="col-sm-6">
+                    <p class="card-text">Profile completion:</p>
+                    <div class="profile-icons">
+                      <i class="bi-star-fill"></i>
+                      <i class="bi-star-fill"></i>
+                      <i class="bi-star-fill"></i>
+                      <i class="bi-star"></i>
+                      <i class="bi-star"></i>
+                    </div>
+                    <br>
+                    <div class="card-logo">
+                        <img src=" {% static 'img/UP_logo.png' %}" class="uni-logo" alt="university logo">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+    </div>
+
+{% endblock content %}
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -10,10 +10,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
-
 </head>
-<body>
+
+<body class="d-flex flex-column min-vh-100">
 <!--header-->
 {% block app_header %}
 <header>
@@ -24,17 +25,17 @@
             <div class="nav-menu">
                 <ul class="nav nav-pills">
                     <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#">Home</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="#">Search</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" href="#">Register</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Admin</a>
-                  </li>
+                        <a class="nav-link {{ home_page }}" aria-current="page" href="{% url 'home' %}">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Search</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link {{ institutions_page }}" href="{% url 'institutions' %}">Institutions</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
+                    </li>
                 </ul>
             </div>
     </div>
@@ -47,9 +48,9 @@
 
     {% endblock content %}
 </div>
-
+<br>
 <!-- app footer -->
-    <footer class="footer my-5">
+    <footer class="footer my-5 mt-auto">
         <div class="text-center p-3">
           Developed by <a class="text-white" href="https://sadilar.org">SADiLaR</a>
         </div>
@@ -58,5 +59,3 @@
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </body>
-
-