Florian Apolloner avatar Florian Apolloner committed 59682a2

Adjusted the templates to match BS3.

Comments (0)

Files changed (6)

docs/frontend_login.rst

 
 .. code-block:: html
 
-    <form class="navbar-form pull-right">
-        <input class="span2" type="text" placeholder="Email">
-        <input class="span2" type="password" placeholder="Password">
-        <button type="submit" class="btn">Sign in</button>
+    <form class="navbar-form navbar-right">
+      <div class="form-group">
+        <input type="text" placeholder="Email" class="form-control">
+      </div>
+      <div class="form-group">
+        <input type="password" placeholder="Password" class="form-control">
+      </div>
+      <button type="submit" class="btn btn-success">Sign in</button>
     </form>
 
 This gets replaced with a block in which you use the ``include`` tag to

docs/templates.rst

 
 .. literalinclude:: ../src/mysite/templates/base.html
     :language: html+django
-    :lines: 79-99
-    :emphasize-lines: 8, 10, 12
+    :lines: 76-99
+    :emphasize-lines: 5, 7, 9
 
 Now replace the ``title`` HTML tag with the highlighted line:
 
 :djangodocs:`block <ref/templates/builtins/#block>` tag.
 
 The section overwritten with ``<!-- Main hero unit for a primary
-marketing message or call to action -->`` is replaced by two additional
-blocks, one for the headline and the other for the contents of the
-current page. New lines are highlighted:
+marketing message or call to action -->`` is deleted and two additional
+blocks are added to the following div-container; one for the headline and
+the other for the contents of the current page. New lines are highlighted:
 
 .. literalinclude:: ../src/mysite/templates/base.html
     :language: html+django
-    :lines: 67-82
+    :lines: 65-78
     :emphasize-lines: 3-8
 
 If you want to you can delete the ``div`` containers overwritten with

src/mysite/marcador/templates/marcador/bookmark.html

 <br>by <a href="{% url "marcador_bookmark_user" bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
 {{ bookmark.date_created|timesince }} ago
 {% ifequal bookmark.owner user %}
-    <br><a class="btn btn-mini" href="{% url "marcador_bookmark_edit" bookmark.pk %}">Edit bookmark</a>
+    <br><a class="btn btn-default btn-xs" href="{% url "marcador_bookmark_edit" bookmark.pk %}">Edit bookmark</a>
 {% endifequal %}

src/mysite/marcador/templates/marcador/bookmark_list.html

 {% endblock %}
 
 {% block content %}
-<ul class="unstyled">
+<ul class="list-unstyled">
 {% for bookmark in bookmarks %}
     <li class="well">{% include "marcador/bookmark.html" %}</li>
 {% empty %}
 {% endfor %}
 </ul>
 {% if user.is_authenticated %}
-<p><a class="btn" href="{% url "marcador_bookmark_create" %}">Create new bookmark</a></p>
+<p><a class="btn btn-default" href="{% url "marcador_bookmark_create" %}">Create new bookmark</a></p>
 {% endif %}
 {% endblock %}

src/mysite/templates/base.html

+{% load static %}
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title></title>
+        <title>Marcador - {% block title %}{% endblock %}</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">
 
-        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
         <style>
             body {
                 padding-top: 50px;
                 padding-bottom: 20px;
             }
         </style>
-        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
-        <link rel="stylesheet" href="css/main.css">
+        <link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
+        <link rel="stylesheet" href="{% static "css/main.css" %}">
 
-        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+        <script src="{% static "js/vendor/modernizr-2.6.2-respond-1.1.0.min.js" %}"></script>
     </head>
     <body>
         <!--[if lt IE 7]>
               </ul>
             </li>
           </ul>
-          <form class="navbar-form navbar-right">
-            <div class="form-group">
-              <input type="text" placeholder="Email" class="form-control">
-            </div>
-            <div class="form-group">
-              <input type="password" placeholder="Password" class="form-control">
-            </div>
-            <button type="submit" class="btn btn-success">Sign in</button>
-          </form>
+          {% block toggle_login %}
+            {% include "toggle_login.html" %}
+          {% endblock %}
         </div><!--/.navbar-collapse -->
       </div>
     </div>
 
-    <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
-      <div class="container">
-        <h1>Hello, world!</h1>
-        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-        <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
+    <div class="container">
+
+      <div>
+          {% block heading %}{% endblock %}
       </div>
-    </div>
-
-    <div class="container">
-      <!-- Example row of columns -->
-      <div class="row">
-        <div class="col-lg-4">
-          <h2>Heading</h2>
-          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
-        </div>
-        <div class="col-lg-4">
-          <h2>Heading</h2>
-          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
-          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
-       </div>
-        <div class="col-lg-4">
-          <h2>Heading</h2>
-          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
-        </div>
+      <div>
+          {% block content %}{% endblock %}
       </div>
 
       <hr>
         <p>&copy; Company 2013</p>
       </footer>
     </div> <!-- /container -->        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
+        <script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.10.1.min.js" %}"><\/script>')</script>
 
-        <script src="js/vendor/bootstrap.min.js"></script>
+        <script src="{% static "js/vendor/bootstrap.min.js" %}"></script>
 
-        <script src="js/main.js"></script>
+        <script src="{% static "js/main.js" %}"></script>
 
         <script>
             var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

src/mysite/templates/toggle_login.html

 {% if user.is_authenticated %}
-<ul class="nav pull-right">
+<ul class="nav navbar-nav navbar-right">
     <li class="dropdown">
-        <a class="dropdown-toggle" id="dropuser" data-toggle="dropdown" href="#">{{ user.username }}</a>
+        <a class="dropdown-toggle" id="dropuser" data-toggle="dropdown" href="#">{{ user.username }} <b class="caret"></b></a>
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropuser">
             <li><a href="{% url "marcador_bookmark_user" user.username %}">My bookmarks</a></li>
             <li><a href="{% url "mysite_logout" %}">Logout</a></li>
     </li>
 </ul>
 {% else %}
-<form class="navbar-form pull-right" action="{% url "mysite_login" %}" method="post" accept-charset="utf-8">
-    <input class="span2" type="text" placeholder="Username" name="username">
-    <input class="span2" type="password" placeholder="Password" name="password">
+<form class="navbar-form navbar-right" action="{% url "mysite_login" %}" method="post" accept-charset="utf-8">
+    <div class="form-group">
+        <input class="form-control" type="text" placeholder="Username" name="username">
+    </div>
+    <div class="form-group">
+        <input class="form-control" type="password" placeholder="Password" name="password">
+    </div>
     {% csrf_token %}
     <button type="submit" class="btn">Login</button>
 </form>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.