Detailed Notes
A side trip down bootstrap and CSS lane to make a few tweaks to the user experience.
You can view source for today and all prior days by reviewing the tag Day 38 at this GitHub: https://github.com/robbroadhead/develpreneur-pythontutorial
Transcript Text
[Music] well hello and welcome back we are continuing our series of tutorials on python and django this episode we are going to work on cleaning up our tasks a little bit finding something a little more useful we've been working through road maps and time frames and getting some of that stuff put together our home page if you remember is a list of active tasks and we've added enough information that it's not terribly useful so we're going to play with that and clean that up a little bit this time around so first off let's see if i can get this to run there we go okay so there it's running oh got it running in two's windows so i don't need that so let's go here here boom so this is in to do and so let's go take a look at that well actually let's walk through this so to do is active tasks if we go to active tasks then we're going to see here task list so there's not a whole lot we need to do that with this up at the view level we're going to actually just display out our change change out our display a little bit first thing i'm going to do is deal with these buttons i'm going to do something a little more useful with those and because we have all this within a single div i'm going to sort of separate that out a little bit and now what i'm going to do is i'm going to have two divs one is basically for the buttons and one is for the others i'm gonna do it like this so we're gonna go do and we'll start with something simple just to play with it see how it looks which is not an uncommon thing to do and i'm going to use let me do this so there's my two buttons and i do a break because i'll make sure these are on different lines because that is and then i'm going to use um a class from bootstrap and the first part i'm going to do is going to be md let's do 8. and i believe we talked about this before this is within bootstrap we've got essentially 12 sections that it splits the screen into and so we're gonna take the first eight first two thirds and display most of our cards in the buttons gonna be on the second two thirds so if we just look at that we're gonna see where it's not showing oh because it's not within a single row because we have our [Music] because we have our line breaks there so what we want to do is actually tasks is also going to be a row i think that will take care of our problem it may not so he's going to be a row he says that that should be there did i save it let's check that real quick make sure that we got it i may not have so it's not picking that up right oh it may not be picking up everything correctly it's probably not picking did i not get my bootstrap in there i may not have bootstraps so let's take a look at that real quick so we look here and so we're going to play with this so okay so that's a row let's do it within that because i think we're if we look at this guy so let's change this a little bit since that whole thing is going to be a task we're going to create one more here to keep the those two essentially a row come down here i think that's right let's probably balance this out let's see how it looks there we go so now we've got our two-thirds and we'll see as we collapse this whoops let me oh yeah that's right that is collapsing it just takes a while because of that but we'll see as we collapse here um it does a couple things that are sort of ugly but we do eventually get to see where our buttons just get forced to the bottom which is essentially what we want so let's go back to this because we're going to keep it at this point mostly now let's add a little more information here because we've just got a name a due date and a status and a time and what we really want is we're going to do we're going to start splitting this up a little bit so we're going to do this in twos and we're going to do another one here and first we're gonna have the name and then the second one we're gonna have the due date and then we're gonna take this guy and put him here we're gonna do the same break we can i could play around with this all differently but that's just a nice quick and easy way to do it and then i'm going to do so that's four four and let's start actually let's do it this way let's do one more two because we're gonna play around this little bit and here we talk about the time frame and this is going to be task dot i believe we called it parent no test.timeframe and so let's take a look at what that looks like so now if we access this remember this is actually a class this could be in order to see how that comes out and is there anything else we want to do for our task let's see status completion date uh that's good enough so actually i think we just do it like this probably changes around but now what we've got is so now we're seeing we've got our time frame and see how this wraps because it's in that space of two we're also wrapping our name due date time spent so let's move this around a little bit and let's take this last one we're gonna split that to three i'm gonna take our name and status well let's see take due date because i think that wrapped so we take a look at due date oh that's okay so we're going to keep due date and time spent where they were gives us seven to play with so let's open up the time frame one and the name by two and let's see how that looks so now we've got our time frames uh interesting thing is this one's coming over a little bit that may not have the right div on it but we're seeing that the name is status and then due date time spent so yeah here oh it's because time spent is getting pushed over i believe so let's take a look at that actually let's take a look at it here and we'll see that he is a four he is a three if we go to the one above he's a three four seven five twelve so what did we do here we did so oh because it's an equals three so that's why it's not looking right we got a typo so if we do this and we're going to do that let's change this button here this style is class is equal to button so let's call it something different uh class equal to button info let's do a button let's do task button let's do button btn task and we're going to change this in our css which is somewhere up here it's going to create a btn task i don't think we have a btn yet oh we do we have a default we're going to call this task and we're going to take it and let's change this a little bit so let's take this guy and we're gonna change here the button info um i like the color we'll keep the color let's change the background color let's go to something and let's see we can do this start playing around with color this way or we can just pick one so let's pick um let's change this a little bit so let's go we're going to go to our background color and we're going to make it let's see ddd that's very light so let's go a little darker let's go like aaa and then let's change our border color i'm sorry not our border color we can leave that that'll be fine we'll change our color from this fff to this guy which is this so we take him and go here change our border color to that whoops that's not the one i want i want to change this color to that and let's change that color to something darker like that and then we're going to take this and we're going to add whoops we're going to do some a little styling with them so we're going to do a uh let's do see based on this let's do a let me do padding bottom and let's make this 3 pixels and spacing bottom actually it's called what which we want uh margin bottom uh let's do margin bottom let's make him like five pixels so now we're spreading these out a little bit five's probably too much so let's drop that to about three and we're going to change the width come here well let's sit this way i'm going to take all of that i'm going to steal that and that's going to become my button task and i'm going to set a width of i don't know what i want my width to be let's set it to 50 pixels and see what it looks like so if i do that and then reset it did not reload my static so i'm going to come in here and reload it and let's see how it looks here okay did i not get my oh wait let's take a look at that if i look at that button i go up here may not have his stuff right so let's take a look real quick here uh he's a bt in task and if i go to my task list whoops he's a btn task class so he's getting what he needs but i do want to change him to i go to 70 and i want font size to be let's go to smaller like that so let's take those two and put those here i believe there we go got a warning in here somewhere should be text line see if we get any others oh we do menu item that's fine okay so save it and we probably have to reload that window for some reason it's not reloading our css though we're going to leave that for now i'm going to come back to it mostly because we're running out of time so first thing we want to do is move some of this stuff around see where our time frames are so we can see those and get into those we can do our edits and dive into those we're going to clean up a couple of these other things like here we've got a task list do a little more clean up next time around and start walking through this application and just see what additional changes we can make so that'll do it for now 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 series of
tutorials on
python and django this episode we are
going to work on
cleaning up our tasks a little bit
finding something a little more useful
we've been
working through road maps and time
frames and getting some of that stuff
put together
our home page if you remember is a list
of active tasks and
we've added enough information that it's
not terribly useful so we're going to
play with that and clean that up a
little bit this time around
so first off
let's see if i can
get this to run there we go okay so
there it's running oh got it running in
two's windows so i don't need that so
let's go here here
boom so this is in to do
and so let's go take a look at that well
actually let's walk through this so to
do
is active tasks if we go to active tasks
then we're going to see here task list
so there's not a whole lot we need to do
that with this
up at the view level we're going to
actually just display out our change
change out our display a little bit
first thing i'm going to do is deal with
these buttons i'm going to do something
a little
more useful with those and because we
have
all this within a single div
i'm going to sort of separate that out a
little bit
and now what i'm going to do is i'm
going to have two divs
one is basically for
the buttons and one is for the others
i'm gonna do it like this so we're gonna
go do
and we'll start with something simple
just to play with it see how it looks
which is not an uncommon thing to do
and i'm going to use let me do this so
there's my two buttons
and i do a break because i'll make sure
these are on different lines
because that is and then i'm going to
use
um a class from bootstrap
and the first part i'm going to do is
going to be
md let's do 8.
and i believe we talked about this
before this is
within bootstrap we've got essentially
12
sections that it splits the screen into
and so we're gonna take the first eight
first two thirds and display most of our
cards
in the buttons gonna be on the second
two thirds so if we just look at that
we're gonna see where it's not showing
oh because it's not within a single row
because we have our
[Music]
because we have our line breaks there so
what we want to do is actually tasks is
also going to be a row
i think that will take care of our
problem
it may not
so he's going to be a row he says that
that should be there
did i save it
let's check that real quick make sure
that we got it i may not have
so it's not picking that up right oh it
may not be picking up
everything correctly it's probably not
picking did i not get my
bootstrap in there i may not have
bootstraps so let's take a look at that
real quick
so we look here and so we're going to
play with this so
okay so that's a row
let's do it within that because i think
we're if we look at this guy
so let's change this a little bit
since that whole thing is going to be a
task we're going to create one more
here
to keep the those two essentially a row
come down here
i think that's right let's probably
balance this out let's see how it looks
there we go so now we've got our
two-thirds and we'll see as we collapse
this
whoops let me oh yeah that's right that
is collapsing
it just takes a while because of that
but we'll see as we collapse here
um it does a couple things that are sort
of ugly but we do eventually get to see
where our buttons just get forced to the
bottom
which is essentially what we want so
let's go back to this because we're
going to keep it at this point mostly
now let's add a little more information
here because we've just got a name a due
date and a status
and a time and what we really want
is we're going to do we're going to
start splitting this up a little bit so
we're going to do this in
twos
and we're going to do another one here
and first we're gonna have the name and
then the second one
we're gonna have the due date
and then we're gonna take this guy
and put him here we're gonna do the same
break we can i could play around with
this all differently but that's just a
nice quick and easy way to do it
and then i'm going to do so that's four
four and let's start
actually let's do it this way let's do
one more two because we're gonna play
around this little bit
and here we talk about the time frame
and this is going to be task dot i
believe we called it parent
no test.timeframe and so let's take a
look at what that
looks like so now if we
access this remember this is actually a
class this could be in order to see how
that comes out
and is there anything else we want to do
for our task
let's see status completion date uh
that's good enough
so actually i think we just do it like
this probably changes around but now
what we've got
is so now we're seeing we've got our
time frame and see how this
wraps because it's in that space of two
we're also wrapping our name
due date time spent so let's move this
around a little bit
and let's take this last one we're gonna
split that to three
i'm gonna take our name and status well
let's see
take due date because i think that
wrapped
so we take a look at due date oh that's
okay so we're going to keep due date and
time spent where they were
gives us seven to play with so let's
open up the time frame one
and the name by two and let's see how
that looks
so now we've got our time frames
uh interesting thing is this one's
coming over a little bit
that may not have the right div on it
but we're seeing that the name is status
and then due date time spent so yeah
here
oh it's because time spent is getting
pushed over i believe so let's take a
look at that
actually let's take a look at it here
and we'll see that he is a four
he is a three if we go to the one above
he's a three
four seven five twelve so what did we do
here we did so oh
because it's an equals three so that's
why it's not looking right we got a typo
so if we do this
and we're going to do that let's change
this button here
this style is
class is equal to button so let's call
it something different
uh class equal to button info let's do a
button let's do task button let's do
button btn
task
and we're going to change this in our
css which is
somewhere up here it's going to create a
btn task
i don't think we have a btn yet oh we do
we have a default
we're going to call this task
and we're going to take it and let's
change this a little bit so let's take
this guy
and we're gonna change here the button
info
um i like the color we'll keep the color
let's change the background color
let's go to something
and let's see we can do this
start playing around with color this way
or we can just pick one
so let's pick
um let's change this a little bit so
let's go we're going to go to our
background color
and we're going to make it let's see ddd
that's very light so let's go a little
darker let's go like aaa
and then let's change our border color
i'm sorry not our border color we can
leave that that'll be fine
we'll change our color from this fff
to this guy
which is this
so we take him and go here
change our border color to that whoops
that's not the one i want i want to
change this color
to that and let's
change that color to
something darker like that and then
we're going to take this and we're going
to add whoops
we're going to do some a little styling
with them so we're going to do
a uh let's do
see based on this let's do a
let me do padding bottom
and let's make this
3 pixels
and spacing bottom
actually it's called what which we want
uh
margin bottom uh let's do margin bottom
let's make him like five pixels
so now we're spreading these out a
little bit
five's probably too much so let's drop
that to about three
and we're going to change the width
come here
well let's sit this way i'm going to
take all of that i'm going to steal that
and that's going to become
my button task
and i'm going to set a width of
i don't know what i want my width to be
let's set it to 50 pixels and see what
it looks like
so if i do that and then reset
it did not reload my static so i'm going
to come in here
and reload it and let's see how it looks
here okay did i not get my
oh wait
let's take a look at that
if i look at that button
i go up here
may not have his stuff right so let's
take a look real quick here
uh he's a bt in task
and if i go to my task list whoops
he's a btn task class
so he's getting what he needs
but i do want to change him to
i go to 70
and i want font size
to be
let's go to smaller like that
so let's take those two
and put those here i believe there we go
got a warning in here somewhere
should be text line
see if we get any others oh we do menu
item
that's fine okay so save it
and we probably have to reload that
window
for some reason it's not reloading our
css though
we're going to leave that for now i'm
going to come back to it mostly because
we're running out of time so
first thing we want to do is move some
of this stuff around
see where our time frames are
so we can see those and get into those
we can do our edits
and dive into those we're going to clean
up a couple of these other things like
here
we've got a task list do a little more
clean up next time around and start
walking through this application and
just see what additional changes we can
make
so that'll do it for now have yourself a
great day
and we will talk to you next time
you