Mirrors/overte-Armored-Dragon
3
0
Fork 0
mirror of https://github.com/Armored-Dragon/overte.git synced 2025-03-11 16:13:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add navigation bar to marketplace pages

Browse source
This commit is contained in:
David Rowe 2016-11-15 14:38:03 +13:00 committed by Seth Alves
parent 57ca34f866
commit fd24d12bc1
7 changed files with 135 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
scripts/system/html/css/edit-style.css
View file

@ -334,9 +334,14 @@ input[type=button].red {
}
input[type=button].blue {
color: #fff;
background-color: #94132e;
background-color: #1080b8;
background: linear-gradient(#00b4ef 20%, #1080b8 100%);
}
input[type=button].white {
color: #121212;
background-color: #afafaf;
background: linear-gradient(#fff 20%, #afafaf 100%);
}
input[type=button]:enabled:hover {
background: linear-gradient(#000, #000);
@ -350,6 +355,10 @@ input[type=button].blue:enabled:hover {
background: linear-gradient(#00b4ef, #00b4ef);
border: none;
}
input[type=button].white:enabled:hover {
background: linear-gradient(#fff, #fff);
border: none;
}
input[type=button]:active {
background: linear-gradient(#343434, #343434);
@ -360,6 +369,9 @@ input[type=button].red:active {
input[type=button].blue:active {
background: linear-gradient(#1080b8, #1080b8);
}
input[type=button].white:active {
background: linear-gradient(#afafaf, #afafaf);
}
input[type=button]:disabled {
color: #252525;

32
scripts/system/html/css/marketplaces.css
View file

@ -22,11 +22,12 @@ body {
margin-bottom: 20px;
}
.marketplaces-intro-text {
margin-bottom: 60px;
margin-bottom: 30px;
}
.marketplace-tile {
float:left;
width: 100%;
margin-bottom: 25px;
}
.marketplace-tile-first-column {
text-align: center;
@ -75,6 +76,35 @@ body {
.marketplace-clara-steps > li {
margin-top: 5px;
}
#marketplace-navigation {
width: 100%;
height: 50px;
background: #00b4ef;
position: fixed;
bottom: 0;
}
#marketplace-navigation .glyph {
margin-left: 20px;
font-family: HiFi-Glyphs;
color: #fff;
font-size: 40px;
line-height: 50px;
}
#marketplace-navigation .text {
color: #fff;
font-size: 18px;
line-height: 50px;
vertical-align: top;
position: relative;
top: 1px;
}
#marketplace-navigation input {
float: right;
margin-right: 50px;
margin-top: 12px;
}
@media (max-width:768px) {
.marketplace-tile-first-column {
float: left;

46
scripts/system/html/js/marketplacesClara.js
View file

@ -10,4 +10,48 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
console.log("Hello from marketplacesClara.js");
function onLoad() {
// Supporting styles from marketplaces.css.
$("head").append(
'<style>' +
'#marketplace-navigation { width: 100%; height: 50px; background: #00b4ef; position: fixed; bottom: 0; }' +
'#marketplace-navigation .glyph { margin-left: 20px; font-family: HiFi-Glyphs; color: #fff; font-size: 40px; line-height: 50px; }' +
'#marketplace-navigation .text { color: #fff; font-size: 18px; line-height: 50px; vertical-align: top; position: relative; top: 1px; }' +
'#marketplace-navigation input { float: right; margin-right: 50px; margin-top: 12px; }' +
'</style>'
);
// Supporting styles from edit-style.css.
$("head").append(
'<style>' +
'input[type=button] { font-family: Raleway-Bold; font-size: 13px; text-transform: uppercase; vertical-align: top; height: 28px; min-width: 120px; padding: 0px 18px; margin-right: 6px; border-radius: 5px; border: none; color: #fff; background-color: #000; background: linear-gradient(#343434 20%, #000 100%); cursor: pointer; }' +
'input[type=button].white { color: #121212; background-color: #afafaf; background: linear-gradient(#fff 20%, #afafaf 100%); }' +
'input[type=button].white:enabled:hover { background: linear-gradient(#fff, #fff); border: none; }' +
'input[type=button].white:active { background: linear-gradient(#afafaf, #afafaf); }' +
'</style>'
);
// Make space for marketplaces footer.
$("head").append(
'<style>' +
'#app { margin-bottom: 135px; }' +
'.footer { bottom: 50px; }' +
'</style>'
);
// Marketplaces footer.
$("body").append(
'<div id="marketplace-navigation">' +
'<span class="glyph">[</span> <span class="text">Check out other marketplaces.</span>' +
'<input id="all-markets" type="button" class="white" value="See All Markets" />' +
'</div>'
);
// Marketplace footer action.
$("#all-markets").on("click", function () {
$("#marketplace-content").attr("src", "marketplacesDirectory.html");
EventBridge.emitWebEvent("RELOAD_DIRECTORY");
});
}
window.addEventListener("load", onLoad);

2
scripts/system/html/js/marketplacesDirectory.js
View file

@ -10,4 +10,4 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
console.log("Hello from marketplacesDirectory.js");
// Nothing to do; just need empty script to replace individual marketplace ones.

38
scripts/system/html/js/marketplacesHiFi.js
View file

@ -10,4 +10,40 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
console.log("Hello from marketplacesHiFi.js");
function onLoad() {
// Supporting styles from marketplaces.css.
$("head").append(
'<style>' +
'#marketplace-navigation { width: 100%; height: 50px; background: #00b4ef; position: fixed; bottom: 0; }' +
'#marketplace-navigation .glyph { margin-left: 20px; font-family: HiFi-Glyphs; color: #fff; font-size: 40px; line-height: 50px; }' +
'#marketplace-navigation .text { color: #fff; font-size: 18px; line-height: 50px; vertical-align: top; position: relative; top: 1px; }' +
'#marketplace-navigation input { float: right; margin-right: 50px; margin-top: 12px; }' +
'</style>'
);
// Supporting styles from edit-style.css.
$("head").append(
'<style>' +
'input[type=button] { font-family: Raleway-Bold; font-size: 13px; text-transform: uppercase; vertical-align: top; height: 28px; min-width: 120px; padding: 0px 18px; margin-right: 6px; border-radius: 5px; border: none; color: #fff; background-color: #000; background: linear-gradient(#343434 20%, #000 100%); cursor: pointer; }' +
'input[type=button].white { color: #121212; background-color: #afafaf; background: linear-gradient(#fff 20%, #afafaf 100%); }' +
'input[type=button].white:enabled:hover { background: linear-gradient(#fff, #fff); border: none; }' +
'input[type=button].white:active { background: linear-gradient(#afafaf, #afafaf); }' +
'</style>'
);
// Marketplaces footer.
$("body").append(
'<div id="marketplace-navigation">' +
'<span class="glyph">[</span> <span class="text">Check out other marketplaces.</span>' +
'<input id="all-markets" type="button" class="white" value="See All Markets" />' +
'</div>'
);
// Marketplace footer action.
$("#all-markets").on("click", function () {
$("#marketplace-content").attr("src", "marketplacesDirectory.html");
EventBridge.emitWebEvent("RELOAD_DIRECTORY");
});
}
window.addEventListener("load", onLoad);

4
scripts/system/html/marketplaces.html
View file

@ -49,5 +49,9 @@
</div>
</div>
</div>
<div id="marketplace-navigation">
<span class="glyph">[</span> <span class="text">Select a marketplace to explore.</span>
<!--<input id="all-markets" type="button" class="white" value="See All Markets" />-->
</div>
</body>
</html>

4
scripts/system/marketplaces/marketplaces.js
View file

@ -32,6 +32,10 @@ marketplaceWindow.webEventReceived.connect(function (data) {
if (data === "INJECT_HIFI") {
marketplaceWindow.setScriptURL(Script.resolvePath("../html/js/marketplacesHiFi.js"));
}
if (data === "RELOAD_DIRECTORY") {
marketplaceWindow.setScriptURL(Script.resolvePath("../html/js/marketplacesDirectory.js"));
marketplaceWindow.setURL(MARKETPLACES_URL);
}
});
var toolHeight = 50;