Skip to content

Bug fixes and logo work #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abbysko wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Bug fixes and logo work #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
986f624
Update logo to use 3x3 grid of options to better fit square icon aspe…
abbysko Aug 30, 2026
a05dbe0
Update legacy action button on list detail view. Clean up css to use …
abbysko Aug 30, 2026
ed5b13f
Bump up sizes of fonts, icons and hit areas a little to improve mobil…
abbysko Aug 30, 2026
e0b42d5
Allow for lists to be either ordered alphabetically or in a custom or…
abbysko Aug 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/DataModel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ Fields:
- id: string
- name: string
- builtIn: boolean
- displayOrderMode: string, either `alphabetical` or `custom` for custom lists; omitted for built-in lists
- items: array of Item objects

Example:
Expand All @@ -35,6 +36,7 @@ Notes:
- Built-in lists are seeded from `web/data/builtins.json`.
- Custom lists are stored alongside built-ins in `localStorage` under the `ot_lists_v1` key.
- A custom list is created by duplicating a built-in list and marking the new item as `builtIn: false`.
- Custom lists default to `displayOrderMode: "alphabetical"`, where item names are shown and inserted alphabetically case-insensitively. In `custom` mode, manual item ordering is preserved and new items are appended.

### Item

Expand Down
2 changes: 1 addition & 1 deletion ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/Contents.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"images" : [
{
"filename" : "loglist_logo.png",
"filename" : "loglist_logo_square.png",
"idiom" : "universal",
"platform" : "ios",
"size" : "1024x1024"
Expand Down
Binary file removed ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo.png
View file
Open in desktop
Binary file not shown.
Binary file added ios/Loglist/Loglist/Assets.xcassets/AppIcon.appiconset/loglist_logo_square.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 52 additions & 41 deletions web/design-system.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
box-shadow: var(--shadow-sm);
padding: 20px;
margin-bottom: 20px;
}
Expand Down Expand Up @@ -672,15 +672,15 @@ <h2>Icons</h2>
<li>
In standard buttons, the icon should use the same color as the
text in the control and should be relatively small - sized to fit
the control's height. These buttons always include a label to the
right of the icon.
the control's height (<code>--icon-size-sm</code>). These buttons generally include a label to the
right of the icon, with the exception of the small delete option on selected list items.
</li>
<li>
Header action buttons are icon-only controls without labels, and
therefore use somewhat larger icons.
therefore use somewhat larger icons (<code>--icon-size-lg</code>).
</li>
<li>
Bottom navigation items pair a somewhat larger icon with a small
Bottom navigation items pair a somewhat larger icon (<code>--icon-size-md</code>) with a small
text label below.
</li>
</ul>
Expand Down Expand Up @@ -829,21 +829,20 @@ <h2>Fonts</h2>
</p>
<ul>
<li>
<code>--fs-base</code>: <code>15px</code> - Global app text size
<code>--fs-base</code>: <code>17px</code> - Global app text size
applied on <code>html, body</code>.
</li>
<li>
<code>--fs-md</code>: <code>14px</code> - Used for the names of
list items and other row names.
<code>--fs-md</code>: <code>16px</code> - Used for list item
names, row labels, and most medium-weight content.
</li>
<li>
<code>--fs-sm</code>: <code>12px</code> - Used for labels in the
bottom navigation bar and secondary buttons.
<code>--fs-sm</code>: <code>14px</code> - Used for supporting
text, menu items, and secondary controls.
</li>
<li>
<code>--fs-xs</code>: <code>11px</code> - Reserved for metadata
and support text (for example badges, counts, and footer summary
text).
<code>--fs-xs</code>: <code>12px</code> - Reserved for metadata,
badges, counts, and footer summary text.
</li>
</ul>
</section>
Expand All @@ -857,19 +856,23 @@ <h2>Screen Header</h2>
<br />
<div class="mockup-frame">
<div class="screen-header" style="margin: 0">
<h1>Main Page</h1>
<h1>Example Header</h1>

<div class="header-controls">
<div class="sort-menu-wrap">
<div class="header-menu-wrap">
<button
class="sort-toggle"
class="header-button-secondary"
type="button"
aria-label="Sort list"
>
<i data-feather="sliders"></i>
</button>
</div>
<button class="add-button" type="button" aria-label="Add item">
<button
class="header-button-primary"
type="button"
aria-label="Add item"
>
<i data-feather="plus"></i>
</button>
</div>
Expand All @@ -885,13 +888,17 @@ <h1>Main Page</h1>
<div class="mockup-frame">
<div class="screen-header" style="margin: 0">
<h1 class="detail-breadcrumb">
<a href="#" class="list-breadcrumb-link">Main Page</a>
<a href="#" class="list-breadcrumb-link">Example Header</a>
<span class="breadcrumb-sep">&gt;</span>
<span class="breadcrumb-current">Detail Page</span>
</h1>

<div class="header-controls">
<button class="add-button" type="button" aria-label="Add item">
<button
class="header-button-primary"
type="button"
aria-label="Add item"
>
<i data-feather="plus"></i>
</button>
</div>
Expand Down Expand Up @@ -983,7 +990,7 @@ <h3 class="button-card-title">Secondary</h3>
>
<div class="header-controls" style="display: inline-flex">
<button
class="add-button"
class="header-button-primary"
type="button"
aria-label="Add item"
>
Expand Down Expand Up @@ -1011,9 +1018,9 @@ <h3 class="button-card-title">Header Action</h3>
"
>
<div class="header-controls" style="display: inline-flex">
<div class="sort-menu-wrap">
<div class="header-menu-wrap">
<button
class="sort-toggle"
class="header-button-secondary"
type="button"
aria-label="Sort list"
>
Expand Down Expand Up @@ -1076,41 +1083,45 @@ <h2>Dropdown</h2>

<div class="mockup-frame demo-dropdown-frame">
<div class="screen-header demo-dropdown-header">
<h1>History</h1>
<h1>Example</h1>
<div class="header-controls">
<div class="sort-menu-wrap">
<div class="header-menu-wrap">
<button
class="sort-toggle"
class="header-button-secondary"
type="button"
aria-label="Sort history"
aria-expanded="true"
>
<i data-feather="sliders"></i>
</button>
<div class="sort-menu" role="menu" aria-label="Sort options">
<div
class="header-menu"
role="menu"
aria-label="Sort options"
>
<button
class="sort-option active"
class="menu-option active"
type="button"
role="menuitemradio"
aria-checked="true"
>
Recent First
First menu item
</button>
<button
class="sort-option"
class="menu-option"
type="button"
role="menuitemradio"
aria-checked="false"
>
Oldest First
Second menu item
</button>
<button
class="sort-option"
class="menu-option"
type="button"
role="menuitemradio"
aria-checked="false"
>
Alphabetical
Third menu item
</button>
</div>
</div>
Expand Down Expand Up @@ -1147,7 +1158,7 @@ <h2>Progress Tracker</h2>
<div class="track-progress" aria-label="Observation progress">
<div class="track-progress-meta">
<span class="item-count-text track-summary-line">
Observed: <span class="track-observed-count">4</span>
Example Observed: <span class="track-observed-count">4</span>
<span class="track-observed-percent">(40%)</span>
</span>
<span class="item-count-text track-summary-line">
Expand Down Expand Up @@ -1267,23 +1278,23 @@ <h2>Item Grid</h2>
<div class="mockup-frame" style="margin-top: 18px">
<div class="track-grid" aria-label="Active tracking grid mockup">
<button class="track-grid-button" type="button" data-count="2">
<span class="track-grid-label">Breakfast</span>
<span class="track-grid-label">Example</span>
<span class="track-grid-count">2</span>
</button>
<button class="track-grid-button" type="button" data-count="0">
<span class="track-grid-label">Lunch</span>
<span class="track-grid-label">Another</span>
<span class="track-grid-count track-grid-count-zero">0</span>
</button>
<button class="track-grid-button" type="button" data-count="1">
<span class="track-grid-label">Dinner</span>
<span class="track-grid-label">Third</span>
<span class="track-grid-count">1</span>
</button>
<button class="track-grid-button" type="button" data-count="3">
<span class="track-grid-label">Snacks</span>
<span class="track-grid-label">Fourth</span>
<span class="track-grid-count">3</span>
</button>
<button class="track-grid-button" type="button" data-count="0">
<span class="track-grid-label">Drinks</span>
<span class="track-grid-label">Last One</span>
<span class="track-grid-count track-grid-count-zero">0</span>
</button>
</div>
Expand Down Expand Up @@ -1320,15 +1331,15 @@ <h2>Rename Affordance</h2>
<div class="mockup-frame" style="margin-top: 18px">
<div class="screen-header" style="margin: 0">
<h1 class="detail-breadcrumb">
<a href="#" class="list-breadcrumb-link">Lists</a>
<a href="#" class="list-breadcrumb-link">Example</a>
<span class="breadcrumb-sep">&gt;</span>
<span class="breadcrumb-current editable">Trip Ideas</span>
<span class="breadcrumb-current editable">Renamable Text</span>
</h1>
</div>
<div class="lists-container" style="margin-top: 14px">
<div class="list-item">
<div class="list-row">
<div class="list-title editable">Weekend list</div>
<div class="list-title editable">Renamable Item</div>
<div class="list-meta">
<span class="item-count-text list-row-count">4 items</span>
</div>
Expand Down
26 changes: 13 additions & 13 deletions web/screens/history.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,8 +597,8 @@
<div class="screen-header">
<h1>History</h1>
<div class="header-controls">
<div class="sort-menu-wrap">
<button class="sort-toggle history-sort-toggle" type="button" aria-label="Sort sessions (${
<div class="header-menu-wrap">
<button class="header-button-secondary" type="button" data-header-action="sort" aria-label="Sort sessions (${
sortMode === 'oldest'
? 'Oldest First'
: sortMode === 'alphabetical'
Expand All @@ -609,14 +609,14 @@
</button>
${
sortMenuOpen
? `<div class="sort-menu history-sort-menu">
<button class="sort-option ${
? `<div class="header-menu history-sort-menu">
<button class="menu-option ${
sortMode === 'recent' ? 'active' : ''
}" type="button" data-sort="recent">Recent First</button>
<button class="sort-option ${
<button class="menu-option ${
sortMode === 'oldest' ? 'active' : ''
}" type="button" data-sort="oldest">Oldest First</button>
<button class="sort-option ${
<button class="menu-option ${
sortMode === 'alphabetical' ? 'active' : ''
}" type="button" data-sort="alphabetical">Alphabetical</button>
</div>`
Expand All @@ -630,7 +630,7 @@
</div>
`;

