I have a html:
{% load staticfiles %}
<div style="margin:0 auto; width:900px">
<ul id="nav">
<li id="notification_li">
<a href="#" id="notificationLink">
<div id="notify"> <img src="{% static "images/notification.png" %}" width="20" height="20" />
{% if unseen_notifications.count > 0 %}
<span id="notification_count">
{{unseen_notifications.count}}</span>
{% endif %}
</div></a>
<div id="notificationContainer">
<div id="notificationTitle">Inbox</div>
<div id="notificationsBody">
Home
</div>
<div id="notificationFooter">See All</div>
</div>
</li>
</ul>
</div>
Here I have "Home" inside id "notificationContainer". When I click Home it doesnt redirect but outside "notificationContainer" it redirects. Inside notification container I am willing to put notifications. But it doesnt redirect.
My style for this:
#notification_li{position:relative}
#notificationContainer {
background-color: #FFF;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: 11;
display: none;
}
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border: 10px;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle {
z-index: 1000;
font-weight: bold;
padding: 8px;
font-size: 15px;
background-color: #ffffff;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody {
padding: 0px 0px 0px 0px !important;
margin: 0px;
min-height:300px;
font-size:14px;
display: block;
}
#notificationsBody a{ color: #000;}
#notification_count {
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 0px;
border-radius: 20px;
position: absolute;
margin-top: -7px;
font-size: 11px;
}
#notificationFooter {
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
You need to define a URL in your urls.py
and if you want to use it like this <a href="{% url "ask_question" %}"> then add a name to your url and use it like this <a href="{% url "home" %}">
if your home has a view then:
url(r'^people/', "myapp.views.people", name="people"),
if it is only a template you can use something like this:
url(r'^home/',TemplateView.as_view(template_name="homepage.html"), name="home"),
I think you misunderstood Ebtessam's answer. Not only do you need to configure the URL, you also need to reference that URL correctly in the HTML.
You have:
Home
Change to:
Home
The above assumes that within your URL you defined something that looks similar to:
url(r'^home/',views.your_home_view_here, name="home"),
Notice the name="home".In your template you reference the view with that name, hence:
{% url 'home' %}
Related
0
I am triying to make my Feed Page for my Social Media Website look cool. Right now the Feed shows the Posts (Images and Videos) one below each other, like Instagram f. e. I want to have 2 Posts next to each other, like Pinterest f. e.
[what I want (click to see)] https://i.stack.imgur.com/KBGNg.png
I code my Webiste with HTML, CSS and PYTHON.
feed.html
<article class="content-section" style="overflow: auto;">
<div class="mediacontent">
{% if post.extension == '.mp4'%}
<video loop class="video-context" width="500px" height="500px" controls>
<source src="{{ post.file.url }}" type="video/mp4">
</video>
{% elif post.extension == '.jpg' or post.extension == '.jpeg' %}
<a href="{% url 'post-detail' post.id %}">
<img class="image-context" src="{{ post.file.url }}">
</a>
{% endif %}
</div>
<div class="initials">
<div class="media">
<div class="img-cont3">
<img class="rounded-circle article-img feed-pic" src="{{post.author.profile.image.url}}" alt="image">
</div>
<div class="media-body">
<span><a class="mr-2 full-name-link" href="{% url 'profile-detail-view' post.author.pk %}">{{ post.author.first_name }} {{ post.author.last_name }} </a></span>
<span><small class="text-muted at-username">w/{{ post.author }}</small></span>
</div>
</div>
</div>
<script>
var videos = document.querySelectorAll('video');
for(var i=0; i<videos.length; i++)
videos[i].addEventListener('play', function(){pauseAll(this)}, true);
function pauseAll(elem){
for(var i=0; i<videos.length; i++){
//Is this the one we want to play?
if(videos[i] == elem) continue;
//Have we already played it && is it already paused?
if(videos[i].played.length > 0 && !videos[i].paused){
// Then pause it now
videos[i].pause();
}
}
}
</script>
<br>
<h3 class="article-title">{{ post.title }}</h3>
<a href="{% url 'post-detail' post.id %}">
<p class="interactions">{{post.total_likes}} <span>Likes</span></p></a>
</article>
style.css
.media {
height: 55px;
}
.media-body span{
display: block;
margin-top: -3px;
}
body {
overflow-x: hidden;
}
.like-info {
font-size: 15px;
font-family: 'Inter', sans-serif;
color: #535353;
font-weight: 500;
}
.article-title span {
font-size: 14px;
font-family: 'Inter', sans-serif;
color: #000;
font-weight: 500;
}
.article-title span:hover {
text-decoration: none;
}
.article-title {
font-size: 14px;
font-family: 'Inter', sans-serif;
color: #535353;
font-weight: 400;
}
.interactions {
color: #000;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
}
.interactions span{
font-family: 'Inter', sans-serif, sans-serif;
color: #535353;
font-weight: 500;
}
.content-section {
background-color: #FAFAFA;
border: 1px #9d9d9d dashed;
border-radius: 10px;
}
.content-section-upload {
background-color: #FAFAFA;
border-radius: 10px;
border: none;
padding-right: -10px;
padding-left: -10px;
padding-bottom: -60px;
padding-top: -60px;
}
.create-section {
width: 100%;
}
.image-context {
display: grid;
width: 100%;
height: auto;
margin: auto;
border-radius: 20px;
text-align: center;
cursor: pointer;
}
.video-context {
display: grid;
width: 100%;
height: auto;
margin: auto;
background-color: #000;
border-radius: 20px;
text-align: center;
max-height: 450px;
cursor: pointer;
}
an more Styles that is not related to the main issue.
Is it possible to grid 2 Posts next to each other?
<!-- demo for pinterest like layout with responsiveness -->
**HTML:**
<div class="app">
<div class="feed">
<img src="" />
<!-- More images -->
</div>
</div>
**css:**
.app{
width: 80vw;
margin: auto;
}
.feed{
column: 4 12rem; /* 1st one is column count and second one is width */
}
I am trying to create an automated email script for birthdays. However i can send the text email with an image as an attachment but I want the image to be in the background of the text. Like how it is when you open some websites this is a birthday email style that I'm trying to clone. I've got all the other things setup but when i test it, the background image does not appear. Just text box box
this is the code I wrote: I'm not that good a programmer to be sincere. And the ~ in there so that a function will read the html file and replace the ~ with my message[the wish].
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-with, initial-scale=1.0">
<style>
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header
{
background-image: url('birthday.png');
background-repeat: repeat-y no-repeat;
background-color: #333;
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url =("/images/birthday.png");
background-position: center;
background-size: cover;
position: relative;
}
.text-box
{
color:;
background: transparent;
position: absolute;
background-color: aliceblue;
width: auto;
height: auto;
margin: 5% 5%;
border-radius: 10px;
padding: 0px;
}
.tin-line
{
position: relative;
top: 10%;
background-color: cornflowerblue;
width: 100%;
height: 10px;
border-radius: 1px;
}
.message-box
{
position: relative;
top: 13%;
padding: 10px;
}
p
{
font-family: cursive;
font-size: 15px;
font-weight: 600;
text-align: center;
color: black;
}
.last
{
position: relative;
bottom: 5%;
padding: 10px;
font-family: cursive;
font-size: 20px;
font-weight: 700;
}
.head
{
position: relative;
top: 5%;
height: 50px;
width: 100%;
margin: auto;
text-align: center;
font-family: cursive;
}
</style>
</head>
<body>
<section class="header">
<div class="text-box">
<div class="head"><h1>✨HAPPY BIRTHDAY!✨</h1></div>
<div class="tin-line">
</div>
<div class="message-box"><br>
<p>~</p>
</div>
<div class="last">
<p>Best wishes,<br> Dillon</p>
</div>
</div>
</section>
</body>
</html>
This is the output:
Results of email output
There's some advice at backgrounds.cm which may help. Wrap your message in a table and apply the background to a cell. Note that there's two places the image url is defined:
<div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png">
Your message here
</td>
</tr>
</table>
</div>
If you're wanting to attach the image then you'll need to use Content-Disposition: inline & Content-ID: headers for the attachment and refer to the image using a cid: link.
Very new to CSS and HTML, but right now working on Django one-page project.
Under icons, I would like to place some text, but there is an issue with the borders.
Right now text wrapping works not very well, I would like to center text under the icon and have at least 3 or 4 straight strings.
Maybe there are issues that this text and icons should be in the container, IDK, will be very happy to hear any solution and suggestions for my portfolio project.
Thank you!
Here is my HTML:
body {
background: url(https://images.unsplash.com/photo-1534258936925-c58bed479fcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80) no-repeat center center fixed;
background-size: cover;
}
#background {
position: fixed;
top: 260px;
left: 0px;
width: 100%;
height: 50%;
background-color: white;
z-index: -1;
opacity: 0.8;
}
.social-menu ul {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
display: flex;
}
.social-menu ul li {
list-style: none;
margin: 0 20px;
}
.social-menu ul li .fab {
color: #000000;
font-size: 60px;
line-height: 75px;
transition: .5s;
}
.social-menu ul li .fab:hover {
color: #ffffff;
}
.social-menu ul li a {
position: relative;
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: white;
opacity: 0.8;
text-align: center;
transition: 0.5s;
transform: translate(0, 0px);
box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}
.social-menu ul li a:hover {
transform: rotate(0deg) skew(0deg) translate(0, -10px);
}
.social-menu ul li:nth-child(1) a:hover {
background-color: #FF3371;
}
.social-menu ul li:nth-child(2) a:hover {
background-color: black;
}
.social-menu ul li:nth-child(3) a:hover {
background-color: blue;
}
.title {
color: black;
font-size: 25px;
padding-top: 220px;
margin-left: 445px;
}
.icons {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
display: flex;
color: red;
}
.icons li {
list-style: none;
margin: 0 140px;
font-size: 50px;
}
.icons-text {
position: absolute;
top: 76%;
left: 52%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
display: flex;
}
.icons-text li {
list-style: none;
margin: 0 100px;
font-size: 10px;
}
<!DOCTYPE html> {% load static %}
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<script src="https://kit.fontawesome.com/5476287230.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="social-menu">
<ul>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-tiktok"></i></li>
<li><i class="fab fa-facebook"></i></li>
</ul>
</div>
<div class="title">
<h1>ЧТО ВЫ ПОЛУЧАЕТЕ?</h1>
</div>
<div id="background"></div>
<div class="icons">
<li><i class="fas fa-utensils"></i></li>
<li><i class="fas fa-dumbbell"></i></li>
<li><i class="fas fa-clock"></i></li>
<li><i class="fas fa-heartbeat"></i></li>
</div>
<div class="icons-text">
<li>
<h1>План питания с учетом Ваших вкусовых потребностей</h1>
</li>
<li>
<h1>Тренировки для любого уровня подготовки</h1>
</li>
<li>
<h1>Максимально быстрые результаты</h1>
</li>
<li>
<h1>Тело, о котором Вы могли только мечтать</h1>
</li>
</div>
</body>
</html>
I am converting a html file to pdf using pdfkit library in python.
This is what my page looks like in html
And this is what I get after converting it to pdf. It puts "Summary" in the next line, but I want it in the same line.
Here is my python code
import pdfkit
with open("performance_report.html", "rb") as f:
str = f.read()
pdfkit.from_string(str, 'out.pdf')
I have tried Landscape mode as well by using below code in html. But same result.
<head>
<meta name="pdfkit-page-size" content="Legal"/>
<meta name="pdfkit-orientation" content="Landscape"/>
</head>
Html Code
<html>
<head>
<meta name="pdfkit-page-size" content="Legal"/>
<meta name="pdfkit-orientation" content="Landscape"/>
</head>
<h1> Performance report for date: 2018-05-27 </h1> <br><br> <div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 75%;
max-width: 60%;
">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Requests (%)</div>
<div style="padding: 1.25rem;padding-left: 0.5rem !important;padding-right: 0 !important;">
<img src="cid:request_offload">
</div>
</div>
</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 25%;
max-width: 20%;">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Summary</div>
<div style="padding: 1.25rem;padding-left: 1rem !important;
padding-right: 1rem !important;height: 245px; box-sizing: border-box;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Total:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">1.03B </div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Peak:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 50%;
max-width: 50%;">2.48 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 00:50:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Least:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">0.45 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 13:15:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
I finally manage to get the summary next to the requests. You have to use a table in your html. Here is an example below. It is working, the width of the two columns are not perfect, so you can just play around with the width paramaters (I removed it from the html for now):
<html>
<h1> Performance report for date: 2018-05-27 </h1> <br><br> <div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<table style="width:100%">
<tr>
<th>
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 75%;
max-width: 60%;
">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Requests (%)</div>
<div style="padding: 1.25rem;padding-left: 0.5rem !important;padding-right: 0 !important;">
<img src="cid:request_offload">
</div>
</div>
</th>
<th>
</div>
<div style="position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 25%;
max-width: 20%;">
<div style="background-color: #fff; position: relative;
margin-bottom: 1.5rem;
border: 0;
border-radius: 0.2rem;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
margin-left: auto !important;
margin-right: auto !important;
padding-top: 0 !important;">
<div style=" padding: 0.75rem 1.25rem;
border-bottom: 1px solid transparent;
font-weight: 500;background: #F0F8FF;">Summary</div>
<div style="padding: 1.25rem;padding-left: 1rem !important;
padding-right: 1rem !important;height: 245px; box-sizing: border-box;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style=" position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;">
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Total:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">1.03B </div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Peak:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 50%;
max-width: 50%;">2.48 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 00:50:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
<div style="display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; font-size: 14px;
font-weight: bold; flex: 0 0 50%;
max-width: 50%;">Least:</div>
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; flex: 0 0 50%;
max-width: 50%;">0.45 %</div>
</div>
<div style="display: flex; margin-top: 0 !important;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;">
<div style="position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;flex: 0 0 100%;
max-width: 100%;">
<small style="color: #808080;font-weight: normal !important;
font-size: 85% !important;">at Sun, 27 May 2018 13:15:00 -0000</small>
</div>
</div>
<div style=" display: flex; flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; margin-bottom: 1rem !important;margin-top: 1rem !important;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</th>
</tr>
</table>
</html>
I've been getting this error, and I couldn't seem to fix it.
Here is a screenshot of it: erros image
Here my view's.py:'
from django.shortcuts import render, get_object_or_404, redirect
from django.contrib import messages
from django.contrib.auth.mixins import LoginRequiredMixin
from posts.forms import PostForm, CommentForm
from django.core.urlresolvers import reverse_lazy
from django.http import Http404
from django.views import generic
from braces.views import SelectRelatedMixin
from . import forms
from . import models
from django.contrib.auth import get_user_model
User = get_user_model()
class PostList(SelectRelatedMixin, generic.ListView):
model = models.Post
select_related = ("user", "group")
class UserPosts(generic.ListView):
model = models.Post
template_name = "posts/user_post_list.html"
def get_queryset(self):
try:
self.post_user = User.objects.prefetch_related("posts").get(
username__iexact=self.kwargs.get("username")
)
except User.DoesNotExist:
raise Http404
else:
return self.post_user.posts.all()
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["post_user"] = self.post_user
return context
class PostDetail(SelectRelatedMixin, generic.DetailView):
model = models.Post
select_related = ("user", "group")
def get_queryset(self):
queryset = super().get_queryset()
return queryset.filter(
user__username__iexact=self.kwargs.get("username")
)
class CreatePost(LoginRequiredMixin, SelectRelatedMixin, generic.CreateView):
# form_class = forms.PostForm
fields = ('message','group')
model = models.Post
# def get_form_kwargs(self):
# kwargs = super().get_form_kwargs()
# kwargs.update({"user": self.request.user})
# return kwargs
def form_valid(self, form):
self.object = form.save(commit=False)
self.object.user = self.request.user
self.object.save()
return super().form_valid(form)
class DeletePost(LoginRequiredMixin, SelectRelatedMixin, generic.DeleteView):
model = models.Post
select_related = ("user", "group")
success_url = reverse_lazy("posts:all")
def get_queryset(self):
queryset = super().get_queryset()
return queryset.filter(user_id=self.request.user.id)
def delete(self, *args, **kwargs):
messages.success(self.request, "Post Deleted")
return super().delete(*args, **kwargs)
def add_comment_to_post(request, pk):
post = get_object_or_404(models.Post, pk=pk)
if request.method == "POST":
form = CommentForm(request.POST)
if form.is_valid():
comment = form.save(commit=False)
comment.post = post
comment.save()
return redirect('posts:single', pk=post.pk)
else:
form = CommentForm()
return render(request, 'posts/comment_form.html', {'form': form})
def comment_approve(request, pk):
comment = get_object_or_404(Comment, pk=pk)
comment.approve()
return redirect('posts:single', pk=comment.post.pk)
def comment_remove(request, pk):
comment = get_object_or_404(Comment, pk=pk)
post_pk = comment.post.pk
comment.delete()
return redirect('posts:single', pk=post_pk.pk)
Here's my models.py:
from django.conf import settings
from django.core.urlresolvers import reverse
from django.db import models
from django.utils import timezone
import misaka
from groups.models import Group
from django.contrib.auth import get_user_model
User = get_user_model()
class Post(models.Model):
user = models.ForeignKey(User, related_name="posts")
created_at = models.DateTimeField(auto_now=True)
message = models.TextField()
message_html = models.TextField(editable=False)
group = models.ForeignKey(Group, related_name="posts",null=True, blank=True)
def __str__(self):
return self.message
def save(self, *args, **kwargs):
self.message_html = misaka.html(self.message)
super().save(*args, **kwargs)
def approve_comments(self):
return self.comments.filter(approved_comment=True)
def get_absolute_url(self):
return reverse(
"posts:single",
kwargs={
"username": self.user.username,
"pk": self.pk
}
)
class Meta:
ordering = ["-created_at"]
unique_together = ["user", "message"]
class Comment(models.Model):
post = models.ForeignKey('posts.Post', related_name='comments')
author = models.CharField(max_length=200)
text = models.TextField()
created_date = models.DateTimeField(default=timezone.now)
approved_comment = models.BooleanField(default=False)
def approve(self):
self.approved_comment = True
self.save()
def get_absolute_url(self):
return reverse("post_list")
def __str__(self):
return self.text
here's my post_detail.html:
<!DOCTYPE html>
{%load staticfiles%}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<link href="https://fonts.googleapis.com/css?family=Abel|Raleway|Signika|Signika+Negative" rel="stylesheet">
<title>Ask Uptown</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
body{
font-family: 'Abel', sans-serif;
background-color: #E6ECF0;
}
.h12{
text-align: center;
}
.hero{
position: relative;
width: 1200px;
margin-left: 500px;
margin-top: 0;
top: 190px;
}
.banner{
color: white;
font-size: 40px;
text-align: center;
position: relative;
top: 170px;
left: 125px;
}
.buttons{
margin-top: 15px;
margin-left: 490px;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
}
.buttons a:hover{
background-color: #cdc9c9;
transition: all 0.5s ease-in;
}
.about{
width: 100%;
height: 300px;
color: #F4F7F8;
}
.about h1{
color: black;
margin-top: 60px;
margin-left: 2px;
font-family: 'Signika Negative', sans-serif;
font-weight: 500;
font-size: 35px;
}
.paragraph-about{
color:black;
font-family: 'Signika Negative', sans-serif;
margin-left: 70px;
margin-right: 60px;
margin-top: 30px;
}
.section{
width: 100%;
height: 350px;
background-color: #F4F7F8;
}
.card-pic{
background-color: #fff;
width: 300px;
height: 300px;
position: relative;
display: inline-block;
margin-top: 30px;
margin-right: 30px;
margin-left: 40px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 10px;
}
.card-pic h4 {
text-align: center;
font-size: 25px;
margin-top: 20px;
}
.card-pic p{
text-align: center;
margin-left: 20px;
margin-right: 12px;
}
.card-pic-two{
background-color: #fff;
width: 300px;
height: 300px;
position: relative;
display: inline-block;
margin-left: 100px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 10px;
}
.card-pic-two h4{
text-align: center;
font-size: 25px;
margin-top: 20px;
}
.card-pic-two p{
text-align: center;
margin-left: 20px;
margin-right: 12px;
}
.card-pic-three{
background-color: #fff;
width: 300px;
height: 300px;
position: relative;
display: inline-block;
margin-left: 150px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 10px;
}
.card-pic-three h4{
text-align: center;
font-size: 25px;
margin-top: 20px;
}
.card-pic-three p{
text-align: center;
margin-left: 20px;
margin-right: 12px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 45px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: 'Signika', sans-serif;
font-size: 19px;
margin-right: 10px;
}
.main-nav li:hover a {
border: 1px solid white;
}
.main-nav li a:active {
border: 1px solid white;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 55px 50px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}
.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
.footer-distributed{
position: relative;
top: 200px;
}
/* If you don't want the footer to be responsive, remove these media queries */
#media (max-width: 880px) {
.footer-distributed{
font: bold 14px sans-serif;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}
.twitter{
width: 42px;
height: 42px;
}
.facebook{
width: 42px;
height: 42px;
}
.instagram {
width: 40px;
height: 40px;
}
.icons{
margin-top: 20px;
}
.adress{
width: 30px;
height: 30px;
margin-right: 40px;
}
.email{
width: 40px;
height: 40px;
}
.phone{
width: 20px;
height: 20px;
}
.adress-sec{
margin-bottom: 25px;
}
.phone-sec{
margin-bottom: 20px;
}
.logo-text{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
margin-top: 30px;
margin-left: 27px;
float: left;
text-decoration: none;
font-size: 27px;
}
.logo-text span{
color: #5383d3;
}
.backgr{
background-color: #7F7F7F;
height: 13vh;
width: 100%;
background-size: cover;
background-position: center;
}
header{
background: src(.backgr);
}
.no-ans{
position: relative;
top: 50px;
left: 50px;
font-size: 20px;
}
.add-comment{
position: relative;
text-decoration: none;
z-index: 99;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
background: linear-gradient(45deg, #B388EB, #8093F1);
border-radius: 20px;
color: #FFF;
font-size: 20px;
letter-spacing: 1px;
font-weight: 200;
left: 1100px;
text-decoration: none;
left: 800px;
top: 75px;
}
</style>
</head>
<body>
<header>
<div class="backgr">
<nav class="" role="navigation" id="navbar">
<div class="">
<div class="logo">
<a class="logo-text" href="{% url 'home' %}"><h3>Uptown<span>Ask</h3></span></a>
</div>
<ul class="main-nav">
{% if user.is_authenticated %}
<li class="active">Home</li>
<li>Stuck? Ask A question</li>
<li>Groups</li>
<li>My Post History</li>
<li>Log out</li>
{% else %}
<li class="active">Home</li>
<li>Groups</li>
<li><a href="{% url 'accounts:login' %}" >Log in</a></li>
<li><a href="{% url 'accounts:signup' %}" >Sign up</a></li>
<li>Contact</li>
{% endif %}
</ul>
</header>
<section>
{% block post_content %}
<div class="col-md-8">
{% include "posts/_post.html" %}
</div>
{% endblock %}
<a class="add-comment" href="{% url 'posts:add_comment_to_post' pk=post.pk%}">Answer This Question</a>
</div>
{% for comment in post.comments.all %}
<br>
{% if user.is_authenticated or comment.approved_comment %}
{{ comment.created_date }}
{% if not comment.approved_comment %}
<a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
<a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a>
{% endif %}
<p>{{ comment.text|safe|linebreaks }}</p>
<p>Posted by: <strong>{{ comment.author }}</strong></p>
{% endif %}
{% empty %}
<p>No comments posted.</p>
{% endfor %}
</div>
</section>
<footer class="footer-distributed">
<div class="footer-left">
<h3>Uptown<span>Ask</span></h3>
<p class="footer-links">
Home
·
Blog
·
About
·
Contact
</p>
<p class="footer-company-name">Ask Uptown © 2017</p>
</div>
<div class="footer-center">
<div class="adress-sec">
<p class="p-adress">Address: Tripoli Street, Algeria Road, Mirdif Area - Dubai, United Arab Emirtes</p>
</div>
<div class="phone-sec">
<p>Phone: 04 251 5001</p>
</div>
<div class="email-sec">
<p class="p-email">Email: Uptownschool#gmail.com</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
</p>
<div class="icons">
<img src="images/twitter.png" alt="Twitter" class="twitter" >
<img src="facebook.png" alt="Facebook" class="facebook" >
<img src="insta.png" alt="Instagram" class="instagram" >
</div>
</div>
</footer>
</body>
</html>
I can't seem to find the fix for this advanced error in django. Could anyone plz help.
I've been trying to solve it but could not, each comment is suppose to be link to a comment.
Thanks
The error points to
return redirect('posts:single', pk=post.pk)
Which may be causing the error because it expects you to pass a username argument in addition to the pk.