Menus and Thumbnails on Mobile

pideja · 2017-04-07 23:36:30

Upgrading a CE4 site to Backlight. Got everything pretty much going well on the Desktop but on the Mobile, two problems:

- Is it possible to change the look of the "three bars" indicating "Menu"?

- The Album Set thumbnail seem to reproduce too large on the iPhone. When in portrait mode, they look as if they line up to the right of the screen with severe cropping. In landscape mode, they look OK.

I can't find where or how to control this in Backlight. Unless this is yet another case for some CSS.

rod barbee · 2017-04-08 00:24:06

Did you not get my response to your email?

Because the menu icon is not actually an icon (it's constructed out of span elements) it's not easily replaceable. You may be able to use jQuery to replace the html inside the containing div though.

On the thumbnails in the mobile view. That looks to be happening because of your custom css, specifically, this:

left: +100px; /* lateral position of thumbnail grid */

in

.the__albumSet figure {
            position: relative;
            left: +100px; /* lateral position of thumbnail grid */
            border-radius: 2px;
            /*box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);*/
            height: 160px;
            width: 320px; /* largeur de la celule */
}

You’ll need to write some css in a media query to undo that for smaller displays.

The same can be said about the size. Your custom css is locking in the height and width. Use you media query to change that for smaller screen sizes.

pideja · 2017-04-08 00:28:48

Sorry but the message has been received but I must have missed it.

Thanks for the info. I'll look into re-writing that CSS.

rod barbee · 2017-04-08 00:47:46

And changing that menu "icon" was easier than I thought it would be. Here's the jQuery:

$("label.page__toggle__trigger .nav__icon").replaceWith("<p>Menu</p>");

In phplugins, use the ttg_scripts hook.

function ttg_scripts( $style, $path ) { 
	
echo '
  <script>$("label.page__toggle__trigger .nav__icon").replaceWith("<p>Menu</p>");</script>
';
}

You can then style it any way you need to by targeting label.page__toggle__trigger p in custom css.

This works in the current version of Backlight (1.1.1). I know Matt is making a number of significant changes in the next version so this particular code may not work. But I bet something will

pideja · 2017-04-08 01:21:50

I changed the CSS to this:

/* description classic album set with thumbnails with right & bottom drop shadows and overlaid titles */
.the__albumSet figure {
position: relative;
left: +100px; /* lateral position of thumbnail grid */

@media screen and (min-width: 300px) and (max-width: 640px) /* test thumbnail position on mobile */
position: relative;
left: -01px;
}

border-radius: 2px;
/*box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);*/
height: 160px;
width: 320px; /* largeur de la celule */
}

.album-frame {
padding-top: 96px;
}

.the__albumSet figcaption {
height: 1.5em;
position: absolute; top: 155px;/* title position; higher number=lower position */
border-top: 1px rgba(0,0,0) ;/* label color - black */
background-color: black;
}

.album-title {
font-family: font-family: 'HelveticaNeue', sans-serif ;
line-height: 1em ;
font-weight: 500 ;
text-align: center ;
font-size: 1em !important ;
color: rgb(255,255,255) ;
}

the media query seems to work for the overall lateral position of the thumbnails. But, as you can see, I had to change the "Album Set figcaption" line position to 155px because somehow, the titles on the desktop thumbnails went too high. Another collateral damage is the disappearance of the mobile thumbnails! That line seems to affect both the desktop and mobile position of the thumbnail titles but there is an offset to be considered. If I move up the mobile thumbnails, they go way high on the desktop.

Being not at all familiar with media queries, should I put another one within the .the__albumSet figcaption section to control the title position?

rod barbee · 2017-04-08 01:59:10

your css looks messy. Media queries should stand alone and you have yours inside .the__albumSet figure

I don't know how to interpret what's going on because of this.

Media queries should look like this:

@media screen and (max-width: 640px) {
your css....
}
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

you've also got one or two closing curly braces without the corresponding opening braces

pideja · 2017-04-08 02:31:58

Honestly, I have no idea where and how to implement the media query.

I removed it from the .the__albumSet figure section and put near the top on its own. This just put back everything as it was before. So, I had to compensate the .the__albumSet figcaption in order to retrieve the titles for the desktop; as for the Mobile, the media query does not seem to affect anything: thumbnails are back to the right.

rod barbee · 2017-04-08 02:40:07

Media queries should probably go at the bottom.

The problem with yours:

@media screen and (min-width: 360px) { /* test thumbnail position on mobile */
position: relative;	left: -50px;
   }
}

Is that it's not being applied to any selector. You've got the media query, which will work on viewports 360px and larger, which I don't think is what you want, but you're not telling it which selector to apply those properties too.

I'm guessing you wanted to apply it to the .the__albumSet figure selector. But even if you had that in there, you won't see any changes.
The reason is because that selector is use again later in the css and in that rule you've got left: =100px and that will override the earlier css.

So try placing it at the bottom and add the selector you want to affect. And make it max-width: 360px if you want it to work on smaller screens.

@media screen and (max-width: 360px) { /* test thumbnail position on mobile */
.the__albumSet figure {
position: relative;	
left: -50px;
   }
}

Then start playing with the left positioning.

Using the browser's inspector is really helpful in testing your custom css. You can edit and add to your css there and see the results before actually including it in your custom css and uploading.
http://ttg-tips-and-tricks.barbeephoto. … ustom-css/

pideja · 2017-04-08 03:31:34

Tried this:

