My CSS on my production deployment different than my local run.
Diff between /static/css/mezzanine.css on local and PROD
/* Navigation */
2 - body {padding-top:45px;}
3 - #media (max-width:979px){
4 - body {padding-top:0;} .brand {padding-right:20px !important;}}
2 + #media (max-width:979px){.brand {padding-right:20px !important;}}
5 3 .navbar {z-index:500;}
6 - .navbar .btn {margin:7px 0;}
7 4 .navbar-inner {border-radius:0;}
8 - .navbar-search * {margin:0 2px !important;}
9 - .navbar-search .search-query {width:120px; border-radius:3px}
5 + .navbar-search {margin-left:10px; margin-top:4px;}
6 + .navbar-search * {border-radius:4px !important; margin:0 2px !important;}
10 7 .navbar-search select {width:auto;}
11 - .navbar-text {float:left; font-size:12px; font-style:italic; margin:0; opacity:.6;}
8 + .navbar-search .btn {margin-top:1px !important; margin-left:4px !important;}
9 + .tagline {float:left; font-size:12px; font-style:italic; margin:9px 5px 0 -4px; color:#fff; opacity:.5;}
12 10 .breadcrumb {margin:20px 0 25px 0;}
13 11 .breadcrumb .divider {margin:0 5px;}
14 12 .breadcrumb strong {color:#333;}
15 13 ul.nav li.dropdown:hover ul.dropdown-menu {display:block;}
16 14 .pull-right .dropdown-menu a {text-align:right;}
17 15 .tree {padding:8px;}
18 16 .tree li {margin:3px 0;}
19 17 footer {background:rgba(220,220,220, 0.1); padding:30px 0; text- align:center; margin-top:40px;}
20 18 footer .container {text-align:left; display:inline-block; width:auto;}
21 19 footer li {float:left; list-style-type:none;}
22 20 footer li li {float:none; clear:both; width:120px; padding:10px 0; margin-right:30px;}
23 21 footer p {margin-top:40px; text-align:center; font-size:12px;}
24 22 footer .separator {opacity:0.3; margin:0 10px;}
25 23 #media (max-width: 979px) {footer .separator {display:block; visibility:hidden; width:1px; height:1px;}}
26 24 .pagination {margin:40px 0;}
27 25 .pagination p {float:left;}
28 - .alert {margin-top:15px;}
Here is my test site.
http://ec2-54-227-129-183.compute-1.amazonaws.com/
It looks like it's cached in your browser, the version being served is your modified one. Try a full refresh or viewing in a private/incognito browser session to quickly check.
To help with upgrades you could create a custom CSS file in your site's app that overrides the Mezzanine defaults. You'll inherit Mezzanine's default styles as they change with newer versions:
(templates/base.html)
{% compress css %}
...
<link rel="stylesheet" href="{{ STATIC_URL }}css/mezzanine.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/mysite.css">
...
{% block extra_css %}{% endblock %}
{% endcompress %}
Related
I am adding incremental bullet points inside a div and it doesn't seem to work.
pres.Rmd
---
title: "Incremental in Div"
output:
xaringan::moon_reader:
encoding: 'UTF-8'
self_contained: false
css: ['default','styles.css']
---
## No div
- Point 1
--
- Point 2
---
## Div direct
Div style is defined directly in HTML/CSS.
<div style="width: 49%;float: left;margin-right: 0.5%;margin-left: 0.5%;">
- Point 1
--
- Point 2
</div>
--
<div style="width: 49%;float: right;margin-right: 0.5%;margin-left: 0.5%;">
- Point 1
--
- Point 2
</div>
---
## Div styles
Div style is defined through classes in the styles.css file.
.pull-left-50[
- Point 1
--
- Point 2
]
--
.pull-right-50[
- Point 1
--
- Point 2
]
styles.css
.pull-right-50 {
width: 49%;
float: right;
margin-right: 0.5%;
margin-left: 0.5%;
}
.pull-left-50 {
width: 49%;
float: left;
margin-right: 0.5%;
margin-left: 0.5%;
}
Try this:
---
title: "Incremental in Div"
output:
xaringan::moon_reader:
encoding: 'UTF-8'
self_contained: false
css: ['default', "style.css"]
---
.pull-left-50[
- Point 1
{{content}}
]
--
- Point 2
{{content}}
--
- Point 3
{{content}}
--
- Point 4
{{content}}
--
- Point 5
--
.pull-right-50[
- Point 6
{{content}}
]
--
- Point 7
{{content}}
--
- Point 8
{{content}}
--
- Point 9
{{content}}
--
- Point 10
I'm aware of how to work with the grid in:
https://ionicframework.com/docs/theming/responsive-grid/
But what I don't understand is how to structure it - for landscape vs portrait ?
I'm looking for a way to do this, but col-[xs|sm|md] has no affect ( only on devices it has affect - i.e: phone vs tablet )
Portrait
Landscape
You should edit you .scss and use css media queries to get what you want.
If you want to apply this for whole apps you can edit app.scss or else you can edit your-page.scss file.
#media (orientation: landscape) {
.col {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
}
further more, you may read this https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries
Edited
If your columns are dynamic, it can't be done automatically, you need to add class to your ion-col, e.g.
<ion-col class="col-class-1">This text 1</ion-col>
<ion-col class="col-class-2">This text 2</ion-col>
and edit your scss
#media (orientation: landscape) {
.col.col-class-1 {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
.col.col-class-2 {
flex: 0 0 100px;
width: 100px;
max-width: 100px;
}
}
Try with:
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Documentation: https://ionicframework.com/docs/v1/components/#grid-responsive
Found the issue,
Regular grid of Ionic 2 does covert this, but the thing was that iPhone 5 for example has:
Landscape, W: 568px, H: 320px
Portrait , W: 320px, H: 568px
But the Ionic 2 defaults is:
xs 0
sm 576px <= Landscape width (568px) still less than that
So I've edited the file:
variables.scss
$grid-breakpoints: (
xs: 0,
sm: 420px, <= Lowered the value
md: 768px,
lg: 1024px
);
Which made the columns in the grid to work out of the box
<ion-grid>
<ion-row>
<ion-col col-12 col-sm-6 *ngFor="let card of cards">
Card X
</ion-col>
</ion-row>
</ion-grid>
Portrait: will show a single card in a "row" (stacked cards, col-12 )
Landscape: will show two cards in a "row" (12/col-6 = 2 columns in a row)
I am putting together a Cycle2-based carousel where, essentially, every other image should be a black and white image. So, on first load it would be something like this:
IMAGE A = B&W
IMAGE B = Color
IMAGE C = B&W
IMAGE D = NOT SHOWN
Once the slideshow advances, it would be something like this:
IMAGE A = NOT SHOWN
IMAGE B = B&W
IMAGE C = Color
IMAGE D = B&W
I discovered Gianluca Guarini's jQuery.BlackAndWhite plugin which handles the black and white conversion by adding the class .bwWrapper. If I use the scrollHorz parameter, the two work nicely together, but not when using carousel. The carousel runs as expected, but BlackAndWhite isn't coming into play.
My code is below. The only difference between the two blocks is one is in a DIV. My guess is jQuery.BlackAndWhite runs on (window).load and Cycle2 carousel enters the picture after that?
Any thoughts on how to get these to cooperate?
<h3>Cycle2</h3>
<div id="slideshow">
<img src="/assets/images/img01.jpg" height="200" alt="test image">
<img src="/assets/images/img02.jpg" height="200" alt="test image">
<img src="/assets/images/img03.jpg" height="200" alt="test image">
<img src="/assets/images/img04.jpg" height="200" alt="test image">
<img src="/assets/images/img05.jpg" height="200" alt="test image">
</div>
<div class="center">
Prev
Next
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/jquery.cycle2.js"></script>
<script src="/assets/js/jquery.cycle2.carousel.min.js"></script>
<script src="/assets/js/jquery.BlackAndWhite.js"></script>
<script>
$(window).load(function() {
$('#slideshow').cycle({
fx: 'carousel',
speed: '1000',
slides: '> a',
next: '#next',
prev: '#prev'
});
$('.bwWrapper').BlackAndWhite({
hoverEffect: false,
invertHoverEffect: false
});
});
</script>
You can just use CSS to make the images grayscale. Here is a cross-browser compatible style that I've used in the past. The first filter is for Firefox, second for IE, and third for the other modern browsers.
.bwWrapper img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
I have an issue building my sencha touch 2 app for production, using this command: "sencha app build production". I see following issue:
C:\xampp\htdocs\eiamobile\eiamobile\i>sencha app build production
[INFO] Deploying your application to C:\xampp\htdocs\eiamobile\eiamobile\i\build\production
[INFO] Copied sdk/sencha-touch.js
[INFO] Copied app.js
[ERROR] UNKNOWN, unknown error 'C:\xampp\htdocs\eiamobile\eiamobile\i\build\production\http:'
I see the ONLY if I use external JS (google geometry) file in app.json file:
"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
{
"path": "http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
]
ANY help will be appreciated
EDIT:
Adding my index.html file
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>eia-sencha</title>
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Try to add "remote": true in app.json
http://mitchellsimoens.com/2012/07/sencha-touch-2/going-remote-with-sencha-command/
From Sencha Touch documentation
To use this component you must include an additional JavaScript file from Google:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
So, I guess you could try to load the API this way, which is actually how they do it in the map example that comes with the framework.
Also if google is undefined when your app starts, I guess you can load GM API asynchronously :
http://www.senchafiddle.com/#MhAME
Hope this helps
I use grappelly plugin. When I try open the admin page (/admin) I got TemplateSyntaxError.
It says 'get_generic_relation_list' is invalid block tag.
TemplateSyntaxError at /admin/
Invalid block tag: 'get_generic_relation_list', expected 'endblock'
Request Method: GET
Request URL: http://DOMAIN_NAME/admin/
Django Version: 1.4
Exception Type: TemplateSyntaxError
Exception Value:
Invalid block tag: 'get_generic_relation_list', expected 'endblock'
Exception Location: /opt/python27/django/1.4/lib/python2.7/site-packages/django/template/base.py in invalid_block_tag, line 320
Python Executable: /opt/python27/django/1.4/bin/python
Python Version: 2.7.0
Python Path:
['/home/vhosts/DOMAIN_NAME/httpdocs/media',
'/home/vhosts/DOMAIN_NAME/private/new_malinnikov/lib',
'/home/vhosts/DOMAIN_NAME/httpdocs/',
'/home/vhosts/DOMAIN_NAME/private/new_malinnikov',
'/home/vhosts/DOMAIN_NAME/private/new_malinnikov',
'/home/vhosts/DOMAIN_NAME/private',
'/opt/python27/django/1.4',
'/home/vhosts/DOMAIN_NAME/httpdocs',
'/opt/python27/django/1.4/lib/python2.7/site-packages/setuptools-0.6c12dev_r88846-py2.7.egg',
'/opt/python27/django/1.4/lib/python2.7/site-packages/pip-0.8.1-py2.7.egg',
'/opt/python27/django/1.4/lib/python27.zip',
'/opt/python27/django/1.4/lib/python2.7',
'/opt/python27/django/1.4/lib/python2.7/plat-linux2',
'/opt/python27/django/1.4/lib/python2.7/lib-tk',
'/opt/python27/django/1.4/lib/python2.7/lib-old',
'/opt/python27/django/1.4/lib/python2.7/lib-dynload',
'/opt/python27/lib/python2.7',
'/opt/python27/lib/python2.7/plat-linux2',
'/opt/python27/lib/python2.7/lib-tk',
'/opt/python27/django/1.4/lib/python2.7/site-packages',
'/opt/python27/lib/python2.7/site-packages/setuptools-0.6c11-py2.7.egg',
'/opt/python27/lib/python2.7/site-packages/flup-1.0.3.dev_20100525-py2.7.egg',
'/opt/python27/lib/python2.7/site-packages/virtualenv-1.5.1-py2.7.egg',
'/opt/python27/lib/python2.7/site-packages/SQLAlchemy-0.6.4-py2.7.egg',
'/opt/python27/lib/python2.7/site-packages/SQLObject-0.14.1-py2.7.egg',
'/opt/python27/lib/python2.7/site-packages/FormEncode-1.2.3dev-py2.7.egg',
'/opt/python27/lib/python2.7/site-packages/MySQL_python-1.2.3-py2.7-linux-x86_64.egg',
'/opt/python27/lib/python2.7/site-packages/psycopg2-2.2.2-py2.7-linux-x86_64.egg',
'/opt/python27/lib/python2.7/site-packages/pysqlite-2.6.0-py2.7-linux-x86_64.egg',
'/opt/python27/lib/python2.7/site-packages',
'/opt/python27/lib/python2.7/site-packages/PIL']
Server time: Вск, 7 Окт 2012 04:19:42 +0700
Error during template rendering
In template /home/vhosts/DOMAIN_NAME/httpdocs/templates/grappelli/admin/base.html, error at line 28
Invalid block tag: 'get_generic_relation_list', expected 'endblock'
18 <!--[if lt IE 8]>
19 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
20 <![endif]-->
21 {% block javascripts %}
22 <script type="text/javascript" src="{% admin_media_prefix %}jquery/jquery-1.3.2.min.js"></script>
23 <script type="text/javascript" src="{% admin_media_prefix %}js/admin/Bookmarks.js"></script>
24 <script type="text/javascript">
25 // Admin URL
26 var ADMIN_URL = "{% get_admin_url %}";
27 // Generic Relations
28 {% get_generic_relation_list %}
29 // Get Bookmarks
30 $(document).ready(function(){
31 $.ajax({
32 type: "GET",
33 url: '{% url grp_bookmark_get %}',
34 data: "path=" + escape(window.location.pathname + window.location.search),
35 dataType: "html",
36 success: function(data){
37 $('ul#bookmarks').replaceWith(data);
38 }
Yeah, thanks, I got it already. I used grappelli version 2.4, but I needed version 2.0.