header.music.html 3.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!-- navbar header -->
  2. <div class="navbar-header {{app.settings.navbarHeaderColor}}">
  3. <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
  4. <i class="glyphicon glyphicon-cog"></i>
  5. </button>
  6. <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
  7. <i class="glyphicon glyphicon-align-justify"></i>
  8. </button>
  9. <!-- brand -->
  10. <a href="#/" class="navbar-brand text-lt">
  11. <i class="fa fa-play-circle"></i>
  12. <img src="img/logo.png" alt="." class="hide">
  13. <span class="hidden-folded m-l-xs">MUSIC</span>
  14. </a>
  15. <!-- / brand -->
  16. </div>
  17. <!-- / navbar header -->
  18. <!-- navbar collapse -->
  19. <div class="collapse pos-rlt navbar-collapse {{app.settings.navbarCollapseColor}}">
  20. <!-- search form -->
  21. <form class="navbar-form navbar-form-sm navbar-left no-padder" role="search" ng-controller="TypeaheadDemoCtrl">
  22. <div class="form-group">
  23. <div class="input-group w-lg w-auto-xs">
  24. <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control input-sm bg-light no-border padder" placeholder="Search songs and artists...">
  25. <span class="input-group-btn">
  26. <button type="submit" class="btn btn-sm bg-light"><i class="fa fa-search"></i></button>
  27. </span>
  28. </div>
  29. </div>
  30. </form>
  31. <!-- / search form -->
  32. <!-- nabar right -->
  33. <ul class="nav navbar-nav navbar-right">
  34. <li class="hidden-xs">
  35. <a ui-fullscreen></a>
  36. </li>
  37. <li class="dropdown" dropdown>
  38. <a href class="dropdown-toggle" dropdown-toggle>
  39. <i class="icon-bell fa-fw"></i>
  40. <span class="visible-xs-inline">Notifications</span>
  41. <span class="badge badge-sm up bg-danger pull-right-xs">2</span>
  42. </a>
  43. <!-- dropdown -->
  44. <div class="dropdown-menu w-xl animated fadeInUp">
  45. <div class="panel bg-white">
  46. <div class="panel-heading b-light bg-light">
  47. <strong>You have <span>2</span> notifications</strong>
  48. </div>
  49. <div class="list-group">
  50. <a href class="media list-group-item">
  51. <span class="pull-left thumb-sm">
  52. <img src="img/a0.jpg" alt="..." class="img-circle">
  53. </span>
  54. <span class="media-body block m-b-none">
  55. Use awesome animate.css<br>
  56. <small class="text-muted">10 minutes ago</small>
  57. </span>
  58. </a>
  59. <a href class="media list-group-item">
  60. <span class="media-body block m-b-none">
  61. 1.0 initial released<br>
  62. <small class="text-muted">1 hour ago</small>
  63. </span>
  64. </a>
  65. </div>
  66. <div class="panel-footer text-sm">
  67. <a href class="pull-right"><i class="fa fa-cog"></i></a>
  68. <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
  69. </div>
  70. </div>
  71. </div>
  72. <!-- / dropdown -->
  73. </li>
  74. <li class="bg-light">
  75. <a href class="bg-info text-white" tooltip-placement="left" tooltip="Upload"><i class="fa fa-plus fa-fw"></i></a>
  76. </li>
  77. </ul>
  78. <!-- / navbar right -->
  79. </div>
  80. <!-- / navbar collapse -->