I am new to Python/Django world. I am looking for some help to create a webpage similar to below link:
http://www.mceinsurance.com/resources/uk-motorcycle-accident-hotspots
It seems there's animation and it is using following jargon.
-webkit-animation
::-webkit-scrollbar
#-webkit-keyframes rotate
Need help in understanding frontend. If I have to design similar website what frontend should I choose given the fact backend will be python/django framework.
Spinet of the code:
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0)}
to {-webkit-transform: rotate(360deg)}
}
::-webkit-scrollbar { height: 12px; width: 12px; background: #ccc; }
::-webkit-scrollbar-thumb { background: #999; -webkit-border-radius:
1ex; }
::-webkit-scrollbar-thumb:hover { background: #858383;}
::-webkit-scrollbar-thumb:active { background: #bd0e0e;}
Related
(SharePoint online, SPFx, modern website)
My end goal is this :
I want to customize some visual aspects of a SharePoint page (title, left nav bar, fonts, etc.)
I want it to happen only on one page
The solution I chose for that was to create a SPFx web part, as opposed to an extension, which I believe would apply to the entire site. I'm simply going to put the web part on that one page and be done with it.
My issue is :
The CSS gets applied properly to the part of the DOM that represents my web part
the CSS does NOT seem to be applied (at all) to anything else from the page.
For example, I don't see this take effect or even appearing at all in the rendered page :
#spLeftNav {
color: red !important;
}
However, this works as expected :
.myWebPartFooBar {
.container {
color:red !important;
}
}
Question : Is there some sort of sanitation mechanism that I'm missing? Does SharePoint intercept that CSS and prevent it from being applied to anything outside of my web part? I don't see any trace of such protection system in online literature but maybe it's common knowledge.
I had similar problem. The problem is that if you are using scss, compiler translates those css tags #spLeftNav into custom webpart only tags to prevent css mismatch on entire site.
To override it put those global css tag in global variable (this will prevent compiler to change it).
My example of "global css":
:global {
#O365_MainLink_Help {
display:none;
visibility:hidden;
}
.InfoPane-section.InfoPaneSection--properties {
display: none;
}
.o365cs-nav-bposLogo .o365cs-nav-brandingText {
display: none;
}
.o365cs-base.o365cs-topnavBGColor-2 {
background-color: #17375e !important;
}
.o365cs-base .o365cs-nav-rightMenus {
background-color: #17375e !important;
}
#spPageChromeAppDiv,
.ms-Nav
{
background-color: #eeece1 !important;
}
.ms-FocusZone .ms-Nav {
top: 0px !important;
}
#O365_NavHeader button#O365_MainLink_NavMenu,
#O365_NavHeader button#O365_MainLink_NavMenu_Responsive,
.o365button .o365cs-nav-brandingText,
.ms-searchux-searchbox {
display: none !important;
}
.CanvasZone:not(.CanvasZone--fullWidth) .ControlZone {
padding: 0px !important;
}
input:not([type]), input[type=email], input[type=file], input[type=password], input[type=text], select, textarea {
background-color: #eeece1 !important;
border-color: #c8c8c8 !important;
color: #17375e !important;
}
.ms-CommandBarItem-link[disabled] i,
.ms-CommandBarItem-link[disabled] span
{
color: unset !important;
}
.ms-compositeHeader-mainLayout {
height: 77px;
}
div[class^='commentsWrapper_'] {
display: none;
}
span.ms-siteHeader-siteName {
white-space: normal !important;
}
.ControlZone {
margin-top: 0px !important;
}
.ControlZone-control,
.ms-SearchBox,
.ms-BasePicker,
.ms-SearchBox-field {
background-color: #eeece1 !important;
}
.commandBarWrapper .ms-CommandBar {
display: none;
}
.ms-compositeHeader {
padding: 0 32px 0px;
}
}
I am use this code to display flash message
req.flash('success', 'Data saved...!!!');
When flash message is shown it looks like its part of content of website. So, is there any other way to show a message in keystone.js.
You just need some CSS to make it fixed in the center of the screen above everything else:
#flash-messages {
position: fixed;
top: 50%;
left: 0;
right: 0;
display: block;
z-index: 9999999;
text-align: center;
}
.alert{
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.34);
color: #fff;
h4 {
font-size: 4rem;
}
}
.alert-warning {
background-color: #d80000;
border-color: #9c0000;
}
.alert-success {
background-color: #2c9800;
border-color: #247d00;
}
For FlashMessage it looks like part of the website
you imported/included the FlashMessage Mixin/Component in your view by the generator, otherwise, it won't show up.
For how to use FlashMessage
1. inclouds the FlashMessage Mixin in view, to where you want.
2. trigger FlashMessage API in controller ./routes/views/*.js when condition match.
- `true` send all error messages to `req.flash`
- `"validation"` only send validation error messages to `req.flash`\
- `"update"` only send update errors to `req.flash`
3.the message data will available in res.locals.messages for View to use.
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.
Hi guys im trying to add a delete icon in my filter. So i use filterStyle class to point to a function. and it works fine i see the icon when i click it the field clears. However the filter doesnt filter anything when im trying to search.<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflo/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
}
</style>
my function is like $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').focus();
}));
and called in my filter filterStyleClass="deletable" i understand my filter uses an ajax call is this affected anyway by this.
This really doesn't look like JSF at all.
You can check out the primefaces filter example.
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
I am using css animations on the receiver app that runs on the chromecast and I've noticed 2 issues with it.
Firstly, the animations are very choopy. I estimate it looked probably about 5 frames per second.
Second is screen tearing issues during the animations. It seems like the system isn't waiting for vblank before swapping buffers?
I've used a test image, and here's my css definitions for the animations:
#testImage {
animation-name: seesaw;
animation-duration: 5.0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: seesaw;
-webkit-animation-duration: 5.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes seesaw {
0% { left: 0px; }
50% { left: 500px; }
100% { left: 0px; }
}
#keyframes seesaw {
0% { left: 0px; }
50% { left: 500px; }
100% { left: 0px; }
}
Am i doing something wrong, or I should avoid using css animations altogether on the receiver app?
Does anyone have any advise on how else I would do animations?
I don't think you are doing anything wrong, it is just that the chromecast device is limited in its animation capabilities. Leon Nichols did some helpful benchmarking here: https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8