mirror of
https://github.com/encode/django-rest-framework.git
synced 2024-11-23 10:03:57 +03:00
Merge pull request #794 from forgingdestiny/master
Add branding block to login template
This commit is contained in:
Tom Christie
commit
ed7906c63d
|
|
@ -60,6 +60,17 @@ All of the [Bootstrap components][bcomponents] are available.
|
|||
|
||||
The browsable API makes use of the Bootstrap tooltips component. Any element with the `js-tooltip` class and a `title` attribute has that title content displayed in a tooltip on hover after a 1000ms delay.
|
||||
|
||||
### Login Template
|
||||
|
||||
To add branding and customize the look-and-feel of the auth login template, create a template called `login.html` and add it to your project, eg: `templates/rest_framework/login.html`, that extends the `rest_framework/base_login.html` template.
|
||||
|
||||
You can add your site name or branding by including the branding block:
|
||||
|
||||
{% block branding %}
|
||||
<h3 style="margin: 0 0 20px;">My Site Name</h3>
|
||||
{% endblock %}
|
||||
|
||||
You can also customize the style by adding the `bootstrap_theme` or `style` block similar to `api.html`.
|
||||
|
||||
### Advanced Customization
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +1,3 @@
|
|||
{% load url from future %}
|
||||
{% load rest_framework %}
|
||||
<html>
|
||||
{% extends "rest_framework/login_base.html" %}
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/>
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
|
||||
<div class="container-fluid" style="margin-top: 30px">
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="well" style="width: 320px; margin-left: auto; margin-right: auto">
|
||||
<div class="row-fluid">
|
||||
<div>
|
||||
<h3 style="margin: 0 0 20px;">Django REST framework</h3>
|
||||
</div>
|
||||
</div><!-- /row fluid -->
|
||||
|
||||
<div class="row-fluid">
|
||||
<div>
|
||||
<form action="{% url 'rest_framework:login' %}" class=" form-inline" method="post">
|
||||
{% csrf_token %}
|
||||
<div id="div_id_username" class="clearfix control-group">
|
||||
<div class="controls">
|
||||
<Label class="span4">Username:</label>
|
||||
<input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_id_password" class="clearfix control-group">
|
||||
<div class="controls">
|
||||
<Label class="span4">Password:</label>
|
||||
<input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="next" value="{{ next }}" />
|
||||
<div class="form-actions-no-box">
|
||||
<input type="submit" name="submit" value="Log in" class="btn btn-primary" id="submit-id-submit">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /row fluid -->
|
||||
</div><!--/span-->
|
||||
|
||||
</div><!-- /.row-fluid -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{# Override this template in your own templates directory to customize #}
|
||||
|
|
|
|||
55
rest_framework/templates/rest_framework/login_base.html
Normal file
55
rest_framework/templates/rest_framework/login_base.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
{% load url from future %}
|
||||
{% load rest_framework %}
|
||||
<html>
|
||||
|
||||
<head>
|
||||
{% block style %}
|
||||
{% block bootstrap_theme %}<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap.min.css" %}"/>{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/bootstrap-tweaks.css" %}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "rest_framework/css/default.css" %}"/>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
|
||||
<div class="container-fluid" style="margin-top: 30px">
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="well" style="width: 320px; margin-left: auto; margin-right: auto">
|
||||
<div class="row-fluid">
|
||||
<div>
|
||||
{% block branding %}<h3 style="margin: 0 0 20px;">Django REST framework</h3>{% endblock %}
|
||||
</div>
|
||||
</div><!-- /row fluid -->
|
||||
|
||||
<div class="row-fluid">
|
||||
<div>
|
||||
<form action="{% url 'rest_framework:login' %}" class=" form-inline" method="post">
|
||||
{% csrf_token %}
|
||||
<div id="div_id_username" class="clearfix control-group">
|
||||
<div class="controls">
|
||||
<Label class="span4">Username:</label>
|
||||
<input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
|
||||
</div>
|
||||
</div>
|
||||
<div id="div_id_password" class="clearfix control-group">
|
||||
<div class="controls">
|
||||
<Label class="span4">Password:</label>
|
||||
<input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="next" value="{{ next }}" />
|
||||
<div class="form-actions-no-box">
|
||||
<input type="submit" name="submit" value="Log in" class="btn btn-primary" id="submit-id-submit">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div><!-- /row fluid -->
|
||||
</div><!--/span-->
|
||||
|
||||
</div><!-- /.row-fluid -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user