Media manager

Documentation of Media manager.

Files

app/styles/modules/_media-manager.scss
app/scripts/module/mediaManager.js

Media 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.

Example:code
Media

640x640

1.2 MB

  • Assigned
Media

640x640

1.2 MB

  • Assigned
Media

1.2 MB

name_of_file.jpg

Code:
<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.

Example:code
Media

400x400

1.2 MB

  • Assigned
Media

Resolution:600x400px

Size:1.34 MB

Uploaded on:10.2.2018 11:27

Uploaded by:Walter Lima

Assigned to

    • AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples

    • Service

    • AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples

    • Service

    • AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples

    • Service

    • AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples

    • Service

    • AromaSoul Elements Massage Couples AromaSoul Elements Massage Couples

    • Service

Code:
<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.

Example:code

Drop image here

or

info

Images should be at least 1920 px wide

Compatible formats .jpg, .png, .gif

Image should have landscape aspect ration

Code:
<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.

Example:code

Uploading 1 from 3

warning

The aspect ratio of your image is not correct, please crop the image.

Code:
<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.

Example:code

Uploading 1 from 3

warning

The image you have selected is not big enough, please upload images of at least 1920px wide

Code:
<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>