MyBB Community Forums

When using the CSS Styles editor in ACP, the drop-down lists all classes and id-elements regardless the standard CSS definition or @-rules (e.g. @Media Queries).

Example CSS:
.tborder { ... }
.tcat { ... }
.tfoot { ... }
@media screen and (max-width: 639px) {
  .tcat { ... }
  .tfoot { ... }
}

The drop-down menu does not differ between standard and @-rules - it just shows all elements and classes like:
.tborder
.tcat
.tcat
.tfoot
.tfoot

With duplicate options the user is not able to differentiate at a glance. That's more difficult to find the correct definition - especially in terms of a great extend of responsive design styles with an increasing amount of Media Queries (@media) definitions.

It's a benefit to separate the CSS definitions by @-rules for a more comfortable handling.

The current implementation and the way of edit CSS is superior of course - the editor parses CSS properly. So it might be possible to make modifications to adapt a way of parsing @-rules separately. I feel certain a lot of web developers and designers will supprt this enhancement.

[ExiTuS]

(2019-08-22, 10:42 PM)[ExiTuS] Wrote: [ -> ]When using the CSS Styles editor in ACP, the drop-down lists all classes and id-elements regardless the standard CSS definition or @-rules (e.g. @Media Queries).

Example CSS:
.tborder { ... }
.tcat { ... }
.tfoot { ... }
@media screen and (max-width: 639px) {
  .tcat { ... }
  .tfoot { ... }
}

The drop-down menu does not differ between standard and @-rules - it just shows all elements and classes like:
.tborder
.tcat
.tcat
.tfoot
.tfoot

With duplicate options the user is not able to differentiate at a glance. That's more difficult to find the correct definition - especially in terms of a great extend of responsive design styles with an increasing amount of Media Queries (@media) definitions.

It's a benefit to separate the CSS definitions by @-rules for a more comfortable handling.

The current implementation and the way of edit CSS is superior of course - the editor parses CSS properly. So it might be possible to make modifications to adapt a way of parsing @-rules separately. I feel certain a lot of web developers and designers will supprt this enhancement.

[ExiTuS]

While many including myself  do not tend to have any use for simple mode and tend to use the more developer / designer friendly advanced editor, and the standard find function in a browser, I do notice something after reading your thread related to simple mode.

Have you noticed that in simple mode all @media calls will be found organized as any other and that is nice because then you only need to find the specific @media you want and edit all inside, so yeah that is handy and organized, but also note any css inside such is only displayed in extra css only partially often missing a good deal of what should be displayed and is fully displayed in advanced editor. Something for devs to look at perhaps along with or perhaps before the said other suggestions?

Example of this issue:

Of course, using advanced mode is an option to modify CSS, but this mode is not the most comfortable solution as it is just a "simple" text editor - so not "advanced"
Being a coder I know the preference of plain text editors for sure. But the intention of my idea is to increase the comfort and enhance the Simple Mode - which is great for editing even for beginners.

Selecting the option "@media ..." in the drop-down is disastrous and editing CSS definitions will certainly end up in troubles.

So my idea - just extend the CSS parser to be able to differentiate @-rules.

[ExiTuS]

(2019-08-23, 07:00 PM)[ExiTuS] Wrote: [ -> ]Of course, using advanced mode is an option to modify CSS, but this mode is not the most comfortable solution as it is just a "simple" text editor - so not "advanced"
Being a coder I know the preference of plain text editors for sure. But the intention of my idea is to increase the comfort and enhance the Simple Mode - which is great for editing even for beginners.

Selecting the option "@media ..." in the drop-down is disastrous and editing CSS definitions will certainly end up in troubles.

So my idea - just extend the CSS parser to be able to differentiate @-rules.

[ExiTuS]

I do not disagree in the least, merely explaining that as someone whom does not use the simple editor, reading your thread caused me within seconds to look at the simple editor in action in regards to @media as this thread title suggests and noticed what at first glance can be pondered as a potential flaw/glitch/bug in the existing simple mode display output for such.

Reading my initial post is clearly enough to understand what's about!
So just let's stop any lost discussion

[ExiTuS]

(2019-08-23, 09:00 PM)[ExiTuS] Wrote: [ -> ]Reading my initial post is clearly enough to understand what's about!
So just let's stop any lost discussion

[ExiTuS]

Actually what I pointed out while relative to your initial topic is not what your initial posting describes thus the commentary provided in relation to your feedback and suggestion is clearly not a lost discussion as the entire point of feedback and discussion is fairly self explanatory.  Seeing as the topic and content are on the focus of the issues with simple editor, logic would dictate that the commentary that follows after would be umm, "feedback and suggestions". Seeing as you are giving feedback on the simple mode and how it handles @media query output display sorting in simple mode, pointing out another noticeable issue  with output display in reference to the very same media queries perhaps hints that such would most likely need to be corrected/fixed first before your feedback and suggestions could then add further improvements to the existing system once say the existing output display was say fixed as to display the entirety of the media query in extra css rather than partial and that again shows that topic/discussion is not lost.

My point:

Same @media query, 2 mode, same stylesheet

Advanced mode output display:

@media blah {
 .blah blah{
 ...
 }
 .blah blah blah {
 ...
 }
}

Simple mode output display:

In extra css:

 .blah blah{
 ...

* see the potential for issues with that?

** the reason I state that this while same topic is a slightly different part of the topic and ideally what one would assume is that before say your suggestions are added to further improve the existing system one would surmise first making sure that it can find the actual closing bracket of a @media query while not confusing it for say a closing bracket contained in the @media query internal content and perhaps such might be needed before say your sorting improvement suggestions 

*now I like how the @media qeury is sorted and I like how it thens adds the internal content to extra css as that kinda keeps that organized if only it would do so for the full internal content of the @media query so say do not change how it currently trying to sort/display @media queries, just make the complete query display so like the @media query identifier acts as the call in search but the internal content within the total @media query then outputs as it already tries but only shows partial in extra css.

The  query is found complete yet the output is displayed incomplete only in simple mode because it seems to think the first closing bracket found in the media query is the end of the entire query when it is clearly not.  Seeing how the output displays partial that then leads to the possibility of users that use simple mode thinking say the the query is not complete and say adding the missing parts or bracket only to not know or notice that they already exist in the stylesheet as so proven if you switch over to advanced and look at the same query. This could as you say cause problems maybe even say break stylesheet and seems like something that still follows along the same path as your feedback and suggestions.