new

osinaweb/osinacore/add/urls.py

@@ -21,6 +21,7 @@ urlpatterns = [
     path('epic/<str:project_id>/', views.add_epic, name='addepic'),
     path('note/', views.add_note_modal, name='addnotemodal'),
     path('dailyreport/', views.add_daily_report, name='adddailyreport'),
+    path('department/', views.add_department_modal, name='adddepartmentmodal'),
     path('projecttype/', views.add_projecttype_modal, name='addprojecttypemodal'),
     path('staffposition/', views.add_staffposition_modal, name='addstaffpositionmodal'),
     path('businesstype/', views.add_businesstype_modal, name='addbusinesstypemodal'),

osinaweb/osinacore/add/views.py

@@ -494,27 +494,50 @@ def add_daily_report(request):
     return render(request, 'add_templates/add-daily-report.html', context)
 
 
+
+@staff_login_required
+def add_department_modal(request, *args, **kwargs):
+    if request.method == 'POST':
+        name = request.POST.get('name')
+        department = Department(
+        name = name,
+        
+        )
+        department.save()
+
+        # Reload the parent page
+        return HttpResponse('<script>window.top.location.reload();</script>')
+    return render(request, 'add_templates/add-department-modal.html')
+
+
 @staff_login_required
 def add_projecttype_modal(request, *args, **kwargs):
+    departments = Department.objects.all().order_by('name')
     if request.method == 'POST':
         name = request.POST.get('name')
         projecttype = ProjectType(
         name = name,
+        department = get_object_or_404(Department, id= request.POST.get('department'))
         
         )
         projecttype.save()
 
         # Reload the parent page
         return HttpResponse('<script>window.top.location.reload();</script>')
-    return render(request, 'add_templates/add-projecttype-modal.html')
+    context ={
+        'departments': departments,
+    }
+    return render(request, 'add_templates/add-projecttype-modal.html', context)
 
 
 @staff_login_required
 def add_staffposition_modal(request):
+    departments = Department.objects.all().order_by('name')
     if request.method == 'POST':
         name = request.POST.get('name')
         staffposition = StaffPosition(
         name = name,
+        department = get_object_or_404(Department, id= request.POST.get('department'))
 
         
         )
@@ -522,7 +545,10 @@ def add_staffposition_modal(request):
     
         # Reload the parent page
         return HttpResponse('<script>window.top.location.reload();</script>')
-    return render(request, 'add_templates/add-staffposition-modal.html')
+    context ={
+        'departments': departments,
+    }
+    return render(request, 'add_templates/add-staffposition-modal.html', context)
 
 
 @staff_login_required

osinaweb/osinacore/edit/urls.py

@@ -8,14 +8,15 @@ urlpatterns = [
     path('business/<str:business_id>/', views.edit_business, name='editbusiness'),
     path('staff/<str:staff_id>/', views.edit_staff, name='editstaff'),
     path('project/<str:project_id>/', views.edit_project, name='editproject'),
-    path('task/<str:task_id>', views.edit_task, name='edittask'),
-    path('task-status/<str:task_id>', views.edit_task_status_modal, name='edittaskstatusmodal'),
+    path('task/<str:task_id>/', views.edit_task, name='edittask'),
+    path('task-status/<str:task_id>/', views.edit_task_status_modal, name='edittaskstatusmodal'),
     path('epic/', views.edit_epic, name='editepic'),
-    path('projecttype/<int:projecttype_id>', views.edit_project_type, name='editprojecttype'),
-    path('staffposition/', views.edit_staff_position, name='editstaffposition'),
-    path('businesstype/<int:businesstype_id>', views.edit_business_type, name='editbusinesstype'),
-    path('reference/<int:reference_id>', views.edit_reference, name='editreference'),
-    path('tag/<int:tag_id>', views.edit_tag, name='edittag'),
+    path('department/<int:department_id>/', views.edit_department, name='editdepartment'),
+    path('projecttype/<int:projecttype_id>/', views.edit_project_type, name='editprojecttype'),
+    path('staffposition/<int:staffposition_id>/', views.edit_staff_position, name='editstaffposition'),
+    path('businesstype/<int:businesstype_id>/', views.edit_business_type, name='editbusinesstype'),
+    path('reference/<int:reference_id>/', views.edit_reference, name='editreference'),
+    path('tag/<int:tag_id>/', views.edit_tag, name='edittag'),
 
 
     #Mark Points

osinaweb/osinacore/edit/views.py

@@ -285,28 +285,50 @@ def edit_epic(request, *args, **kwargs):
     
 
 
+@staff_login_required
+def edit_department(request, department_id):
+
+ department = get_object_or_404(Department, id=department_id)
+    
+ if request.method == 'POST':
+     department.name = request.POST.get('name')
+     department.save()
+
+     return redirect('departments')
+
+ return render(request, 'edit_templates/edit-department.html', {'department': department})
+
+
 @staff_login_required
 def edit_project_type(request, projecttype_id):
 
  projecttype = get_object_or_404(ProjectType, id=projecttype_id)
+ departments = Department.objects.all().order_by('name')
     
  if request.method == 'POST':
      projecttype.name = request.POST.get('name')
+     projecttype.department = get_object_or_404(Department, id=request.POST.get('department'))
      projecttype.save()
 
      return redirect('projecttypes')
 
- return render(request, 'edit_templates/edit-project-type.html', {'projecttype': projecttype})
+ return render(request, 'edit_templates/edit-project-type.html', {'projecttype': projecttype,'departments': departments})
 
 
 @staff_login_required
-def edit_staff_position(request):
+def edit_staff_position(request, staffposition_id):
+    staffposition = get_object_or_404(StaffPosition, id=staffposition_id)
+    departments = Department.objects.all().order_by('name')
+    
+    if request.method == 'POST':
+        staffposition.name = request.POST.get('name')
+        staffposition.department = get_object_or_404(Department, id=request.POST.get('department'))
+        staffposition.save()
 
-    context = {
+        return redirect('staffpositions')
 
 
-    }
-    return render(request, 'edit_templates/edit-staff-position.html', context)
+    return render(request, 'edit_templates/edit-staff-position.html', {'staffposition': staffposition,'departments': departments})
 
 
 

osinaweb/osinacore/migrations/0076_alter_reference_date.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.5 on 2024-04-27 19:36
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0075_remove_ticketattachment_ticket_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='reference',
+            name='date',
+            field=models.DateField(),
+        ),
+    ]

