New front page and darker style
This commit is contained in:
Stefan Zermatten
@@ -4,18 +4,9 @@ Router.configure({
|
||||
});
|
||||
|
||||
Router.plugin("ensureSignedIn", {
|
||||
except: [
|
||||
"home",
|
||||
"characterSheet",
|
||||
"atSignIn",
|
||||
"atSignUp",
|
||||
"atForgotPassword",
|
||||
"atResetPwd",
|
||||
"atEnrollAccount",
|
||||
"atVerifyEmail",
|
||||
"atResendVerificationEmail",
|
||||
"loginButtons",
|
||||
"notFound",
|
||||
only: [
|
||||
"profile",
|
||||
"characterList",
|
||||
]
|
||||
});
|
||||
|
||||
@@ -94,4 +85,11 @@ Router.map(function() {
|
||||
document.title = appName;
|
||||
},
|
||||
});
|
||||
|
||||
this.route("/guide", {
|
||||
name: "guide",
|
||||
onAfterAction: function() {
|
||||
document.title = appName;
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@@ -70,8 +70,8 @@
|
||||
background-color: #9E9E9E;
|
||||
}
|
||||
|
||||
.blue-grey {
|
||||
background-color: #607D8B;
|
||||
.app-grey {
|
||||
background-color: #424242;
|
||||
}
|
||||
|
||||
.white {
|
||||
|
||||
@@ -19,6 +19,16 @@ body {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
//fix tabs and core-toolbar having box shadow
|
||||
core-toolbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
//give drawer panel a shadow always
|
||||
core-header-panel[drawer] {
|
||||
box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
//Horizontal rule
|
||||
hr {
|
||||
background-color: #444;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="characterList">
|
||||
<core-toolbar class="blue-grey white-text">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<div flex>
|
||||
Characters
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<template name="guide">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<div flex>Guide</div>
|
||||
</core-toolbar>
|
||||
<div layout vertical center>
|
||||
<paper-shadow class="wallOfText card" style="padding: 32px; max-width: 800px;">
|
||||
<h2>Character Sheet Philosophy</h2>
|
||||
|
||||
@@ -1,28 +1,9 @@
|
||||
<template name="home">
|
||||
<core-toolbar class="medium-tall {{colorClass}}">
|
||||
<template name="home">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<div flex>
|
||||
DiceCloud
|
||||
</div>
|
||||
<div class="bottom fit" horizontal layout>
|
||||
<paper-tabs flex horizontal center layout selected={{selectedTab}} class="grey white-text homeTabs">
|
||||
<paper-tab name="stats">Home</paper-tab>
|
||||
<paper-tab name="features">Guide</paper-tab>
|
||||
</paper-tabs>
|
||||
Home
|
||||
</div>
|
||||
</core-toolbar>
|
||||
<div fit>
|
||||
<core-animated-pages class="tabPages" selected={{selectedTab}} transitions="slide-from-right" fit>
|
||||
<section flex name="stats">
|
||||
<div class="scroll-y" fit>
|
||||
{{> intro}}
|
||||
</div>
|
||||
</section>
|
||||
<section flex name="features">
|
||||
<div class="scroll-y" fit>
|
||||
{{> guide}}
|
||||
</div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
</div>
|
||||
{{> intro}}
|
||||
</template>
|
||||
@@ -1,53 +1,89 @@
|
||||
<template name="intro">
|
||||
<div class="intro">
|
||||
<div class="fullwidth">
|
||||
<h1>
|
||||
Online, realtime, unofficial D&D 5e app.
|
||||
</h1>
|
||||
<p>
|
||||
<div class="section white-text" style="background: #282828">
|
||||
<div class="display2">
|
||||
Dice Cloud
|
||||
</div>
|
||||
<img style="width:130px; height:130px; background-color: #282828;"
|
||||
src="/crown-dice-logo-cropped-transparent.png">
|
||||
<div class="display1">
|
||||
Unofficial Online Realtime D&D 5e App
|
||||
</div>
|
||||
<h2>
|
||||
Spend less time shuffling paper and more time playing the game
|
||||
</p>
|
||||
</h2>
|
||||
{{#unless currentUser}}
|
||||
<div layout horizontal around-justified wrap>
|
||||
<paper-button class="red white-text signInButton"
|
||||
style="margin: 16px;"
|
||||
raised>
|
||||
Sign In
|
||||
</paper-button>
|
||||
<paper-button class="red white-text signUpButton"
|
||||
style="margin: 16px;"
|
||||
raised>
|
||||
Sign Up
|
||||
</paper-button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="padding-bottom: 0;"></div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
<div class="fullwidth">
|
||||
<h1>Open Beta</h1>
|
||||
<p>Free to use, updates almost every week</p>
|
||||
<div class="section" style="background-color: #e9e9e9;">
|
||||
<div>
|
||||
<div class="display1">Character Sheet Open Beta</div>
|
||||
<h2 style="margin-bottom: 16px;">
|
||||
Check out the example characters
|
||||
</h2>
|
||||
<div layout horizontal around-justified wrap>
|
||||
<paper-shadow class="card characterCard ssArcher clickable"
|
||||
z="2">
|
||||
<div class="top subhead green white-text">
|
||||
<div class="subhead" flex>
|
||||
Starter Set Archer
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom text">Lawful Good Human</div>
|
||||
</paper-shadow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fullwidth">
|
||||
<h1>See it in action</h1>
|
||||
<a href="/character/yBWwt5XQTTHZiRQxq">Starter Set Archer</a>
|
||||
</div>
|
||||
<div class="fullwidth">
|
||||
<h1>Check out the guide</h1>
|
||||
<p>Learn how your class gives you features, those features have effects, and those effects determine your stats.</p>
|
||||
</div>
|
||||
<div class="fullwidth">
|
||||
<h1>
|
||||
Discuss
|
||||
</h1>
|
||||
<p>
|
||||
On the official
|
||||
<a href="http://reddit.com/r/dicecloud">
|
||||
DiceCloud subreddit
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="fullwidth">
|
||||
<h1>
|
||||
Get involved
|
||||
</h1>
|
||||
<p>Shape upcoming features and track bugs on the
|
||||
<a href="https://trello.com/b/94M0SCnq/dicecloud-roadmap">
|
||||
DiceCloud Trello board
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="fullwidth">
|
||||
<h1>
|
||||
Send feedback instantly
|
||||
</h1>
|
||||
<p>
|
||||
Use the feedback button in the sidebar to drop the developer a direct message
|
||||
</p>
|
||||
<div class="section white-text" style="background: #282828">
|
||||
<div class="columns" layout horizontal around-justified wrap>
|
||||
<div>
|
||||
<h1>Check out the guide</h1>
|
||||
<p>
|
||||
Learn how your class gives you features, those features have effects,
|
||||
and those effects determine your stats.
|
||||
<paper-button class="guideButton">View Guide</paper-button>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1>
|
||||
Discuss
|
||||
</h1>
|
||||
<p>
|
||||
On the official subreddit
|
||||
<paper-button class="redditButton">
|
||||
<a href="http://www.reddit.com/r/dicecloud/">
|
||||
/r/dicecloud
|
||||
</a>
|
||||
</paper-button>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1>
|
||||
Get involved
|
||||
</h1>
|
||||
<p>Shape upcoming features and track bugs on the Dice Cloud Trello board
|
||||
<paper-button class="trelloButton">
|
||||
<a href="https://trello.com/b/94M0SCnq/dicecloud-roadmap">
|
||||
Trello Roadmap
|
||||
</a>
|
||||
</paper-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
14
rpg-docs/client/views/home/intro/intro.js
Normal file
14
rpg-docs/client/views/home/intro/intro.js
Normal file
@@ -0,0 +1,14 @@
|
||||
Template.intro.events({
|
||||
"tap .signInButton": function() {
|
||||
Router.go("/sign-in");
|
||||
},
|
||||
"tap .signUpButton": function() {
|
||||
Router.go("/sign-up");
|
||||
},
|
||||
"tap .ssArcher": function() {
|
||||
Router.go("/character/yBWwt5XQTTHZiRQxq");
|
||||
},
|
||||
"tap .guideButton": function() {
|
||||
Router.go("/guide");
|
||||
},
|
||||
});
|
||||
@@ -1,12 +1,33 @@
|
||||
.intro {
|
||||
.fullwidth {
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
p, h1 {
|
||||
max-width: 450px;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
& > div, & > h2 {
|
||||
padding: 32px;
|
||||
.display1 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.columns > div{
|
||||
max-width: 300px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
paper-button {
|
||||
color: #FF5252;
|
||||
}
|
||||
}
|
||||
}
|
||||
paper-button {
|
||||
min-width: 200px;
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<link rel="import" href="/components/core-icons/editor-icons.html">
|
||||
<link rel="import" href="/components/core-icons/image-icons.html">
|
||||
<link rel="import" href="/components/core-icons/social-icons.html">
|
||||
<link rel="import" href="/components/core-image/core-image.html">
|
||||
<link rel="import" href="/components/core-item/core-item.html">
|
||||
<link rel="import" href="/components/core-menu/core-menu.html">
|
||||
<link rel="import" href="/components/core-scaffold/core-scaffold.html">
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<core-header-panel drawer navigation flex mode="seamed" class="white">
|
||||
<div id="accountSummary">
|
||||
{{#if currentUser}}
|
||||
<div id="profileLink" style="text-decoration: underline; cursor: pointer;">
|
||||
<div id="profileLink"
|
||||
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
|
||||
{{profileLink}}
|
||||
</div>
|
||||
{{else}}
|
||||
@@ -13,6 +14,7 @@
|
||||
<div id="navPanel">
|
||||
<core-item id="homeNav" icon="home" label="Home"></core-item>
|
||||
{{> characterSideList}}
|
||||
<core-item id="guide" icon="social:school" label="Guide"></core-item>
|
||||
<core-item id="feedback" icon="bug-report" label="Send Feedback"></core-item>
|
||||
<core-item id="changeLog" icon="list" label="Change Log"></core-item>
|
||||
</div>
|
||||
@@ -23,7 +25,7 @@
|
||||
transitions="hero-transition cross-fade"
|
||||
selected={{globalDetailSelected}}>
|
||||
<section id="mainContentSection" class={{notSelected}}>
|
||||
<core-header-panel fit mode="seamed">
|
||||
<core-header-panel fit mode="standard">
|
||||
{{> yield}}
|
||||
</core-header-panel>
|
||||
<div>
|
||||
|
||||
@@ -41,4 +41,8 @@ Template.layout.events({
|
||||
Router.go("changeLog");
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
},
|
||||
"tap #guide": function(event, instance) {
|
||||
Router.go("guide");
|
||||
instance.find("core-drawer-panel").closeDrawer();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.bigSpinner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="loading">
|
||||
<core-toolbar class="blue-grey white-text">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
</core-toolbar>
|
||||
<div fit layout vertical center center-justified>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="changeLog">
|
||||
<core-toolbar class="blue-grey white-text">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<div flex>
|
||||
Change Log
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="titledAtForm">
|
||||
<core-toolbar class="blue-grey white-text">
|
||||
<core-toolbar class="app-grey white-text">
|
||||
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
|
||||
<div flex>
|
||||
|
||||
|
||||
BIN
rpg-docs/public/crown-dice-logo-cropped-transparent.png
Normal file
BIN
rpg-docs/public/crown-dice-logo-cropped-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 60 KiB |
Reference in New Issue
Block a user