.the__albumSet figure {
	 @media screen and (min-width: 360px) { /* test thumbnail position on mobile */
     position: relative;	
     left: -50px;
   }

I put it at the bottom, right over the part about the footer.

Put it through the LINT inspector and it returned:
Parsing Errors Expected RBRACE at line 54, col 3.
@media screen and (min-width: 360px) {

That line 54 starts with @media screen

Being french speaking, I'm not to sure what is that RBRACE request.

Anyway, there is still not effect on the thumbnails.

rod barbee · 2017-04-08 03:37:26

No, that's wrong. The media query does not go inside another selector.

Try the code I gave you above.

@media screen and (max-width: 360px) { /* test thumbnail position on mobile */
.the__albumSet figure {
position: relative;	
left: -50px;
   }
}

And you'll need to adjust that -50px as it will cut off the thumbnails on the left side.

RBRACE is probably right-hand brace: }

pideja · 2017-04-08 04:24:54

Sorry for taking so long to understand ...the CSS now works fine on the desktop and the mobile:

@font-face {
	font-family: 'HelveticaNeue', sans-serif;
	src: url(/nat/en/backlight/custom/css/HelveticaNeue.ttf);}
	
/* inspector indicates this script is not used by page.
.about .the__copy .content {
text-align: left;
text-widht: 800px
}	
*/


/* hovering on the album title labels */

.the__albumSet figcaption:hover {
background-color: #D8D8D8;
}

.the__albumSet figcaption:hover p {
	color:black;
}

/* description classic album set with thumbnails with right & bottom drop shadows and overlaid titles */
.the__albumSet figure {
	position: relative;
	left: 100px;  /*lateral position of desktop thumbnail grid */
	border-radius: 2px;
	/*box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);*/
	height: 160px;
	width: 320px; /* largeur de la celule */
}

.album-frame {
	padding-top: 96px;
}

.the__albumSet figcaption {
	height: 1.5em;
	position: absolute; top: 115px;/* title position; higher number=lower position */
	border-top: 1px rgba(0,0,0) ;/* label color - black */
	background-color: black; 
}

.album-title {
	font-family: 'HelveticaNeue', sans-serif ;
	line-height: 1em ;
	font-weight: 500 ;	
	text-align: center ;
	font-size: 1em !important ;
	color: rgb(255,255,255)  ;
}
 
 /*  thumbnail position on mobile */
  @media screen and (max-width: 360px) { 
.the__albumSet figure {
position: relative;	
left: -20px;
   }
}

/*footer*/
.copyright p{
	font-style: italic;
	text-align: center;
}

Hope this helps someone...

rod barbee · 2017-04-08 05:36:40

have you looked on a variety of mobile widths?
For example, the iPhone 6 pixel width in portrait is larger than 360px. That means it won't use your media query.
http://stephen.io/mediaqueries/#iPhone

You may need another media query for tablet sizes too.
You can also use min-device-width and max-device-width in media queries.

rod barbee · 2017-04-08 06:00:13

And if you're interested in seeing an example of replacing the mobile menu icon with the work "Menu", see this page and resized it down to mobile size: http://backlight-rb-test.barbeephoto.com/home.php

pideja · 2017-04-08 21:48:53

All that hassle of trying to get that query to work, I forgot about that. So, I'll try this:

/*  thumbnail position on mobile */
  @media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
.the__albumSet figure {
position: relative;	
left: -20px;
   }
}

It's basically the same script but the dimensions have changed to take into account the iPhone from 2 to 6 and there is a min and a max size. I just hope other phones get covered. I found this:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
    @media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
    @media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
    @media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }

Thanks for reminding me about this issue.

If I may: the navigation does not show when in the theater page on the iPhone and I can't find where I can set it up. I looked into the main page, under Navigation, Trays set the display to Mobile, style to Fly-out and Text-align to center. Other than that I fail to see any controls to set.

Last edited by pideja (2017-04-08 21:49:20)

pideja · 2017-04-08 22:08:58

Figured out that the theater module has it's own main page template. The navigation for mobile had not been set correctly.

Attention to detail....that's my problem.

Thanks for everything.

Community @ The Turning Gate

#1 2017-04-07 23:36:30

Menus and Thumbnails on Mobile

#2 2017-04-08 00:24:06

Re: Menus and Thumbnails on Mobile

#3 2017-04-08 00:28:48

Re: Menus and Thumbnails on Mobile

#4 2017-04-08 00:47:46

Re: Menus and Thumbnails on Mobile

#5 2017-04-08 01:21:50

Re: Menus and Thumbnails on Mobile

#6 2017-04-08 01:59:10

Re: Menus and Thumbnails on Mobile

#7 2017-04-08 02:31:58

Re: Menus and Thumbnails on Mobile

#8 2017-04-08 02:40:07

Re: Menus and Thumbnails on Mobile

#9 2017-04-08 03:31:34

Re: Menus and Thumbnails on Mobile

#10 2017-04-08 03:37:26

Re: Menus and Thumbnails on Mobile

#11 2017-04-08 04:24:54

Re: Menus and Thumbnails on Mobile

#12 2017-04-08 05:36:40

Re: Menus and Thumbnails on Mobile

#13 2017-04-08 06:00:13

Re: Menus and Thumbnails on Mobile

#14 2017-04-08 21:48:53

Re: Menus and Thumbnails on Mobile

#15 2017-04-08 22:08:58

Re: Menus and Thumbnails on Mobile

Board footer