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