This question is answered.


Permlink Replies: 14 - Pages: 1 - Last Post: 25 Jan 22, 18:56 Last Post By: kartphoto Threads: [ Previous | Next ]
kartphoto

Posts: 24
Registered: 10-Sep-2014
Mobile view / Responsive design
Posted: 14 Jan 22, 17:49
 
  Click to reply to this thread Reply
Attachment Tiger2x.jpg (252.7 KB)
Hi all, in the prevoious Tiger skins (2.13.6 screenshot)
my mobile preview was always 1 album for each row.

now in the Tiger 3.9.0 I see 2 columns.
apart from that I personally think the pictures are too small. my album names have also become too long for 2 columns and for the pc version I don't like it when I have to reduce the font size.
So is there a possibility that I automatically resize the layout to 1 columns for mobile views.

I've compared all possible settings, and also tried smaller and larger thumbnail sizes, but I can't get it to. help ? :)

http://kart.photo/jAlbum-Test14
Laza

Posts: 2,053
Registered: 6-Sep-2005
Re: Mobile view / Responsive design
Posted: 15 Jan 22, 07:17   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
I still see 1 column in the mobile view below 640px wide screens. However, the custom footer's width sometimes stretches the whole page, which tricks the column calculation. Could you please add these rules so we can test if the custom section is triggering the problem:
.footer .custom {
	max-width: 100vw;
	overflow: hidden;
}

Also, please note, <font size="3"> is invalid in HTML5. You can use this instead:
<span style="font-size: 2rem;"><a href="">Bovenstaande kartfoto's blijven maximaal 12 maanden ...<a/></span>

No <big> is needed either.
kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 15 Jan 22, 11:54   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Attachment Capture.JPG (128.8 KB)
As test I already removed the custom footer.
If I resize the Windows from Ms-Edge or Firefox then i keep 2 columns. (see screenshot)

http://kart.photo/!TestMobile-01

is it correct that i had to post your code to Advanced - Custom CSS Style?

kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 22 Jan 22, 12:43   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
any other way I can force it to show it only 1 column on a mobile view ?

many thanks.
Laza

Posts: 2,053
Registered: 6-Sep-2005
Re: Mobile view / Responsive design
Posted: 22 Jan 22, 18:14   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
Attachment common.css (14.1 KB)
After a slight modification now it seems to work as expected. The reason it was showing 2 columns was that the skin tries to use half of the original columns on small screens, and in the case of 3 columns, it resulted in 1.5, after rounding 2. Replace common.css in the skin directory (Ctrl-Shift-S) and rerun Make.
kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 22 Jan 22, 20:18   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
Hi Laza, thanks for your reply

I only work from the command line, with the original common.css it worked (and works again if I replace it)
But with your common.css I get the error below.

jAlbum v26.1 started in console mode

Making "Klanten2022NL" (Changes)
se.datadosen.util.ScriptException: <eval>:7 ReferenceError: "pageColor" is not defined in common.css at line number 1
at se.datadosen.util.ScriptException.of(ScriptException.java:59)
at se.datadosen.jalbum.ast.ScriptletNode.doEval(ScriptletNode.java:89)
at se.datadosen.jalbum.ast.ASTNode.eval(ASTNode.java:50)
at se.datadosen.jalbum.ast.GroupNode.doEval(GroupNode.java:78)
at se.datadosen.jalbum.ast.ASTNode.eval(ASTNode.java:50)
at se.datadosen.jalbum.AST.eval(AST.java:68)
at se.datadosen.jalbum.AlbumBean.processTemplateFile(AlbumBean.java:1470)
at se.datadosen.jalbum.AlbumBean.makeAlbumForFolder(AlbumBean.java:1705)
at se.datadosen.jalbum.AlbumBean.makeAlbum(AlbumBean.java:3069)
at se.datadosen.jalbum.AlbumBean.smartMakeAlbum(AlbumBean.java:2964)
at se.datadosen.jalbum.JAlbumConsole.<init>(JAlbumConsole.java:101)
at se.datadosen.jalbum.JAlbum.main(JAlbum.java:326)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
at java.lang.reflect.Method.invoke(Unknown Source)
at se.datadosen.jalbum.Main.main(Main.java:45)
Caused by: javax.script.ScriptException: ReferenceError: "pageColor" is not defined in <eval> at line number 7
at jdk.nashorn.api.scripting.NashornScriptEngine.throwAsScriptException(NashornScriptEngine.java:470)
at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:454)
at jdk.nashorn.api.scripting.NashornScriptEngine.access$200(NashornScriptEngine.java:73)
at jdk.nashorn.api.scripting.NashornScriptEngine$3.eval(NashornScriptEngine.java:510)
at javax.script.CompiledScript.eval(Unknown Source)
at se.datadosen.jalbum.ast.ScriptletNode.doEval(ScriptletNode.java:60)
... 15 more
Caused by: <eval>:7 ReferenceError: "pageColor" is not defined
at jdk.nashorn.internal.runtime.ECMAErrors.error(ECMAErrors.java:57)
at jdk.nashorn.internal.runtime.ECMAErrors.referenceError(ECMAErrors.java:319)

Laza

Posts: 2,053
Registered: 6-Sep-2005
Re: Mobile view / Responsive design
Posted: 22 Jan 22, 20:26   in response to: kartphoto in response to: kartphoto
Correct
  Click to reply to this thread Reply
Attachment common.css (12.1 KB)
Oops, sorry, I got lost :) That was the Photoblogger skin's common.css. Here's the same change for Tiger.
kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 22 Jan 22, 20:42   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
yess that worked, great thanks!

will this be automatically processed in the next skinn update? Or is this something I have to manually edit/ monitor after a skinn update ?
Laza

Posts: 2,053
Registered: 6-Sep-2005
Re: Mobile view / Responsive design
Posted: 23 Jan 22, 16:08   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
I decided to keep this as default. So you don't have to edit the file afterward.
kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 23 Jan 22, 16:52   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
great thanks.

p.s on Site - Max Page Width : No limit :
I still see 2 columns, no problem for me now, but maybe better to keep mobile appearance the same (?)
Laza

Posts: 2,053
Registered: 6-Sep-2005
Re: Mobile view / Responsive design
Posted: 24 Jan 22, 08:51   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
No limit is a tough one. The skin is just guessing around to figure out the thumb dimensions / columns here. I'd suggest always choosing some limit, e.g. 1600px.
kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 24 Jan 22, 09:01   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
I understand the people with a Ultra wide 4K screen.

in the past it worked with 1 column :)
Laza

Posts: 2,053
Registered: 6-Sep-2005
Re: Mobile view / Responsive design
Posted: 24 Jan 22, 17:38   in response to: kartphoto in response to: kartphoto
 
  Click to reply to this thread Reply
Do you think they use the browser maximized for the 3840 wide monitor?
JeffTucker

Posts: 7,874
Registered: 31-Jan-2006
Re: Mobile view / Responsive design
Posted: 24 Jan 22, 17:40   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
Do you think they use the browser maximized for the 3840 wide monitor?

Sure. And they use a swivel chair so that they can pan back and forth to see the whole thing.

ETA: I suspect that the monitor may have 3840 pixels horizontally, but is probably displaying 1920 CSS pixels. In other words, it's high density, and won't actually display 3840 CSS pixels across.
kartphoto

Posts: 24
Registered: 10-Sep-2014
Re: Mobile view / Responsive design
Posted: 25 Jan 22, 18:56   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
3840 pixels I guess yes.
or maybe after max page width add 2500 ?

the 2 colomns also occurs when Hero is set on Full width.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums