Skip to content

Commit

Permalink
Add user home page
Browse files Browse the repository at this point in the history 
Implement personal user lists API. Add lists created by the user automatically.

Introduce new start page accommodating the lists of the user. Change old start page to
listling-intro-page, shown to new users and available via app menu. Automatically add lists to the
user when they are opened.

Furthermore add List.items, move list details to bottom and include owner, left-align the trashed
items cover and update to micro 0.37.

Breaking changes: Update to micro 0.37.

Close #25.
  • Loading branch information
@noyainrain
noyainrain committed Jun 8, 2019
1 parent c1fb506 commit 8330a54
Show file tree
Hide file tree
Showing 15 changed files with 494 additions and 81 deletions.
82 changes: 46 additions & 36 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,35 @@
{% raw micro_dependencies() %}
<link rel="stylesheet" href="{{ static_url('listling.css') }}" />
<script src="{{ static_url('listling/util.js') }}" defer="defer"></script>
<script src="{{ static_url('listling/components/start.js') }}" defer="defer"></script>
<script src="{{ static_url('listling/index.js') }}" defer="defer"></script>
</head>

<body is="listling-ui">
<li class="listling-ui-intro" slot="menu">
<a class="link" href="/intro"><i class="fa fa-fw fa-rocket"></i> Introduction</a>
</li>

{% raw micro_boot() %}

{% raw micro_templates() %}

<template class="listling-start-page-template">
<div class="listling-start-intro">
<template class="listling-intro-page-template">
<div class="listling-intro-intro">
<h1 class="micro-logo">
<img data-src="or settings.icon ''" /> <span data-content="settings.title"></span>
</h1>
<p class="listling-start-slogan">Collaborative lists</p>
<p class="listling-start-keywords">Free · Simple · No registration required</p>
<p class="listling-intro-slogan">Collaborative lists</p>
<p class="listling-intro-keywords">Free · Simple · No registration required</p>
</div>

