Alamantus/Readlebee
1
0
Fork 0
mirror of https://gitlab.com/Alamantus/Readlebee.git synced 2025-10-31 16:36:48 +01:00
Code Issues Releases Wiki Activity

Start designing logged out home view

Browse source
This commit is contained in:
Robbie Antenesse 2019-09-13 22:43:07 -06:00
parent 6dab28e7a5
commit 2b95ab81c1
4 changed files with 93 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/views/home/controller.js
View file

@ -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];
}
}

34
app/views/home/index.js
View file

@ -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>`
),
];
}

81
app/views/home/loggedOut.js Normal file
View file

@ -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>`,
];
}

8
app/views/home/styles.scss
View file

@ -1,8 +0,0 @@
.test {
background-color: #dddddd;
padding: 10px;
p {
border: 1px solid #444444;
}
}