Ionic firebase todo

demo
1

I finished a todo app using ionic and firebase. Take a look. I’d like some feedback and pointers.


I’ll improve my comments throughout when I have time. It was fun trying to make this.

2 Likes
2

bleh looks horrible in the ios simulator :frowning:

If anyone has an ios device, I’d appreciate any fixes.

3

on the ios simulator I’m getting the following behaviour

the checkboxes are initially invisible. When I try to check the task the checkbox becomes visible but the task becomes invisible. When I then uncheck the checkbox the task is still invisible. Could anyone with an ios device checkout what’s going wrong?

It may be related to the custom css I used to get the app to look how I want.

main.sass

$balanced: #85ADA7
$dark: #867872
$positive: #BFAC9E

@import "scss/ionic"
/* Your app's SASS, go crazy, make it your own */

.ionic-logo
  display: block
  margin: 15px auto
  width: 96px
  height: 96px

.item.item-checkbox label
  width: 80%
  height: 100%
  top: 20%

  input
    top: 50%

.button.x-box
  position: absolute
  right: 6px
  float: right
  margin: -15px 0

  // the only current way to make an ionicon smaller is to access this pseudo class
  &:before
    font-size: 25px

.red
  color: #ECD2D2

.task.item-checkbox
  padding-right: 45px
  border-bottom-style: dotted

.task.item-checkbox span
  white-space: pre-wrap
  word-break: break-all

li.finished
  span
    font-style: italic
    text-decoration: line-through

input.newProjectName
  font-size: 22px

div.margins
  position: absolute
  top: 0
  left: 47px
  z-index: 2
  width: 4px
  height: 100%
  border: 1px solid #ECD2D2

ping @zephyr103 you may know something. I built upon the css that made the label 100% width. For my req’s I needed the label to be %80 of the item, centered. Then I pushed the checkbox down, instead of leaving it in the upper-left hand corner of the item. For when long tasks cause the item to grow.

4

fixed the issue. upgraded to ionic master and angularjs 1.3.0 via bower. edited css to read

.ionic-logo
  display: block
  margin: 15px auto
  width: 96px
  height: 96px

.item-checkbox .checkbox
  right: 40px

.button.x-box
  position: absolute
  right: 6px
  float: right
  margin: -15px 0

  // the only current way to make an ionicon smaller is to access this pseudo class
  &:before
    font-size: 25px

increasing the right margin a bit to make room for the delete button. Now the app works well on both android and ios.

5

Hey, great job with the app, it looks great!

1 Like
6

Looks great. I was looking for something like this.

1 Like
7

@morenoh149 Did you run into any issues getting Firebase to play nicely with Ionic? Towards the beginning of my project I was on 1.0.0.v.3 and was getting data but as soon as I updated to Ionic 1.0.0.v.4 I wasn’t getting any connectivity. I’m not saying its the fault of Ionic but possibly I need to update my npm or something?

Trying to figure out what happened.

Just wondering if you ran into a similar issue like that.

8

nah. I ran into issues with angularfire. A few months back there was a weird bug where I couldn’t run getIndex() on a firebase object. That was fixed and allowed me to finish this app. I haven’t update this app to the latest ionic. I want to update it later to do things like work without an internet connection for example.

One thing though. Angularfire really encouraged me to do my db accesses from my controllers. I learned later that this is not good angularjs design and that I should’ve put that logic into factories. So theres that.