Media Queries

classic Classic list List threaded Threaded
31 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Media Queries

Harvey
Will media queries work in the nabble CSS?

I need to adjust font sizes and columns displayed on small screens.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
I haven't tried it but I see no reason for media queries themselves not working.

The trouble is that much of Nabble's HTML code lacks the necessary functional IDs and classes used on one type of page only. Most IDs and classes have visual names and are used all over the place on many different pages. This means any CSS code is likely to have unwanted side effects elsewhere.

Nabble also lacks the usually advised line:
<meta name="viewport" content="width=device-width, initial-scale=1">
which helps pages work better on small screens.

Without this line you would need many more media queries thank you might at first think to cope with the range of screen sizes that are found on different phones and tablets.

In short, I think Nabble has gone as far as it can with its small screen Add-ons without embarking on a major rebuild of all their code.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
Thanks Greg.

I figured I'd try anyway. I am looking to hide some columns on mobile.

I tried this:

@media (max-width:767px){
.topics-column{  display: none;}
}

Is that the correct way? It didn't work.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
Mmm!  This is interesting.
There seem to have been developments since I last investigated this stuff and I may be a little out of date.

Before my previous post I checked this forum for the line:
<meta name="viewport" content="width=device-width, initial-scale=1">
and it didn't have it.

Then, I was surprised to see such the obviously functional class "topic-column" in your post -  I checked and it is is there - and, it seems, many more that I could be sure were not there when I last looked.

I then turned to one of my forums (on the n3 server) and it does have the "viewport" lin in the code. On that forum I have both the "Responsiveness" options checked:
+ Responsive layout (BETA)
+ Better new post interface for mobile users

I also see in the HTML generated for the forum's home page, this code:
<style type="text/css">
@media (max-width: 600px) {
#search-box,#topic-search-box{margin:1em 0}
td.pin-column img{display:none}
}
</style>
which is clearly part (probably not all) of the extra code that is generated  when the "Responsive layout (BETA)" option is checked and confirms that your test code is syntactically correct so should work (even if it looks as if it may be a little drastic for real world use! ).

My best guess, without looking further, is that if you're generating that your code by inserting it in the CSS box on the "Change Appearance" toolbar, and it then gets overridden by some more "local" code which has higher priority.

The default styling for a Nabble forum is inserted by the line:
<link rel="stylesheet" href="/nabble.pack.css?v=29" type="text/css" />

Code from the CSS box is inserted by the line:
<link rel="stylesheet" href="/template/NamlServlet.jtp?macro=site_style" type="text/css" />

i.e. they both take their styling instructions from external stylesheets.

Whereas the responsiveness code is being inserted through < style> tags in the header of the page, i.e. an internal stylesheet - and internal stylesheets take precedence over the statements in an external stylesheet. (and inline styling instructions over-rule even internal stylesheets.)

I suspect that to get your code to work will require that you will need to code it into a NAML macro that generates the HTML for the page. This must be how the responsive code gets into the < style> tags.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
I could probably do it if I could do it through Appearance > CSS.  

Unfortunate editing NAML is beyond my pay grade.

.topic-column is insert in my Appearance > CSS setting column widths:

.pin-column{ width: 5%;}
.topics-column{ width: 70%;}
.replies-column{ width: 10%;}
.last-post-column{ width: 10%;}
.views-column{ width: 10%;}

Surprises me that display: none won't work there.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
This:

.topic-count-column{
display:none;
}

...when added to the Appearance > CSS ... removes the column header but not the full column.

Any ideas?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
Harvey wrote
.topic-count-column{
display:none;
}
...when added to the Appearance > CSS ... removes the column header but not the full column.

Any ideas?
I've taken another look at the code behind this forum and It all comes back to me. It's a nightmare of nested tables, some of which I'd say were unnecessary, but the real issue is that, if you want to control entire columns, there's a big chunk of HTML code missing.

To control an entire column you need to have < colgroup> and < col> tags present in the code and they would need to be added through the NAML macros that generate the HTML code for the page

See:
http://www.w3schools.com/tags/tag_colgroup.asp
http://www.w3schools.com/tags/tag_col.asp

As it stands, the classes with, for your purpose, helpful sounding names  tend to operate on just a single cell (< td> tag) in the first row of the table.

class names like
.pin-column, .topics-column, .replies-column, .last-post-column and .views-column

would be better be named
.top-row-pin-cell
.top-row-topics-cell
.tow-row-replies-cell
.top-row-last-post-cell
.top-row.views-cell

