manyi/static/angular-mod/tpl/music.playlist.html

<div class="hbox hbox-auto-xs hbox-auto-sm">
  <!-- main -->
  <div class="col w-xxl bg-light dker bg-auto">
    <h4 class="m-n wrapper">Playlist</h4>
    <ul class="list-group no-radius no-border no-bg list-group-lg">
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a class="m-r-sm"><i class="icon-plus"></i></a>
          <a><i class="icon-close"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>E.T.M</span>
          <span class="text-muted"> -- 04:35</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Vestibulum id ligula porta</span>
          <span class="text-muted"> -- 04:15</span>
        </div>
      </li>
      <li class="list-group-item active">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Praesent commodo cursus magna</span>
          <span class="text-muted"> -- 02:25</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Curabitur blandit tempus</span>
          <span class="text-muted"> -- 05:00</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Faucibus dolor auctor</span>
          <span class="text-muted"> -- 03:50</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Get lacinia odio sem nec elit cibus dolor auctor sed odio dui mollis ornare</span>
          <span class="text-muted"> -- 04:05</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Faucibus dolor auctor</span>
          <span class="text-muted"> -- 02:55</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Donec sed odio dui</span>
          <span class="text-muted"> -- 04:35</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Urna mollis ornare vel eu leo</span>
          <span class="text-muted"> -- 05:10</span>
        </div>
      </li>
      <li class="list-group-item">
        <div class="pull-right m-l">
          <a class="m-r-sm"><i class="icon-cloud-download"></i></a>
          <a><i class="icon-plus"></i></a>
        </div>
        <a class="m-r-sm pull-left">
          <i class="icon-control-play text"></i>
          <i class="icon-control-pause text-active"></i>
        </a>
        <div class="clear text-ellipsis">
          <span>Vivamus sagittis lacus vel augue</span>
          <span class="text-muted"> -- 02:35</span>
        </div>
      </li>
    </ul>
  </div>
  <!-- / main -->
  <!-- right col -->
  <div class="col">    
    <div class="wrapper-md">
      <div class="hbox">
        <div class="col w-xs">
          <img src="img/b1.jpg" class="img-full m-b">
        </div>
        <div class="col">
          <div class="m-l-md">
            <h3 class="m-t-none text-black">Praesent commodo cursus magna</h3>
            <div class="text-muted">
              Played: <span class="badge m-r-sm">813</span> Likes: <span class="badge">32143</span>
            </div>
          </div>
        </div>
      </div>
      <p class="text-muted m-b-md">Retur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper Neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.</p>

      <h4 class="m-b-md">Best Albums</h4>
      <div class="row row-sm">
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b5.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Spring rain</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Miaow</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b6.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Hope</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Miya</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b7.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Listen wind</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Soyia Jess</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b8.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Breaking me</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Pett JA</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b9.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Nothing</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Willion</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b10.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Panda Style</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Lionie</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b11.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Hook Me</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Gossi</a>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2">
          <div class="item">
            <div class="pos-rlt">
              <div class="item-overlay bg-black-opacity">
                <div class="center text-center m-t-n w-full">
                  <a ui-sref="music.detail"><i class="fa fa-2x fa-play-circle text-white"></i></a>
                </div>
              </div>
              <a ui-sref="music.detail"><img src="img/b12.jpg" alt="" class="img-full"></a>
            </div>
            <div class="padder-v">
              <a ui-sref="music.detail" class="text-ellipsis">Tempered Song</a>
              <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted">Miaow</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / right col -->
</div>