Skip to content

Commit

Permalink
HomeTVApp: improvement of WebClip Apps On TV
Browse files Browse the repository at this point in the history 
[Issue] #1421
[Problem] HomeTVApp: Improve AppsOnTV webclip
[Solution]
 - add Containers to webclip cart

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
  • Loading branch information
@TomaszLukawskiSam @singa2000
TomaszLukawskiSam authored and singa2000 committed Sep 21, 2020
1 parent 43da9ef commit e46c553
Show file tree
Hide file tree
Showing 10 changed files with 165 additions and 40 deletions.
51 changes: 20 additions & 31 deletions examples/mobile/HomeApp/webclip/apps-on-tv/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,29 @@
.app-image-grid {
margin: auto;
display: grid;
grid-template-columns: repeat(3, 100px [col-start]);
grid-template-rows: auto;
gap: 10px;
justify-items: center;
justify-content: center;
padding: 20px;
.ui-active-item {
transform: scale(1.2);
}

.app-icon-img {
width: 100px;
height: 100px;
.ui-container {
max-height: 200px;
}

.app-channel-content {
display: flex;
.ui-container > * {
transition: transform 200ms ease-in-out;
margin: 4px;
}

.app-movie-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
.ui-container-hidden {
display: none;
}

.app-movie-poster {
width: 80%;
height: auto;
.app-disney.ui-container .ui-container-item {
width: auto;
}

.app-movie-poster-next {
width: 50%;
.app-disney.ui-container .ui-container-item img {
width: auto;
height: 200px;
}

.app-display-none {
display: none;
.app-primevideo.ui-container .ui-container-item {
width: auto;
}
.app-primevideo.ui-container .ui-container-item img {
width: auto;
height: 200px;
}
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/5.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/6.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/mobile/HomeApp/webclip/apps-on-tv/images/7.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions examples/mobile/HomeApp/webclip/apps-on-tv/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* global tau */
document.addEventListener("cardcontentchange", function (e) {
var card = e.target,
apps;

if (card.id === "apps-on-tv") {
apps = card.querySelector(".webclip-apps");
apps.addEventListener("vclick", function (e) {
var currentActive = apps.querySelector(".ui-active-item"),
selected = tau.util.selectors.getClosestBySelector(e.target, ".ui-container > *"),
activeContainer,
selectedContainer;

// toggle selected
if (currentActive && currentActive !== selected) {
currentActive.classList.remove("ui-active-item");
selected.classList.add("ui-active-item");

// container change
activeContainer = card.querySelector(".ui-container-active");
activeContainer.classList.remove("ui-container-active");
activeContainer.classList.add("ui-container-hidden");

selectedContainer = card.querySelector(".app-" + selected.dataset.container);
selectedContainer.classList.add("ui-container-active");
selectedContainer.classList.remove("ui-container-hidden");

// reset scroll position
card.querySelector(".ui-content").scrollLeft = 0;
}
}, true)
}

});
120 changes: 111 additions & 9 deletions examples/mobile/HomeApp/webclip/apps-on-tv/webclip.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,118 @@
<div class="ui-card">
<div class="ui-card ui-card-service" id="apps-on-tv">
<link rel="stylesheet" href="css/style.css" />
<div class="ui-content-subheader">
Apps on TV
</div>
<div class="ui-content-area">
<div class="app-image-grid">
<img src="./images/netflix.png" alt="Netflix" class="app-icon-img"/>
<img src="./images/hbogo.png" alt="HBO GO" class="app-icon-img"/>
<img src="./images/primevideo.png" alt="Amazon Prime Video" class="app-icon-img"/>
<img src="./images/disneyplus.png" alt="Disney Plus" class="app-icon-img"/>
<img src="./images/youtube.png" alt="Youtube" class="app-icon-img"/>
<img src="./images/twitch.png" alt="Twitch" class="app-icon-img"/>
<div class="ui-content" data-scroll="x">
<div class="ui-container app-youtube ui-container-active">
<div class="ui-container-item">
<img src="images/youtube/yt1.png" alt="image 1">
</div>
<div class="ui-container-item">
<img src="images/youtube/yt2.png" alt="image 2">
</div>
<div class="ui-container-item">
<img src="images/youtube/yt3.png" alt="image 3">
</div>
<div class="ui-container-item">
<img src="images/youtube/yt4.png" alt="image 4">
</div>
<div class="ui-container-item">
<img src="images/youtube/yt5.png" alt="image 5">
</div>
</div>

<div class="ui-container app-disney ui-container-hidden">
<div class="ui-container-item">
<img src="images/disney/cinderella.jpg" alt="image 1">
</div>
<div class="ui-container-item">
<img src="images/disney/frozen.jpeg" alt="image 2">
</div>
<div class="ui-container-item">
<img src="images/disney/mermaid.jpg" alt="image 3">
</div>
<div class="ui-container-item">
<img src="images/disney/mulan.jpg" alt="image 4">
</div>
</div>

<div class="ui-container app-primevideo ui-container-hidden">
<div class="ui-container-item">
<img src="images/movies/a-star-is-born.jpg" alt="image 1">
</div>
<div class="ui-container-item">
<img src="images/movies/aladdin.jpg" alt="image 2">
</div>
<div class="ui-container-item">
<img src="images/movies/ant_man.jpg" alt="image 3">
</div>
<div class="ui-container-item">
<img src="images/movies/John_Wick.jpg" alt="image 4">
</div>
<div class="ui-container-item">
<img src="images/movies/John_Wick3.jpg" alt="image 5">
</div>
<div class="ui-container-item">
<img src="images/movies/joker.jpeg" alt="image 6">
</div>
<div class="ui-container-item">
<img src="images/movies/matrix.jpg" alt="image 7">
</div>
</div>

<div class="ui-container app-smartthings ui-container-hidden">
<div class="ui-container-item">
<img src="images/smartthings/st1.png" alt="image 1">
</div>
<div class="ui-container-item">
<img src="images/smartthings/st2.png" alt="image 2">
</div>
<div class="ui-container-item">
<img src="images/smartthings/st3.png" alt="image 3">
</div>
<div class="ui-container-item">
<img src="images/smartthings/st4.png" alt="image 4">
</div>
<div class="ui-container-item">
<img src="images/smartthings/st5.png" alt="image 5">
</div>
<div class="ui-container-item">
<img src="images/smartthings/st6.png" alt="image 6">
</div>
<div class="ui-container-item">
<img src="images/smartthings/st7.png" alt="image 7">
</div>
</div>

<div class="ui-container app-internet ui-container-hidden">
<div class="ui-container-item">
<img src="images/webpage/page1.png" alt="image 1">
</div>
<div class="ui-container-item">
<img src="images/webpage/page2.png" alt="image 2">
</div>
<div class="ui-container-item">
<img src="images/webpage/page3.png" alt="image 3">
</div>
<div class="ui-container-item">
<img src="images/webpage/page4.png" alt="image 4">
</div>
<div class="ui-container-item">
<img src="images/webpage/page1.png" alt="image 5">
</div>
</div>
</div>

<div class="ui-content" data-scroll="x">
<div class="ui-container webclip-apps">
<img src="./images/youtube.png" alt="Youtube" class="app-icon-img ui-favorite ui-active-item" data-container="youtube"/>
<img src="./images/disneyplus.png" alt="Disney Plus" class="app-icon-img ui-favorite" data-container="disney"/>
<img src="./images/primevideo.png" alt="Amazon Prime Video" class="app-icon-img ui-favorite" data-container="primevideo"/>
<img src="./images/smartthings.png" alt="Smartthings" class="app-icon-img ui-favorite" data-container="smartthings"/>
<img src="./images/internet.png" alt="internet" class="app-icon-img ui-favorite" data-container="internet"/>
</div>
</div>

<script src="js/app.js"></script>
</div>

0 comments on commit e46c553

Please sign in to comment.