In short, having looked again, I can confirm that what you are after will require NAML coding.
Like you, NAML is not my strong point and I am not confident to suggest what is required.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
I could just lose the columns on all sizes I guess.

How to get rid of or "display none" something like this:

topic_count_column

?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
I did some searching in the forum. People all want the same thing.  Nabble could solve most of these issues by having a mobile mode that removes Topics and Posts, Replies and Views columns.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
I agree that there's no doubt that people, these days, need a "mobile-friendly" platform.

The trouble is that Nabble is largely built using HTML tables and, these are built on a row-by-row basis, with rows being divided into cells. You could say that to HTML table columns are a curious intellectual by-product of the table structure. You need add specific code to tell HTML that a particular table has entire columns that need consideration.

Even though the need to display a column in bold (perhaps because it contains row headings), or in alternating colours (to make it easier to read), or to be removed from the display (because certain data is not relevant to a particular need) are common enough requirements, it still requires that the appropriate code is added to define a table column as having any relevance at all.

That's the feature that the missing < colgroup> and < col> tags allow you to define.

Without those tags being present in the HTML you have no "hooks" on which to hang the styling, the CSS code, that says display this column in a certain colour, or make it bold, or remove it from the display entirely.

No amount of playing with IDs and classes on other tags will allow you to control an entire column - except by applying the styling to an individual cell in each row.

It seems that the developers of Nabble have opted not to update Nabble to allow for the modern environment and for a time at least, were working on developing a completely new forum at Blazma.com, (It abandoned the table structure and was built using divisions and lists which provides much greater flexibility, allowing list items to be displayed side by side and to break at different points depending on screen width) but as I reported in May, that seems to have fallen by the wayside.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
It looks like if I could override this:

.nowrap {
    white-space: nowrap;
}

The "last post" column would stack better on mobile.

Any idea on how to do it?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
This post was updated on .
Trouble with trying to re-write the CSS code on those kind of visual classes is that they're used in a good many places, so you'll probably introduce unwanted side effects.

So instead I looked  at the last post HTML code and see it  includes:
<span class="weak-color nowrap" style="padding-left:.2em">
so I searched for that and it's in line 72 of the "last_post_column" macro.

Have a go at deleting the "nowrap" from that line and see if the effect is satisfactorily on a narrow screen.

If it is then we can work on the media query aspect of it to ensure you keep the existing layout for desktop screens.

EDIT:
Another thing to try is to add a line break tag at the beginning of the line, e.g:
<br><span class="weak-color" style="padding-left:.2em">
That should force the author name under the date, which should allow a narrower column.

I haven't tested these ideas. so it will be suck it and see!
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey

I don't know how to delete it it's not in my custom CSS so it must be in the base CSS where is that


On Nov 12, 2016 1:26 PM, "GregChapman [via Nabble Support]" <[hidden email]> wrote:
Trouble with trying to re-write the CSS code on those kind of visual classes is that they're used in a good many places, so you'll probably introduce unwanted side effects.

So instead I looked  at the last post HTML code and see it  includes:
<span class="weak-color nowrap" style="padding-left:.2em">
so I searched for that and it's in line 72 of the "last_post_column" macro.

Have a go at deleting the "nowrap" from that line and see if the effect is satisfactorily on a narrow screen.

If it is then we can work on the media query aspect of it to ensure you keep the existing layout for desktop screens.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!



If you reply to this email, your message will be added to the discussion below:
http://support.nabble.com/Media-Queries-tp7597404p7597503.html
To unsubscribe from Media Queries, click here.
NAML
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
You don't touch the CSS itself.

What I was suggesting was that you edit the macro (via the "Edit this page" link) that generates the page.

It is the ""last_post_column" macro which makes forces the appropriate table cell to adopt the "nowrap" styling.

Take out the call to that styling and you lose the effect.

Also, didn't realise you were on-line. Note the edit to my last post.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
Greg you solved my problem maybe without realizing it.

Here is the macro for that page:

<macro name="view_category_page">
    <n.app_html>
        <head>
            <n.app_title/>
            <n.category_table_stylesheet/>
        </head>
        <body>
            <n.topics_action_link/>
            <n.people_action_link/>
            <n.options_action_menu/>
 
            <n.category_table.>
                <n.subcategories_column/>
                <n.topic_count_column width="5em"/>
                <n.post_count_column width="5em"/>
                <n.last_post_column/>
            </n.category_table.>
 
            <n.forum_footer/>
        </body>
    </n.app_html>
</macro>

Just override the macro and remove the topic and post count lines and it fits nicely on a phone.  Be nice to do it only on small screens, but it is what it is.

