Documentation of Media manager.
Files
app/styles/modules/_media-manager.scssapp/scripts/module/mediaManager.jsMedia manager card display
Add class .show-hidden-no-js to .media-manager-card (.media-manager-card.show-hidden-no-js) to display checkbox and menu permanently.
Class .checked (.media-manager-card.checked) is used to display checkbox and menu while card checkbox is checked.
<div class="media-manager-card">
<div class="media-manager-card-checkbox">
<div class="checkbox">
<input class="checkbox-input" id="checkbox-0" type="checkbox" name="checkbox-0"/>
<label class="checkbox-custom" for="checkbox-0"></label>
<label class="checkbox-label" for="checkbox-0"></label>
</div>
</div>
<div class="media-manager-card-actions">
<ul class="list">
<div class="list_item_actions">
<div class="btn-dropdown">
<button class="btn btn-link btn-s btn-icon-only js-toggle" type="button" iconOnly="iconOnly" data-target="parent" data-toggle="dropdown"><i class="icon icon-m">more</i>
</button>
<ul class="dropdown-list dropdown-list-right">
<li><a class="dropdown-list_item">.../a></li>
...
</ul>
</div>
</div>
</ul>
</div>
<figure><img class="img-fluid" src="/images/300x300.gif" alt="Media"/></figure>
<div class="media-manager-content-wrapper">
<p class="image-resolution">640x640</p>
<p class="image-size">1.2 MB</p>
<ul class="tags no-mrg-bottom">
<li class="tag no-mrg-bottom">Assigned</li>
</ul>
</div>
</div>
<div class="media-manager-card show-hidden-no-js">
<div class="media-manager-card-checkbox">
<div class="checkbox">
<input class="checkbox-input" id="checkbox-1" type="checkbox" name="checkbox-1"/>
<label class="checkbox-custom" for="checkbox-1"></label>
<label class="checkbox-label" for="checkbox-1"></label>
</div>
</div>
<div class="media-manager-card-actions">
<ul class="list">
<div class="list_item_actions">
<div class="btn-dropdown">
<button class="btn btn-link btn-s btn-icon-only js-toggle" type="button" iconOnly="iconOnly" data-target="parent" data-toggle="dropdown"><i class="icon icon-m">more</i>
</button>
<ul class="dropdown-list dropdown-list-right">
<li><a class="dropdown-list_item">.../a></li>
...
</ul>
</div>
</div>
</ul>
</div>
<figure><img class="img-fluid" src="/images/300x300.gif" alt="Media"/></figure>
<div class="media-manager-content-wrapper">
<p class="image-resolution">640x640</p>
<p class="image-size">1.2 MB</p>
<ul class="tags no-mrg-bottom">
<li class="tag no-mrg-bottom">Assigned</li>
</ul>
</div>
</div>
<div class="media-manager-card">
<figure><img class="img-blur img-fluid" src="/images/300x300.gif" alt="Media"/>
</figure>
<div class="media-manager-content-wrapper">
<p class="image-size mb-small">1.2 MB</p>
<button class="btn btn-link btn-icon-only alert_close pull-right" type="button" iconOnly="iconOnly"><i class="icon icon-m">close</i>
</button>
<p class="file-name no-mrg-bottom">name_of_file.jpg</p>
<div class="upload-progress_line progress-line js-progressbar" data-type="line" data-progress="0.9" data-label="40 seconds left" data-label-color="#afafaf" data-label-class="text-small pull-right"></div>
</div>
</div>
</div>Media manager card detail
To display card detail click on on image in the card.
<div class="media-manager-card">
<div class="media-manager-card-checkbox">
<div class="checkbox">
<input class="checkbox-input" id="checkbox-NaN" type="checkbox" name="checkbox-NaN"/>
<label class="checkbox-custom" for="checkbox-NaN"></label>
<label class="checkbox-label" for="checkbox-NaN">
</label>
</div>
</div>
<div class="media-manager-card-actions">
<ul class="list">
<div class="list_item_actions">
<div class="btn-dropdown">
<button class="btn btn-link btn-s btn-icon-only js-toggle" type="button" iconOnly="iconOnly" data-target="parent" data-toggle="dropdown"><i class="icon icon-m">more</i>
</button>
<ul class="dropdown-list dropdown-list-right">
<li><a class="dropdown-list_item">actions 1</a></li>
<li><a class="dropdown-list_item">action 2</a></li>
<li><a class="dropdown-list_item">action 3</a></li>
</ul>
</div>
</div>
</ul>
</div>
<figure data-remodal-target="modal-example"><img class="img-fluid" src="/images/300x300.gif" alt="Media"/>
</figure>
<div class="media-manager-content-wrapper">
<p class="image-resolution no-mrg-bottom">400x400</p>
<p class="image-size mb-small">1.2 MB</p>
<ul class="tags no-mrg-bottom">
<li class="tag no-mrg-bottom">Assigned</li>
</ul>
</div>
<article class="modal modal-xl remodal" data-remodal-id="modal-example" data-remodal-options="hashTracking: false, closeOnOutsideClick: true, closeOnEscape: true">
<section class="modal_content no-pad">
<div class="row">
<div class="col col-l-7 pb-none">
<figure class="no-pad"><img class="img-fluid" src="/images/300x300.gif" alt="Media"/>
</figure>
</div>
<div class="col col-l-5 pt-medium pr-2x">
<p class="mb-xs"><span class="text-bold mr-xs">Resolution:</span><span>600x400px</span></p>
<p class="mb-xs"><span class="text-bold mr-xs">Size:</span><span>1.34 MB</span></p>
<p class="mb-xs"><span class="text-bold mr-xs">Uploaded on:</span><span>10.2.2018 11:27</span></p>
<p class="mb-medium"><span class="text-bold mr-xs">Uploaded by:</span><span>Walter Lima</span></p>
<p class="text-desc text-transform-upper mb-medium">Assigned to</p>
<ul class="list mb-large">
<li class="list_item no-pad-left no-pad-right no-pad-top no-pad-bottom no-border">
<div class="list_item_content">
<div class="list-figure mb-small">
<div class="avatar list-figure_avatar"><img class="avatar_img" src="/images/avatar.png"/>
</div>
<ul class="list-figure_items">
<li class="list-figure_item">
<h3 class="text-ellipsis maxw285">AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples</h3>
</li>
<li class="list-figure_item">
<p class="text-color-theme-300">Service</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list_item no-pad-left no-pad-right no-pad-top no-pad-bottom no-border">
<div class="list_item_content">
<div class="list-figure mb-small">
<div class="avatar list-figure_avatar"><img class="avatar_img" src="/images/avatar.png"/>
</div>
<ul class="list-figure_items">
<li class="list-figure_item">
<h3 class="text-ellipsis maxw285">AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples</h3>
</li>
<li class="list-figure_item">
<p class="text-color-theme-300">Service</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list_item no-pad-left no-pad-right no-pad-top no-pad-bottom no-border">
<div class="list_item_content">
<div class="list-figure mb-small">
<div class="avatar list-figure_avatar"><img class="avatar_img" src="/images/avatar.png"/>
</div>
<ul class="list-figure_items">
<li class="list-figure_item">
<h3 class="text-ellipsis maxw285">AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples</h3>
</li>
<li class="list-figure_item">
<p class="text-color-theme-300">Service</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list_item no-pad-left no-pad-right no-pad-top no-pad-bottom no-border">
<div class="list_item_content">
<div class="list-figure mb-small">
<div class="avatar list-figure_avatar"><img class="avatar_img" src="/images/avatar.png"/>
</div>
<ul class="list-figure_items">
<li class="list-figure_item">
<h3 class="text-ellipsis maxw285">AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples</h3>
</li>
<li class="list-figure_item">
<p class="text-color-theme-300">Service</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list_item no-pad-left no-pad-right no-pad-top no-pad-bottom no-border">
<div class="list_item_content">
<div class="list-figure mb-small">
<div class="avatar list-figure_avatar"><img class="avatar_img" src="/images/avatar.png"/>
</div>
<ul class="list-figure_items">
<li class="list-figure_item">
<h3 class="text-ellipsis maxw285">AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples</h3>
</li>
<li class="list-figure_item">
<p class="text-color-theme-300">Service</p>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="btn-line mb-small">
<button class="btn" type="button">Delete
</button>
<button class="btn" type="button">Unassign from all
</button>
</div>
</div>
</div>
</section>
</article>
</div>Media manager upload widget
To display upload widget click on button.
<button class="btn btn-primary" type="button" data-remodal-target="modal-upload">Upload Image
</button>
<article class="modal modal-l remodal upload-widget" data-remodal-id="modal-upload" data-remodal-options="hashTracking: false, closeOnOutsideClick: true, closeOnEscape: true">
<section class="modal_content">
<div class="upload-area mb-large">
<p class="h2 text-color-theme text-bold no-mrg-top no-mrg-bottom">Drop image here</p>
<p class="h2 text-color-theme text-bold no-mrg-top mb-xs">or</p>
<button class="btn" type="button">Browse
</button>
</div>
<div class="info-area text-center mb-medium"><i class="icon icon-m mr-small text-vat text-color-blue">info</i>
<div class="info-area-text">
<p class="mb-xs">Images should be at least 1920 px wide</p>
<p class="mb-xs">Compatible formats .jpg, .png, .gif</p>
<p class="mb-xs">Image should have landscape aspect ration</p>
</div>
</div>
</section>
<footer class="modal_footer bg-color-theme-100">
<div class="btn-line pull-left">
<button class="btn" type="button" data-remodal-action="close">Cancel
</button>
</div>
<div class="btn-line pull-right">
<button class="btn btn-primary" type="button">Upload
</button>
</div>
</footer>
</article>Media manager upload cropper
To display upload cropper click on button.
<article class="modal modal-l remodal upload-cropper" data-remodal-id="modal-upload-cropper" data-remodal-options="hashTracking: false, closeOnOutsideClick: false, closeOnEscape: false">
<section class="modal_content no-pad-left no-pad-right">
<p class="text-center text-color-theme text-bold">Uploading 1 from 3</p>
<div class="image-upload mb-large text-center"><img src="/images/media.jpg"></div>
<div class="info-area text-center mb-medium"><i class="icon icon-m mr-small text-vat text-color-warning">warning</i>
<div class="info-area-text maxw300">
<p class="mb-xs">The aspect ratio of your image is not correct, please crop the image.</p>
</div>
</div>
</section>
<footer class="modal_footer bg-color-theme-100">
<div class="btn-line pull-left">
<button class="btn" type="button" data-remodal-action="close">Cancel
</button>
</div>
<div class="btn-line pull-right">
<button class="btn btn-primary" type="button">Crop Image
</button>
</div>
</footer>
</article>Media manager upload error
To display upload error click on button.
<button class="btn btn-primary" type="button" data-remodal-target="modal-upload-error">Upload error
</button>
<article class="modal modal-l remodal upload-error" data-remodal-id="modal-upload-error" data-remodal-options="hashTracking: false, closeOnOutsideClick: false, closeOnEscape: false">
<section class="modal_content no-pad-left no-pad-right">
<p class="text-center text-color-theme text-bold">Uploading 1 from 3</p>
<div class="image-upload mb-large text-center"><img src="/images/media.jpg"></div>
<div class="info-area text-center mb-medium"><i class="icon icon-m mr-small text-vat text-color-warning">warning</i>
<div class="info-area-text maxw300">
<p class="mb-xs">The image you have selected is not big enough, please upload images of at least 1920px wide</p>
</div>
</div>
</section>
<footer class="modal_footer bg-color-theme-100">
<div class="btn-line pull-left">
<button class="btn" type="button" data-remodal-action="close">Cancel Upload
</button>
</div>
<div class="btn-line pull-right">
<button class="btn btn-primary" type="button">Reupload
</button>
</div>
</footer>
</article>
