-
+
+
+
Read more...
+
+
Read less...
-
@@ -25,6 +38,7 @@
var artworks = null;
var artworksPosition = 0;
var artworksTimer = null;
+ var selectedScreenshot = 0;
ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
// populate games page
@@ -41,6 +55,15 @@
} else {
gameSummaryLabel.innerHTML = result.storyline;
}
+
+ if (gameSummaryLabel.offsetHeight < gameSummaryLabel.scrollHeight ||
+ gameSummaryLabel.offsetWidth < gameSummaryLabel.scrollWidth) {
+ // your element has overflow and truncated
+ // show read more / read less button
+ document.querySelector('#gamesummarytext_label_button_expand').setAttribute('style', '');
+ } else {
+ // your element doesn't overflow (not truncated)
+ }
} else {
gameSummaryLabel.setAttribute('style', 'display: none;');
}
@@ -83,15 +106,19 @@
var gameScreenshots = document.getElementById('gamescreenshots');
if (result.screenshots) {
var gameScreenshots_Main = document.getElementById('gamescreenshots_main');
- gameScreenshots_Main.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/screenshots/' + result.screenshots.ids[0] + '/image"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
+ //gameScreenshots_Main.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/screenshots/' + result.screenshots.ids[0] + '/image"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
- var gameScreenshots_Gallery = document.getElementById('gamescreenshots_gallery');
+ var gameScreenshots_Gallery = document.getElementById('gamescreenshots_gallery_panel');
for (var i = 0; i < result.screenshots.ids.length; i++) {
var screenshotItem = document.createElement('div');
+ screenshotItem.id = 'gamescreenshots_gallery_' + i;
+ screenshotItem.setAttribute('name', 'gamescreenshots_gallery_item');
screenshotItem.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/screenshots/' + result.screenshots.ids[i] + '/image"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
screenshotItem.className = 'gamescreenshosts_gallery_item';
+ screenshotItem.setAttribute('onclick', 'selectScreenshot(' + i + ');');
gameScreenshots_Gallery.appendChild(screenshotItem);
}
+ selectScreenshot(0);
} else {
gamescreenshots.setAttribute('style', 'display: none;');
}
@@ -105,7 +132,51 @@
}
var bg = document.getElementById('bgImage');
bg.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/artwork/' + artworks[artworksPosition] + '/image"); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px);');
- artworksTimer = setTimeout(rotateBackground, 2500);
+ artworksTimer = setTimeout(rotateBackground, 60000);
}
}
+
+ function selectScreenshot(index) {
+ var gameScreenshots_Main = document.getElementById('gamescreenshots_main');
+ var gameScreenshots_Selected = document.getElementById('gamescreenshots_gallery_' + index);
+ var gameScreenshots_Items = document.getElementsByName('gamescreenshots_gallery_item');
+
+ // set the selction class
+ for (var i = 0; i < gameScreenshots_Items.length; i++) {
+ if (gameScreenshots_Items[i].id == gameScreenshots_Selected.id) {
+ gameScreenshots_Items[i].classList.add('gamescreenshosts_gallery_item_selected');
+ gameScreenshots_Selected.scrollIntoView();
+ } else {
+ gameScreenshots_Items[i].classList.remove('gamescreenshosts_gallery_item_selected');
+ }
+ }
+
+ // set the screenshot
+ gameScreenshots_Main.setAttribute('style', gameScreenshots_Selected.getAttribute('style'));
+ selectedScreenshot = index;
+ }
+
+ function selectScreenshot_Next() {
+ var gameScreenshots_Items = document.getElementsByName('gamescreenshots_gallery_item');
+
+ selectedScreenshot += 1;
+
+ if (selectedScreenshot >= gameScreenshots_Items.length) {
+ selectedScreenshot = 0;
+ }
+
+ selectScreenshot(selectedScreenshot);
+ }
+
+ function selectScreenshot_Prev() {
+ var gameScreenshots_Items = document.getElementsByName('gamescreenshots_gallery_item');
+
+ selectedScreenshot = selectedScreenshot - 1;
+
+ if (selectedScreenshot < 0) {
+ selectedScreenshot = gameScreenshots_Items.length - 1;
+ }
+
+ selectScreenshot(selectedScreenshot);
+ }
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css
index 4715c9a..33cf6cd 100644
--- a/gaseous-server/wwwroot/styles/style.css
+++ b/gaseous-server/wwwroot/styles/style.css
@@ -96,6 +96,36 @@ input[id='filter_panel_search'] {
width: 160px;
}
+/* width */
+::-webkit-scrollbar {
+ width: 10px;
+ height: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+ background: #383838;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+.text_link {
+
+}
+
+.text_link:hover {
+ cursor: pointer;
+ text-decoration: underline;
+}
+
#games_home {
display: flex;
margin-top: 20px;
@@ -168,13 +198,13 @@ input[id='filter_panel_search'] {
}
#mainbody {
- margin-right: 300px;
+ margin-left: 270px;
}
#gamesummary {
- float: right;
- margin-left: 30px;
- width: 280px;
+ float: left;
+ margin-right: 20px;
+ width: 250px;
}
.game_cover_image {
@@ -186,8 +216,8 @@ input[id='filter_panel_search'] {
.rating_image {
display: inline-block;
- max-width: 72px;
- max-height: 72px;
+ max-width: 64px;
+ max-height: 64px;
margin-right: 20px;
margin-bottom: 20px;
}
@@ -202,7 +232,7 @@ input[id='filter_panel_search'] {
#gamescreenshots {
background-color: black;
padding: 10px;
- height: 350px;
+ /*height: 350px;*/
margin-bottom: 20px;
}
@@ -215,9 +245,17 @@ input[id='filter_panel_search'] {
#gamescreenshots_gallery {
left: 0px;
right: 0px;
- height: 50px;
+ height: 65px;
overflow-x: scroll;
- text-align: center;
+ overflow-y: hidden;
+ white-space: normal;
+}
+
+#gamescreenshots_gallery_panel {
+ display: block;
+ height: 50px;
+ margin-bottom: 10px;
+ white-space: nowrap;
}
.gamescreenshosts_gallery_item {
@@ -225,4 +263,57 @@ input[id='filter_panel_search'] {
height: 50px;
width: 70px;
margin-right: 10px;
+ white-space: nowrap;
+ border-color: black;
+ border-style: solid;
+ border-width: 2px;
+}
+
+.gamescreenshots_arrows {
+ margin-top: 140px;
+ height: 50px;
+ width: 30px;
+ font-size: 40px;
+ background-color: #383838;
+ color: black;
+ text-align: center;
+
+ user-select: none; /* standard syntax */
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+ -moz-user-select: none; /* mozilla browsers */
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
+ -ms-user-select: none; /* IE10+ */
+}
+
+.gamescreenshots_arrows:hover {
+ cursor: pointer;
+ background-color: #555;
+}
+
+#gamescreenshots_left_arrow {
+ float: left;
+}
+
+#gamescreenshots_right_arrow {
+ float: right;
+}
+
+.gamescreenshosts_gallery_item:hover {
+ border-color: lightblue;
+}
+
+.gamescreenshosts_gallery_item_selected {
+ border-color: white;
+}
+
+#gamesummarytext_label {
+
+}
+
+.line-clamp-4 {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ /* truncate to 4 lines */
+ -webkit-line-clamp: 4;
}
\ No newline at end of file