Start designing logged out home view
This commit is contained in:
parent
6dab28e7a5
commit
2b95ab81c1
|
|
@ -5,11 +5,8 @@ export class HomeController extends ViewController {
|
|||
// Super passes state, view name, and default state to ViewController,
|
||||
// which stores state in this.appState and the view controller's state to this.state
|
||||
super(state, 'home', {
|
||||
messages: [
|
||||
'hello',
|
||||
'test',
|
||||
'yay',
|
||||
],
|
||||
recentReviews: [],
|
||||
recentUpdates: [],
|
||||
});
|
||||
|
||||
// If using controller methods in an input's onchange or onclick instance,
|
||||
|
|
@ -17,7 +14,10 @@ export class HomeController extends ViewController {
|
|||
// or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
|
||||
}
|
||||
|
||||
get messages() {
|
||||
return [...this.state.messages];
|
||||
get recentReviews() {
|
||||
return [...this.state.recentReviews];
|
||||
}
|
||||
get recentUpdates() {
|
||||
return [...this.state.recentUpdates];
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +1,18 @@
|
|||
import html from 'choo/html';
|
||||
|
||||
import './styles.scss'; // Creates a separate CSS file, but allows better code splitting.
|
||||
// We'll see if code splitting is worth it in the end or if we should combine everything into `src/index.scss`
|
||||
import { HomeController } from './controller'; // The controller for this view, where processing should happen.
|
||||
import { loggedOutView } from './loggedOut';
|
||||
|
||||
// This is the view function that is exported and used in the view manager.
|
||||
export const homeView = (state, emit) => {
|
||||
const controller = new HomeController(state);
|
||||
const { i18n } = controller;
|
||||
|
||||
// Returning an array in a view allows non-shared parent HTML elements.
|
||||
// This one doesn't have the problem right now, but it's good to remember.
|
||||
return [
|
||||
html`<section>
|
||||
<h2 class="subtitle">${i18n.__('home.subtitle')}</h2>
|
||||
|
||||
<article class="flex two">
|
||||
<div class="half">
|
||||
<div class="card">
|
||||
<header>
|
||||
<p>${i18n.__('home.temp_left')}</p>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<div class="half">
|
||||
<div class="card">
|
||||
<header>
|
||||
<p>${i18n.__('home.temp_right')}</p>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="test">
|
||||
${controller.messages.map(message => {
|
||||
return html`<p>${message}</p>`;
|
||||
})}
|
||||
</article>
|
||||
</section>`,
|
||||
(!controller.isLoggedIn
|
||||
? loggedOutView(controller, emit)
|
||||
: html`<p>lol wut how are u logged in</p>`
|
||||
),
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import html from 'choo/html';
|
||||
|
||||
export const loggedOutView = (homeController, emit) => {
|
||||
return [
|
||||
html`<section>
|
||||
<h2>Read Together</h2>
|
||||
<article class="flex one three-500">
|
||||
<div>
|
||||
<div class="card">
|
||||
<header class="center-align">
|
||||
<span style="font-size:32pt;color:green;">
|
||||
<i class="icon-check"></i>
|
||||
</span>
|
||||
</header>
|
||||
<footer>
|
||||
Keep track of books you've read, want to read, and are currently reading.
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<header class="center-align">
|
||||
<span style="font-size:32pt;color:red;">
|
||||
<i class="icon-heart-filled"></i>
|
||||
</span>
|
||||
</header>
|
||||
<footer>
|
||||
Share your thoughts about what you're reading and see what your friends think of their books.
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<header class="center-align">
|
||||
<span style="font-size:32pt;color:yellow;">
|
||||
<i class="icon-star"></i>
|
||||
</span>
|
||||
</header>
|
||||
<footer>
|
||||
Read, rate, and recommmend books or something. It'll be cool.
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>`,
|
||||
html`<section>
|
||||
<h2>Join the Community</h2>
|
||||
<div class="flex one two-700">
|
||||
<div>
|
||||
<div class="card">
|
||||
<header>
|
||||
<h3>Recent Reviews</h3>
|
||||
<button class="small pseudo pull-right tooltip-left" data-tooltip="Reload">
|
||||
<i class="icon-loading"></i><!--/* This needs to get updated to a reload icon */-->
|
||||
</button>
|
||||
</header>
|
||||
<footer>
|
||||
${homeController.recentReviews.map(review => reviewCard(review))}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card">
|
||||
<header>
|
||||
<h3>Recent Updates</h3>
|
||||
<button class="small pseudo pull-right tooltip-left" data-tooltip="Reload">
|
||||
<i class="icon-loading"></i><!--/* This needs to get updated to a reload icon */-->
|
||||
</button>
|
||||
</header>
|
||||
<footer>
|
||||
${homeController.recentUpdates.map(review => reviewCard(review))}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`,
|
||||
html`<section class="center-align">
|
||||
<a href="/login" class="large success button">Join Now!</a>
|
||||
</section>`,
|
||||
];
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.test {
|
||||
background-color: #dddddd;
|
||||
padding: 10px;
|
||||
|
||||
p {
|
||||
border: 1px solid #444444;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue