I'm trying to figure out if there is a way I can use container queries in react-tss. The docs don't mention anything about it or media queries for that matter. I was able to do something like the following for media queries and it compiled to the right css.
const styles = {
button: {
width: 100
},
'#media (min-width: 1024px)': {
button: {
width: 200
}
}
}
However I can't make that work with #container. Maybe there is no current solution for this with tss-react. If not and there are any other suggestions in using container queries with mui5 I'm all ears. Thank you.
Related
I am trying to create color scheme for a react Switch that includes a disabled customized color. I have a customized Switch that goes red and green with an on and off text. I mostly pieced it together from other examples. I am uncertain what I need in the withStyles have greyed out colors when the switch is disabled.
In the below example I want to grey out the bottom two since they are disabled
https://codesandbox.io/s/material-demo-forked-9cn2w?file=/demo.js
I have had quite a few issues piecing together withStyles options on other components as well. Is there documentation that I missed that would outline things like the '&:before' / 'track' / 'checked' keywords? They are seem specific to the Switch component, so do I need to dig into the Switch documentation more?
MaxAlex pointed me in the right direction for the switch css source code. Here is what I ended up with. The gradient seems unnecessary, but it won't take just "#737373". It is proof of concept code anyways.
disabled: {
"& + $track": {
background: "linear-gradient(to right, #737373, #737373)",
"&:before": {
opacity: 0
},
"&:after": {
opacity: 1
}
},
'&$checked + $track':{
background: "linear-gradient(to right, #737373, #737373)",
"&:before": {
content: '"on"',
opacity: 1
},
"&:after": {
content: '"off"',
opacity: 0
}
}
},
I'm trying to hide a video while it's loading (e.g. the black window with just a loading spinner). The only class I've found that sort of made sense is the .vjs-has-started one but the loading screen still shows with the following CSS. I also didn't see anything in the javascript api that meets this need (sorry if I missed something).
.video-js {
display: none;
visibility: hidden;
}
.video-js.vjs-has-started {
display: block;
visibility: visible;
}
I've also tried adding .vjs-playing into the mix both in place of an in conjunction with .vjs-has-started. Any thoughts on getting this to work or a answer about why it won't currently would help. If I need to I can work on adding this to video.js if it's not already there but I first wanted to get your definitive answer on the current state of video.js for this functionality.
I added the vjs-waiting class to be able to accomplish this now vjs-waiting can be used in css to show and hide the content see the pull-request for more details.
Example:
.vjs-waiting {
visibility: hidden;
background: transparent;
}
.vjs-loading-spinner {
display: none !important;
}
Reference - https://github.com/videojs/video.js/pull/1351
You could use the vjs-waiting
.vjs-waiting {visibility: hidden;}
Hey I have been struggling with this too, Docs are not intuitive at all!
Im implementing Video JS in React Hooks, so I solved with loadingSpinner set to false;
useEffect(() => {
let player = videojs('my-player',{
autoplay: 'muted',
sources: [
{
src: videoUrl, // m3u8 format
type: "application/x-mpegURL"
}
],
controlBar: false,
loadingSpinner: false
});
player.play()
return () => {
player.dispose()
}
}, [])
Hope it helps! =)
Yii newbie here
I have tried more than once to figure out a way to include an Ajax/JS function in an easy clean way in my CGRIDVIEW,
the code is basically
'click'=> "function (){
$.fn.yiiGridView.update('news-grid', {
type:'POST',
url:$(this).attr('href'),
success:function(data) {
$('#AjFlash').html(data).fadeIn().animate({
opacity: 1.0
}, 3000).fadeOut('slow');
$.fn.yiiGridView.update('news-grid');
}
})
return false;
}"
In your opinion, whats the cleanest, most performance benificial way to include this?
Thank you for your time !!!
I don't know but I dont see necesary to force the grid to update twice on a single operation, I also don't like to include my javascript like that. Depending on what I need there are several approaches, for the sake of this answer ill show you the easiest one:
Create a global object, in a separate file:
//app.js
var App = {
updateSomething: function () {
$.post(
$(this).attr('href'),
success:function(data) {
$('#AjFlash').html(data).fadeIn().animate({
opacity: 1.0
}, 3000).fadeOut('slow');
$.fn.yiiGridView.update('news-grid');
}
);
return false;
}
};
And the you can include that file from your controller by calling CCLientScript::registerScriptFile
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl."js/app.js");
And on your grid:
'click'=> "js:App.updateSomething",
There are much better approaches, but this is the more simple for js beginners that want to have some kind of organization.
I am only a month old with extjs and still experimenting. My question is: I have a grid panel and within it the 'tools' config options. I am using this to enable/disable a Ext.grid.feature.Grouping variable. The 2 handler functions have the logic to disable/enable the 2 views by clicking on the 2 'cross' buttons that appear on the right side of the header. The logic is fine. However, I would like to display my set of custom images in place of the 'cross' buttons. Can this be done? If yes, how? Do I need to make some changes in the css code for that?
I have looked into the documentation and also done a good search but nothing seems to answer my question.
Specify a custom type config on your tools:
Ext.create('Ext.grid.Panel', {
...
tools: [
{
type: 'enable-grouping',
handler: function() {
...
}
},
{
type: 'disable-grouping',
handler: function() {
...
}
}
]
});
Then define the following classes in a stylesheet to style your new tools:
.x-tool-enable-grouping {
background-image: url('path/to/tool/image/enable-grouping.png');
}
.x-tool-disable-grouping {
background-image: url('path/to/tool/image/disable-grouping.png');
}
The size of a tool image should be 15 x 15 px
Here's what the output needs to be:
div.star_mask {
&.fill-0 {
width: 0%;
}
&.fill-50 {
width: 50%;
}
}
I'm doing this many times, so I made a function to generate it:
#star {
.star-fill(#width) {
(~"&.fill-#{width}") {
div { width: ~"#{width}%" }
}
}
}
div.star_mask {
#star > .star-fill(0)
}
This generates the following CSS:
div.star_mask &.fill-0 instead of what I need: div.star_mask.fill-0
So is there a way to do this? Can I put the & where the function is called?
I ended up fixing the problem by coding the selector myself: div.star_mask.fill-#{width} and placing the function calls one level above. It would still be very cool to nest them though!
when less comes across (~"") as a selector it does not parse the contents but accepts it verbatim, so you cannot use & in it.
I don't think there is a way to do exactly what you want at the moment, though remember you can use & at the end of a selector, e.g.
.a {
div& {
foo:bar;
}
}
becomes
div.a {
foo: bar;
}
not sure that helps though.