Skip to content

Instantly share code, notes, and snippets.

@pjhjohn
Created April 17, 2017 15:54
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pjhjohn/5fca5c9c7e0152b9e6eddcea404aa2d3 to your computer and use it in GitHub Desktop.
Save pjhjohn/5fca5c9c7e0152b9e6eddcea404aa2d3 to your computer and use it in GitHub Desktop.
Bootstrap Material Design Setup in Django
{% load static %}
{% load string_filters %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EPG Automator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# Material Design fonts#}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{# Bootstrap Material Design #}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-material-design.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/ripples.min.css' %}">
{# jQuery #}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
{% block css %}
{% endblock %}
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'client' %}">EPG Automator</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="{{ template_name|match2active:'client' }}"><a href="{% url 'client' %}">Client</a></li>
<li class="{{ template_name|match2active:'publisher' }}"><a href="{% url 'publisher' %}">Publisher</a></li>
<li class="{{ template_name|match2active:'content' }}"><a href="{% url 'content' %}">Content</a></li>
<li class="{{ template_name|match2active:'check_package' }}"><a href="{% url 'check_package' %}">Check Package</a></li>
</ul>
{% if client_id and client_name %}
<ul class="nav navbar-nav navbar-right">
<li class="{{ template_name|match2active:'campaign' }}"><a href="{% url 'campaign' client_id=client_id %}">Current Client : <strong>{{ client_name }}</strong></a></li>
</ul>
{% endif %}
</div>
</div>
</div>
{% block header %}
{% endblock %}
</header>
<main>
<div class="container">
{% block content %}
{% endblock %}
</div>
</main>
<footer>
</footer>
{# Bootstrap Material Design #}
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static 'js/material.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/ripples.min.js' %}"></script>
<script>
$.material.init();
</script>
{% block js %}
{% endblock %}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment