構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
Matthias Fenz
Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/04 13:32
答え

Matthias Fenz

ランク: Junior Member

投稿: 79

参加年月日: 2009/03/24

最近の投稿

Hi all,

i'm trying to implement the fluid layout as used by the Liferay website. I installed Liferay 6.1 RC with Tomcat 7 from the download section. Then I posted the following script just before the </body> tag in my portal_normal.vm:

1
2<script type="text/javascript" charset="utf-8">
3AUI().use('aui-viewport');
4</script>


In my custom.css, I tried the follwoing code to test the functionality:

1
2.intro {
3    color: #123456;
4}
5
6.yui3-aui-view-lt720 .intro {
7    color: red;
8}


It doesn't work - and i don't know why...? When i checked my code with firebug, i found out, that the JS looks like this:

1
2/*<![CDATA[*/AUI().use('aui-viewport');/*]]>*/


Could this be the reason and if yes, where should i place my JS code? Any help would be appreciated, thanks in advance,
Matthias
Juan Gonzalez
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/05 0:31
答え

Juan Gonzalez

LIFERAY STAFF

ランク: Liferay Legend

投稿: 1984

参加年月日: 2008/10/28

最近の投稿

Matthias Fenz:
Hi all,

i'm trying to implement the fluid layout as used by the Liferay website. I installed Liferay 6.1 RC with Tomcat 7 from the download section. Then I posted the following script just before the </body> tag in my portal_normal.vm:

1
2<script type="text/javascript" charset="utf-8">
3AUI().use('aui-viewport');
4</script>


In my custom.css, I tried the follwoing code to test the functionality:

1
2.intro {
3    color: #123456;
4}
5
6.yui3-aui-view-lt720 .intro {
7    color: red;
8}


It doesn't work - and i don't know why...? When i checked my code with firebug, i found out, that the JS looks like this:

1
2/*<![CDATA[*/AUI().use('aui-viewport');/*]]>*/


Could this be the reason and if yes, where should i place my JS code? Any help would be appreciated, thanks in advance,
Matthias


Not theme expert, but when I tested viewport from AUI, I had to place it at bottom part.

Did you import the needed alloy javascript to use that function?

If you are using latest sources there have been a change, I guess now AUI.use should be used (instead of AUI().use).
Maarten van Heiningen
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/05 4:25
答え

Maarten van Heiningen

ランク: Regular Member

投稿: 172

参加年月日: 2009/02/05

最近の投稿

Hi Juan,
You were almost there. You just need to past this code inside the <head> .... </head>

1<script type="text/javascript" charset="utf-8">
2AUI().use('aui-viewport');
3</script>


Best Maarten
Matthias Fenz
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/05 12:50
答え

Matthias Fenz

ランク: Junior Member

投稿: 79

参加年月日: 2009/03/24

最近の投稿

Hi Guys, thanks a lot, it works!

But i have another question, when i check my theme on iPhone or iPad (both normal and panorama mode), i get the "normal" 960-width-layout and not the ones I developed for that. I think the browser doesn't get the real width of the frame.

Any idea how to override this, on Liferay's website it works perfectly?

Greets & Regards,
Matthias
匿名
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/05 17:33
答え

匿名

Try putting
1    <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1">


in the <head> section of the portal_normal.vm of the theme
Matthias Fenz
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/06 11:14
答え

Matthias Fenz

ランク: Junior Member

投稿: 79

参加年月日: 2009/03/24

最近の投稿

Thank you Bradley, it works! emoticon
匿名
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/06 11:46
答え

匿名

no problem.

Have you taken a look at Liferay 6.1RC yet?

it lets you use SaSS which helps the code be simpler for mobile site design.

 1
 2@import "compass";
 3
 4@mixin mobile($selector, $width) {
 5    .#{$selector}{
 6        #wrapper,
 7        .portlet-column,
 8        #wrapper #content {
 9            width: $width !important;
10        }
11    }
12}
13
14$mobile-s: 300px;
15$mobile-m: 460px;
16$mobile-l: 700px;
17
18@include mobile("touch.aui-view-320, .touch.aui-view-4", $mobile-s);
19@include mobile("touch.aui-view-480", $mobile-m);
20@include mobile("touch.aui-view-720", $mobile-l);
Juan Gonzalez
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/06 11:53
答え

Juan Gonzalez

LIFERAY STAFF

ランク: Liferay Legend

投稿: 1984

参加年月日: 2008/10/28

最近の投稿

Bradley Wood:
no problem.

Have you taken a look at Liferay 6.1RC yet?

it lets you use SaSS which helps the code be simpler for mobile site design.

 1
 2@import "compass";
 3
 4@mixin mobile($selector, $width) {
 5    .#{$selector}{
 6        #wrapper,
 7        .portlet-column,
 8        #wrapper #content {
 9            width: $width !important;
10        }
11    }
12}
13
14$mobile-s: 300px;
15$mobile-m: 460px;
16$mobile-l: 700px;
17
18@include mobile("touch.aui-view-320, .touch.aui-view-4", $mobile-s);
19@include mobile("touch.aui-view-480", $mobile-m);
20@include mobile("touch.aui-view-720", $mobile-l);


Awesome lesson!

Thanks very much.
匿名
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/06 11:56
答え

匿名

What it does is it stacks all the columns on top of each other and sets the width for the different views.
Muller Strydom
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/01/24 1:04
答え

Muller Strydom

ランク: New Member

投稿: 1

参加年月日: 2012/01/24

最近の投稿

Hi Maarten,

I am still using Liferay 6.0.5

Is it possible to use AUI().use.. on 6.0.5??

Thank you.
Maarten van Heiningen
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/02/19 6:39
答え

Maarten van Heiningen

ランク: Regular Member

投稿: 172

参加年月日: 2009/02/05

最近の投稿

Hi Muller,

Yes, Liferay 6 is supporting Alloyui fully so yes you can use it.

Best,
Maarten
Bahador Vafadar
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/05/09 5:12
答え

Bahador Vafadar

ランク: New Member

投稿: 23

参加年月日: 2012/04/20

最近の投稿

Matthias Fenz:
Thank you Bradley, it works! emoticon


Hello Matthias would you mind sharing the solution I have the same problem as you describes above but I can't solve it no matter how I turn and twist the code.
I would really appreciate it thanks in advance!

Bahador
Rajesh Chaurasia
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/07/20 8:49
答え

Rajesh Chaurasia

ランク: Junior Member

投稿: 92

参加年月日: 2011/08/18

最近の投稿

Can you share me an example of fluid layout that you made ?
Muhammed Shakir
RE: Fluid Layout (as Liferay Website) with AUI doesn't work
2012/08/24 23:51
答え

Muhammed Shakir

ランク: Junior Member

投稿: 33

参加年月日: 2009/02/25

最近の投稿

Hi,

I also had the same problem but then the moment I changed from .yui... to simply .aui (syle names), it worked like a charm. I only used the aui-viewport module through AUI in main.js - thats it.

Hope this helps.