We Keep Coding

I would like to make a Pinterest Layout on my Feed?

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 */
}

Display data from a Django model as a Tree view

I have a Django model as shown below
class operationTemplates(models. Model):
templateID = models.IntegerField(primary_key = True)
templateCategory = models.CharField(max_length=255, blank=True, null=True)
templateName = models.CharField(max_length=400, blank=True, null=True)
templatePreopBundle = models.CharField(max_length=255, blank=True, null=True)
templatePosition = models.CharField(max_length=20, blank=True, null=True)
I want to display the data as a tree view using either CSS and html.
Tree view should order the data by "templateCategory" as follows
- Category1
|__templateName1
|__templateName2
|__templateName3
+ Category2
- Category3
|__templateName6
|__templateName7
|__templateName9
|__templateName10
my views.py has the following;
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
group['cat'] = operationTemplates.objects.filter(templateCategory=cat).values()
context = {
'catergoryList': list,
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context)
In my template file I am using CSS and html to display a tree structure as shown above, where templates are ordered under template categories. (CSS code not shown)
<td colspan="2">
{% for cat in catergoryList %}
<ul id="parent_node">
<li><span class="caret">{{ cat }}</span></li>
{% for x in group.cat %}
<ul class="nested_child">
<li>{{x.templateName}}</li>
</ul>
{% endfor %}
</ul>
% endfor %}
</td>
Unfortunately, the above code only displays the parent nodes and the child nodes remain blank. Can someone please help.
I am using Django2 and Python3.7
Thanks in advance.

Bootstrap 4/5 Seems to come with a tree view, so I'd say that might be the easiest way of doing this..
View
def do(request):
packed = {}
for cat in operationTemplates.objects.all().values_list('templateCategory', flat=True).distinct():
packed['cat'] = operationTemplates.objects.filter(templateCategory=cat)
data = {
'packed': packed
}
return render(request, 'thing.html', data)
Template
Uses Bootstrap 4
see: https://mdbootstrap.com/docs/b4/jquery/plugins/treeview/
<script>
// Treeview Initialization
$(document).ready(function() {
$('.treeview-animated').mdbTreeview();
});
</script>
<div class="treeview-animated w-20 border mx-4 my-4">
<h6 class="pt-3 pl-3">Things</h6>
<hr>
<ul class="treeview-animated-list mb-3">
{% for cat, list in packed %}
<li class="treeview-animated-items">
<a class="closed">
<i class="fas fa-angle-right"></i>
<span>{{cat}}</span>
</a>
<ul class="nested">
{% for i in list %}
<li>
<div class="treeview-animated-element">{{i.name}}
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>

