Department Overview Page
Relevant source files
The following files were used as context for generating this wiki page:The Department Overview page serves as a visual, grid-based portal to the various research and development departments within the Institute Itech website. The page is rendered server-side using PHP, with its structure and styling defined in CSS. All textual content, including titles, descriptions, and links for each department, is managed through a centralized JSON file to support internationalization.
This page is accessible via the main navigation. A client-side JavaScript handler redirects users to /departments/overview.php when the "departments" navigation link is clicked.
Sources: departments/overview.php, apps/js/iite_components.js:12-14
Page Rendering and Internationalization
The page is generated by departments/overview.php. This script handles language settings, retrieves the appropriate page title, and includes the necessary PHTML template files to construct the final HTML document.
Sources: departments/overview.php
Server-Side Rendering Flow
The rendering process follows these steps:
- A user session is started.
- If a
langGET parameter is present, the session's language ($_SESSION['lang']) is updated, and the user is redirected to a clean URL. - The current language is determined from the session, defaulting to Italian (
it). - The
apps/pages.phpfile is loaded to get the translated page title based on the current language. The key for this page isdepartments_overview. - The main content template,
themes/apps/departments/overview.phtml, is processed using an output buffer. - The captured HTML content is injected into the main site layout file,
themes/components/statics/layout.phtml, which produces the final page.
The following diagram illustrates the server-side rendering flow for the department overview page.
Client-Side Navigation
Navigation to the departments page is handled by a JavaScript event listener. Elements with the data-page="departments" attribute trigger a redirect to /departments/overview.php when clicked.
// apps/js/iite_components.js:9-14
} else if (page.dataset.page === 'departments') {
location.href = "/departments/overview.php";
}
Sources: apps/js/iite_components.js:9-14
The sequence diagram below shows the user interaction that leads to the page being loaded.
Sources: apps/js/iite_components.js:5-14
Layout and Styling
The department overview page uses a full-viewport container with a CSS grid to arrange the department "cards". The primary styling is defined in themes/css/design.css.
Sources: themes/css/design.css
Grid Structure
The layout is built upon a container with the class background-departments-1, which contains a CSS grid element (grid-inside-departments). This grid is defined to have 9 columns and 9 rows, providing a flexible canvas for placing the department cards.
/* themes/css/design.css:1009-1016 */
.grid-inside-departments,
.grid-inside-relationship,
.grid-inside-wep {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
width: 100%;
height: 100%;
gap: 20px;
}
Each department card is an element that spans specific grid columns and rows, creating a mosaic-like arrangement. For example, the departments-irca card occupies columns 1-4 and rows 2-6.
The diagram below visualizes the grid system and the placement of department cards.
Department Cards
Each department is represented by a card with a unique class that defines its position and background image. The content for each card (title, description, link) is sourced from apps/translations.json.
| Department | CSS Class | Grid Position (col/row) | Background Image | Translation Keys |
|---|---|---|---|---|
| IRCA | .departments-irca | 1 / 4 / 2 / 6 | 8yS04veb1TQ.jpg | departments_irca_title, departments_irca_description, departments_irca_link |
| AEH | .departments-aeh | 4 / 7 / 2 / 6 | 82180.jpg | departments_aeh_title, departments_aeh_description, departments_aeh_link |
| AI | .departments-ai | 7 / 11 / 2 / 6 | W1K1Wl1cXPM.jpg | departments_ai_title, departments_ai_description, departments_ai_link |
| IFE | .departments-ife | 1 / 4 / 6 / 10 | likFdgumjWM.jpg | departments_ife_title, departments_ife_description, departments_ife_link |
| WWA2 | .departments-wwa2 | 4 / 7 / 6 / 10 | M08kX9.jpg | departments_wwa2_title, departments_wwa2_description, departments_wwa2_link |
| IRQM | .departments-irqm | 7 / 11 / 6 / 10 | NPUTYePMWgg.jpg | departments_irqm_title, departments_irqm_description, departments_irqm_link |
Sources: themes/css/design.css:901-954, apps/translations.json:421-480
An example of the JSON structure for a department is shown below:
// apps/translations.json:421-432
"departments_irca_title": {
"it": "IRCA – Dipartimento di \n Ricerca Biotecnologica",
"en": "IRCA – Department of \n Biotechnological Research",
"fr": "IRCA – Département de \n Recherche Biotechnologique",
"es": "IRCA – Departamento de \n Investigación Biotecnológica"
},
"departments_irca_link": {
"it": "irca.iite.eu →",
"en": "irca.iite.eu →",
"fr": "irca.iite.eu →",
"es": "irca.iite.eu →"
},
"departments_irca_description": {
"it": "Tecnologie per la biotecnologia \n applicata alla salute.",
"en": "Technologies for biotechnology \n applied to health.",
"fr": "Technologies pour la biotechnologie \n appliquée à la santé.",
"es": "Tecnologías para la biotecnología \n aplicada a la salud."
}
Interactivity and Responsive Design
The cards have a hover effect defined by the .grid-departments-hover class, which applies a translateY and scale transform, along with a box-shadow, to lift the card off the page.
/* themes/css/design.css:618-622 */
.grid-company-hover:hover,
.grid-departments-hover:hover,
.grid-relationship-hover:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
The page includes responsive design rules in both design.css and iite.css. At smaller screen widths (e.g., max-width 1700px), the padding on the cards is reduced. On mobile devices (max-width 768px), the grid layout collapses into a single column to ensure readability.
Sources: themes/css/design.css:618-622, 1231-1234, themes/css/iite.css:502-514
Conclusion
The Department Overview page is a key navigational feature that presents the institute's departments in a visually engaging and organized manner. It effectively separates concerns by using PHP for server-side logic and internationalization setup, JSON for multilingual content, and CSS for complex grid-based layout and responsive styling. This architecture creates a maintainable and scalable system for managing and displaying department information.