<div class="listling-start-intro">
<ul class="listling-start-use-cases" data-content="list useCases 'useCase'">
<div class="listling-intro-intro">
<ul class="listling-intro-use-cases" data-content="list useCases 'useCase'">
<template>
<li
class="micro-quick-nav"
data-class-listling-selected="eq useCase selectedUseCase"
data-class-listling-start-no-example="eq useCase.id 'simple'"
data-class-listling-intro-no-example="eq useCase.id 'simple'"
tabindex="0"
data-onmouseenter="focusUseCase"
data-onfocus="bind selectUseCase useCase"
Expand All @@ -42,15 +48,15 @@ <h1 data-content="useCase.title"></h1>
<button
is="micro-button"
type="button"
class="listling-start-create-list action"
class="listling-intro-create-list action"
title="⌨ S"
data-run="bind createList useCase"
data-run="bind createList useCase.id"
data-onfocus="bind selectUseCase useCase"
>
<i class="fa fa-paper-plane"></i> Start
</button>
</p>
<p class="listling-start-create-example">
<p class="listling-intro-create-example">
or view
<button
is="micro-button"
Expand All @@ -67,7 +73,7 @@ <h1 data-content="useCase.title"></h1>
</li>
</template>
</ul>
<p class="listling-start-missing">
<p class="listling-intro-missing">
<small>
Missing a certain kind of list?
<a class="action action-subtle" data-href="settings.feedback_url"
Expand All @@ -83,25 +89,25 @@ <h1 data-content="useCase.title"></h1>
</footer>
</template>
<style>
.listling-start-intro {
.listling-intro-intro {
margin: calc(1.5rem * 3) 0;
text-align: center;
}

.listling-start-intro .micro-logo {
.listling-intro-intro .micro-logo {
font-size: 3em;
}

.listling-start-slogan {
.listling-intro-slogan {
font-size: 2em;
font-weight: 300;
}

.listling-start-keywords {
.listling-intro-keywords {
color: #888;
}

.listling-start-use-cases {
.listling-intro-use-cases {
display: grid;
padding: 0;
grid-template-columns: repeat(auto-fill, calc(14ch * 1.33 + 1.5rem / 2));
Expand All @@ -110,53 +116,53 @@ <h1 data-content="useCase.title"></h1>
list-style: none;
}

.listling-start-use-cases li {
.listling-intro-use-cases li {
padding: calc(1.5rem / 4);
border: 1px solid transparent;
border-radius: calc(1.5rem / 8);
}

.listling-start-use-cases li.listling-selected {
.listling-intro-use-cases li.listling-selected {
border-color: #ddd;
}

.listling-start-use-cases li h1,
.listling-start-use-cases li p {
.listling-intro-use-cases li h1,
.listling-intro-use-cases li p {
margin: calc(1.5rem / 4) 0 0 0;
}

.listling-start-use-cases li > i {
.listling-intro-use-cases li > i {
display: block;
font-size: 2em;
color: #888;
}

.listling-start-use-cases li h1 {
.listling-intro-use-cases li h1 {
font-size: 1.33em;
}

.listling-start-use-cases li:not(.listling-selected) div {
.listling-intro-use-cases li:not(.listling-selected) div {
height: 0;
overflow: hidden;
}

.listling-start-create-example {
.listling-intro-create-example {
color: #888;
}

.listling-start-use-cases li.listling-start-no-example .listling-start-create-example {
.listling-intro-use-cases li.listling-intro-no-example .listling-intro-create-example {
visibility: hidden;
}

listling-start-page footer {
listling-intro-page footer {
text-align: center;
}

listling-start-page footer i {
listling-intro-page footer i {
color: lightpink;
}

[is="listling-ui"]:not(.micro-ui-settings-have-feedback-url) .listling-start-missing {
[is="listling-ui"]:not(.micro-ui-settings-have-feedback-url) .listling-intro-missing {
display: none;
}
</style>
Expand Down Expand Up @@ -236,13 +242,6 @@ <h1>
</textarea>
</label>

<p class="listling-detail listling-list-mode-view" title="Edited by">
<i class="fa fa-pencil-alt"></i>
<span data-content="join lst.authors 'user'">
<template><micro-user data-user="user"></micro-user></template>
</span>
</p>

<div class="listling-list-settings listling-list-mode-edit"
data-class-listling-list-settings-expanded="settingsExpanded">
<p class="listling-detail">
Expand Down Expand Up @@ -335,7 +334,7 @@ <h1>Settings</h1>

<div class="listling-list-trash listling-list-mode-view"
data-class-listling-list-trash-expanded="trashExpanded">
<p class="listling-detail">
<p class="micro-small">
<span
data-content="formatPlural 'There is one trashed item.' 'There are {n} trashed items.' 'n' trashedItemsCount">
</span>
Expand Down Expand Up @@ -374,6 +373,15 @@ <h1>Trashed items</h1>
</p>
<li is="listling-item" data-onedit="stopCreateItem" data-oncancel="stopCreateItem"></li>
</div>

<aside class="listling-list-mode-view">
<i class="fa fa-user-cog"></i> List by
<micro-user data-user="lst.authors.0"></micro-user> · <i class="fa fa-pencil-alt"></i>
Edited by
<span data-content="join lst.authors 'user'">
<template><micro-user data-user="user"></micro-user></template>
</span>
</aside>
</template>
<style>
.listling-list-items,
Expand Down Expand Up @@ -653,4 +661,6 @@ <h1>
</a>
was created by <micro-user data-user="event.user"></micro-user>
</template>

{% include 'listling/components/start.html' %}
</body>
98 changes: 98 additions & 0 deletions client/listling/components/start.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<template id="listling-start-page-template">
<h1>Your lists</h1>

<div class="listling-start-lists micro-entity-list">
<ul data-content="list lists.items 'lst'">
<template>
<li
class="micro-panel micro-quick-nav" tabindex="0" data-onkeydown="onKeyDown"
data-shortcut-context="new ShortcutContext"
>
<a class="link micro-panel-main" data-href="makeListURL lst">
<span data-content="lst.title"></span>
<small>
<span
data-content="formatPlural '{n} item' '{n} items' 'n' lst.items.count"
></span>
<span data-content="switch lst.authors.0.id user.id">
<template>· <i class="fa fa-user-cog"></i> Owner</template>
</span>
</small>
</a>
<ul
is="micro-menu" class="micro-secondary"
data-content="switch lst.authors.0.id user.id"
>
<template></template>
<template>
<li>
<button class="link"><i class="fa fa-fw fa-bars"></i></button>
<ul is="micro-menu">
<li class="micro-panel">
<button
is="micro-button" class="action"
data-run="bind remove lst"
data-shortcut="new Shortcut 'T'"
>
<i class="fa fa-fw fa-minus-circle"></i> Remove from
your lists
</button>
</li>
</ul>
</li>
</template>
</ul>
</li>
</template>
</ul>
<ul>
<li class="micro-panel">
<ul is="micro-menu" class="listling-start-create micro-secondary micro-panel-main">
<li>
<button is="micro-button" class="action" data-shortcut="new Shortcut 'A'">
<i class="fa fa-fw fa-plus-circle"></i> Create new list
</button>
<ul is="micro-menu" data-content="list useCases 'useCase'">
<template>
<li
class="micro-panel"
data-onmousedown="bind createList useCase.id"
>
<p>
<i
data-class-name="format 'fa fa-fw fa-{icon}' 'icon' useCase.icon"
></i>
<span data-content="useCase.title"></span>
</p>
</li>
</template>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<p class="micro-small">
Need inspiration? View some
<a class="link" href="/intro" data-shortcut="new Shortcut 'E'">
<i class="fa fa-book"></i> Examples</a>!
</p>
</template>

<style>
.listling-start-create > li {
flex: auto;
}

.listling-start-create button {
width: 100%;
font-weight: bold;
}

.listling-start-create [is=micro-menu] {
right: auto;
bottom: 100%;
cursor: pointer;
}
</style>
Loading

0 comments on commit 8330a54

Please sign in to comment.