I think I only need to remove one column trying to decide which is more important.

Opinions?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
Here's a bigger issue.

This is my macro override for showing 728 x 90 display ads in my forum:

<override_macro name ="show_custom_ads" parameters="location" requires="servlet" >
    <n.as_html_comments.location/>
    <n.if.regex_matches text="[n.location/]" pattern="classic_special_ad">  
        <then>
            <div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <script type="text/javascript">          
                    google_ad_client = "ca-pub-0XXXXXXXX";
                    /* Leaderboard */
                    google_ad_slot = "9529659947";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    google_page_url = "<n.current_url/>";
                </script>
                <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>
        </then>
    </n.if.regex_matches>             
</override_macro>

but the 728 is too big for a phone.

Here is the code that google recommends to replace the 728 x 90 with a  320 x 100 on small devices:

<div style="text-align:center;">
<style type="text/css">
.footer_1 { width: 320px; height: 100px; }
@media (min-width:800px) { .footer_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle footer_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-0XXXXXXXX"
    data-ad-slot="7560709341"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

How to tell my forum to use the smaller unit when width is below 800 px?

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
I have no experience is with sites that use Google Ads. I also know nothing of JavaScript, so I'm taking some big guesses that could well be wide of the mark with this response...

Here's my analysis of this code:
<div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <script type="text/javascript">          
                    google_ad_client = "ca-pub-0XXXXXXXX";
                    /* Leaderboard */
                    google_ad_slot = "9529659947";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    google_page_url = "<n.current_url/>";
                </script>
                <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>
What I see in the above is calls to two scripts that do the business of displaying the add. The first hard codes the width and height of the ad and the second picks the ad to display from Google's library of ads to be used.

Now to the code Google recommends...
This would appear to be more modern code that uses a mobile friendly approach. Rather than fixing the size for the ad it uses CSS techniques for sizing the adverts to the space available...
<div style="text-align:center;">
    <style type="text/css">
      .footer_1 { width: 320px; height: 100px; }
      @media (min-width:800px) { .footer_1 { width: 728px; height: 90px; } }
    </style>
    <ins class="adsbygoogle footer_1"
      style="display:inline-block;"
      data-ad-client="ca-pub-0XXXXXXXX"
      data-ad-slot="7560709341">
    </ins>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
What I see in this is:
1. Some styling code that is to be applied to an HTML element given the class "footer_1" (See * below)
2. An "ins" element (i.e. something that's being inserted in a page) assigned two classes
3. The first class relates to the second script that follows, the second to the styling already mentioned
4. The code within the "ins" element provides the arguments necessary to following script.
5. A script, which using data from the "ins" element picks the advert to display (This is similar to the second script in your current code)
6. A second script that actually injects/pushes the advert into the "ins" element into the page at the point where it appears on the page.

* The styling uses Google's recommended approach to mobile friendly coding. It sets up a default position for the advert suitable for a small screen at 320x100px, and then over-rides that for screens 800px and wider.

The code would seem to be a a direct replacement for what you are currently using. The advantage being that it allows you to to control the the appearance/size of the advert that is displayed with CSS.

My best guess, therefore, would be to replace the code within your "div" with Google's.
I also guess that the "google_ad_slot = "9529659947";" refers to your account with Google so you may need to substitute substituting that for the original in Google's ample code.

It you understand my reasoning and it works!
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

GregChapman
Just realised, you may also need to add back some of the existing classes and styling to your "div" e.g.:

class="ad shaded-bg-color rounded" style="padding:.5em 0"

as that looks like typical Nabble code and perhaps a little tinkering to get the advert to display well on your particular forum.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
In reply to this post by GregChapman
Wow you lost me Greg.

How do I integrate your code into the nabble macro?

If I can get it to work, maybe I don't have to understand....  
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Media Queries

Harvey
This is the code that is in the macro override that Hugo wrote for me:

<override_macro name ="show_custom_ads" parameters="location" requires="servlet" >
    <n.as_html_comments.location/>
    <n.if.regex_matches text="[n.location/]" pattern="classic_special_ad">  
        <then>
            <div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <script type="text/javascript">                          
                    data_ad_client = "ca-pub-XXXXXX";
                    /* Mobile Ad */
                    data_ad_slot = "9267013347";
                    google_ad_width = 320;
                    google_ad_height = 100;
                    google_page_url = "<n.current_url/>";
                </script>
                <script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </div>
        </then>
    </n.if.regex_matches>             
</override_macro>
12
Loading...