aside.music.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <div class="aside-wrap">
  2. <div class="app-aside-footer dk">
  3. <div class="dropdown dropup" dropdown>
  4. <a href class="pull-right wrapper m-r-xs" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
  5. <i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
  6. </a>
  7. <a href class="dropdown-toggle clear hidden-folded wrapper-sm padder" dropdown-toggle>
  8. <span class="thumb-xxs avatar pull-left m-r-sm">
  9. <img src="img/a0.jpg" alt="...">
  10. </span>
  11. <span class="hidden-sm hidden-md m-t-xs text-ellipsis">John.Smith</span>
  12. </a>
  13. <!-- dropdown -->
  14. <ul class="dropdown-menu animated fadeInRight w">
  15. <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
  16. <div>
  17. <p>300mb of 500mb used</p>
  18. </div>
  19. <progressbar value="60" class="progress-xs m-b-none bg-white"></progressbar>
  20. </li>
  21. <li>
  22. <a href>
  23. <span class="badge bg-danger pull-right">30%</span>
  24. <span>Settings</span>
  25. </a>
  26. </li>
  27. <li>
  28. <a ui-sref="app.page.profile">Profile</a>
  29. </li>
  30. <li>
  31. <a ui-sref="app.docs">
  32. <span class="label bg-info pull-right">new</span>
  33. Help
  34. </a>
  35. </li>
  36. <li class="divider"></li>
  37. <li>
  38. <a ui-sref="access.signin">Logout</a>
  39. </li>
  40. </ul>
  41. <!-- / dropdown -->
  42. </div>
  43. </div>
  44. <div class="navi-wrap">
  45. <!-- nav -->
  46. <nav ui-nav class="navi">
  47. <!-- list -->
  48. <ul class="nav dk">
  49. <li class="hidden-folded padder m-t m-b-sm text-muted text-u-c text-xs">
  50. <span>Discovery</span>
  51. </li>
  52. <li ui-sref-active="active">
  53. <a ui-sref="music.home">
  54. <i class="icon-disc icon"></i>
  55. <span>Recommendation</span>
  56. </a>
  57. </li>
  58. <li ui-sref-active="active">
  59. <a ui-sref="music.genres">
  60. <i class="icon-list icon"></i>
  61. <span>Genres</span>
  62. </a>
  63. </li>
  64. <li ui-sref-active="active">
  65. <a ui-sref="music.mtv">
  66. <i class="icon-social-youtube icon"></i>
  67. <span>MTV</span>
  68. </a>
  69. </li>
  70. </ul>
  71. <ul class="nav">
  72. <li class="hidden-folded padder m-t m-b-sm text-muted text-u-c text-xs">
  73. <span>Your Music</span>
  74. </li>
  75. <li ui-sref-active="active">
  76. <a ui-sref="music.playlist({fold:'bookmarkd'})">
  77. <i class="icon-star icon"></i>
  78. <span>Bookmarked</span>
  79. </a>
  80. </li>
  81. <li ui-sref-active="active">
  82. <a ui-sref="music.playlist({fold:'loved'})">
  83. <i class="icon-heart icon"></i>
  84. <span>Loved</span>
  85. </a>
  86. </li>
  87. <li ui-sref-active="active">
  88. <a ui-sref="music.playlist({fold:'history'})">
  89. <i class="icon-clock icon"></i>
  90. <span>History</span>
  91. </a>
  92. </li>
  93. <li class="hidden-folded padder m-t m-b-sm text-muted text-u-c text-xs">
  94. <span>Playlists</span>
  95. </li>
  96. <li ui-sref-active="active">
  97. <a ui-sref="music.playlist({fold:'nature'})">
  98. <b class="badge bg-info pull-right">3</b>
  99. <i class="icon-playlist icon"></i>
  100. <span>Nature</span>
  101. </a>
  102. </li>
  103. <li ui-sref-active="active">
  104. <a ui-sref="music.playlist({fold:'soundtracks'})">
  105. <b class="badge dk pull-right">5</b>
  106. <i class="icon-playlist icon"></i>
  107. <span>Soundtracks</span>
  108. </a>
  109. </li>
  110. </ul>
  111. <!-- / list -->
  112. </nav>
  113. <!-- nav -->
  114. </div>
  115. </div>