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-->
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 */
}
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 trying to charge a subscription on Stripe API in test-mode and my charge keeps getting declined. Everything seems to be working fine, except I cannot retrieve the "stripeToken" via POST. I tested this by printing the various variables I need and they all work fine... but when it comes to printing stripeToken, I get this error:
MultiValueDictKeyError at /memberships/payment/
'stripeToken'
Request Method: POST
Request URL: http://127.0.0.1:8000/memberships/payment/
Django Version: 2.2
Exception Type: MultiValueDictKeyError
Exception Value:
'stripeToken'
Exception Location: /Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/django/utils/datastructures.py in __getitem__, line 80
Python Executable: /Library/Frameworks/Python.framework/Versions/3.8/bin/python3
Python Version: 3.8.2
Python Path:
['/Users/fred/Documents/yonder/videoservice',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python38.zip',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/lib-dynload',
'/Users/fred/Library/Python/3.8/lib/python/site-packages',
'/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages']
Server time: Wed, 1 Apr 2020 16:20:53 -0700
Here is my view code:
def PaymentView(request):
user_membership = get_user_membership(request)
try:
selected_membership = get_selected_membership(request)
except:
return redirect(reverse("memberships:select"))
publishKey = settings.STRIPE_PUBLISHABLE_KEY
if request.method == "POST":
token = request.POST['stripeToken']
try:
token = request.POST['stripeToken']
customer = stripe.Customer.retrieve(user_membership.stripe_customer_id)
customer.source = token # 4242424242424242
customer.save()
subscription = stripe.Subscription.create(
customer=user_membership.stripe_customer_id,
items=[
{ "plan": selected_membership.stripe_plan_id },
]
)
return redirect(reverse('memberships:update-transactions',
kwargs={
'subscription_id': subscription.id
}))
except:
messages.info(request, "An error has occurred, investigate it in the console")
context = {
'publishKey': publishKey,
'selected_membership': selected_membership
}
return render(request, "memberships/membership_payment.html", context)
And here is my HTML code
{% extends 'courses/base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" type="text/css" href="{% static 'css/checkout.css' %}">
<div class="container">
<div class="row">
<h1>Payment</h1>
<div class="col-sm-4 col-md-4">
<p>Selected Membership: {{ selected_membership }}</p>
<p>Price: ${{ selected_membership.price }}<small>/mo.</small></p>
<button onclick="toggleDisplay();" class="btn btn-warning" style="width: 100%;">Checkout with a credit card</button>
<div id="collapseStripe" class="wrapper">
<script src="https://js.stripe.com/v3/"></script>
<form action="." method="post" id="payment-form">
{% csrf_token %}
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame3" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-8a434729e4eb82355db4882974049278.html#style[base][color]=%2332325d&style[base][lineHeight]=18px&style[base][fontFamily]=%22Helvetica+Neue%22%2C+Helvetica%2C+sans-serif&style[base][fontSmoothing]=antialiased&style[base][fontSize]=16px&style[base][::placeholder][color]=%23aab7c4&style[invalid][color]=%23fa755a&style[invalid][iconColor]=%23fa755a&componentName=card&wait=false&rtl=false&features[noop]=false&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController0" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; height: 18px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"><input class="__PrivateStripeElement-safariInput" aria-hidden="true" tabindex="-1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
</div>
<div id="stripe-token-handler" class="is-hidden">Success! Got token: <span class="token"></span></div>
</div>
</div>
</div>
<!-- script for the stripe form -->
<script src="{% static 'js/checkout.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- script for toggling display of the form -->
<script type="text/javascript">
function toggleDisplay() {
var x = document.getElementById("collapseStripe");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
</script>
{% endblock content %}
And here is checkout.js
// Create a Stripe client.
var stripe = Stripe('123456'); //key goes here
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
var successElement = document.getElementById('stripe-token-handler');
document.querySelector('.wrapper').addEventListener('click', function() {
successElement.className = 'is-hidden';
});
function stripeTokenHandler(token) {
successElement.className = '';
successElement.querySelector('.token').textContent = token.id;
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
My Public/Secret API Keys are in my settings file and I've double-checked them; they're both correct.
What am I doing wrong here? This is my first Django/Python project. Appreciate some insight. Thanks.
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;
}
I am learning web development using django framework. I have little trouble in running python code in an html page. I need to iterate through a list of strings which basically contains the paths of images that I want to show in a carousel. I am getting this error "Invalid block tag on line 83: 'with.i', expected 'endblock'. Did you forget to register or load this tag?" in galleryPage.html file when I try to open that page. These are the few lines of code that I've written so far
/views.py/
def galleryPage(request):
from os import listdir
from os.path import isfile, join
ImageList = []
imagePath = "static/images/gallery/"
for f in listdir(imagePath):
temp = join(imagePath, f)
if isfile(temp):
temp = "../" + temp
ImageList.append(temp)
return render(request, "galleryPage.html", {"imageList": ImageList})
/galleryPage.html/
{% extends 'base.html' %}
{% block title %} GALLERY {% endblock %}
{% block slideshow %}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
{% endblock %}
{% block content %}
<div class="slideshow-container">
{% with.i = 0 %}
<indent>
{{ for image in imageList.0: }}
{% ++i %}
<div class="mySlides fade">
<div class="numbertext"> {% i %} / {{ imageList.size() }} </div>
<img src="{{ image }}" style="width:100%">
<div class="text">Caption Text</div>
</div>
</indent>
{% endwith %}
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
{% endblock %}
{% with.i = 0 %}
should be
{% with i=0 %}
Why do you have imageList.0 instead of imageList?
Also, I think you may want to consider combining your current "with" and "for" into one "for" loop like in the docs I posted above:
{% for key, image in imageList %}
<div class="mySlides fade">
<div class="numbertext"> {% key %} / {{ imageList.size() }} </div>
<img src="{{ image }}" style="width:100%">
<div class="text">Caption Text</div>
</div>
{% endfor %}
This way you won't need to increment i yourself and you take away some complexity (and some sources of errors).