How to copy parent styles in stylus - properties

Is there more pretty variant of extending such things:
.mt1
...
#New_Tunnel
...
.livraison
...
.droite
...
.type_livraison
#extends .mt1 #New_Tunnel .livraison .droite
Something like:
.mt1
...
#New_Tunnel
...
.livraison
...
.droite
...
.type_livraison
#extends &
Thus, I just want to copy full list of properties of the parent (I have added this line just because stackoverflow forced me to :|)

This is somewhat possible. Have a look at this code, it does what you want:
.mt1
#New_Tunnel
.livraison
.droite
color: red
name = selector()
.type_livraison
#extends {name}
this produces:
.mt1 #New_Tunnel .livraison .droite,
.mt1 #New_Tunnel .livraison .droite .type_livraison {
color: red;
}

Related

Django - Parameter passed to the template but it can not use in if statement

I try to pass the variable to another page using GET method in django. It is possible for me to do that, but the problem is that the variable that I passed is not available in the if statement. I try to print out the value then it worked fine. Then I try to use it inside if statement then I come to know that it was not working properly. I have no idea regarding that. Can anyone help me? Thank you very much.
This is my views:
def test(request):
Test = Photos.objects.all()
ID = request.GET['id']
Context = {
'ID' : ID,
'test' : Test,
'testing' : 3,
}
return render(request, 'test.html', Context)
def tests(request):
tests = Photos.objects.all()
Context = {
'tests' : tests,
}
return render(request, 'tests.html', Context)
This is my urls.py:
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^$', 'flashapp.views.home'),
url(r'^play$', 'flashapp.views.play'),
url(r'^test$', 'flashapp.views.test'),
url(r'^tests$', 'flashapp.views.tests'),]
In tests.html I have buttons for passing id to test.html using GET method.
This is tests.html:
</head>
<body>
<h1>Welcome to tests pages.....</h1>
{% for i in tests %}
Click For {{ i.id }}<br>
{% endfor %}
</body>
This is test.html:
<html>
<head>
</head>
<body>
<h1>Welcome to Test Page</h1>
<h1>{{ ID }}</h1>
{% for i in test %}
<p>{{ i.id }}..........{{ testing }}.........{{ ID }}</p>
{% if ID == i.id %}
<p>Test</p>
<p>Working....ID = {{ i.id }}</p>
{% else %}
<p>In else</p>
{% endif %}
{% endfor %}
</body>
this is tests.html
this is test.html
I suppose to see the "Working....." but, it gone to else block. I have no idea. Help me please!!!
Thank you very much.
I edited my original answer based on your comment
You are passing a QuerySet as your Test object instead of an object in the first view, so it doesn't have an id property.
When you do this:
def test(request):
Test = Photos.objects.all()
...
You are getting a collection of all the Photos objects into the Test variable, which is not what you want, you only want one instance of Photos. For that kind of queries, you need to use the .get method, that returns a single instance or an exception in case it doesn't find it.
Test = Photos.objects.get(pk=request.GET['id'])
Your code now should look like this:
def test(request):
ID = request.GET['id']
Test = Photos.objects.get(pk=ID)
Context = {
'ID' : ID,
'test' : Test,
'testing' : 3,
}
return render(request, 'test.html', Context)
Now, for completeness' sake, this would fail in case the ID is not on the database, so we can do something like this:
def test(request):
try:
ID = request.GET['id']
Test = Photos.objects.get(pk=ID)
Context = {
'ID' : ID,
'test' : Test,
'testing' : 3,
}
return render(request, 'test.html', Context)
except Photos.DoesNotExist:
raise Http404("No Photo matches the given query.")
Of course, Django has its own shortcuts for these kind of things, so your code can be written like this:
from django.shortcuts import get_object_or_404
def test(request):
#I strongly suggest you don't use uppercase in variable names
id = request.GET['id']
test = get_object_or_404(pk=id)
context = {
'ID' : id,
'test' : test,
'testing' : 3,
}
return render(request, 'test.html', context)

Check if array has a value, add class if doesn't

