Skip to content

Commit

Permalink
Large rewrite of site navbar and related css/python
Browse files Browse the repository at this point in the history
- Navbar layout redesigned
  - Past hunts is now part of base.html (on all pages) and is a dropdown
  - Right-side user/"profile" dropdown is nicer and cleaner
  - Added home icon next to site title for clarity
  - Info pages are now a dropdown for size reasons
  - Navbar now collapses only at XS and no longer at SM
- Added template tags to get current hunt, previous hunts, and hunt from puzzle
- Fixed bug where registration containers were misaligned at sm and xs sizes
- Fixed bug where font was slightly different between hunt and info bases
- Fixed bug where messages weren't rendered at the right width on xs and sm sizes
- Moved S2020 chat status polling script to separate JS file
- Changed the dev navbar to say "Dev Site" instead of "DEVELOPMENT SITE"
- Changed the dev navabr color to light yellow for my sanity
  • Loading branch information
dlareau committed May 14, 2020
1 parent 949818a commit daddb1a
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 129 deletions.
36 changes: 36 additions & 0 deletions huntserver/static/huntserver/chat_poll.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
$(document).ready(function() {
function is_visible(){
var stateKey, keys = {
hidden: "visibilitychange",
webkitHidden: "webkitvisibilitychange",
mozHidden: "mozvisibilitychange",
msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
return !document[stateKey];
}
}
return true;
}

var get_posts = function() {
if(is_visible()){
$.getJSON("/chat/status/")
.done(function(result){
num_messages = result['num_messages']
if(num_messages > 0) {
$("#num_messages").css("background-color", "indianred");
} else {
$("#num_messages").css("background-color", "");
}
$("#num_messages").text(num_messages);
})
.fail( function(xhr, textStatus, errorThrown) {
console.log(xhr);
});
}
}

setInterval(get_posts, 120000); //Two minutes
});
6 changes: 5 additions & 1 deletion huntserver/static/huntserver/info_base.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Generic */
* { font-family: Helvetica, Verdana, Arial, sans-serif; }
.container { font-family: Helvetica, Verdana, Arial, sans-serif; }

