mirror of
https://github.com/moodle/moodle.git
synced 2025-04-21 16:32:18 +02:00
MDL-75252 mod_data: Improve the Image gallery templates
This commit is contained in:
Sara Arjona
parent
a7514f231d
commit
f8c63f1dc6
@ -1,7 +1,14 @@
|
||||
<div align="center">
|
||||
<table cellpadding="5">
|
||||
<tr><td><label for="[[title#id]]">Title</label></td><td>[[title]]</td></tr>
|
||||
<tr><td><label for="[[caption#id]]">Caption</label></td><td>[[caption]]</td></tr>
|
||||
<tr><td><label>Image</label></td><td>[[image]]</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="imagegallery-addentry">
|
||||
<div class="form-group">
|
||||
<label for="[[title#id]]">Title</label><br/>
|
||||
[[title]]
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="[[image#id]]">Image</label><br/>
|
||||
[[image]]
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="[[description#id]]">Description</label><br/>
|
||||
[[description]]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div class="defaulttemplate"><table class="mod-data-default-template">
|
||||
<tbody><tr class="r0">
|
||||
<td class="template-field cell c0">Title: </td>
|
||||
<td class="template-token cell c1 lastcol">[[title]]</td>
|
||||
</tr>
|
||||
<tr class="r1">
|
||||
<td class="template-field cell c0">Caption: </td>
|
||||
<td class="template-token cell c1 lastcol">[[caption]]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="imagegallery-asearch container">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
|
||||
<div class="form-group col">
|
||||
<label for="[[title#id]]">Title</label><br/>
|
||||
[[title]]
|
||||
</div>
|
||||
<div class="form-group col">
|
||||
<label for="[[description#id]]">Description</label><br/>
|
||||
[[description]]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,40 +1,38 @@
|
||||
/****** List View CSS ******/
|
||||
|
||||
#pictures {
|
||||
width: 750px;
|
||||
#imagegallery-list img.list_picture {
|
||||
width: 100%;
|
||||
height: 15vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.picture {
|
||||
padding: 5px;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: #779;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
#imagegallery-list .card {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pictureframe {
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.picturediv {
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
.imagegallery-listentry .card-title {
|
||||
font-size: larger;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/***** Single View CSS *****/
|
||||
|
||||
.caption {
|
||||
font-style: italic;
|
||||
.imagegallery-single-body .col {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#singleimage img {
|
||||
width: 700px;
|
||||
.imagegallery-single img.list_picture {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/***** Add entry CSS *****/
|
||||
|
||||
.imagegallery-addentry .form-group label,
|
||||
.imagegallery-asearch .form-group label {
|
||||
font-weight: bold;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
var maxHeight = 550;
|
||||
var maxListHeight = 120;
|
||||
|
||||
function init() {
|
||||
if (document.getElementById("singleimage")) single();
|
||||
/*else if (document.getElementById("pictures")) list();*/
|
||||
}
|
||||
|
||||
function list() {
|
||||
imageDivs = document.getElementsByName("listimage");
|
||||
for (i=0; i < imageDivs.length; i++) {
|
||||
currentHeight = imageDivs[i].offsetHeight;
|
||||
currentWidth = imageDivs[i].offsetWidth;
|
||||
|
||||
if (currentHeight > maxListHeight) {
|
||||
ratio = maxListHeight / currentHeight;
|
||||
imageDivs[i].style.width = (currentWidth*ratio) + 'px';
|
||||
imageDivs[i].style.height = (currentHeight*ratio) + 'px';
|
||||
imageDivs[i].firstChild.style.height = '100%';
|
||||
imageDivs[i].firstChild.style.width = '100%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function single() {
|
||||
var imageDiv = document.getElementById("singleimage");
|
||||
|
||||
if (imageDiv) {
|
||||
currentHeight = imageDiv.offsetHeight;
|
||||
currentWidth = imageDiv.offsetWidth;
|
||||
|
||||
if (currentHeight > maxHeight) {
|
||||
ratio = maxHeight / currentHeight;
|
||||
imageDiv.style.width = (currentWidth*ratio) + 'px';
|
||||
imageDiv.style.height = (currentHeight*ratio) + 'px';
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
@ -1,8 +1,16 @@
|
||||
<div class="picturediv">
|
||||
<table class="pictureframe"><tr><td>
|
||||
<table class="picture">
|
||||
<tr><td><div class="listimage">[[image]]</div></td></tr>
|
||||
<tr><td align="right">##more## ##edit## ##delete## ##approve## ##export##</td></tr>
|
||||
</table>
|
||||
</td></tr></table>
|
||||
<div class="col mb-4">
|
||||
<div class="imagegallery-listentry card">
|
||||
<div class="img-wrapper">
|
||||
[[image]]
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title" style="transform: rotate(0);">
|
||||
[[title]]
|
||||
<a href="##moreurl##" class="stretched-link"></a>
|
||||
</div>
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="card-footer border-0 bg-white ml-auto" style="position: relative;">##actionsmenu##</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
@ -1,2 +1 @@
|
||||
<div align="center">
|
||||
<div align="center" id="pictures">
|
||||
<div id="imagegallery-list" class="card-deck row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" role="list">
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
<field>
|
||||
<type>picture</type>
|
||||
<name>image</name>
|
||||
<param1>100%</param1>
|
||||
<param2>100%</param2>
|
||||
<param1></param1>
|
||||
<param2></param2>
|
||||
<param3>2097152</param3>
|
||||
<param4>120</param4>
|
||||
<param4></param4>
|
||||
</field>
|
||||
|
||||
<field>
|
||||
@ -33,8 +33,13 @@
|
||||
</field>
|
||||
|
||||
<field>
|
||||
<type>text</type>
|
||||
<name>caption</name>
|
||||
<type>textarea</type>
|
||||
<name>description</name>
|
||||
<required>0</required>
|
||||
<param2>60</param2>
|
||||
<param3>10</param3>
|
||||
<param4>1</param4>
|
||||
<param5>0</param5>
|
||||
</field>
|
||||
|
||||
</preset>
|
||||
</preset>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<div align="center">
|
||||
<table id="single">
|
||||
<tr><td align="center"><h3>[[title]]</h3></td></tr>
|
||||
<tr><td align="center"><div id="singleimage">[[image]]</div></td></tr>
|
||||
<tr><td align="center"><span class="caption">[[caption]]</span></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="imagegallery-rss">
|
||||
<div class="d-flex">
|
||||
<h3 class="card-title">[[title]]</h3>
|
||||
</div>
|
||||
<div class="imagegallery-single-body">
|
||||
<div class="row singleentry-image">
|
||||
<div class="col">[[image]]</div>
|
||||
</div>
|
||||
<div class="row singleentry-caption">
|
||||
<div class="col">[[description]]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
[[title]]
|
||||
[[title]]
|
||||
|
||||
@ -1,8 +1,26 @@
|
||||
<div align="center">
|
||||
<table id="single">
|
||||
<tr><td align="center"><h3>[[title]]</h3></td></tr>
|
||||
<tr><td align="center"><div id="singleimage">[[image]]</div></td></tr>
|
||||
<tr><td align="center"><span class="caption">[[caption]]</span></td></tr>
|
||||
<tr><td align="center">##edit## ##delete## ##approve## ##export##</td></tr>
|
||||
</table>
|
||||
<div class="imagegallery-single">
|
||||
<div class="d-flex">
|
||||
<h3 class="card-title">[[title]]</h3>
|
||||
<div class="ml-auto">##actionsmenu##</div>
|
||||
</div>
|
||||
<div class="imagegallery-single-body">
|
||||
<div class="row">
|
||||
<div class="col col-3 col-md-1"><strong>Author</strong></div>
|
||||
<div class="col">##userpicture## ##user##</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-3 col-md-1"><strong>Date added</strong></div>
|
||||
<div class="col">##timeadded##</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-3 col-md-1"><strong>Date modified</strong></div>
|
||||
<div class="col">##timemodified##</div>
|
||||
</div>
|
||||
<div class="row singleentry-image">
|
||||
<div class="col">[[image]]</div>
|
||||
</div>
|
||||
<div class="row singleentry-caption">
|
||||
<div class="col">[[description]]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
@mod @mod_data @datapreset @data_preset_imagegallery
|
||||
Feature: Users can use the Image gallery preset
|
||||
In order to create an Image gallery database
|
||||
As a user
|
||||
I need to apply and use the Image gallery preset
|
||||
|
||||
Background:
|
||||
Given the following "users" exist:
|
||||
| username | firstname | lastname | email |
|
||||
| student1 | Alice | Student | student1@example.com |
|
||||
| teacher1 | Pau | Teacher | teacher1@example.com |
|
||||
And the following "courses" exist:
|
||||
| fullname | shortname | category |
|
||||
| Course 1 | C1 | 0 |
|
||||
And the following "course enrolments" exist:
|
||||
| user | course | role |
|
||||
| teacher1 | C1 | editingteacher |
|
||||
| student1 | C1 | student |
|
||||
And the following "activities" exist:
|
||||
| activity | name | intro | course | idnumber |
|
||||
| data | Mountain landscapes | Database intro | C1 | data1 |
|
||||
And I am on the "Mountain landscapes" "data activity" page logged in as teacher1
|
||||
And I follow "Presets"
|
||||
And I click on "fullname" "radio" in the "Image gallery" "table_row"
|
||||
And I click on "Use preset" "button"
|
||||
And I click on "Continue" "button"
|
||||
And I click on "Continue" "button"
|
||||
And the following "mod_data > entries" exist:
|
||||
| database | user | title | description | image |
|
||||
| data1 | student1 | First image | This is the description text for image 1 | first.png |
|
||||
| data1 | teacher1 | Second image | And this is the description text for image 2 | second.png |
|
||||
|
||||
@javascript
|
||||
Scenario: Users view entries
|
||||
When I am on the "Mountain landscapes" "data activity" page logged in as student1
|
||||
Then I should see "First image"
|
||||
And I should not see "This is the description text for image 1"
|
||||
And I should not see "first.png"
|
||||
And I should not see "Alice Student" in the "#imagegallery-list" "css_element"
|
||||
And "//a/child::img[contains(@src, 'first.png')]" "xpath_element" should exist
|
||||
And "Actions" "icon" should exist in the "#imagegallery-list" "css_element"
|
||||
And I should see "Second image"
|
||||
And I should not see "And this is the description text for image 2"
|
||||
And I should not see "second.png"
|
||||
And I should not see "Pau Teacher"
|
||||
And "//a/child::img[contains(@src, 'second.png')]" "xpath_element" should exist
|
||||
# Single view.
|
||||
And I select "Single view" from the "jump" singleselect
|
||||
And I should see "First image"
|
||||
And I should see "Alice Student" in the ".imagegallery-single" "css_element"
|
||||
And I should see "This is the description text for image 1"
|
||||
And "//a/child::img[contains(@src, 'first.png')]" "xpath_element" should exist
|
||||
And "Actions" "icon" should exist in the ".imagegallery-single" "css_element"
|
||||
And I should not see "Second image"
|
||||
And I should not see "And this is the description text for image 2"
|
||||
And I should not see "Pau Teacher"
|
||||
And "//a/child::img[contains(@src, 'second.png')]" "xpath_element" should not exist
|
||||
And I follow "Next"
|
||||
And I should see "Second image"
|
||||
And I should see "Pau Teacher"
|
||||
And I should see "And this is the description text for image 2"
|
||||
And "//a/child::img[contains(@src, 'second.png')]" "xpath_element" should exist
|
||||
# This student can't edit or delete this entry, so the Actions menu shouldn't be displayed.
|
||||
And "Actions" "icon" should not exist in the ".imagegallery-single" "css_element"
|
||||
And I should not see "First image"
|
||||
And I should not see "Alice Student" in the ".imagegallery-single" "css_element"
|
||||
And I should not see "This is the description text for image 1"
|
||||
And "//a/child::img[contains(@src, 'first.png')]" "xpath_element" should not exist
|
||||
|
||||
@javascript
|
||||
Scenario: Users can search entries
|
||||
Given I am on the "Mountain landscapes" "data activity" page logged in as student1
|
||||
And "First image" "text" should appear before "Second image" "text"
|
||||
When I click on "Advanced search" "checkbox"
|
||||
And I set the field "title" to "First image"
|
||||
And I press "Save settings"
|
||||
Then I should see "First image"
|
||||
And I should not see "Second image"
|
||||
But I set the field "title" to "image"
|
||||
And I set the field "Order" to "Descending"
|
||||
And I press "Save settings"
|
||||
And "Second image" "text" should appear before "First image" "text"
|
||||
|
||||
@javascript
|
||||
Scenario: Users can add entries
|
||||
Given I am on the "Mountain landscapes" "data activity" page logged in as student1
|
||||
When I press "Add entry"
|
||||
And I set the field "title" to "New image"
|
||||
And I set the field "description" to "This is the description for the new image."
|
||||
And I press "Save"
|
||||
Then I should see "New image"
|
||||
And I should see "This is the description for the new image."
|
||||
Loading…
x
Reference in New Issue
Block a user