Amara styleguide

Search results / Select List

Example

 
 <nav class="selectList-actions">
   <div class="checkbox">
     <input id="styleGuide-selectAll" class="selectAll" type="checkbox" value="" data-target="#styleGuide-selectList">
     <label for="styleGuide-selectAll" class="text-gray"><span class="checkbox-icon"></span> Select all</label>
   </div>
 </nav>
 <ul id="styleGuide-selectList" class="selectList" data-target="#styleGuide-selectList-actionBar">
   <li class="row condensed selectList-item">
     <div class="checkbox">
       <input id="styleGuide_item_1" type="checkbox" class="selectList-checkbox" value="item_1">
       <label for="styleGuide_item_1"><span class="checkbox-icon"></span></label>
     </div>
     <div class="context-menu">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
       <ul class="dropdown-menu">
         <li><a href="#">Menu Item</a></li>
         <li class="divider"></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li class="divider"></li>
         <li><a href="#">Menu Item</a></li>
       </ul>
     </div>
     <div class="col-xs-11">
       <div class="selectList-thumb">
         <div class="thumbWrapper">
           <img src="http://via.placeholder.com/800x600" alt="Placeholder Image">
         </div>
       </div>
       <h3><a href="#">Daniele Quercia: Happy Maps</a></h3>
       <h4>Transcription</h4>
       <ul class="inline">
         <li><strong>Source:</strong> English</li>
         <li><strong>Target:</strong> Dutch</li>
       </ul>
       <ul class="stepList wide">
         <li data-toggle="tooltip" data-placement="top" data-content="Transcriber: Naiara Pérez de Villarreal Amilburu">
           <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/default-50.png" class="avatar">
         </li>
         <li><i class='icon icon-review'></i></li>
         <li><i class='icon icon-approve'></i></li>
       </ul>
       <p>Review due in 2 days</p>
     </div>
   </li>
   <li class="row condensed selectList-item">
     <div class="checkbox">
       <input id="styleGuide_item_2" type="checkbox" class="selectList-checkbox" value="item_2">
       <label for="styleGuide_item_2"><span class="checkbox-icon"></span></label>
     </div>
     <div class="context-menu">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
       <ul class="dropdown-menu">
         <li><a href="#">Menu Item</a></li>
         <li class="divider"></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li class="divider"></li>
         <li><a href="#">Menu Item</a></li>
       </ul>
     </div>
     <div class="col-xs-11">
       <div class="selectList-thumb">
         <div class="thumbWrapper">
           <img src="http://via.placeholder.com/800x600" alt="Placeholder Image">
         </div>
       </div>
       <h3><a href="#">Daniele Quercia: Happy Maps</a></h3>
       <h4>Transcription</h4>
       <ul class="inline">
         <li><strong>Source:</strong> English</li>
         <li><strong>Target:</strong> Dutch</li>
       </ul>
       <ul class="stepList wide">
         <li data-toggle="tooltip" data-placement="top" data-content="Transcriber: Naiara Pérez de Villarreal Amilburu">
           <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/default-50.png" class="avatar">
         </li>
         <li><i class='icon icon-review'></i></li>
         <li><i class='icon icon-approve'></i></li>
       </ul>
       <p>Review due in 2 days</p>
     </div>
   </li>
   <li class="row condensed selectList-item">
     <div class="checkbox">
       <input id="styleGuide_item_3" type="checkbox" class="selectList-checkbox" value="item_3">
       <label for="styleGuide_item_3"><span class="checkbox-icon"></span></label>
     </div>
     <div class="context-menu">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
       <ul class="dropdown-menu">
         <li><a href="#">Menu Item</a></li>
         <li class="divider"></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li class="divider"></li>
         <li><a href="#">Menu Item</a></li>
       </ul>
     </div>
     <div class="col-xs-11">
       <div class="selectList-thumb">
         <div class="thumbWrapper">
           <img src="http://via.placeholder.com/800x600" alt="Placeholder Image">
         </div>
       </div>
       <h3><a href="#">Daniele Quercia: Happy Maps</a></h3>
       <h4>Transcription</h4>
       <ul class="inline">
         <li><strong>Source:</strong> English</li>
         <li><strong>Target:</strong> Dutch</li>
       </ul>
       <ul class="stepList wide">
         <li data-toggle="tooltip" data-placement="top" data-content="Transcriber: Naiara Pérez de Villarreal Amilburu">
           <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/default-50.png" class="avatar">
         </li>
         <li><i class='icon icon-review'></i></li>
         <li><i class='icon icon-approve'></i></li>
       </ul>
       <p>Review due in 2 days</p>
     </div>
   </li>
 </ul>

 <div id="styleGuide-selectList-actionBar" class="actionBar">
   <button class="button delete" data-toggle="modal" data-target="#styleGuideDialog-delete">Delete</button>
   <button class="button secondary deselectAll" data-target="#styleGuide-selectList">Deselect</button>
 </div>

 <div id="styleGuideDialog-delete" class="modal fade">
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <button type="button" class="dialogButton-closeModal" data-dismiss="modal">
         <span>&times;</span>
       </button>
       <div class="dialogHeader text-center">
         <h4 class="dialogTitle">Are you sure that you want to delete selected videos?</h4>
       </div>
       <form class="text-center">
         <div class="checkbox">
           <input id="" type="checkbox" class="selectList-checkbox" value="">
           <label for=""><span></span>Include all XX filtered videos</label>
         </div>
         <button class="button delete" type="submit">Delete</button>
         <button class="button cta-reverse" data-dismiss="modal">Cancel</button>
       </form>
     </div>
   </div>
 </div>