- [Instructor] In this chapter we're going to take a look
at what it takes to modify an existing app,
and you'll run into some issues
that you wouldn't otherwise run into
unless we looked at how to change things.
So first off, I'm going to start
with this App.view file right here
and I'm going to add something right
at the very top of the screen, so it's going to be a logo,
so right after this id of app we're going to add an image
and our image is going to have,
our image is going to have a class of img-fluid.
This is a Bootstrap class that makes it responsive.
I'll center it by typing in a margin or an m-auto class
and I'll use a display block
so that the m-auto class will work.
This image is already in my images folder,
so I'll just say images/binaryville.svg
and this is just the BinaryVille Logo.
All right, so that's just going to give me
a nice little logo to put in my project.
What I also want to do is get rid
of the slider that I have in there.
Let's go ahead and type an npm run electron:serve
and in here when you look at the application,
you can see my logo's actually really huge,
so I need to put in something to curtail that with,
and that's what the image fluid does,
it just makes it responsive to the width of the device.
But I've got this slider thing right here
and what it's supposed to do is allow you to limit
the number of elements that you see.
It's really meant for when you have
a lot of different prices.
This thing's still working, but there are so few prices
in my inventory that it really just doesn't
make a lot of sense for me to add it in here,
so I'm going to go ahead and get rid of that.
And before I forget, I'll go ahead and change my image
so that it has a style attribute.
And we could do this in the style section,
I'll show you how to do that a little bit later,
but we could just also do it here for right now.
So my image is not going to be any wider than 300 pixels.
And as I said, I want to get rid of that sliderStatus
and there's actually a lot of different little pieces
that I'm going to have to get rid of.
A couple of 'em are right here.
The sliderStatus itself, so this is passing some information
to the sub-components and in this case
it's passing along this sliderStatus property.
And also this maximum property
that determines the maximum price that it should look at,
so I can get rid of those right there.
And notice that you can also toggle the visibility
of that sliderStatus, and that's what this event is for,
so I'm going to get rid of that there as well.
And then, there's a couple of variables here,
this maximum determines the maximum amount
that the slider will be showing at any particular point.
So as I drag that slider, it's going to change
the value of this maximum and control what is displayed,
so I can get rid of that.
And of course, I'll also get rid of this sliderStatus here.
If we keep on going down, there's this little event
that actually toggles the sliderStatus,
so we can get rid of that as well.
Go ahead and save that, that's pretty much
all we need to do in app.view.
So let's go into the product list,
so this is a component that lists all the products,
which is right here, and in here we are,
the way that we're limiting the amount of items
that are being displayed based on that maximum
is using this v-if statement, so I'm going to get rid of that.
And I'm going to do something else here, I'm going to make this
be two columns instead of four columns.
Right now in my list of images,
the images are actually quite big
and I want them to be a little bit smaller,
so I'll make it take up two of the 12 Bootstrap columns.
Notice that my other column here is flexible,
so I don't need to specify 10 columns here,
I could just say change this one
and then this one will adjust to whatever's leftover.
So here I don't need this maximum prop that I'm passing,
I'm passing some data along, again I don't,
I'm not using maximum anymore so I can just get rid of it,
all I need is the products here.
And I think that's it for this component.
And then I also need to look at the products component.
And in here, I'm going to get rid of a couple things.
And I'm going to take this My Shop here
and I'm going to add some text
just to have a sort of subtitle to this thing.
And I don't need this price-slider anymore.
So I'll move this, I'll just have it say My Shop
because I already have a logo
and this will go underneath the logo,
and let's go ahead and change this a little bit.
We'll just center the text with some Bootstrap classes
and give it a margin top of zero.
I'm also going to change this to an h2
just to make it a little bit smaller here.
So just a navbar, a headline, and then
I'm going to add some text.
All right, so we have some nice little text there,
let's go ahead and save that.
And we don't really need this slider component
to be imported in here as well 'cause we're not using it.
We don't need sliderStatus, sliderState,
or even maximum anymore because we're not using that slider.
Finally, we don't need to import the PriceSlider component.
So let's go ahead and save that
and make sure that our application is running.
And everything's still working well.
I like the addition of this little bit of text.
Logo is looking fantastic
and here's the h2 that I did before,
and you can see that the photos are a lot smaller.
It looks like I'm getting a couple of errors here
so let's take a look at that.
And it looks like I need to get rid of maximum,
there's still like a lingering one in products.
So let's take a look at that.
Yep, there is, where it's actually assuming
that I'm going to be passing along maximum here.
So let's go ahead and do that,
and let's go ahead and cancel our process and run it again.
You can see that it's pretty handy to have a console
when you are using Electron
and you're previewing your application.
By default it shows you this console,
so it's pretty cool because you can find a lot of errors,
although it's not perfect and sometimes
it's not as good as what we get with our regular browser
and we'll see that difference in a later video.