I have django deployed with apache2. I'm using static files collected using "./manage.py collectstatic"; noticed png images are loading very slow. Image size is only 130Kb and its taking 2500ms to load.
Following is html and css.
<img class='image1' src="{% static 'index_background.png' %}" style="width:100%;">
<div class="index_feature">test</div>
<img class='image2' src="{% static 'index_banner.png' %}">
.indexbar1 {
position: relative;
top: 0;
left: 0;
}
.imgage1 {
position: relative;
top: 0;
left: 0;
}
.image2{
position: absolute;
width: 600px;
top: 35%;
right: 5%;
}
.index_feature {
position: absolute;
top: 65%;
left: 5%;
font: 50px lato-regular, Arial, Helvetica, sans-serif;
font-weight: 900;
line-height: 150%;
color: white;
}
apache2 is deployed on ubuntu 20.04 vm with 16vcpu and 32gb memory. I could see the same issue while using vscode to run django locally without apache2. I'm missing something in django and need some help.
Related
When I run the app in localhost, it works fine. but after deployed to pythonanywhere, Login with Facebook button doesn't work.
when I refresh Login page, in console, it shows =>
Failed to load resource: https://username.pythonanywhere.com/static/facebook/js/fbconnect.js the server responded with a status of 404 (Not Found)
Refused to execute https://username.pythonanywhere.com/static/facebook/js/fbconnect.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
in template:
<button class="effect" style="width: 100%; background-color: rgb(58, 110, 255); height: 36px; border: none; color: white; border-radius: 3px; display: flex; justify-content: center;align-items: center;"><img style="height: 24px; width: 24px; background-color: white; padding: 1px; border-radius: 50%;" src="{% static 'images/fblogo.png' %}" alt=""><span style="margin-top: 2px; display: block; margin-left: 8px; font-size: 16px;"> Login with Facebook</span></button> <br>
Another problem is: CSS doesn't load in admin page
how to fix this?
Edit: now if i click "Login with facebook" button, it shows, ReferenceError: Can't find variable: allauth
what to do now?😖
So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}
I am designing a slideshow and the absolutely positioned ul of images. The absolutely positioned ul is screwing with the natural flow of the rest of the page. I know absolutely positioned elements do this. However, I was under the impression that setting the #sliding section to position: static and having height: auto !important would work. The #stuff section is showing up underneath the #sliding section. Has anybody else had to work with this before?
To be perfectly clear the actual slideshow works perfectly, but the HTML and CSS is what I am trying to solve. Any help is very appreciated.
Here is the HTML
<section id="sliding">
<img id="leftimg" src="prev.png" alt="left">
<ul class="boxslider">
<li><img class="slidingimg" src=".jpg" id="will" alt="1"></li><!-- will -->
<li><img class="slidingimg" src=".jpg" id="poa" alt="2"></li><!-- powerofattorney -->
<li><img class="slidingimg" src=".jpg" id="probate" alt="3"></li><!-- probate -->
<li><img class="slidingimg" src=".jpg" id="forming" alt="4"></li><!-- forming business -->
<li><img class="slidingimg" src=".jpg" id="contracts" alt="5"></li><!-- -->
<li><img class="slidingimg" src=".jpg" id="realestate" alt="6"></li><!-- -->
</ul>
<img id="rightimg" src="next.png" alt="right">
</section>
<section id="stuff">
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
</section>
Here is the CSS
#sliding{
position: static;
display: block;
width: 100vw;
height: auto !important;
clear: both;
}
#leftimg, #rightimg{
display: inline-block;
position: absolute;
top: 40%;
width: 50px;
z-index: 1;
}
#leftimg{
left: 1vw;
}
#rightimg{
right: 1vw;
}
.boxslider{
position: absolute;
left: 0px;
display: block;
width: 600vw;
overflow: none;
}
.slidingimg{
display: inline-block;
vertical-align: top;
width: 100vw;
height: auto;
float: left;
}
#stuff{
width: 100vw;
height: 80vh;
border-top: 8px solid green;
clear: both;
}
Here is the jsfiddle.
http://jsfiddle.net/2ruk3Lju/2/
I guess you cannot use position:absolute. Position absolute has to have the height and width explicitly assigned. I decided to try position relative since it can still be moved by jquery to create a sliding effect. This works because position:relative is still within the normal flow of the document and fixes the issue of the content below the #sliding div stacking underneath it.
I'm using CSS3 inline in the html, and since images seem to be referenced by the css stylesheet location, how can I link to images without one?
When I do this:
<input type="image" name='voteup' value="Up" src="/index/images/ArrowUp.PNG"/>
It gives me a broken link of this value:
http://localhost/index/images/ArrowUp.PNG
and this:
.myButtonDown {
background:url('images/ArrowDown.PNG') no-repeat;
cursor:pointer;
width: 36px;
height: 36px;
border: none;
}
.....
<input type="submit" name='votedown2' value="Down2" class="myButtonDown"/>
Is just blank....
Use this and put your image in images folder.
.myButtonDown {
background: url( 'images/ArrowDown.PNG' ) no-repeat;
border: none;
cursor: pointer;
height: 36px;
width: 36px;
}
<input type="submit" name='votedown2' value="Down2" class="myButtonDown"/>
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.