Agile Downloads Grid Layout
Agile Downloads contains 3 ready-made layouts for displaying your files. On this page you will find a demo of the grid layout.
Layout Features
-
Column definitions for 5 different viewport sizes
-
5 predefined sizes for column / row spacing
-
Grid Match option
-
Column flex defintion for 5 different viewport sizes
-
4 predefined Element (Card) Styles
-
3 Predefined options for element padding
-
5 predefined options for Element Box Shadow
-
5 predefined options for Element Hover Shadow
-
Show / Hide Filetype extension
-
Show / Hide Filetype label
-
Direct Downloadoption on element can be enabled / disabled
-
5 predefined Download Buttons for elements
-
3 predefined Download Button sizes
-
12 options to define the Download Button width on the Grid Element (Auto / small / medium / large / 100% ... 20%)
-
10 Icon Size options Individually configurable for 5 screen sizes
-
Show / Hide File Date
-
Possibility to Group Files Source Folder (Source means Agile Downloads Source Setup not Subfolders of a defined Source)
Module Demo
CHANGELOG
# Changelog
## Agile Downloads (Pro)
### Version 2.0.0
- Complete Refactoring based on Joomla! 4.x / 5.x Standards
- Removed Joomla! 3.x Support
- Updated bundled UIkit to Version 3.21.16
- New Grid (Cards) Layout
- Module Settings UX Improvements
- Icon scaling based on screen size
### Version 1.3.4
### May 2024
- Improved Accessibility in Frontend: Changed FontAwesome i tags to span tags
- Folder Group Titles can now be translated - use the language override system in Joomla
### Version 1.3.3
### May 2024
- Fixed Joomla 5.1 Compatibility for restricted folder contents (readmedia update)
### Version 1.3.2
### July 2023
- Bugfixing: Fixed a bug where the Folder Selection Modal was not working in certain cases
- Joomla 5 Compatibility
### Version 1.3.1
### March 2023
- Updated to UIkit Version 3.16.10
- Updated Language Files & added some missing translations
- Implemented new Advanced Option for compatibility reasons (scoped UIkit container placement)
### Version 1.3.0
### March 2023
- Improved PHP 8.2 compatibility
- Improved Joomla 4.x compatibility
- Fixed a Bug where the folder selection modal was not working in certain cases
- Improved Logic for adding folder restrictions
- Removed jQuery Dependency in Frontend
### Version 1.2.2
- Fixed a bug where an old script was used in Joomla 4
### Version 1.2.1
- Compatibility Update for package
### Version 1.2.0
- Joomla 4 compatibility
- nx-Framework Integration
- Added: French language translation (fr-FR)
- Added: Spanish language translation (es-ES)
### Version 1.1.3
- J4 Backend Bugfix for Select Watched Directory Modal after adding
### Version 1.1.2
- Minor Bugfixes
- Changed: Hardcoded "search..." String added to language files
### Version 1.1.1
- Minor Bugfixes
### Version 1.1.0
- Improved: Module Backend Performance
- Changed: New AJAX fieldtype to select watched directory
- Changed: "slightly" decreased hover scale factor in list view
- Updated: German language translation
- Updated: English language translation
- Added: Option to disable hover scale in list view
- Added: Sort files by creation date
- Added: Sort files by modification date
- Added: Display file creation or modification date in list
- Added: Possibility to enter watched Folder path manually
- Added: Security Check for Secure Folder - you cannot "lock" sensitive folders
- Added: jQuery 3.6.0 Optional
### Version 1.0.5
- Bugfix: Sorting Function partially not worked as expected
### Version 1.0.4
- Added: Differentiation of grid columns for very small devices
### Version 1.0.1 - 1.0.3
- Performance improvements
- Refactoring
### Version 1.0.0
- Initial Release
Simple HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Document</title>
</head>
<body>
<h1>Simple HTML Document</h1>
<p>This is a Paragraph</p>
<h2>Another Headline</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat pariatur
nulla ab dolore veritatis doloribus recusandae quis tenetur dolorum.
Ea eos beatae molestias, alias debitis ipsam dicta earum voluptate qui!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat pariatur
nulla ab dolore veritatis doloribus recusandae quis tenetur dolorum.
Ea eos beatae molestias, alias debitis ipsam dicta earum voluptate qui!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ea eos beatae molestias, alias debitis ipsam dicta earum voluptate qui!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident, ad!</p>
<h3>This is a Level 3 Headline</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat pariatur
nulla ab dolore veritatis doloribus recusandae quis tenetur dolorum.
Ea eos beatae molestias, alias debitis ipsam dicta earum voluptate qui!
</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat pariatur
nulla ab dolore veritatis <b>doloribus</b> recusandae quis tenetur dolorum.
Ea eos beatae molestias, alias debitis ipsam dicta earum voluptate qui!
</p>
</body>
</html>Simple JSON
{
"images": [
{
"label": "Sunset",
"description": "A breathtaking sunset over a calm ocean with orange and red sky tones",
"url": "https://example.com/images/sunset.jpg"
},
{
"label": "Mountain Landscape",
"description": "A majestic mountain range with snow-capped peaks and green valleys in the foreground",
"url": "https://example.com/images/mountains.jpg"
},
{
"label": "City Panorama",
"description": "A modern metropolis at night with illuminated skyscrapers and a sea of lights",
"url": "https://example.com/images/cityscape.jpg"
},
{
"label": "Tropical Beach",
"description": "A paradise beach with white sand, turquoise water, and palm trees on the horizon",
"url": "https://example.com/images/tropical-beach.jpg"
}
]
}Simple Javascript
document.addEventListener("DOMContentLoaded", () =>{
console.log("This is a Console Message");
multiply(5,20)
})
function multiply(a,b){
const numA = Number(a);
const numB = Number(b);
if (isNaN(numA) || isNaN(numB)) {
return 0;
}
return numA * numB;
}Simple Stylesheet
:root {
--primary-color: #000;
--primary-background: #fff;
--primary-hover: rgb(24, 24, 165);
}
.base {
color: var(--primary-color);
background-color: var(--primary-background);
}Simple Vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
<p>Taken from: https://vuejs.org/guide/essentials/component-basics</p>
</template>com joomet
<?xml version="1.0" encoding="UTF-8" ?>
<updates>
</updates>en-GB.mod example Kopie
;
; MOD_NXD_NCE language file
; NextCloud Events by nx-designs
; created December 2024
; https://www.nx-designs.ch
;
MOD_NXD_NCE="NextCloud Events"
MOD_NXD_NCE_XML_DESCRIPTION="Joomla! Module that displays Appointments from the NextCloud Calendar."
MOD_oNE_CHAR_IS_SMALL="Key Wrong small letter"
INVALID _ä_CHaöR="Invalid ä character"
MOD_EXAMPLE_WORKING_HEADING="My Heading"
MOD_EXAMPLE_WORKING_HEADING="This Constant Key is already defined"
all_key_small="All letters in language constant are lowercase"
MOD_EXAMPLE_UNESCAPED_ERROR_MSG="<span class=\"error">Oh no an Error</span>"
MOD_EXAMPLE_LAST_CHAR_BACKSLASH="Oh no an Error\"
MOD_EXAMPLE_NOT_WORKING_SUCCESS_MSG="Success!"
MOD_EXAMPLE_NOT_ENCAPSULATED_END="Success!
MOD_EXAMPLE_NOT_ENCAPSULATED_START=Success!"
MOD_EXAMPLE_NOT_ENCAPSULATED_ALL=Success!
UNESCAPED_DOUBLE_QUOTES="Das ist ein "Fehler"."
UNBALANCED_HTML_TAGS="<div>Foo"
UNBALANCED_HTML_TAGS="<div>Bar</p>"