views.py
def opnoteAnnotatorHome(request):
group = {}
list = operationTemplates.objects.order_by().values_list('templateCategory', flat=True).distinct()
for cat in list:
opNames = {}
opNames = operationTemplates.objects.filter(templateCategory=cat).values()
group[cat] = opNames
context = {
'group': group
}
return render(request, 'opnoteAnnotatorHome.html', context )
CSS file has the following code
/* ————————————————————–
Tree core styles
*/
.tree { margin: 1em; }
.tree input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.tree input ~ ul { display: none; }
.tree input:checked ~ ul { display: block; }
/* ————————————————————–
Tree rows
*/
.tree li {
line-height: 1.2;
position: relative;
padding: 0 0 1em 1em;
}
.tree ul li { padding: 1em 0 0 1em; }
.tree > li:last-child { padding-bottom: 0; }
/* ————————————————————–
Tree labels
*/
.tree_label {
position: relative;
display: inline-block;
/*background: #fff;*/
}
label.tree_label { cursor: pointer; }
label.tree_label:hover { color: #12d7e6; }
/* ————————————————————–
Tree expanded icon
*/
label.tree_label:before {
background: #000;
color: #fff;
position: relative;
z-index: 1;
float: left;
margin: 0 1em 0 -2em;
width: 1em;
height: 1em;
border-radius: 1em;
content: '+';
text-align: center;
line-height: .9em;
}
:checked ~ label.tree_label:before { content: '–'; }
/* ————————————————————–
Tree branches
*/
.tree li:before {
position: absolute;
top: 0;
bottom: 0;
left: -.5em;
display: block;
width: 0;
border-left: 1px solid #777;
content: "";
}
.tree_label:after {
position: absolute;
top: 0;
left: -1.5em;
display: block;
height: 0.5em;
width: 1em;
border-bottom: 1px solid #777;
border-left: 1px solid #777;
border-radius: 0 0 0 .3em;
content: '';
}
label.tree_label:after { border-bottom: 0; }
:checked ~ label.tree_label:after {
border-radius: 0 .3em 0 0;
border-top: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 0;
border-left: 0;
bottom: 0;
top: 0.5em;
height: auto;
}
.tree li:last-child:before {
height: 1em;
bottom: auto;
}
.tree > li:last-child:before { display: none; }
.tree_custom {
display: block;
background: #eee;
padding: 1em;
border-radius: 0.3em;
}
my template file has the following code to display the tree view
<!-- tree view -->
<ul class="tree">
<li>
<input type="checkbox" id="c0" />
<label class="tree_label" for="c0">Vascular Surgery</label>
<ul>
{% for k, v in group. Items %}
<li>
<input type="checkbox" checked="checked" id="c{{forloop.counter}}" />
<label for="c{{forloop.counter}}" class="tree_label">{{ k }}</label>
<ul>
{% for x in v %}
<li><span class="tree_label">{{ x.templateName }}</span></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
</ul>
<!-- tree view end-->

Django Authentication method is not working

I am trying to use the default Django from django.contrib.auth authenticate() method to authenticate if the user exists. I am doing this right after the user registers. The user registers and their username, email, and password is inputted into the database then they are taken to the login page but it is not working.
Here is my views.py
from django.shortcuts import render,redirect
from .models import Student
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login
# Create your views here.
def index(request):
if request.method == "POST":
fname = request.POST.get('fname')
lname = request.POST.get('lname')
pnumber = request.POST.get('pnumber')
email = request.POST.get('email')
password = request.POST.get('password')
student = Student(fname = fname, lname = lname, pnumber = pnumber, email = email,
password = password)
student.save()
user = User.objects.create_user(fname, email, password)
user.save()
return render(request, ('SignUpPage.html'))
def loginUser(request):
if request.method == "POST":
email = request.POST.get('email')
password = request.POST.get('password')
user = authenticate(email=email, password=password)
if user is not None:
login(request, user)
return redirect('mainPage')
else:
return render(request, ('LoginPage.html'))
return render(request, ('LoginPage.html'))
def mainPage(request):
return render(request, ('MainPage.html'))
Here is my urls.py
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('login', views.loginUser, name="login"),
path('mainPage',views.mainPage, name='mainPage')
]
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;1,300&display=swap"
rel="stylesheet"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: "Raleway", sans-serif;
font-weight: bolder;
}
body {
background-image: url(clean-medical-background_53876-97927.webp);
background-repeat: no-repeat;
background-size: 1920px 975px;
}
.wrapper {
min-height: 90vh;
display: flex;
justify-content: right;
align-items: center;
margin-right: 500px;
}
.login_form {
background: white;
padding: 25px;
border-radius: 50px;
width: 400px;
}
.login_form .title {
text-align: center;
font-size: 30px;
text-transform: uppercase;
color: #77d5cc;
letter-spacing: 4px;
font-weight: 900;
}
.form_wrap {
margin-top: 35px;
}
.form_wrap .input_wrap {
margin-bottom: 20px;
}
.form_wrap .input_wrap:last-child {
margin-bottom: 10;
}
.form_wrap .input_wrap label {
display: block;
margin-bottom: 3px;
}
.form_wrap input[type="text"] {
width: 100%;
border-radius: 3px;
border: 1.3px solid #9597a6;
padding: 10px;
outline: none;
}
.form_wrap input[type="password"] {
width: 100%;
border-radius: 3px;
border: 1.3px solid #9597a6;
padding: 10px;
outline: none;
}
.form_wrap input[type="text"]:focus {
border-color: #77d5cc;
}
.form_wrap input[type="password"]:focus {
border-color: #77d5cc;
}
.form_wrap .login_btn {
text-align: center;
width: 100%;
background: #77d5cc;
padding: 10px;
border: 0;
color: white;
font-size: 17px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.form_wrap .login_btn:hover {
background: #bde9e3;
}
.form_wrap p {
font-family: "Raleway", sans-serif;
text-align: center;
}
.form_wrap a {
display: block;
text-align: center;
width: 30%;
margin-left: 122px;
background: #77d5cc;
padding: 10px;
border: 0;
color: white;
font-size: 15px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.form_wrap a:hover{
background-color: #bde9e3;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="login_form">
<div class="title">
<label>Login</label>
</div>
<form action="/login" method="POST">
{% csrf_token %}
<div class="form_wrap">
<div class="input_wrap">
<label for="email">Email Address</label>
<input type="text" name = "email" id="email" />
</div>
<div class="input_wrap">
<label for="password">Password</label>
<input type="password" name = "password" id="password" />
</div>
<div class="input_wrap">
<input type="submit" value="Login" class="login_btn" />
</div>
<div class="input_wrap">
<p>Don't Have Account! Sign Up Here</p>
</div>
<div class="input_wrap">
Sign Up
</div>
</div>
</form>
</div>
</div>

You are trying to authenticate with email, basic Django's auth is with username. If you want to use email, you have to tell Django that. Add to your User model this:
class User(...):
...
USERNAME_FIELD = "email"
...
Also you said that User registers username but in view you uses only fname and lname. Please be specific and read what you write, otherwise we cannot help you.

django contrib message appearing behind my input instead on top

I have a contrib message that appear when the user login information is not valid!
messages.info(request, "Sorry, your password was incorrect.")
but the problem is that the pessage pop behind my input(So we can't clearly see the message) , I want to make it appear on top on my Login input....I tried to change the code position of the {{ message }} on my html files but it didn't worked. Maybe the problem is on my css files? Thanks for helping....
login.html
{% load static %}
<link rel="stylesheet" href="{% static "test.css" %}">
<head>
<div class="container">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
</div>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Include the above in your HEAD tag -->
</head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="main">
<div class="container">
<center>
<div class="middle">
<div id="login">
<form action="" method="post">
{% csrf_token %}
<fieldset class="clearfix">
<p ><span class="fa fa-user"></span><input type="text" name="username" Placeholder="Username" required></p> <!-- JS because of IE support; better: placeholder="Username" -->
<p><span class="fa fa-lock"></span><input type="password" name="password" Placeholder="Password" required></p> <!-- JS because of IE support; better: placeholder="Password" -->
<div>
<span style="width:48%; text-align:left; display: inline-block;"><a class="small-text" href="#">Forgot
password?</a></span>
<span style="width:50%; text-align:right; display: inline-block;"><input type="submit" value="Sign In"></span>
</div>
</fieldset>
<div class="clearfix"></div>
</div> <!-- end login -->
<div>
<img src = "https://i.imgur.com/Ozr5pDW.png">
<div class="clearfix"></div>
</div>
</div>
</center>
</div>
</div>
test.css
#charset "utf-8";
#import url//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
div.main{
background: #0264d6; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #0264d6 1%,#1c2b5a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
height:calc(100vh);
width:100%;
}
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
* {
box-sizing: border-box;
margin:0px auto;
&:before,
&:after {
box-sizing: border-box;
}
}
body {
color: #606468;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0;
}
a {
color: #eee;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
input {
border: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
padding: 0;
-webkit-appearance: none;
}
p {
line-height: 1.5em;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
.container {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
}
/* ---------- LOGIN ---------- */
#login form{
width: 250px;
}
#login, .logo{
display:inline-block;
width:40%;
}
#login{
border-right:1px solid #fff;
padding: 0px 22px;
width: 59%;
}
.logo{
color:#fff;
font-size:50px;
line-height: 125px;
}
#login form span.fa {
background-color: #fff;
border-radius: 3px 0px 0px 3px;
color: #000;
display: block;
float: left;
height: 50px;
font-size:24px;
line-height: 50px;
text-align: center;
width: 50px;
}
#login form input {
height: 50px;
}
fieldset{
padding:0;
border:0;
margin: 0;
}
#login form input[type="text"], input[type="password"] {
background-color: #fff;
border-radius: 0px 3px 3px 0px;
color: #000;
margin-bottom: 1em;
padding: 0 16px;
width: 200px;
}
#login form input[type="submit"] {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #000000;
color: #eee;
font-weight: bold;
/* margin-bottom: 2em; */
text-transform: uppercase;
padding: 5px 10px;
height: 30px;
}
#login form input[type="submit"]:hover {
background-color: #d44179;
}
#login > p {
text-align: center;
}
#login > p span {
padding-left: 5px;
}
.middle {
display: flex;
width: 600px;
}

redirection in html failed

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' %}