1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3301],{58368:function(s,n,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/100-words/day-235",function(){return a(11096)}])},11096:function(s,n,a){"use strict";a.r(n),a.d(n,{meta:function(){return l}});var e=a(85893),t=a(11151),c=a(53841);let l={author:"Andrew Miller",date:"2024-12-03",title:"Building a web application a 100 words at a time - 6",description:"Styling with CSS and templates refactor",tags:["100 words","django","tutorial","webapps","styling","css"]},MDXLayout=s=>(0,e.jsx)(c.B,Object.assign({meta:l},s));function _createMdxContent(s){let n=Object.assign({p:"p",code:"code",a:"a",pre:"pre",span:"span"},(0,t.ah)(),s.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:"One of the final aspects to this template project is to add some basic styling to the project, for this we need to configure our static settings and add a css file and refactor our templates."}),"\n",(0,e.jsxs)(n.p,{children:["First up is to configure our staticfiles settings. This ought to be as simple as just setting ",(0,e.jsx)(n.code,{children:"STATIC_ROOT"})," and ",(0,e.jsx)(n.code,{children:"STATIC_URL"})," to appropriate values. I covered this on ",(0,e.jsx)(n.a,{href:"/100-words/day-55",children:"Day 55"}),"."]}),"\n",(0,e.jsxs)(n.p,{children:["Next I'm going to use ",(0,e.jsx)(n.a,{href:"https://picocss.com/docs",children:"PicoCSS"})," to provide some basic styling without us having to write lots of CSS. We're going to manually download the ",(0,e.jsx)(n.a,{href:"https://github.com/picocss/pico/archive/refs/heads/main.zip",children:"files"})," into a static folder and then add this line to our templates:"]}),"\n",(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"{% static ",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"css/pico.min.css",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})," %}",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,e.jsxs)(n.p,{children:["However adding that line repeatedly to our three template files (with more to come as any project expands) is going to be tedious and error prone, therefore let's create a new template called ",(0,e.jsx)(n.code,{children:"base.html"})," which looks like this:"]}),"\n",(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{% block head_title %}My To Do List{% endblock head_title %}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"stylesheet",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"{% static ",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"css/pico.min.css",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})," %}",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{% block page_title %}{% endblock page_title %}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"main"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% block main_content %}\n {% endblock main_content %}\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"main"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"html"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,e.jsxs)(n.p,{children:["Next we refactor the existing templates we have created from ",(0,e.jsx)(n.a,{href:"/100-words/day-333",children:"Day 333"})," and Day 334 (not that I explained this yesterday, I completely forgot!). So our basic templates become as follows:"]}),"\n",(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"projects/list.html"}),":"]}),"\n",(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html",children:['{% extends "base.html" %}\n{% block page_title %}Project List{% endblock page_title %}\n\n{% block main_content %}\n',(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dl"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% for project in projects %}\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"a"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"{% url ",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"project_detail",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})," project.pk %}",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ project.name }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"a"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ project.description }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% endfor %}\n",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dl"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n{% endblock main_content %}\n"]})}),"\n",(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"projects/detail.html"}),":"]}),"\n",(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html",children:['{% extends "base.html" %}\n{% block page_title %}Project Detail: {{ project.name }}{% endblock page_title %}\n\n{% block main_content %}\n ',(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dl"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Description:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ project.description }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Created at:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ project.created_at }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Last Updated:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ project.updated_at }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Created by:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ project.created_by }}
1",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dl"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"table"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"thead"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Task Name",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Reported By",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Assigned To",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Due Date",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Created",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"th"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"thead"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tbody"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% for task in tasks %}\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"a"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"{% url ",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"task_detail",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})," task.pk %}",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.name }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"a"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.reported_by }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.assigned_to }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.due_date }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.created_by }}
1",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"td"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tr"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% endfor %}\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"tbody"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"table"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n{% endblock main_content %}\n"]})}),"\n",(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"tasks/detail.html"}),":"]}),"\n",(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html",children:['{% extends "base.html" %}\n{% block page_title %}Task Detail: {{ task.name }}{% endblock page_title %}\n\n{% block main_content %}\n',(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dl"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Description:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.description }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Project:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.project }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Created at:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.created_at }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Last Updated:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.updated_at }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Due Date:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.due_date }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Reported by:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.reported_by }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Assigned to:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.assigned_to }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% if task.parent_task %}\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Parent Task:",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dt"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{ task.parent_task }}",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dd"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n {% endif %}\n",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"</"}),"dl"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n{% endblock main_content %}\n"]})}),"\n",(0,e.jsxs)(n.p,{children:["This now means all our templates extend the ",(0,e.jsx)(n.code,{children:"base.html"})," file so they should all have some styling applied to them from pico.css."]}),"\n",(0,e.jsx)(n.p,{children:"Tomorrow I'm going to back and cover the templates for the edit and update pages with what we haved covered here today."})]})}n.default=function(s={}){return(0,e.jsx)(MDXLayout,Object.assign({},s,{children:(0,e.jsx)(_createMdxContent,s)}
1))}}},function(s){s.O(0,[407,8819,4825,9774,2888,179],function(){return s(s.s=58368)}),_N_E=s.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.