I have a list of category names that are written in Jade.
ul
li Discussion
li Movie
li Music
li Performance
li Dance
li Theatre
And I have some json, that shows what kind of categories are added to a specific event:
…
values: [
{
ordinal: 50469,
db_value: 626,
id: 50469,
value: "Discussion"
},
{
ordinal: 50470,
db_value: 623,
id: 50470,
value: "Dance"
}
],
…
I have a route, that gets the category values:
res.render("event", {
categories: data.result.properties.category.values
})
How can I achieve an outcome like this, that an if/else checks if the value equals the same thing that's in the li tag and by this adds a class .unactive, if it doesn't exhist in the json array:
<ul>
<li>Discussion</li>
<li class="unactive">Movie</li>
<li class="unactive">Music</li>
<li class="unactive">Performance</li>
<li>Dance</li>
<li class="unactive">Theatre</li>
</ul>
First, as Andrew did, i would simplify the data format. You could either do this in Node before sending it to the template, or using some JS in the template itself. I'll only edit the template here:
- categoryNames = categories.map(function(c){return c.value});
This will create an array of just the names. (And, it doesn't even need underscore.js. ;))
Now, you can simply check if a given name is in the array using indexOf():
ul
li(class=(categoryNames.indexOf("Discussion") > -1 ? "" : "inactive")) Discussion
li(class=(categoryNames.indexOf("Movie") > -1 ? "" : "inactive")) Movie
li(class=(categoryNames.indexOf("Music") > -1 ? "" : "inactive")) Music
li(class=(categoryNames.indexOf("Performance") > -1 ? "" : "inactive")) Performance
li(class=(categoryNames.indexOf("Dance") > -1 ? "" : "inactive")) Dance
li(class=(categoryNames.indexOf("Theatre") > -1 ? "" : "inactive")) Theatre
I would first massage the data a bit to a format that's easier to render, like this:
var _ = require('underscore');
var categoryNames = _.map(data.result.properties.category.values, function(value) {
return value.value;
});
// categoryNames is an array like this: ['Discussion', 'Dance']
res.render("event", {
categoryNames: categoryNames
})
Now you can get the behavior you're looking for like this:
ul
each category in categoryNames
li category
But if you really want to keep the "disabled" cateogry tags around, you can do it with an inline conditional like this:
ul
each category in ['Discussion', 'Movie', 'Music', 'Performance', 'Theatre']
li(class=(categoryNames.indexOf(category) === -1) ? "" : "inactive") #{category}

How to Set title and delete dijit.form.select in tablecontainer

I'm creating a table container, to which i'm adding select widget,
var layout1 = new dojox.layout.TableContainer({
showLabels: true,
orientation: "horiz",
cols : 2,
spacing: 5,
style: "border: solid 1px LightBlue;",
customClass : "tableContainer"
});
layout.placeAt(divContentNode);
Below is my select widget:
var ran = new dijit.form.Select(
{
id :"srz102" ,
name : "ZEND100",
title : "VAPORTforVA",
maxHeight : '100',
style:"width: 150px",
required:true,
options:v4
}
);
layout1.addChild(ran);
But with this i didn't get title for select widget,so i added
layout1.layout();
which displayed the title for select widget
Now when i try to destroy select widget i'm not able to delete the title
dijit.byId("srz102").destroyRecursive();
I guess you trying to get hold of select node and destroying. That's why your title is not deleting properly. Instead you should try catching its parent and then try destroying the child
If you are using dojo 1.7 + (AMD), you can use:
require(["dojo/dom-construct"], function(domConstruct){
// Destroy a node byId:
domConstruct.destroy("id");
})
For recursive deletion you can use :
dojo.query("id").forEach(dojo.destroy);
However you need to traverse the parent dom-node and delete each of them.
Just FYI dojo.query is very useful to get hold of any node not limited to id, you can get hold through css class like below
dojo.query(".cssClass")
Further ref :http://dojotoolkit.org/reference-guide/1.7/dojo/destroy.html

When use conditional in jade template, render result get wrong

First I want render code is:
ul
li
a
the render result should be
<ul>
<li><a></li>
</ul>
then I add conditional:
ul
- if (temp == "blog") {
li.active
- } else {
li
- }
a
but the render result is
<ul>
<li.active></li>
<a>
</ul>
what's wrong with my code? How can I get the same render result as the first one?
Try this:
ul
- if temp === "blog"
li.active
a
- else
li
a
If you prefer not to duplicate the nested a, you can use:
ul
li(class = (temp === 'blog') ? 'active' : '')
a
Also useful for menu lists and tabs, you can inline nesting like this:
ul
li: a
li: a.active
li: a
// ...etc

Sencha Touch - How to change the style of a list item based on its previous value

I have a list (xtype: 'list') and I use an XTemplate to customize it. It looks like this:
itemTpl: new Ext.XTemplate('<div>',
'<span style="display: inline-block; width: 100px">{itemName}</span>',
'<span style="display: inline-block; width: 100px">{price}</span>','</div>')
I would like to change the color of {price} (using css I guess) based on the previous and current value:
If [current value] > [previous value] color it green.
If [previous value] > [current value] color it red.
The price value is updated like this:
var itemList = Ext.getCmp('itemList');
var store = itemList.getStore();
store.getAt(i).set('price', currentPrice);
While i is the number of item (or row in the list) that is updated and currentPrice is the new value. This code is executed by a function that is called once every second.
I know there is an option to have conditions inside an XTemplate, but all the examples I saw compare the new value with a constant. How can I change the color of {price} by comparing the new value to the old one?
You may add 'color' property to store when the store has loaded/created or while it is filling/creating.
store.each(function(item, i) {
var previousItem = store.getAt(i-1);
if (previousItem) {
var previousPrice = previousItem.get('price');
var price = item.get('price');
item.set('color', (price > previousPrice) ? 'green' : 'red');
}
})
Then you can use property in template
itemTpl: new Ext.XTemplate('<div>', '<span style="display: inline-block; width: 100px; color: {color}">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>')