jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New front page and darker style

Browse Source
This commit is contained in:
Stefan Zermatten
2015-06-15 13:29:33 +02:00
parent 06ab7c5116
commit eebb88b6b1
18 changed files with 164 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
rpg-docs/Routes/Routes.js
View File

@@ -4,18 +4,9 @@ Router.configure({
}); });
Router.plugin("ensureSignedIn", { Router.plugin("ensureSignedIn", {
except: [ only: [
"home", "profile",
"characterSheet", "characterList",
"atSignIn",
"atSignUp",
"atForgotPassword",
"atResetPwd",
"atEnrollAccount",
"atVerifyEmail",
"atResendVerificationEmail",
"loginButtons",
"notFound",
] ]
}); });
@@ -94,4 +85,11 @@ Router.map(function() {
document.title = appName; document.title = appName;
}, },
}); });
this.route("/guide", {
name: "guide",
onAfterAction: function() {
document.title = appName;
},
});
}); });

4
rpg-docs/client/style/colors.scss
View File

@@ -70,8 +70,8 @@
background-color: #9E9E9E; background-color: #9E9E9E;
} }
.blue-grey { .app-grey {
background-color: #607D8B; background-color: #424242;
} }
.white { .white {

10
rpg-docs/client/style/main.scss
View File

@@ -19,6 +19,16 @@ body {
background-color: #E0E0E0; 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 //Horizontal rule
hr { hr {
background-color: #444; background-color: #444;

2
rpg-docs/client/views/characterList/characterList.html
View File

@@ -1,5 +1,5 @@
<template name="characterList"> <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> <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div flex> <div flex>
Characters Characters

4
rpg-docs/client/views/guide/guide.html
View File

@@ -1,4 +1,8 @@
<template name="guide"> <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> <div layout vertical center>
<paper-shadow class="wallOfText card" style="padding: 32px; max-width: 800px;"> <paper-shadow class="wallOfText card" style="padding: 32px; max-width: 800px;">
<h2>Character Sheet Philosophy</h2> <h2>Character Sheet Philosophy</h2>

27
rpg-docs/client/views/home/home.html
View File

@@ -1,28 +1,9 @@
<template name="home"> <template name="home">
<core-toolbar class="medium-tall {{colorClass}}"> <core-toolbar class="app-grey white-text">
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button> <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div flex> <div flex>
DiceCloud Home
</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>
</div> </div>
</core-toolbar> </core-toolbar>
<div fit> {{> intro}}
<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>
</template> </template>

126
rpg-docs/client/views/home/intro/intro.html
View File

@@ -1,53 +1,89 @@
<template name="intro"> <template name="intro">
<div class="intro"> <div class="intro">
<div class="fullwidth"> <div class="section white-text" style="background: #282828">
<h1> <div class="display2">
Online, realtime, unofficial D&amp;D 5e app. Dice Cloud
</h1> </div>
<p> <img style="width:130px; height:130px; background-color: #282828;"
src="/crown-dice-logo-cropped-transparent.png">
<div class="display1">
Unofficial Online Realtime D&amp;D 5e App
</div>
<h2>
Spend less time shuffling paper and more time playing the game 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>
<div class="fullwidth"> <div class="section" style="background-color: #e9e9e9;">
<h1>Open Beta</h1> <div>
<p>Free to use, updates almost every week</p> <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>
<div class="fullwidth"> <div class="section white-text" style="background: #282828">
<h1>See it in action</h1> <div class="columns" layout horizontal around-justified wrap>
<a href="/character/yBWwt5XQTTHZiRQxq">Starter Set Archer</a> <div>
</div> <h1>Check out the guide</h1>
<div class="fullwidth"> <p>
<h1>Check out the guide</h1> Learn how your class gives you features, those features have effects,
<p>Learn how your class gives you features, those features have effects, and those effects determine your stats.</p> and those effects determine your stats.
</div> <paper-button class="guideButton">View Guide</paper-button>
<div class="fullwidth"> </p>
<h1> </div>
Discuss <div>
</h1> <h1>
<p> Discuss
On the official </h1>
<a href="http://reddit.com/r/dicecloud"> <p>
DiceCloud subreddit On the official subreddit
</a> <paper-button class="redditButton">
</p> <a href="http://www.reddit.com/r/dicecloud/">
</div> /r/dicecloud
<div class="fullwidth"> </a>
<h1> </paper-button>
Get involved </p>
</h1> </div>
<p>Shape upcoming features and track bugs on the <div>
<a href="https://trello.com/b/94M0SCnq/dicecloud-roadmap"> <h1>
DiceCloud Trello board Get involved
</a> </h1>
</p> <p>Shape upcoming features and track bugs on the Dice Cloud Trello board
</div> <paper-button class="trelloButton">
<div class="fullwidth"> <a href="https://trello.com/b/94M0SCnq/dicecloud-roadmap">
<h1> Trello Roadmap
Send feedback instantly </a>
</h1> </paper-button>
<p> </p>
Use the feedback button in the sidebar to drop the developer a direct message </div>
</p> </div>
</div> </div>
</div> </div>
</template> </template>

14
rpg-docs/client/views/home/intro/intro.js Normal file
View 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");
},
});

29
rpg-docs/client/views/home/intro/intro.scss
View File

@@ -1,12 +1,33 @@
.intro { .intro {
.fullwidth { .section {
width: 100%; width: 100%;
padding: 16px; min-height: 200px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
flex-direction: column; flex-direction: column;
p, h1 { padding-top: 24px;
max-width: 450px; 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;
} }
} }
} }

1
rpg-docs/client/views/layout/imports.html
View File

@@ -8,6 +8,7 @@
<link rel="import" href="/components/core-icons/editor-icons.html"> <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/image-icons.html">
<link rel="import" href="/components/core-icons/social-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-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html"> <link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-scaffold/core-scaffold.html"> <link rel="import" href="/components/core-scaffold/core-scaffold.html">

6
rpg-docs/client/views/layout/layout.html
View File

@@ -3,7 +3,8 @@
<core-header-panel drawer navigation flex mode="seamed" class="white"> <core-header-panel drawer navigation flex mode="seamed" class="white">
<div id="accountSummary"> <div id="accountSummary">
{{#if currentUser}} {{#if currentUser}}
<div id="profileLink" style="text-decoration: underline; cursor: pointer;"> <div id="profileLink"
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
{{profileLink}} {{profileLink}}
</div> </div>
{{else}} {{else}}
@@ -13,6 +14,7 @@
<div id="navPanel"> <div id="navPanel">
<core-item id="homeNav" icon="home" label="Home"></core-item> <core-item id="homeNav" icon="home" label="Home"></core-item>
{{> characterSideList}} {{> 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="feedback" icon="bug-report" label="Send Feedback"></core-item>
<core-item id="changeLog" icon="list" label="Change Log"></core-item> <core-item id="changeLog" icon="list" label="Change Log"></core-item>
</div> </div>
@@ -23,7 +25,7 @@
transitions="hero-transition cross-fade" transitions="hero-transition cross-fade"
selected={{globalDetailSelected}}> selected={{globalDetailSelected}}>
<section id="mainContentSection" class={{notSelected}}> <section id="mainContentSection" class={{notSelected}}>
<core-header-panel fit mode="seamed"> <core-header-panel fit mode="standard">
{{> yield}} {{> yield}}
</core-header-panel> </core-header-panel>
<div> <div>

4
rpg-docs/client/views/layout/layout.js
View File

@@ -41,4 +41,8 @@ Template.layout.events({
Router.go("changeLog"); Router.go("changeLog");
instance.find("core-drawer-panel").closeDrawer(); instance.find("core-drawer-panel").closeDrawer();
}, },
"tap #guide": function(event, instance) {
Router.go("guide");
instance.find("core-drawer-panel").closeDrawer();
},
}); });

1
rpg-docs/client/views/loading/loading.css
View File

@@ -1,4 +1,5 @@
.bigSpinner { .bigSpinner {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-bottom: 16px;
} }

2
rpg-docs/client/views/loading/loading.html
View File

@@ -1,5 +1,5 @@
<template name="loading"> <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-icon-button icon="menu" core-drawer-toggle></core-icon-button>
</core-toolbar> </core-toolbar>
<div fit layout vertical center center-justified> <div fit layout vertical center center-justified>

2
rpg-docs/client/views/meta/changeLog/changeLog.html
View File

@@ -1,5 +1,5 @@
<template name="changeLog"> <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> <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div flex> <div flex>
Change Log Change Log

2
rpg-docs/client/views/user/titledAtForm/titledAtForm.html
View File

@@ -1,5 +1,5 @@
<template name="titledAtForm"> <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> <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<div flex> <div flex>

BIN
rpg-docs/public/crown-dice-logo-cropped-transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
rpg-docs/public/png/paper-dice-crown.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 60 KiB