body {
background: url(/static/huntserver/background1.jpg);
Expand All @@ -13,6 +13,10 @@ body {
border: 5px solid black;
border-radius: 10px;
}
.container.no_outline {
padding-left: 0px;
padding-right: 0px;
}

#phlogo {
width: 50%;
Expand Down
61 changes: 0 additions & 61 deletions huntserver/static/huntserver/navbar.css

This file was deleted.

49 changes: 42 additions & 7 deletions huntserver/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,73 @@
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" {% if debug %} style="background-color: darkred;" {% endif %} >
<nav class="navbar navbar-default navbar-fixed-top" {% if debug %} style="background-color: lightgoldenrodyellow;" {% endif %} >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-wrapper" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"> {% if debug %} DEVELOPMENT SERVER {% else %} Puzzlehunt CMU {% endif %}</a>
<a class="navbar-brand" href="/">
<span class="glyphicon glyphicon-home"></span>
</a>
<a class="navbar-brand" href="/">
{% if debug %} Dev Server {% else %} {% site_title %} {% endif %}
</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse" id="navbar-collapse-wrapper">
<ul class="nav navbar-nav">
{% block prev-hunts-header %}
{% set_hunts %}
{% if tmpl_hunts %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Previous Hunts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-header"> Previous Hunts: </li>
{% for hunt in tmpl_hunts %}
<li>
<a href="{% url 'huntserver:hunt' hunt.hunt_number %}">
{{ hunt.hunt_name }} - {{ hunt.season.0 }}'{{ hunt.start_date|date:"y" }}
</a>
</li>
{% endfor %}
<li class='{% active_page request "previous_hunts" %}'>
<a href="{% url 'huntserver:previous_hunts' %}"> ... Even older hunts </a>
</li>
</ul>
</li>
{% endif %}
{% endblock %}
{% block left-header %}
{% endblock %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% block right-header %}
{% if user.is_authenticated %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User: {{request.user.username}} <span class="caret"></span></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user"></span> Profile <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">{{request.user.username}}</li>
<li><a href="{% url 'huntserver:user_profile' %}">Edit Profile</a></li>
<li><a href="{% url 'huntserver:registration' %}">Join/Manage Team</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">Log Out</a></li>
</ul>
</li>
{% else %}
<a class="btn btn-default navbar-btn" href="{% url 'huntserver:login_selection' %}">Log in</a>
<li><a href="{% url 'huntserver:create_account' %}">
<span class="glyphicon glyphicon-user"></span> Sign Up
</a></li>
<li><a href="{% url 'huntserver:login_selection' %}">
<span class="glyphicon glyphicon-log-in"></span> Login
</a></li>
{% endif %}
{% endblock %}
</ul>
Expand All @@ -58,7 +93,7 @@
</nav>

{% if messages %}
<div class="col-md-6 col-md-offset-3" style="position: absolute; z-index: 10;">
<div class="col-xs-12 col-sm-6 col-sm-offset-3" style="position: absolute; z-index: 10;">
{% for message in messages %}
<div class="alert alert-dismissible
{% if message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
Expand Down
60 changes: 10 additions & 50 deletions huntserver/templates/hunt_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,69 +6,29 @@
{% endblock base_includes %}

{% block left-header %}
{% if hunt %}
<li class='{% active_page request "current_hunt" %}'><a href="{% url 'huntserver:hunt' hunt.hunt_number %}"> Puzzles </a></li>
{% elif puzzle %}
<li class='{% active_page request "current_hunt" %}'><a href="{% url 'huntserver:hunt' puzzle.hunt.hunt_number %}"> Puzzles </a></li>
{% else %}
<li class='{% active_page request "current_hunt" %}'><a href="{% url 'huntserver:current_hunt' %}"> Puzzles </a></li>
{% endif %}
{% if not hunt.is_public %}
<!-- TODO: Move to separate file. Quick inline script done for Spring 2020 hunt. -->
<script type="text/javascript">
$(document).ready(function() {
function is_visible(){
var stateKey, keys = {
hidden: "visibilitychange",
webkitHidden: "webkitvisibilitychange",
mozHidden: "mozvisibilitychange",
msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
return !document[stateKey];
}
}
return true;
}

var get_posts = function() {
if(is_visible()){
$.getJSON("{% url 'huntserver:chat_status' %}")
.done(function(result){
num_messages = result['num_messages']
if(num_messages > 0) {
$("#num_messages").css("background-color", "indianred");
} else {
$("#num_messages").css("background-color", "");
}
$("#num_messages").text(num_messages);
})
.fail( function(xhr, textStatus, errorThrown) {
console.log(xhr);
});
}
}

setInterval(get_posts, 120000); //Two minutes
});
</script>
{% set_hunt_from_context %}
<li class='{% active_page request "current_hunt" %}'>
<a href="{% url 'huntserver:hunt' tmpl_hunt.hunt_number %}"> Puzzles </a>
</li>
{% if not tmpl_hunt.is_public %}
<!-- Kinda weird to include this here, but better than running the template tag twice -->
<script src="{{ STATIC_URL }}huntserver/chat_poll.js"></script>
<li class='{% active_page request "chat" %}'>
<a href="{% url 'huntserver:chat' %}">
<a href="{% url 'huntserver:chat' %}">
Chat
{% if team %}
{% if team.num_waiting_messages %}
<span id="num_messages" class="badge" style="background-color: indianred">
{{team.num_waiting_messages}}
</span>
{% else %}
{% else %}
<span id="num_messages" class="badge">0</span>
{% endif %}
{% endif %}
</a>
</li>
{% endif %}
<li class='{% active_page request "index" %}'><a href="{% url 'huntserver:index' %}"> Main Site </a></li>
<li><a href="{% url 'huntserver:current_hunt_info' %}"> Hunt Info </a></li>
{% endblock %}

{% block content_wrapper %}
Expand Down
45 changes: 35 additions & 10 deletions huntserver/templates/info_base.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,46 @@
{% extends 'base.html' %}
{% load bootstrap_tags %}
{% load hunt_tags %}
{% load static %}
{% load flatpages %}

{% block base_includes %}
<link rel="stylesheet" type="text/css" href="{% static "huntserver/info_base.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "huntserver/navbar.css" %}">
{% endblock base_includes %}

{% block left-header %}
{% get_flatpages '/extra/' as flatpages %}
<li class='{% active_page request "index" %} visible-sm visible-xs'><a href="{% url 'huntserver:index' %}"> Homepage </a></li>
<li class='{% active_page request "current_hunt" %}'><a href="{% url 'huntserver:current_hunt' %}"> Current Hunt </a></li>
<li class='{% active_page request "current_hunt_info" %}'><a href="{% url 'huntserver:current_hunt_info' %}"> Hunt Info</a></li>
<li class='{% active_page request "previous_hunts" %}'><a href="{% url 'huntserver:previous_hunts' %}"> Previous Hunts </a></li>
{% for page in flatpages|dictsort:"url" %}
<li class='{% active_page request page.url %}'><a href="/info{{ page.url }}"> {{ page.title }} </a></li>
{% endfor %}
<li class='{% active_page request "contact_us" %}'><a href="{% url 'huntserver:contact_us' %}"> Contact Us </a></li>
{% get_flatpages '/extra/' as flatpages %}
<li class="dropdown hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Information <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class='{% active_page request "current_hunt_info" %}'>
<a href="{% url 'huntserver:current_hunt_info' %}"> Hunt Details </a>
</li>
{% for page in flatpages|dictsort:"url" %}
<li class='{% active_page request page.url %}'>
<a href="/info{{ page.url }}"> {{ page.title }} </a>
</li>
{% endfor %}
<li class='{% active_page request "contact_us" %}'>
<a href="{% url 'huntserver:contact_us' %}"> Contact Us </a>
</li>
</ul>
</li>

<li class='visible-xs-block {% active_page request "current_hunt_info" %}'>
<a href="{% url 'huntserver:current_hunt_info' %}"> Hunt Details </a>
</li>
{% for page in flatpages|dictsort:"url" %}
<li class='visible-xs-block {% active_page request page.url %}'>
<a href="/info{{ page.url }}"> {{ page.title }} </a>
</li>
{% endfor %}
<li class='visible-xs-block {% active_page request "contact_us" %}'>
<a href="{% url 'huntserver:contact_us' %}"> Contact Us </a>
</li>

<li class='{% active_page request "current_hunt" %}'>
{% set_curr_hunt %}
<a href="{% url 'huntserver:current_hunt' %}"> Latest Hunt </a>
</li>
{% endblock %}

0 comments on commit daddb1a

Please sign in to comment.