osinaweb/osinacore/models.py

@@ -14,13 +14,10 @@ from datetime import timedelta
 
 class Reference(models.Model):
     name = models.CharField(max_length=50)
-    date = models.CharField(max_length=200)
+    date = models.DateField()
     def __str__(self):
         return self.name
-    def formatted_date(self):
-        # Assuming start_date is stored as "day-month-year"
-        parts = self.date.split('-')
-        return f"{parts[2]}-{parts[1]}-{parts[0]}"
+
 
 
 

osinaweb/osinacore/templates/add_templates/add-department-modal.html

@@ -0,0 +1,32 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent"  method="POST" action="{% url 'adddepartmentmodal' %}">
+        {% csrf_token %}
+        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Department</h1>
+    
+        <div class="w-full flex justify-center items-center">
+            <input name="name" type="text" placeholder="Department Name"
+            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+            required>
+        </div>
+    
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue">Save</button>
+        </div>
+    </form>
+</body>
+</html>

osinaweb/osinacore/templates/add_templates/add-projecttype-modal.html

@@ -22,6 +22,18 @@
             class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
             required>
         </div>
+
+        <div class="w-full mt-5">
+            <label class="text-gray-500">Department:</label>
+            <select name="department" 
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
+                <option value="" selected disabled>Select Department</option>
+                {% for department in departments %}
+                <option value="{{ department.id }}">{{ department.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
     
         <div class="w-full flex justify-center items-center mt-4">
             <button type="submit"

osinaweb/osinacore/templates/add_templates/add-staffposition-modal.html

@@ -22,6 +22,18 @@
             class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
             required>
         </div>
+
+
+        <div class="w-full mt-5">
+            <label class="text-gray-500">Department:</label>
+            <select name="department" 
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
+                <option value="" selected disabled>Select Department</option>
+                {% for department in departments %}
+                <option value="{{ department.id }}">{{ department.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
     
         <div class="w-full flex justify-center items-center mt-4">
             <button type="submit"

osinaweb/osinacore/templates/edit_templates/edit-department.html

@@ -0,0 +1,46 @@
+{% extends "add-edit-main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-5 s:px-9 mb-5">
+    <div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
+        <h1 class="text-3xl text-secondosiblue text-center font-semibold">
+            Edit Department
+        </h1>
+
+        <form id="hiddenContent" method="POST" action="{% url 'editdepartment' department.id %}">
+            {% csrf_token %}
+
+            <div class="w-full flex flex-col justify-center items-center mt-2">
+                <div class="w-full">
+                    <label class="text-gray-500">Department:</label>
+                    <input name="name" type="text" placeholder="Project Type Name" value="{{department.name}}"
+                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1" required>
+                </div>
+            </div>
+
+            <div class="w-full flex justify-center items-center mt-4">
+                <button type="submit"
+                    class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>
+            </div>
+        </form>
+
+    </div>
+</div>
+
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+
+
+{% endblock content %}

osinaweb/osinacore/templates/edit_templates/edit-project-type.html

@@ -19,6 +19,16 @@
                 </div>
             </div>
 
+            <div class="w-full mt-5">
+                <label class="text-gray-500">Department:</label>
+                <select name="department" 
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
+                    {% for department in departments %}
+                    <option value="{{ department.id }}" {% if department.id == projecttype.department.id %} selected {% endif %}>{{ department.name }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+
             <div class="w-full flex justify-center items-center mt-4">
                 <button type="submit"
                     class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>

osinaweb/osinacore/templates/edit_templates/edit-reference.html

@@ -20,7 +20,7 @@
 
                 <div class="w-full">
                     <label class="text-gray-500">Date:</label>
-                    <input name="date" type="date" id="date" value="2023-09-22"
+                    <input name="date" type="date" id="date"  value='{{reference.date|date:"Y-m-d"}}'
                         class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
                 </div>
 

osinaweb/osinacore/templates/edit_templates/edit-staff-position.html

@@ -8,14 +8,24 @@
             Edit Staff Position
         </h1>
 
-        <form id="hiddenContent" method="POST">
+        <form id="hiddenContent" method="POST" action="{% url 'editstaffposition' staffposition.id %}">
             {% csrf_token %}
             <div class="w-full flex flex-col gap-5 justify-center items-center">
                 <div class="w-full">
                     <label class="text-gray-500">Staff Position:</label>
-                    <input name="name" type="text" value="one"
+                    <input name="name" type="text" value="{{staffposition.name}}"
                         class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1" required>
 
+                    <div class="w-full mt-5">
+                            <label class="text-gray-500">Department:</label>
+                            <select name="department" 
+                                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
+                                {% for department in departments %}
+                                <option value="{{ department.id }}" {% if department.id == staffposition.department.id %} selected {% endif %}>{{ department.name }}</option>
+                                {% endfor %}
+                            </select>
+                    </div>
+
                     <div class="w-full flex justify-center items-center mt-4">
                         <button type="submit"
                             class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>

osinaweb/osinacore/templates/listing_pages/departments.html

@@ -0,0 +1,89 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+
+<div class="w-full xxlg1:w-[75%]">
+    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+        <h1 class="text-secondosiblue text-[25px]">Departments</h1>
+
+        <!-- FILTERING -->
+        <div
+            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
+            <div class="w-full s:w-fit flex justify-start items-center gap-5">
+                <div class="relative h-fit w-full s:w-fit flex items-center">
+                    <input type="text" placeholder="Enter Department"
+                        class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
+                    <button
+                        class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                        <i class="fa fa-search"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="w-full s:w-fit">
+                <button
+                    class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300 addDepartmentButton"
+                    data-modal-url="{% url 'adddepartmentmodal' %}">Add
+                    Department</button>
+            </div>
+        </div>
+
+        <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
+            <table class="min-w-full divide-y">
+                <!-- TABLE HEADER -->
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Business Type
+                        </th>
+                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+
+                <!-- TABLE BODY -->
+                <tbody class="bg-white divide-y divide-gray-200">
+                    <!-- 1st row -->
+                    {% for department in departments %}
+                    <tr>
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">{{department.name}}</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm">
+                            <div class="flex justify-center items-center gap-3">
+                                <a href="{% url 'editdepartment' department.id %}" >
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
+                                <div class="text-[15px] text-red-500 cursor-pointer">
+                                    <i class="fa fa-trash"></i>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+
+
+{% endblock content %}

osinaweb/osinacore/templates/listing_pages/project-types.html

@@ -37,6 +37,10 @@
                             class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                             Project Type
                         </th>
+                        <th scope="col"
+                        class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                        Department
+                        </th>
                         <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                             Actions
                         </th>
@@ -51,7 +55,9 @@
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                             <p class="text-secondosiblue">{{type.name}}</p>
                         </td>
-
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">{{type.department.name}}</p>
+                        </td>
                         <td class="px-6 py-4 text-center text-sm">
                             <div class="flex justify-center items-center gap-3">
                                 <a href="{% url 'editprojecttype' type.id %}">

osinaweb/osinacore/templates/listing_pages/references.html

@@ -57,7 +57,7 @@
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-secondosiblue">{{reference.formatted_date}}</p>
+                            <p class="text-secondosiblue">{{reference.date}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">

osinaweb/osinacore/templates/listing_pages/staff-positions.html

@@ -38,6 +38,10 @@
                             class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                             Position
                         </th>
+                        <th scope="col"
+                        class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                        Department
+                        </th>
                         <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                             Actions
                         </th>
@@ -52,10 +56,12 @@
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                             <p class="text-secondosiblue">{{position.name}}</p>
                         </td>
-
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">{{position.department.name}}</p>
+                        </td>
                         <td class="px-6 py-4 text-center text-sm">
                             <div class="flex justify-center items-center gap-3">
-                                <a href="{% url 'editstaffposition' %}">
+                                <a href="{% url 'editstaffposition' position.id %}">
                                     <div class="text-[15px] text-blue-500 cursor-pointer">
                                         <i class="fa fa-edit"></i>
                                     </div>

osinaweb/osinacore/templates/main.html

@@ -379,6 +379,15 @@
                         </div>
 
                         <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
+
+                            <a href="{% url 'departments' %}">
+                                <div
+                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
+                                    <p class="text-white">Departments</p>
+                                </div>
+                            </a>
+
+
                             <a href="{% url 'projecttypes' %}">
                                 <div
                                     class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
@@ -664,6 +673,15 @@
                         </div>
 
                         <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
+
+                            <a href="{% url 'departments' %}">
+                                <div
+                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
+                                    <p class="text-white">Departments</p>
+                                </div>
+                            </a>
+
+
                             <a href="{% url 'projecttypes' %}">
                                 <div
                                     class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">

osinaweb/osinacore/urls.py

@@ -47,6 +47,7 @@ urlpatterns = [
     path('my-tasks/', views.my_tasks, name='my-tasks'),
     path('my-notes/', views.my_notes, name='my-notes'),
     path('dailyreports/', views.daily_reports, name='dailyreports'),
+    path('departments/', views.departments, name='departments'),
     path('projecttypes/', views.project_types, name='projecttypes'),
     path('staffpositions/', views.staff_positions, name='staffpositions'),
     path('businesstypes/', views.business_types, name='businesstypes'),

osinaweb/osinacore/views.py

@@ -403,6 +403,19 @@ def daily_reports(request):
 
 
 
+
+@staff_login_required
+def departments(request):
+    departments = Department.objects.all().order_by('-id')
+
+    context = {
+    'departments' : departments,
+    }
+    return render(request, 'listing_pages/departments.html', context)
+
+
+
+
 @staff_login_required
 def project_types(request):
     projecttypes = ProjectType.objects.all().order_by('-id')

osinaweb/static/js/pop-modals.js

@@ -54,12 +54,13 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("deleteTaskButton", "fit-content", "130px");
     addButtonClickListener("addFileButton", "500px", "320px");
     addButtonClickListener("addCredentialsButton", "500px", "300px");
-    addButtonClickListener("addProjectTypeButton", "fit-content", "160px");
+    addButtonClickListener("addDepartmentButton", "fit-content", "160px");
+    addButtonClickListener("addProjectTypeButton", "fit-content", "260px");
     addButtonClickListener("addBusinessTypeButton", "fit-content", "160px");
     addButtonClickListener("addReferenceButton", "fit-content", "230px");
     addButtonClickListener("addTagButton", "fit-content", "160px");
     addButtonClickListener("addBusinessButton", "550px", "500px");
-    addButtonClickListener("addStaffPositionButton", "fit-content", "160px");
+    addButtonClickListener("addStaffPositionButton", "fit-content", "260px");
     addButtonClickListener("addStatusButtonMobile", "500px", "80px");
     addButtonClickListener("userRecentActivitiesButton", "400px", "600px");
     addButtonClickListener("addUserStoryButton", "400px", "160px");