const sortToggle = container.querySelector('.history-sort-toggle');
const sortToggle = container.querySelector('[data-header-action="sort"]');
if (sortToggle) {
sortToggle.addEventListener('click', async (e) => {
e.stopPropagation();
Expand All @@ -639,7 +639,7 @@
});
}

container.querySelectorAll('.sort-option').forEach((option) => {
container.querySelectorAll('.menu-option').forEach((option) => {
option.addEventListener('click', async (e) => {
e.stopPropagation();
sortMode = option.getAttribute('data-sort') || 'recent';
Expand Down Expand Up @@ -838,13 +838,13 @@
${detailNameMarkup}
</h1>
<div class="header-controls">
<button class="sort-toggle history-detail-delete" type="button" aria-label="Delete this session">
<button class="header-button-secondary" type="button" data-header-action="delete" aria-label="Delete this session">
<i data-feather="trash"></i>
</button>
<button class="sort-toggle history-detail-share" type="button" aria-label="Share session as CSV">
<button class="header-button-secondary" type="button" data-header-action="share" aria-label="Share session as CSV">
<i data-feather="share"></i>
</button>
<button class="add-button history-detail-restart" type="button" aria-label="Restart tracking from this session">
<button class="header-button-primary history-detail-restart" type="button" aria-label="Restart tracking from this session">
<i data-feather="play"></i>
</button>
</div>
Expand Down Expand Up @@ -931,14 +931,14 @@
});
}

const shareButton = container.querySelector('.history-detail-share');
const shareButton = container.querySelector('[data-header-action="share"]');
if (shareButton) {
shareButton.addEventListener('click', () => {
shareSessionCsv(session);
});
}

const deleteButton = container.querySelector('.history-detail-delete');
const deleteButton = container.querySelector('[data-header-action="delete"]');
if (deleteButton) {
deleteButton.addEventListener('click', async () => {
const label = getSessionName(session, 'session');
Expand Down
Loading