karmaworld/templates/header.html

   1 {% load url from future %}
   2
   3 {# Logged out #}
   4   <header id="global_header">
   5     <div class="row">
   6       <div id="logo_container" class="two columns offset-by-one">
   7         <a href="/">
   8           <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="global_header_logo" width="144" height="17" />
   9         </a>
  10       </div><!--/logo container-->
  11
  12       <div id="browse_container" class="one column">
  13         <a class=white href="{% url 'home' %}">Home</a>
  14       </div><!--/browse_container-->
  15
  16       <div id="login_container" class="two columns offset-by-five end">
  17         <a class=white href="{% url 'about' %}">About</a>
  18       </div>
  19
  20       {% comment %}
  21       <div id="login_container" class="three columns offset-by-four end">
  22         <span id="login_toggle">
  23           LOGIN/SIGNUP <img src="{{ STATIC_URL }}img/global_header_login_menu_arrow.png" alt="Open Login" id="login_arrow" width="9" height="6" />
  24         </span>
  25
  26         <div id="login_box" style="display:none">
  27           <div class="row">
  28             <div class="twelve columns">
  29
  30               <div class="row" id="login_signup">
  31                 <div class="twelve columns">
  32                   SIGN UP
  33                 </div>
  34               </div><!--/login_signup-->
  35
  36               <div class="row" id="login_fb">
  37                 <div class="twelve columns">
  38                   <a href="{# url 'socialauth_begin' 'facebook' #}">
  39                     <img src="{{ STATIC_URL }}img/global_header_login_fbbtn.png" alt="global_header_login_fbbtn" width="223" height="45" />
  40                   </a>
  41                 </div>
  42               </div><!--/login_fb-->
  43
  44
  45               <div class="row" id="login_form">
  46                 <div class="twelve columns">
  47                   <form id="login_form" method="post" action="{# url 'login' #}">
  48                     {% csrf_token %}
  49
  50                     <div class="row">
  51                       <div class="twelve columns">
  52                         <input type="text" name="username">
  53                       </div>
  54                       <div class="twelve columns">
  55                         Username
  56                       </div>
  57                     </div>
  58
  59                     <div class="row">
  60                       <div class="twelve columns">
  61                         <input type="password" name="password">
  62                       </div>
  63                       <div class="twelve columns">
  64                         Password
  65                       </div>
  66                     </div>
  67
  68                     <!--<button type="submit" style="display:none"/>Log in</button>-->
  69                     <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
  70                   </form>
  71                 </div>
  72               </div><!--/login_form-->
  73
  74               <div class="row" id="login_submit">
  75                 <div class="twelve columns">
  76                   LOG IN
  77                 </div>
  78               </div><!--/login_submit-->
  79             </div>
  80           </div>
  81         </div>
  82
  83       </div><!--/login container-->
  84       {% endcomment %}
  85     </div>
  86   </header><!--/global header-->
  87
  88 {% comment %}
  89
  90 {# Logged IN #}
  91   <header id="global_header">
  92     <div class="row">
  93       <div id="logo_container" class="five columns offset-by-one">
  94         <div class="row">
  95           <div class="five columns">
  96             <a href="/">
  97               <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="global_header_logo" width="144" height="17" />
  98             </a>
  99           </div>
 100           <div class="seven columns">
 101             <div id="search_container">
 102               <form id="search" method="GET" action="/multisearch/">
 103                 <input type="text" id="search_txt" name="q">
 104               </form>
 105             </div>
 106           </div>
 107         </div>
 108
 109       </div><!--/logo container-->
 110
 111       <div id="browse_container" class="one column">
 112         <a class=white href="{# url 'browse' #}">Browse</a>
 113       </div><!--/browse_container-->
 114
 115       <div class="four columns end">
 116         <div id="global_header_logged_in_content">
 117           <div class="row">
 118
 119             <div class="five columns half-padding" id="global_header_addnote">
 120               <img src="{{ STATIC_URL }}img/global_header_plusnote.png" alt="global_header_plusnote" width="115" height="67" />
 121             </div><!-- /global_header_addnote -->
 122
 123             <div class="four columns half-padding" id="global_header_mycourses">
 124
 125               <div class="row">
 126                 <div class="twelve columns" id="global_header_mycourses_copy">
 127                   My Courses <img src="{{ STATIC_URL }}img/global_header_login_menu_arrow.png" alt="global_header_login_menu_arrow" width="9" height="6" />
 128                 </div><!-- /global_header_mycourses_copy -->
 129               </div>
 130
 131               <div class="row">
 132                 <div class="twelve columns" id="global_header_mycourses_list" style="display:none;">
 133                   <ul id="course_menu">
 134                     {% for course in user.get_profile.courses.all %}
 135                       <li><a href="{{ course.get_absolute_url }}"> {{ course.title }} </a></li>
 136                     {% endfor %}
 137                   </ul>
 138                 </div><!-- /global_header_mycourses_list -->
 139               </div>
 140
 141               <div class="row">
 142                 <div class="twelve columns" id="global_header_add_course" style="display:none;">
 143                   <img src="{{ STATIC_URL }}img/global_header_add_course.png" alt="global_header_add_course" width="132" height="20" />
 144                 </div><!-- /global_header_add_course -->
 145               </div>
 146
 147             </div><!-- /global_header_mycourses -->
 148
 149             <div class="three columns">
 150               <div id="global_header_avatar_menu">
 151                 <div class="row">
 152                   <div class="five columns no-padding" id="global_header_avatar_container">
 153                     <img alt="" src="{{ user.get_profile.picture_url_small }}" width="31" height="33">
 154                   </div>
 155                   <div class="six columns no-padding" id="global_header_note_count">
 156                     {{ user.get_profile.karma }}
 157                   </div>
 158                   <div class="one column half-padding" id="global_header_arrow_container">
 159                     <img src="{{ STATIC_URL }}img/global_header_login_menu_arrow.png" alt="global_header_login_menu_arrow" width="9" height="6" />
 160                   </div>
 161                 </div>
 162               </div><!-- /global_haader_avatar_menu -->
 163
 164               <div id="global_header_avatar_moreinfo" style="display:none;">
 165                 <div class="row" id="global_header_avatar_moreinfo_content">
 166                   <div class="nine columns">
 167                     <div class="row">
 168                       <div class="twelve columns" id="global_header_avatar_moreinfo_name">
 169                         <a href="{% url 'dashboard' %}">
 170                           {{ user.get_profile.get_name }}
 171                         </a>
 172                       </div><!-- /global_header_avatar_moreinfo_name -->
 173                     </div>
 174                     <div class="row">
 175                       <div class="twelve columns" id="global_header_avatar_moreinfo_school">
 176                         <a href="{{ user.get_profile.school.get_absolute_url }}">
 177                           {{ user.get_profile.school }}
 178                         </a>
 179                       </div><!-- /global_header_avatar_moreinfo_school -->
 180                     </div>
 181                   </div>
 182                   <div id="global_header_avatar_moreinfo_gear" class="three columns">
 183                     <a href="{% url 'dashboard' %}">
 184                       <img src="{{ STATIC_URL }}img/global_header_gear.png" alt="global_header_gear" width="12" height="14" />
 185                     </a>
 186                   </div><!-- /global_header_avatar_moreinfo_gear -->
 187                 </div>
 188                 <div class="row">
 189                   <div class="twelve columns" id="global_header_avatar_moreinfo_mynotes">
 190                     <a href="/accounts/logout/">log out</a>
 191                     <!-- disabling link to my notes
 192                     <img src="{{ STATIC_URL }}img/global_header_my_notes.png" alt="global_header_my_notes" width="105" height="20" />
 193                     -->
 194                   </div><!-- /global_header_add_course -->
 195                 </div>
 196               </div><!-- /global_header_avatar_moreinfo -->
 197
 198             </div>
 199           </div>
 200         </div><!-- /global_header_logged_in_content -->
 201       </div>
 202
 203     </div>
 204
 205   </header><!--/global header-->
 206 {% endcomment %}