I wanted to change my color scheme and therefore added custom colors to tailwind in the tailwindconfig file, but although in can find them in the master.css after building the css, the flask dev server doesnt not use the new colors but the old ones.
I looked if I have connected the wrong stylesheet but I actually have connected the right one.
help would very much appreciated. Thank you already!
tailwind.config.js
purge: [],
theme: {
extend: {
fontFamily: {
"mont": "montserrat"
},
colors: {
"primary": "#595b83",
"secondary": "#f4abc4",
"third": "#f4abc4",
"fourth": "#060930"
}
},
},
variants: {},
plugins: [],
}
It may be that your browser uses the cache, and you need to clear the cache before refreshing the page.
If you are using Google Chrome, press the ctrl+shift+delete key combination to enter the clear cache page.
Related
Regarding getting Cookie from my chrome extension, it works perfectly when the chrome setting "On all sites".
But when I set "On [current site]" or "When you click the extension" in chrome extension setting, I couldn't get any cookies..
https://support.google.com/chrome_webstore/answer/2664769?hl=en
"Let extensions read and change site data"
※ When I keep opening the url where I want to get the cookie, it's success...
I tried to look for the solution, but there were nothing.
{
"name": "myapp",
"version": "1.0.0",
"description": "desc",
"permissions": [
"contextMenus",
"tabs",
"cookies"
],
"host_permissions": [ "https://wanna-get-cookie-this-domain.com/*" ],
"background": { "service_worker": "service_worker.js" },
"content_scripts": [
{
"js": ["scripts/contentscript.js"],
"matches": ["https://*/*"]
}
],
"manifest_version": 3
}
service_woeker.js
chrome.contextMenus.create({
id: "testapp",
title: "title",
contexts: ["all"],
type: "normal"
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
chrome.windows.create({
url: `/views/popup.html`,
type: 'popup',
focused: true,
width: 395, height: 230
});
})
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.type == "getCookie") {
chrome.cookies.getAll({}, function(cookies) {
console.log(cookies);
// "On all sites" works.
// "On [current site]" or "When you click the extension" doesn't work
// even after I clicked and enabled the extension.
});
}
return true;
});
views/popup.html
<html>
...
<script src="/scripts/popup.js"></script>
</html>
scripts/popup.js
// After user clicked, below code
chrome.runtime.sendMessage({type: 'getCookie'}));
Thanks,
This is a bug:
the cookies API is only checking the host permissions, and not checking tab-specific permissions, since the request isn't associated with a tab.
Until it's fixed you'll have add the host permissions for all sites in manifest.json:
"host_permissions": ["<all_urls>"]
Note that your content script already runs on all https sites (why not all sites though?), which means that your extension is already requesting the "broad host permission" under the hood, so adding the same pattern to host_permissions doesn't increase the internal permissions of your extension, it's more of a cosmetic requirement to allow the use of chrome API in the non-content scripts like the background script.
I'm trying to make my own theme for jstree by way of ember-cli-jstree. I thought I would start by using the proton theme. I copied the proton directory from this link into my public directory in my app and added the name of the theme to my jsconfig blob in my controller:
jsTreeConfig: {
themes: {
name: 'proton',
dots: false,
icons: false,
variant: 'large',
},
},
However, this causes the styles to break completely. I haven't found great documentation for creating a custom theme using the ember-cli-jstree addon so any pointers in the right direction there would be helpful.
You can't link directly to the public directory in ember because of the way that directory is treated in the build process. I deleted the public directory from my URL and it worked.
jsTreeConfig: {
themes: {
name: 'my-theme',
url: '../../my-theme/style.css',
},
},
Looking in the Docs for Sencha Touch there seems to be an option on the List widget that allows for setting "infinite" which enables infinite scroll.
Docs: https://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List-cfg-infinite
I am hoping this will resolve some issues that I have with performance with very large lists on portable devices.
Important Note: This is for an offline mobile app. As in the fiddle. The store already contains all of the data.
I tried enabling it on a large list but all it does is hide the data.
{
xtype: 'list',
store: 'contactStore',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
infinite: true /* Setting this to true hides the list */
}
What am I missing? I have included a jsFiddle.
http://jsfiddle.net/AnthonyV/bba58zfr/
The issue here isn't anything about the data being loaded like the other answers. You have said the data is being loaded into the store just fine as when you don't have infinite set to true you can see the data.
First, let's discuss what the infinite config does. As Anand Gupta explained, the infinite config will only render the number of list items that can fit on the screen (plus some as a buffer for scrolling). If you don't have it set to true then the list will render all items and not manage a visible range. With all items rendered, the list can support auto sizing. However, when infinite is set to true, the list needs to know what size it has in order to calculate the number of visible rows it can render.
This is where the issue happens, the list doesn't have a full size set to it. You have the list nested in a container and that container uses vbox layout:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'container',
layout: 'vbox',
title: 'Big List',
items: [{
xtype: 'list',
store: 'contactStore',
id: 'simpleList',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: false
}]
}]
}
This is technically overnesting. Overnesting is when you have nested a component within a container that doesn't need to be nested within the container. This is an unnested version of your code that should work as you want:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'list',
title: 'Big List',
store: 'contactStore',
id: 'simpleList',
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: true,
variableHeights: true
}]
}
What I did here is remove the container and had the list as a direct child of your MyApp.view.MyIssue navigation view. The navigation view uses card layout which will give each direct child 100% height and width and therefore allowing the list to calculate the number of rows it can render with infinite set to true. Here is a Sencha Fiddle to show this unnested list in action: https://fiddle.sencha.com/#fiddle/11v1
The other way, if you REALLY wanted the list to be nested in that container (the more you nest, the bigger the DOM since you have more components created and the bigger the DOM, the slower your app may respond) then you can give the container's vbox layout the align config:
config: {
title: 'Big List Issue',
fullscreen: true,
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
title: 'Big List',
items: [{
xtype: 'list',
store: 'contactStore',
id: 'simpleList',
flex: 1,
itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>',
striped: true,
infinite: true
}]
}]
}
In the unnested list example, I also use the variableHeights config on the list. This allows the list items to be properly heighted. Run the fiddle with it commented out to see the difference it makes.
You can go with this. Add this plugin, It handles automatically infinite scrolling.
http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging
For offline
You can implement an idea. Create 2 store one is fully loaded and second will load only with some page size suppose 10. You will use second store in your grid and implement list paging plugin, also pass here second store.
You can take help with this fiddle example. (this example is in Ext jS 5 but logic will be same)
https://fiddle.sencha.com/#fiddle/pim
Please try this one and let us know.
First you need to understand that infinite: true helps in improving list performance. It helps rendering only that chunk of list data which is the current page, rest are not rendered. So,
For pagination, you backend should support that like it should have parameter like limit, start, pageSize etc.
For implementing pagination, your store should have these configs like pageSize, buffered etc.
Hence if your backend support and you have implemented pagination. Then you can enjoy the benefit of infinite: true and get extreme sencha touch list performance.
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.
I'm quite new to Sencha-touch and I'm following the getting started video on the documentation website.
There is a part where the app shows blogposts in a list, but it doesn't seem to work for me.
I have the same code in the video but it doesn't work.
Ext.define('GS.view.Blog', {
extend: 'Ext.navigation.View',
xtype: 'blog',
config: {
title: 'Blog',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: {
autoload: true,
fields: ['title', 'link', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
}
});
Has the code/library from sencha touch changed since the video or am I doing something wrong (and what)?
Took me a little while to figure out, but it is because the store is not loading. You may ask why, as you have specified autoload to be true? The reason is because it is autoLoad (notice the capital L).
:)
please download latest sencha 2.0 framework sdk ,I also faced same issue but after downloading and using sencha-touch-all. js ,everything works fine .Probs they have updated the 2.0 with added new js files like navigation view .Open your existing sdk and check in document whether you can find Ext.View.navigation exist or not.