javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 21:01:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Scrollable content on session page

Browse Source
This commit is contained in:
vakrilov
2015-03-21 16:17:26 +02:00
parent ba67154129
commit 60b2b08c99
2 changed files with 70 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/TelerikNEXT/app.css
View File

@ -1,15 +1,7 @@
Label, Button { Label, Button, Image {
margin: 0 5; margin: 0 5;
} }
Image {
margin: 5;
}
.header-image {
margin: 0;
}
.page-title { .page-title {
font-size: 18; font-size: 18;
color: #fac950; color: #fac950;
@ -47,11 +39,11 @@ Image {
.section-header { .section-header {
color: #A17201; color: #A17201;
margin: 5 5 0 10; margin: 5 5 0 5;
} }
.horizontalLine { .horizontal-line {
height: 1; height: 1;
background-color: #FAC950; background-color: #FAC950;
margin: 5 5 0 10; margin: 5 5 0 5;
} }

37
apps/TelerikNEXT/session-page.xml
View File

@ -2,14 +2,11 @@
xmlns:tsb="app/TelerikNEXT/TelerikUI/side-bar" xmlns:tsb="app/TelerikNEXT/TelerikUI/side-bar"
navigatedTo="pageNavigatedTo"> navigatedTo="pageNavigatedTo">
<GridLayout rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="70, *"> <GridLayout rows="auto, *">
<!-- HEADER --> <!-- HEADER -->
<Image colSpan="2" src="~/app/images/background.jpg" stretch="aspectFill" cssClass="header-image"/> <GridLayout columns="70, *" style="background-image: url('~/app/images/background.jpg')">
<StackLayout col="1" margin="15 5">
<StackLayout col="1" > <Label text="{{ title }}" textWrap="true" cssClass="page-title"/>
<Label text="{{ title }}" textWrap="true" cssClass="page-title" margin="15 5 0 5"/>
<Label cssClass="info-orange"> <Label cssClass="info-orange">
<Label.formattedText> <Label.formattedText>
<FormattedString> <FormattedString>
@ -22,24 +19,26 @@
</Label.formattedText> </Label.formattedText>
</Label> </Label>
</StackLayout> </StackLayout>
<Image tap="toggleFavorite" cssClass="favourite-image" <Image tap="toggleFavorite" cssClass="favourite-image"
src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}" src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}"
visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}" /> visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}" />
</GridLayout>
<!-- Scrollable content -->
<ScrollView row="1">
<GridLayout rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="70, *" >
<!-- Description --> <!-- Description -->
<Label cssClass="info" textWrap="true" row="1" col="1" margin="10 5 5 10" <Label cssClass="info" textWrap="true" col="1" margin="10 5 5 5"
text="Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. " /> text="Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. Here is the description. " />
<!-- Line --> <!-- Line -->
<StackLayout cssClass="horizontalLine" row="2" col="1"/> <StackLayout cssClass="horizontal-line" row="1" col="1"/>
<!-- Speakers --> <!-- Speakers -->
<Label text="Speakers" cssClass="section-header" row="3" col="1" /> <Label text="Speakers" cssClass="section-header" row="2" col="1" />
<ListView items="{{ speakers }}" row="4" colSpan="2" height="{{ speakers.length * 76 }}" selectedBackgroundColor="#fac950" separatorColor="#FFFFFF"> <ListView items="{{ speakers }}" row="3" colSpan="2" height="{{ speakers.length * 76 }}" selectedBackgroundColor="#fac950" separatorColor="#FFFFFF">
<ListView.itemTemplate> <ListView.itemTemplate>
<GridLayout columns="70, *" cssClass="list-view-row"> <GridLayout columns="65, *" cssClass="list-view-row">
<Image src="{{ picture }}" verticalAlignment="top"/> <Image src="{{ picture }}" verticalAlignment="top"/>
<StackLayout col="1"> <StackLayout col="1">
@ -69,14 +68,16 @@
</ListView> </ListView>
<!-- Line --> <!-- Line -->
<StackLayout cssClass="horizontalLine" row="5" col="1"/> <StackLayout cssClass="horizontal-line" row="4" col="1"/>
<!-- More --> <!-- More -->
<Label text="More" cssClass="section-header" row="6" col="1"/> <Label text="More" cssClass="section-header" row="5" col="1"/>
<Label text="LEAVE FEEDBACK" row="7" col="1"/> <Label text="LEAVE FEEDBACK" row="6" col="1"/>
<Label text="WATCH VIDEOS" row="8" col="1"/> <Label text="WATCH VIDEOS" row="7" col="1"/>
</GridLayout> </GridLayout>
</ScrollView>
</GridLayout>
</Page> </Page>