Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit ee674a78 authored by Nicolas's avatar Nicolas
Browse files

Création du fichier CSS

Modification du fichier template pour adapter le style CSS
parent 6b3c674d
No related branches found
No related tags found
No related merge requests found
......@@ -2,6 +2,9 @@
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<update handle="editor"/>
<head>
<css src="NicolasBejean_ImageSliderManager::css/assign_images.css" />
</head>
<body>
<referenceContainer name="content">
<uiComponent name="imageslidermanager_imageslider_form"/>
......
......@@ -10,4 +10,4 @@
<uiComponent name="imageslidermanager_imageslider_listing"/>
</referenceContainer>
</body>
</page>
\ No newline at end of file
</page>
......@@ -11,50 +11,60 @@ if (empty($block->getRequest()->getParams())) {
$slider = $block->getSlider($block->getRequest()->getParam('entity_id'));
}
?>
<div class="nicolasbejean-admin-base">
<div class="grid-container">
<div class="collection">
<h2><?php echo __('Media Manager Image') ?></h2>
<div id="collectionList" class="list" sortable-list="sortable-list">
<?php foreach ($collection as $image): ?>
<div class="list__item" sortable-item="sortable-item" data-id="<?php echo $image['id']; ?>">
<div class="list__item-content">
<p><?php echo $image['alt']; ?></p>
<p><img src="/pub/media/mediamanager/image/<?php echo $image['path']; ?>" width="125" /></p>
<p><?php echo $image['path']; ?></p>
</div>
<div class="actions">
<button class="btn remove">Delete item</button>
</div>
<div class="imageslidermanager imageslidermanager-assign-images">
<div class="grid-container">
<div class="collection">
<p class="imageslidermanager-title"><?php echo __('Available images') ?></p>
<div id="collectionList" class="imageslidermanager-list box-shadow" sortable-list="sortable-list">
<?php foreach ($collection as $image): ?>
<div class="imageslidermanager-list-item box-shadow" sortable-item="sortable-item" data-id="<?php echo $image['id']; ?>">
<div class="imageslidermanager-list-item-content">
<p><?php echo $image['alt']; ?></p>
<figure>
<img src="/pub/media/mediamanager/image/<?php echo $image['path']; ?>" width="125" />
<figcaption><?php echo $image['path']; ?></figcaption>
</figure>
</div>
<?php endforeach; ?>
</div>
<div class="actions">
<button class="btn remove"><?php echo __('Remove item') ?></button>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="slider">
<h2><?php echo __('Images in Slider') ?></h2>
<div id="sliderList" class="list" sortable-list="sortable-list">
<?php foreach ($slider as $image): ?>
<div class="list__item" sortable-item="sortable-item" data-id="<?php echo $image['id']; ?>">
<div class="list__item-content">
<p><?php echo $image['alt']; ?></p>
<p><img src="/pub/media/mediamanager/image/<?php echo $image['path']; ?>" width="125" /></p>
<p><?php echo $image['path']; ?></p>
</div>
<div class="actions">
<button class="btn remove">Delete item</button>
</div>
</div>
<div class="slider">
<p class="imageslidermanager-title"><?php echo __('Selected images') ?></p>
<div id="sliderList" class="imageslidermanager-list box-shadow" sortable-list="sortable-list">
<?php foreach ($slider as $image): ?>
<div class="imageslidermanager-list-item box-shadow" sortable-item="sortable-item" data-id="<?php echo $image['id']; ?>">
<div class="imageslidermanager-list-item-content">
<p><?php echo $image['alt']; ?></p>
<figure>
<img src="/pub/media/mediamanager/image/<?php echo $image['path']; ?>" width="125" />
<figcaption><?php echo $image['path']; ?></figcaption>
</figure>
</div>
<?php endforeach; ?>
</div>
<div class="actions">
<button class="btn remove"><?php echo __('Remove item') ?></button>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<script>
require(['jquery', 'NicolasBejean_ImageSliderManager/js/sortable','domReady!'], function($, Sortable) {
require([
'jquery',
'NicolasBejean_ImageSliderManager/js/sortable',
'domReady!'
], function($, Sortable) {
'use strict';
var sortable = Sortable.create(sliderList, {
group: 'shared',
/* handle: '.list__item-handle', */
/* handle: '.imageslidermanager-list-item-handle', */
animation: 150,
store: {
/**
......@@ -86,7 +96,7 @@ if (empty($block->getRequest()->getParams())) {
pull: 'clone',
put: false
},
/* handle: '.list__item-handle', */
/* handle: '.imageslidermanager-list-item-handle', */
animation: 150
});
......@@ -94,7 +104,7 @@ if (empty($block->getRequest()->getParams())) {
e.preventDefault();
var el = e.target;
var parent = $(el).closest('.list__item');
var parent = $(el).closest('.imageslidermanager-list-item');
parent.remove();
......
/**
* Définition des grilles
*/
.imageslidermanager .grid-container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "collection slider";
}
.imageslidermanager .collection {
grid-area: collection;
}
.imageslidermanager .slider {
grid-area: slider;
}
.imageslidermanager #collectionList {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: ". .";
}
.imageslidermanager #sliderList {
grid-template-columns: 1fr;
grid-template-areas: ".";
}
.imageslidermanager-list {
display: grid;
grid-template-rows: 1fr;
}
/**
* Définition de la mise en page
*/
.imageslidermanager-title, .imageslidermanager-list {
margin: 0 auto;
width: 95%;
user-select: none;
}
.imageslidermanager-title {
padding: .75em 0;
text-align: center;
font-weight: bold;
}
.imageslidermanager-list {
min-height: calc(30vh + 20px);
background-color: #efefef;
border: 1px solid #adadad;
border-radius: 1px;
}
.imageslidermanager-list-item {
background: #fff;
margin: 10px;
max-height: 30vh;
}
.imageslidermanager-list-item:not(:last-child) {
margin-bottom: 7px;
}
.imageslidermanager-list-item-content {
width: 100%;
padding: 10px 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}
.imageslidermanager figcaption {
font-size: .75em;
}
/**
* Bouton Remove
*/
.imageslidermanager-list-item {
position: relative;
}
.imageslidermanager-list-item .actions {
position: absolute;
right: 1vh;
bottom: 1vh;
}
#collectionList .remove {
display: none;
}
#sliderList .remove {
display: inline-block;
}
/**
* Détails
*/
.imageslidermanager-list-item {
cursor: grab;
}
.imageslidermanager-list-item.is-dragging {
box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
opacity: 0.8;
cursor: grabbing;
}
.imageslidermanager .box-shadow {
transition: box-shadow 200ms ease-out, opacity 200ms ease-out;
border-radius: 6px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment