Detailed Notes
We work on the UX part of the application and create a different look for tasks based on the status.
You can view source for today and all prior days by reviewing the tag Day 56 at this GitHub: https://github.com/robbroadhead/develpreneur-pythontutorial
Transcript Text
[Music] well hello and welcome back we are continuing our django python tutorial series of stuff we are getting near the end of our tasks and this time we are going to focus on uh setting the background color based on status now now there's a couple of things we need to look at so let's start with looking at this task list or any one of these uh if we look at tasks or to-do then we can see either it's active tasks or list tasks and i think we're going to find that both of those active tasks uses task lists and what was the other task list probably also uses task lists we see just about everything does yeah list tasks so it does so we're going to go to our list task html and then here what we're going to do is we're going to take this class of tasks which is a css class let me go look here so if we look here we inspect if we pick one then we're going to see up here the overall look is a class of tasks so what we're going to do with this is we're going to do a task per status so we're going to do tasks and essentially we're going to do is postfix to that append to that the status short name so for each one of these statuses we're going to have a different style and with those we can see we're going to put based on the short name so we've got five that we have to worry about we'll use the one that we currently see uh let's go back over here if we go to what we currently see let's make that for our new so that'll be easy enough to do and then notice we have new progress comp hold and cancel so let's go to our style real quick and so currently it's to be tasks new but we're going to take this and let's just do this real quick so we have was it prog cancel complete let's go look back real quick uh prog oh comp hold cancel okay prog cancel comp hold and basically we're going to do now there's a couple ways we can do this i'm not going to get into the more complicated uh some of the styling things we do but you can actually have stuff that are essentially child classes style classes but for right now we're going to go with we're just going to have a separate one and we're going to be able to do this actually fairly easy because we're going to do is we're going to take the class we'll do tasks and we're just going to take that short name and append it to it so now that's gonna show up regardless of what we do and actually if we do this right here and here we'll be able to see that so if i just refresh this so now currently whoop so we've got something here that's a little bit off and it's probably because so we've got tess new but it didn't pick up the new status so which may be a problem for so let's uh let's kill this off [Music] and let's do uh let's see oops see if we've got any pycs here that we want to kill off we do so we want to do rm.d dp dp project migrations oh we don't really need the pi cache oh let's go do it anyways see hi cash star and then we need the regular one and then we need the one that's here okay so now let's try to run it and see if [Music] so if we run it up so it's still not picking those up but for right now we'll we will come back to those what we first want to see is that we're going to have for task new that's a new let's see let's go to our task list and what we'll be able to see here is if you can see here these are like underscore comp underscore new so let's go ahead and build these out and it's going to end up catching up with us when the style sheet actually kicks in because we do have a little issue here let's see so progress let's say so we're going to do new is current and that's what we're going to do so let's do a hold and let's change this around a bit so we're going to do the background color let's make it like a blue so let's see rgb so if it was like a d that's going to be blue and we have another color let's see so for our regular color [Music] oops let's just do our color and for blue let's just do like a white so now if we take those two and let's change that so that was going to be hold we don't have that but let's just take this and let's change those so it's going to look like that so i don't really like that oh i'm sorry that's not a white whoop darn it so let's go back here and actually we can change this so let's take this whole thing and so now we're seeing that but what we want to do is let's change that color to like about a ddd uh let's make it a little brighter that's right two let's do e there we go so we'll do that and let's crank that blue down a little bit let's make it like a b let's see what is if we go with an a it's going to look at five ooh that one looks pretty good so if we do that let's do that so there's our colors and notice the rest stuff we're just going to keep the same so we're going to take that and that's our hold easy enough to do and so now let's take the same one and so let's see so we've got new and we've got hold let's do cancel and that's going to be oh darn it let's go back over here so for that cancel let's make him uh let's see we're gonna make like a really dark text but the background is going to be uh let's do it like uh let's do 777 and see what that does so there we go we can do that so if it's cancelled we're going to do these two and that's our cancel and then let's see so let's do uh we're gonna do so our in progress let's say complete is gonna be green we're going to do like a green here so here so complete let's make this a green oh it's here so let's make the background color when we did the blue i think we did like a let's do like that oh that looks pretty good and then we're gonna change our color here to complete and let's keep it we can either go really bright so let's do like bbb let's do that so that's going to be our complete and then so we've got our complete we've got our hold we've got our new let's do our cancel uh we did our cancel and so in progress let's make this like a i'll make this like a yellow let's try whoops let's go over here save that let's go over here and let's oops so let's make the background uh let's see so that's not it all right we're gonna have to pick a yellow here we'll get that in a second all right let me get a good yellow rgb code [Music] so let's see let's go find one let's do something like and let's keep it sort of like this so our hex could be uh is that right okay so fffcc so found that real quick [Music] so if we do that and then our color becomes oh i missed an f there we go and so now we want our color to be dark so let's bring this down to like that 2 2 2 again that looks pretty good so that means that that is uh whoop let's take that and so now with that in progress change your color and then what we have is something that is a little more colorful than we had and it's going to show us as we do this all right i had to log back in so let me get here if i got my task list uh now it's complaining and get item so let's see we probably let's make sure we got this going right okay so i do have an error and i've got something here and that's a message key error message so if we go to views to 12 okay something's not right there oh that's if so i'm going to check just to do i think i've got that somewhere uh i know i've got one of those that i could steal okay so i want if message and this is not equal to null then i'm going to do that and then i should have here okay so message equals none if i can type it right there we go so we'll just default it to none and now if i look there we go so now i've got my tasks notice these are all complete uh let's see if i go to my home i'm gonna see some i think that are not complete there we go so these are not complete so if i take uh background stats just don't change my status let's just go to each of them so that was new if i go to in progress and save record and i get that if i change it to complete oh i've got that if i change it to hold then i'm going to see that there and if i change it to cancel and then we see it cancelled so now i can see my stat tie based on that and this is going to be complete and got it done we'll throw some time in on this spent my 15 minutes basically and now we have one task last task left uh time frame does not show child count when deleted and so what we need to do is we need to go back into this and we'll probably have to look at our roadmap and let's say here we're going to actually delete this guy and what it should do well no we're probably going to pick something else so we'll pick a different one we're going to create one and create a couple children and that will wrap up our time here and then we're going to move on to actually deploying this out and uh be wrapping this one up and go into our next whatever our next series of tutorials will be so we're getting to the end hold on one more time and we will be there but as always until then go out there have yourself a great day and we will talk to you next time you
Transcript Segments
[Music]
well hello and welcome back
we are continuing our django python
tutorial series of stuff
we are getting near the end of our tasks
and this time we are going to focus on
uh setting the background color
based on status now
now there's a couple of things we need
to look at so let's start with
looking at this task list or any one of
these
uh if we look at tasks or to-do
then we can see either it's active tasks
or
list tasks and i think we're going to
find that both of those
active tasks uses task lists and
what was the other task list
probably also uses task lists we see
just about everything does yeah list
tasks so it does so
we're going to go to our list task html
and then here what we're going to do is
we're going to take
this class of tasks which is
a css class let me go look here
so if we look here we inspect
if we pick one then we're going to see
up here
the overall look is a class of tasks
so what we're going to do with this is
we're going to do a task per
status so we're going to do tasks
and essentially we're going to do
is postfix
to that append to that the
status short name so for each one of
these statuses we're going to have a
different style
and with those we can see we're going to
put based on the short name so we've got
five that we have to worry about we'll
use the one that we currently see
uh let's go back over here if we go to
what we currently see let's make that
for
our new so that'll be easy enough to do
and then
notice we have new progress comp
hold and cancel so let's go to our style
real quick
and so currently it's to be tasks new
but we're going to take this
and let's just do this real quick
so we have was it prog
cancel
complete let's go look back real quick
uh prog oh comp hold cancel
okay prog
cancel comp hold
and basically we're going to do now
there's a couple ways we can do this i'm
not going to get into the more
complicated
uh some of the styling things we do but
you can actually have stuff that are
essentially child classes
style classes but for right now we're
going to go with
we're just going to have a separate one
and we're going to be able to do this
actually fairly easy
because we're going to do is we're going
to take the class we'll do tasks and
we're just going to take that short name
and append it to it so now that's gonna
show up
regardless of what we do and actually if
we do this right here
and here we'll be able to see that so if
i just refresh this
so now currently whoop
so we've got something here that's a
little bit off and it's probably
because so we've got tess new but it
didn't pick
up the
new status so which may be a problem for
so let's uh let's kill this off
[Music]
and let's do uh let's see
oops
see if we've got any pycs here
that we want to kill off we do so we
want to do
rm.d dp
dp project migrations
oh we don't really need the pi cache
oh let's go do it anyways see
hi cash star
and then we need
the regular one
and then we need the one that's here
okay so now let's try to run it and see
if
[Music]
so if we run it up so it's still not
picking those up
but for right now we'll we will come
back to those what we first want to see
is
that we're going to have for task new
that's a new let's see
let's go to our task list and what we'll
be able to see
here is if you can see here these are
like
underscore comp underscore new so
let's go ahead and build these out and
it's going to end up catching up with us
when the
style sheet actually kicks in because we
do have a little issue here let's see
so progress let's say so we're going to
do
new is current and that's what we're
going to do so let's do a hold
and let's change this around a bit so
we're going to do the background color
let's make it like a blue
so let's see rgb so if it was like a
d that's going to be blue
and we have another color let's see
so for our regular color
[Music]
oops let's just do our color and for
blue let's just do like a white
so now if we take those two
and let's change that so that was going
to be hold we don't have that but let's
just take this
and let's change those so it's going to
look like that so i don't really like
that oh i'm sorry that's not a white
whoop
darn it so let's go back here
and actually we can change this so let's
take this
whole thing
and so now we're seeing that but what we
want to do is let's change that color to
like about a ddd
uh let's make it a little brighter
that's right two let's do e there we go
so we'll do that
and let's crank that blue down a little
bit
let's make it like a b
let's see what is if we go with an a
it's going to look at five ooh that one
looks pretty good so if we do that
let's do that so there's our colors and
notice the rest stuff we're just going
to keep the same so we're going to take
that and that's our hold
easy enough to do
and so now let's take the same one and
so let's see
so we've got new and we've got hold
let's do cancel and that's going to be
oh darn it let's go back over here so
for that cancel let's make him
uh let's see we're gonna make like a
really dark
text but the background is going to be
uh let's do it like uh let's do 777 and
see what that does
so there we go we can do that so if it's
cancelled
we're going to do these two
and that's our cancel
and then let's see so
let's do uh we're gonna do
so our in progress let's say complete is
gonna be green
we're going to do like a green here
so here
so complete let's make this a green oh
it's here so let's make the background
color
when we did the blue i think we did like
a
let's do like that oh that looks pretty
good and then we're gonna change
our color here to complete
and let's keep it we can either go
really bright
so let's do like bbb let's do that so
that's going to be our complete
and then
so we've got our complete we've got our
hold we've got our new let's do our
cancel uh we did our cancel and so
in progress let's make this like a i'll
make this like a yellow
let's try whoops let's go over here
save that let's go over here
and let's oops
so let's make the background
uh let's see so that's not it
all right we're gonna have to pick a
yellow here we'll get that in a second
all right let me get a good yellow
rgb code
[Music]
so let's see let's go find one let's do
something
like and let's keep it sort of like this
so
our hex could be uh is that right okay
so fffcc so
found that real quick
[Music]
so if we do that and then our color
becomes
oh i missed an f
there we go and so now we want our color
to be
dark so let's bring this down to like
that 2 2 2 again
that looks pretty good so that means
that that is
uh whoop let's take that
and so now with that in progress change
your color
and then what we have is
something that is a little more colorful
than we had and it's going to show us
as we do this
all right i had to log back in so let me
get
here if i got my task list
uh now it's complaining
and get item so let's see we probably
let's make sure we got this going right
okay so i do have an error and i've got
something here and that's a message
key error message
so if we go to views to 12 okay
something's not right there
oh that's if so
i'm going to check just to do i think
i've got that somewhere
uh i know i've got one of those that i
could steal
okay
so i want if message
and this is not equal to null
then i'm going to do that
and then i should have here okay so
message
equals none
if i can type it right there we go so
we'll just default it to none
and now if i look there we go so now
i've got my tasks
notice these are all complete uh let's
see
if i go to my home
i'm gonna see some i think that are not
complete there we go so these are not
complete
so if i take uh background stats just
don't
change my status let's just go to each
of them so that was new if i go to in
progress and save
record and i get that
if i change it to complete oh i've got
that if i change it to hold
then i'm going to see that there and if
i change it to
cancel
and then we see it cancelled so now i
can see my stat tie
based on that and this is going to be
complete
and got it done we'll throw some time in
on this
spent my 15 minutes basically and now
we have one task last task left
uh time frame does not show child count
when deleted
and so what we need to do is we need to
go back into this
and we'll probably have to look at our
roadmap
and let's say here we're going to
actually delete
this guy
and what it should do well no we're
probably going to pick something else so
we'll pick a different one we're going
to create one and create a couple
children
and that will wrap up our time here and
then we're going to move on to actually
deploying this
out and uh be wrapping this one up and
go into our next
whatever our next series of tutorials
will be so we're getting to the end
hold on one more time and we will be
there but as always
until then go out there have yourself a
great day
and we will talk to you next time
you