tastejs/todomvc-app-css

CSS for TodoMVC apps

todomvc-app-css's Issues

Make TextInput more mobile friendly in edit mode

Based on #9 and this comment from @sindresorhus i would purpose a small improvement to
.todo-list li.editing .edit.

The width attribute there is fixed in size by 506px. This fact makes it break on my phone in edit mode.

Since the rest of the design is already responsive and works on all sizes (i tested), i would suggest to make this width dynamic by using
width: calc(100% - 43px)
where the 43px reflect the margin-left we set for compensating the toggle element for completion.

Not sure about the browser support we have to guarantee, but this would work for most common browsers caniuse .

Images doesn't work in IE/Edge

So, I was testing to see if my new and shiny library was working in IE after building a TodoMVC app in it (just to test stuff) and got the following:

I figured this was just something wrong with my webpack setup, but the same thing (more or less) happened when I visited http://todomvc.com/examples/react/#/ :

This should probably be fixed IMHO.

toggle-all input can't be checked

In 2.1.0 code, toggle-all input is not clickable

Regression in the clear completed button

In the old UI we used to show the number of items that were completed in the clear completed button

In the new UI we now longer show this

There are tests around this behavior and those tests are now failing on all of the apps that have upgraded, this is something that we should fix

Switch to using classes

See original issue, tastejs/todomvc#348. We want to switch all our ids over to classes. Than we should release v2 and start porting all of our apps over.

Long tasks are out of the table in Firefox

Bug reproduces only in Firefox browser
See attached: task name is out of the table

webpack parser error on index.css

Hello I've met an error using webpack bundling tool.
It's a simple CSS syntax error. Will reference the issue in a PR that solved the trick for me.

ERROR in ./~/todomvc-app-css/index.css
Module parse failed: /Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/todomvc-app-css/index.css Unexpected token (2:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:5)
    at Parser.pp$4.raise (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseTopLevel (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/esensory/ESensory/dev/playground/redux-todomvc/node_modules/webpack/lib/NormalModule.js:104:16)
 @ ./src/index.jsx 19:0-52

toggle-all input can't be checked

Reproduction link

https://codesandbox.io/s/todomvc-qfhin

Steps to reproduce

1. check the new-todo input.
2. click the toggle-all input.

What is expected?

toggle-all input can be checked.

What is actually happening?

toggle-all input can't be checked.

Insufficient contrast ratios in the ui

todomvc apps are very hard for me to look at because of how light and small all the text is. i ran a a11y test on the backbone example using tota11y and it showed that there were numerous insufficient contrast ratios (there's also no label for the input, but that's an issue for another todomvc repo i imagine).

i didn't see any info on how to contribute to this repo, so i'm leaving this issue instead of working on a pr, but i would be happy to help with making some css changes so that the ui is easy for more people to see!

thanks for your work on todomvc and also your time reading this <3

Re-enable outline on focusable elements.

Not sure why outline was deliberately, removed, hiding the indication of where your keyboard focus is:

https://github.com/tastejs/todomvc-app-css/blob/master/index.css#L37

I've found that in a more accessible TodoMVC implementation, I need to add the following CSS:

/* this block re-adds the outline, to support keyboard navigation / tabbing */
:focus,
.view label:focus,
.todo-list li .toggle:focus + label,
.toggle-all:focus + label {
  /* !important needed, because todomvc styles deliberately disable the outline */
  outline: #d86f95 solid !important;
}

specify charset

Since we're using unicode characters like × and ❯, it's better to specify charset to UTF-8 in css.

When users don't specify charset in HTML, it could cause problems.

If you allow me, I'll be happy to make a PR ~

Screenshot:

"Clear completed" vertical position

For me the "Clear completed" button is positioned wrongly, unless I include the following css:

#clear-completed::after { top: 0 }

This happens to me when updating the styles on the todomvc example from the ember.js guide. I can't see any difference in the html compared to the official todomvc page, except maybe whitespace.

Screenshot without Fix:

Screenshot with Fix:

Tested on Chrome 43 / Mac OS X 10.10.3.

Make it compatible with Shadow Dom

It would be great to modularize the CSS to be shadow DOM compatible. Nested selectors like .todo-list li .toggle or .todo-list li .edit doesn't work inside Shadow DOM. I suggest to use BEM methodology.

Unused style declaration?

This declaration is overriden by the one right below:
https://github.com/tastejs/todomvc-app-css/blob/master/index.css#L303
Is it necessary?

Label whitespace

I'm finding this to be terribly annoying:

.todo-list li label {
    white-space: pre-line;

If you generate markup that respects whitespace like:

<label ondblclick=${this.startEditing.bind(this)}>
    ${encode(todo.title)}
</label>

You'll end up with items looking like:

So instead of treating HTML as whitespace insignificant, in this case you need to be very conscious of it. I'd recommend defaulting back to normal unless there is a compelling reason to keep this line.

Mobile CSS¿

The current CSS is responsive however not super friendly to mobile, it would be cool to create a nice mobile mode.. thoughts?

Checkbox SVG doesn't appear in Firefox

Firefox 50 shows the checkbox input.

Firefox 54 shows no input or SVG:

Unable to deploy to Webjars due to license

I tried deploying the NPM package to https://www.webjars.org/ but ran into a license related issue:
webjars/webjars#1612

change word-break rule for todo item label

Currently the label for each todo item uses word-break: break-all;, which can cause a word to get separated in between words. Changing the rule to: word-break: break-word; would eliminate the issue.

currently:

after changing the rule: