Create an Instagram Clone with Vue JS, Quasar & Firebase - in 4 HOURS! (1/6)

in this series of six videos i'm going to show you how to create this gorgeous instagram clone called quasigram using vue.js quasar framework firebase node.js and express so the app has two pages a home page and a camera page on the home page we can display a list of posts and each post has an image a location a caption and the date the image was posted and on the camera page we can access the user's camera if they give us permission and display that in this feed we can take a photo enter a caption and find the user's location again if they give us permission and we can create a post and we then see that post on the home page it's going to have a beautiful responsive design that adapts across desktop and mobile you can see on desktop we have a nice tall header with our navigation items at the top and then on mobile we have navigation items in tabs at the bottom we're going to store all of our data in a firebase cloud firestore database so you can see all of our posts data here we're going to store our photos in firebase storage and you can see those here i'm going to create our own back end using node.js and express with two different endpoints one endpoint for grabbing all the posts from the database and one endpoint for creating a post and also uploading the image to firebase storage we're also going to host our app on firebase hosting and host our back end on heroku if you're new here my name's danny i'm an indie app developer and creator of fudgit if you want to learn how to create cross-platform apps and web apps using technologies like vue.js quasar and firebase click subscribe and click the bell so you don't miss anything okay let's get started by installing quasar cli so you want to go to quasar.dev get started and then install quasar cli and the first thing you need to do is install node.js if you don't have it installed already to do that you can just go to nodejs.org and you want to install one of these probably the one on the left is best as that's the stable version once you've got that installed you can then install quasar cli by running one of these commands either yarn global add at quasar cli our npm installed g at quasar cli so i'm going to use npm to do this so you just run that command in your terminal this is just my normal terminal but running within vs code now you may need to put sudo at the start of this if you're developing on a mac and i'm not going to run this command because i already have it installed but once you have both node.js installed and the quasar cli installed you can then create a new project with the quasar create command let's create and launch a new quasar project so we can do this using the quasar create command so you want to go to your terminal make sure you're in the folder where you store all of your projects and then we just want to run quasar create and then we want to give a folder name and i'm going to call this quasigram hit enter and it's going to ask us for some settings here so i'm going to leave the project name and then for the product name i'm going to put quasigram i'm going to leave the description leave the author and now we get to choose our css preprocessor i'm going to use sas with indented syntax then we need to choose our components and directives import strategy and i'm going to choose auto import for this because this means whenever we add a quasar component or directive to our app quasar will detect that and automatically add it to our project so i'm going to choose auto import and i'm going to disable eslint because i find for me it causes more problems than it solves and i'd recommend that you disable it too just so you're not constantly bothered by eslint messages and i'm going to enable axios because we're going to be using this to make requests to our endpoints and i'm going to enable ie 11 support because we want our app to work on internet explorer hit enter now it's asking us for a call over id and we're not going to be creating a chord over app with this so i'm just going to leave the default and i'm going to use npm so i'm going to choose yes use npm okay it's finished creating our project if we scroll up in the terminal it tells us how to get started we just need to cd into the folder and run quasar dev and i have my projects folder open here and i can see the folder it's created here quasigram so i'm just going to drag that into vs code open up the terminal and we're just going to run quasar dev and we can now see the basic quasar app running in the browser so it's just a really simple app with a toolbar along the top and a drawer along the side this drawer can be toggled with this button and on smaller devices such as mobile you can see the draw disappears and can still be toggled with this button so right out of the box we get basic responsive design support so let's talk about the folder and file structure of a quasar project next let's have a look at the folder structure of a quasar project so the main folder we're concerned with is this source folder so i'm just going to open that up and within there we have an index.template.html file so this is the main html file of your project and we don't have to change this much and we have this q app div here and that's where the main view component of your app will be loaded and that's this app.view file so this is the main view component and within this file we load layouts here which brings me to the layouts folder so i'll just open that up and then this main layout.view file this is the layout for our app now a layout is basically everything that surrounds the pages of our app so in this case that's the toolbar along the top and the drawer along the side and within layouts we load pages so if i scroll down to the bottom of this main layout.view file we have this q page container here and then this router view element this is where our pages will be loaded so if i now go to the pages folder we have this index.view file and this is the page that we see here which just has this one image on it and we also have an assets folder where we can put images and stuff like that bear in mind that anything you put in this folder will be processed by webpack so that might mean that images get converted to base64 and stuff like that then we have this boot folder and this is where we put boot files and a boot file allows us to initialize code before the app starts this is really good for initializing plugins and stuff like that you can see quasar has already created a boot file for axios which we're going to be using to access our endpoints later on next we have the components folder where any view components can go and a css folder with this app.sass file or it might be an app.scss file if you've chosen to use scss for the css processor where we can put global styles and then we have this quasar.variables.sas which has some css variables that we can use to customize the theme of our app so you can see this primary color here this primary variable if i change this to say green and save that then you can see the theme update on our project i'm just going to change that back to what it was and save that and then we have a router folder where we configure the roots of our app so if i open up roots.js then you can see the roots of our app in here and in here we basically just assign paths to pages and to begin with we just have this one root for the index.view file page which is this page here and finally we have a statics folder and in here we can put assets such as images and fonts but unlike the assets folder anything we put in here will not be processed by webpack so any files in here will just be loaded as is when you're working on view apps it's always a good idea to have the view dev tools installed so if you don't have that installed just google view dev tools click on this link from the google chrome store and then just click on add to chrome click add extension and then once that's installed we can do loads of cool stuff with it so if you just go to your chrome dev tools and then click on this arrow we have a new option here view and we can see all of the components of our app in here and do all kinds of cool stuff such as changing our view data for example if i go to our main layout component these essential links here are coming from a view data property so if we open that up we can make changes so if i change this docs title here to documents then you can see that update over here we can also use this to debug view x and events and all kinds of stuff and we're going to use this a little bit later on in the course i recommend before going any further you understand the basics of vue.js if you already understand the basics of ujs then you can just go ahead and skip this video and the next one but if you don't know the basics of vue.js then don't worry because i have two free videos that you can watch to get you up to speed the first one is 45 minutes long and it covers all of the basics of vue.js and you can get to that at danny's dot link view basics and the second one is 17 minutes long and it covers how to display lists of data with vue.js and how to break components up into child components and you can get to that one at danny's dot link slash view lists and if you go to your project and source pages index.view then you can follow along with these videos right on this file here before you do that i'd recommend making a copy of this file i'm just calling it something like index.view.old just so that we can get this project back to its original state before we start creating the app and once you finish you can just come back to the next video in this course and carry on now if you did decide to follow along with those viewjs videos then we just need to clean up our project and get it back to how it was so we just need to delete this task.view if you've created that in the components folder and then we need to delete the index.view file and then rename the original index.view file to just index top view let's just open that up and you should just see this original quasar page again and so this is what your file should look like should just have the template tag q page component with the flex and flex center classes then this quasar image and then just the script section with the export default and the name set to page index right so let's get started on the app that we're actually going to build let's set up some pages and routes for our app so we're going to need two pages the home page and the camera page and i'm going to make this page here our home page so let's open up this page which is in source pages in desktop view and this name prop here which helps us to find this component in view dev tools i'm going to change this to page home save that and i'm going to remove this image which is this image here and for now i'm just going to stick a h5 on the page a heading tag and just put home page in there save that and we can see that update here and this file is currently called index.view so i'm going to rename that to pagehome.view to make it a bit clearer what this is and this will now break our app because the main root of our app is pointing to index.view and not pagehome.view so we want to go to our roots file which is in the router folder and then roots.js and we can see the root for the main page of our app here and it's pointing to pages slash index.view so i'm going to change that to pagehome.view that should now fix our app i'm going to create the camera page so i'm just going to duplicate pagehome.view and we'll call this page camera dot view and we'll open that up and we'll change the name prop to page camera and we'll change the text in this h5 to camera page save that and now we need to set up a route for this page so i'm going to jump back to the roots.js file and this route to the home page i'm just going to duplicate that make sure i put a comma after the homepage one on this path property i'm gonna set that to slash camera so that if we go to slash camera in our app it should take us to the page that we specify here then i'm gonna change this file name here to page camera dot view save that okay let's see if this route is working so if we go to the address bar and just go to slash camera then we can see it takes us to our camera page or if we just go to slash then we're back on the home page if you found this video useful so far make sure you smash the like button and leave a comment telling me what you think about quasar okay let's create a photo with some tab navigation so that we can navigate our app and since we're going to have footer navigation on mobile and header navigation on desktop we don't need this draw so i'm going to jump to the layout component which is in layouts and then main layout.view and i'm just going to get rid of this draw so we can see this q draw component here i'm just going to collapse that and get rid of it save that and the draw disappears and we can now get rid of some stuff in this file because this essential link component was part of that draw so i'm going to remove this import of that component and i'm going to remove this component subject here and we can just get rid of everything inside this data object so i'm just going to get rid of all of that and just leave an empty data object there and we can also delete the actual essential link component file in the components folder so we'll get rid of that okay let's save that layout file okay now we need a footer component so i'm going to jump to the quasar site and i'm going to jump to layout and grid and then layout header and footer and we just want to grab a basic footer for now so this one here is fine so i'm going to click view source on that copy the code for the footer here jump back to our main layout.view file i'm just going to collapse this cue header for now and we want to paste this footer after this queue header so i'll paste that in there fix the indentation and save that and we can now see the footer on the page and we're going to need some tabs so i'm going to jump back to the quasar site and go to view components and tabs and we'll scroll down and i'm just going to grab these basic tabs here so we'll click on view source and grab the cue tabs component here jump back to our main layout.view file and we'll get rid of this q2 bar title component and just paste in these tabs save that and we can now see these tabs in our footer i'm going to get rid of this class text teal which is giving them this teal color and i'll remove this v model as well save that i'm only going to need two tabs here so i'm going to remove the third one and i'm just going to change the labels on these so i'm going to split the attributes on these and the first one i'm going to change the label to home and i'll set the name to home as well and the second one i'll change the label to camera and i'll change the name to camera as well save that and these now say home and camera and we'll change these icons later because we're actually going to install a different icon set for this app and we want to make these tabs linked to the two pages of our app so if we jump back to the tabs page on the quasar site and we have this section here connecting to view router so i'm going to jump down to that and it shows us how to do this here so these queue tab components that we currently have we need to change these to hue root tab components and then we just need to add a two prop with the path that we want that link to go to so first of all i'm going to change these both to q root tabs and then i'm going to add a two prop to each of these and now the home tab is just going to go to slash the root of our app and the camera tab is just going to go to slash camera which is the path that we set up in the roots file here so let's save that and see if these links are working so if i click on the camera tab yep we're on the camera page and you can see the path up here if i click on the home tab then we're back on the home page okay let's add some style to this footer and this footer is going to be for the mobile view of our app so i'm just going to switch to mobile view by clicking on this icon here and from this drop down i'm going to choose iphone 678 plus and currently these tab icons are tucked over to the left and i've just realized that's because we've left them inside this queue toolbar component here so i'm going to get rid of that q toolbar component fix the indentation and save that that looks a lot better now and for the design of this app i'm going to be mostly using white and grays so if we jump back to the quasar site and scroll up here and go to style and identity and then color palette then we can find loads of color classes that we can use in our app here so i'm just going to scroll down to the grays and i'm going to use this gray 10 color here which is a very dark gray which is almost black but not quite it's pretty close to the uh dark gray that you see on the actual instagram site so this sort of color that you see here and so if we want to use this color as a foreground color so a text color or an icon color then we can just use a class like this text dash and then this name that we see here so if we wanted to set this as a foreground color we would just use the class text gray-10 or if we want to use it as a background color then we just want to use bg dash gray-10 and you can't see the class for white on here but we can actually just use the name white for a white foreground or background color so let's give our footer a white background color and we'll set the icon colors to this color so let's jump back to our main layout file and i don't really like this drop shadow we have on the footer and we can get rid of that by just getting rid of this elevated prop here so i'm going to get rid of that and i'm going to give this footer a white background color so i'm just going to add a class to the cue footer of bg white save that and we now can't see our tabs because they're also white so i'm going to add a class to this q tabs component of text dash gray dash 10 save that that's looking better and we need a way to differentiate the footer from the actual page here so if we're not using that shadow then maybe we can just use a border so if we jump back to the quasar site and go to layout and grid and then layout header and footer and if we jump down to the q footer api and for all quasar components if you scroll down to the bottom you can find the api here and this shows you all the different props you can add to that particular component so if i go to style then we have this bordered prop which adds a border to the component so i'm just going to add that to this cue footer i'm going to split the attributes on that cue footer and then just add bordered save that and we now see a nice border however it's not very obvious apart from this line here which tab is active so i'd like the active tab to change to our primary color which is this blue color so i'm going to jump back to the quasar site and go to components and then tabs then i'm going to jump down to the cue tabs api and let's see if we can find a prop to change the active color so we'll click on style and we have this active color prop so i'm going to split the attributes on this q tabs component and add this active color prop and just set that to primary save that yeah that's looking better and i'm not keen on this line at the bottom on the active tab so i'm going to see if i can get rid of that so i'm going to jump back to the tabs page on the quasar site and we have this indicator color prop here which determines the colour to be attributed to the indicator the underline of the active tab so i'm just going to use this and set it to transparent to get rid of this line so back on this q tabs component just going to add indicator color set that to transparent save that and yeah that line has now disappeared okay this footer navigation is looking pretty nice now but we still need some nice icons if you want to take quasiground to the next level check out my 15 hour course progressive web apps with vue.js quasar and firebase in this course once you've finished creating quasigram you'll then get to turn this into a progressive web app by adding home screen installation precaching caching strategies background sync and push notifications you'll also test and fix the app in all the main desktop browsers as well as android and ios you'll also find two big assignments and all of the completed source code for every module get the course with my promo code at danny's dot link slash quasar pwa and the link is in the description okay let's add some nice icons for these navigation items so if we go to the quasar site then go to quasar options and helpers and then quasar icon sets and it says here unless configured otherwise quasar uses material icons as the icon set for its components so by default you can use any of the material icons in your site and you can find all those icons at material dot io slash tool slash icons and you can see all the icons here and you can search them so if you wanted to use this accessibility icon then you would just change this icon prop to accessibility but i want to use a different icon set and it says here quasar currently supports all of these icon sets here and i want to use this eva icons icon set because these icons are really kind of elegant and they look kind of similar to the instagram icons you see on the instagram site so if we go back to the quasar site and if we go to installing icon libraries it tells us here how to install these libraries so we want to go to our config file which is in the root of our app this quasar.com.js file go to that and we want to find the extras section and just add either icons to that so i'm just going to search for extras and we can see that section here either icons is already there so i'm just going to uncomment that and save that and we can now use the eva icon set so i'm going to jump to the eva icons web page and i'm going to search for home to find a nice home icon and this one looks pretty good and the name for this icon is home dash outline that we see there so let's figure out how we can use this icon so i'm going to jump back to the quasar site and i'm going to jump down to components and then icon and i'm going to scroll down to web font icons and it tells us here how we can use all the different icons so if we look at eva icons says that we need to add this either dash prefix to use an either icon so if we want to use that home icon then the full name that we're going to need to use is either dash home dash outline so let's jump back to our main layout file and down to this cue root tab this one here i'm going to change this icon to eva home dash outline save that and we can now see this nice icon here and now let's find a camera icon so i'm going to jump back to the eva icon site search for camera and this looks nice and the name for this is just camera dash outline so i'm gonna jump back to this camera root tab this one here just change this icon prop to eva dash camera dash outline save that and we can now see that nice camera icon and i'm just gonna remove these name props we have on these cue root tab because these props are for connecting tabs to a pane of content but we're not doing that we're just using these for overall navigation so i'll get rid of these name props and i'm also going to get rid of these labels because i think these icons are pretty self-explanatory and there's only two of them so we don't really need these labels so i'm going to remove both of these labels okay that's looking pretty tidy now and i'm just going to make these icons a little bit bigger because they are a little bit small so i'm just going to inspect these tabs and these icons see if we can find a class that we can use to style these and each icon has this q tab double underscore icon class so i'm going to use that class to increase the size of these icons so when i jump to the bottom of this main layout file add a style section and we're using sas for this project so i'm going to change the line to sas i'm going to target icons within the q footer so i'm going to add dot q dash footer then i'm going to add this q tab icon class so dot q tab double underscore icon and i'm going to set the font size to 30 pixels save that and that looks pretty sweet now so i think this footer is now complete okay so i think we're now finished with this footer let's move on to the header next okay let's work on our header next so i'm going to scroll up to the top of this main layout.view file i'll collapse the footer and we'll expand this cue header and we don't need this button here that was for toggling the draw which we no longer have so i'll get rid of that q button save that and that now disappears and we don't need this div here with the quasar version number so get rid of that as well save that and we want this to have a white background and we want the text color to be the same color that we've used in the footer this dark gray color so i'm going to split the attributes on this cue header and we're not going to need that elevated prop which is adding this shadow and i'm going to add a class attribute and so we'll use the same background class we used on the footer bg white to give it a white background and we'll use our dark gray foreground color so i'll add text gray dash 10 save that and we want to add a border to separate our header from the content so i'll just use the bordered prop that we used on the q footer to add that border save that and i want this title to be in the center at least on mobile and we could do that by just adding a class to this cue tool by title of text center but i'm not going to do that because i don't want it to be centered on desktop only on mobile so instead i'm just going to do this in the css so i'll get rid of that class and save that again and we'll just inspect this element and it has this class of q dash toolbar double underscore title so i'll just copy that class and jump down to the style section and we'll add that class in here so dot q dash tool by double underscore title and then i'm just going to add text align center to center that title and our app isn't called quasar app it's called quasigram so let's change this text here to quasigram save that and this font is a little bit boring so let's see if we can find a font that looks like the instagram font let's find an instagram style font for our app so i'm going to go to google fonts just search for google fonts click the top link and i'm going to search for a font called grand hotel and we can type something in here to see how it looks so if i type in instagram you can see this kind of looks like the instagram logo so i'm going to click on this font and then choose select this style i'm going to click on embed and we have a link tag here for adding this to our html page so i'm going to copy that and we want to go to our html page which is this index.template.html in our source folder so i'll open that and after all these icon links i'll just paste that in paste that in there and save that i'm going to add a global css class that we can add to elements to make them use this font so i'm going to go to source css app.sas and we can put any global css in here so i'm going to set up a class called text grand hotel and if we jump back to the google fonts page we have a css rule for this font so i'm going to copy that and paste that there get rid of the semicolon because you don't need that with sas and i'm going to set up some fallback fonts here i'm going to get rid of cursive because most of the cursive fonts are not very nice um we'll add a roboto because that is the default quasar font then i'll add helvetica new the default mac font then i'll add helvetica and ariel the default windows font and then i'll just add sans serif as a final fallback font save that we can now use this class on our elements to give them this grand hotel font so i'll jump back to main layout.view and i'll add that class to this q toolbar title component so text grand hotel save that and we're not seeing that let's just try refreshing the page and we can now see our fancy font i'd like it to be a little bit bolder so i'm also going to add a class of text bold which is one of quasars typography classes and you can find all of these classes on the quasar site if you go to style and identity and typography so you have all of these different heading classes subtitle body text classes caption classes and then you have all of these font weight classes as well and also classes for aligning text to the left to the center and strikethrough etc okay so this title is looking pretty good now but it's a little bit small so i'm just going to increase the text size on this so let's just inspect this element and go to our styles panel and let's add a font size property uh let's try 25 pixels uh maybe a little bit bigger than that so okay that looks pretty good at 30 pixels so i'm going to jump down to our style section and we're already targeting this toolbar title here in the css so just going to add font size 30 pixels save that i'll just refresh this to make sure that's working and yeah that's looking pretty good now pretty similar to the instagram logo okay so this layout is looking great on mobile now but it's not going to look too clever on desktop so if we just come out of mobile mode this doesn't really look like a nice desktop layout and what i'd like to do for desktop is just to hide this footer completely make this header a bit taller move the logo over to the left and add some navigation items up here instead for desktop and quasar has some built-in breakpoint variables that we can use to do this so i'm going to jump to the quasar site and go to style and identity and then break points so there's five different break points that we can use extra small which is for which is for screen sizes up to 599 pixels and then small medium large extra large and we're going to use this extra small break point because 599 pixels wide should cover all mobile devices and it gives us an example of using one of these break points here in a media query and it's also using the break point we want to use the extra small break point so i'm going to copy this example and because there's going to be lots of different elements that we only want to show on small devices and lots of different elements we only want to show on larger devices it makes sense to set up some generic classes for this so i'm going to jump to our global sas file this app.sas and set up some generic classes so i'll set up a class called small screen only which will be a class that we can add to elements and components that we only want to display on smaller screens and i'll paste in that media query and just indent that and we want to make sure elements that have this class are displayed below this extra small break point so we just want to add display block in there and we also want to make sure that elements for this class are not displayed on browsers which are wider than this breakpoint so i'm just going to duplicate this media query and if we go back to that breakpoints page the next break point after this extra small break point is this small break point and we want to get the minimum width value that this break point can be so it shows us how to use the appropriate variable name here to get the minimum width for that particular break point so we just want to use dollar break point dash then the breakpoint name sm min so i'm just going to change this here to break point dash sm dash min then i'm going to set display to none because if we're adding this class to an element then we don't want it to display on larger devices which is any device with a width wider than this value in this variable here so i'll save that we also want the class for elements that we only want to display on larger screens so i'm going to duplicate all of this small screen only class and just rename it to large screen only and if we're adding this class to an element then we don't want it to display on smaller devices so for this first media query which is for smaller devices we want to set display to none and this second media query which is for larger screens we want to set display to block and i'll save that and we can now use these classes in our app so let's jump back to our app and we want to hide this footer on larger screens so i'm going to jump to our layout file main layout.view find our cue footer component which is here then i'm just going to add the class we created for elements that should only be displayed on smaller screens which is small screen only save that um we're still seeing the footer on the screen even though we have a larger screen here i'll just try refreshing that and it's still not working let's see if we can see these styles using the inspector so i'm going to inspect the footer and the footer is here so we can see our small screen only class on there but i can't see this class we've created anywhere in here so i don't know what's going on but i'm just going to try closing the dev process and relaunching our app so i'll close that dev process close this tab and just run quasar dev again see if that fixes it okay so i've relaunched the app and i'm seeing that the footer is disappearing on smaller devices and then showing on larger devices and i can see what i've done wrong here this second media query should be min width not max width because we only want to hide elements which have this class if the browser is wider than the minimum possible value for the small break point and this one in the large screen only we also want to set the second media query to min width here as well so i'll save that and let's see if that's working now so we can't see the footer on larger screens but if we shrink this down then the footer appears so that seems to be working now okay let's add some navigation items to the header but only for the desktop view so we're going to use some quasar buttons for this i'm going to jump to the quasar site go to view components um buttons button and we just want an icon style button like this one this flat round icon only button so i'm going to click on view source on that grab the code and we want to jump to our layout file main layout.view and we want to stick this before this q toolbar title component because i want this icon to be over on the left here so i'll paste that in there fix the indentation save that okay so let's style this icon up a bit i'll split the attributes i'm going to remove this color prop which is giving it this blue primary color i'm gonna change the icon to our camera icon which is either dash camera dash outline save that that's looking a bit better and i want this to be a little bit bigger so we can do this with the size prop because we go back to the button page and down to the cue button api and then style then we have this size prop here where we can specify the size in pixels rems or we can just use something like xs for extra small or md for medium so let's try 18 pixels save that yeah that's looking a bit better now and i'm also going to add a prop of dense to sort of reduce the padding around the icon which you can also find on the cue button page which is here dense mode occupies less space um we want this button to link to the camera page so if we jump back to the button page and click on router we can add a link to this by just adding a 2 prop with the path that we want the button to go to so i'm just going to add 2 to this button and we want it to go to the camera page so i'm just going to put camera save that let's see if that button works yeah that's taking us to the camera page um we only want this button to appear on larger screens so we're going to use this large screen only class that we created and add it to this button so i'll jump back to the main layout file and i'll add that class to this button save that and we should see this disappear on mobile so i'll just and yeah it disappears on smaller screens and then reappears again on larger screens let's create a button over here for our home page so i'm just going to copy this camera button we've created and paste it after the queue toolbar title which we'll put it over here on the right i'm going to change the icon to our home icon which is eva dash home dash outline we want to change the link this to prop to just slash so this goes to our home page so let's see if that works so we'll jump to the camera page first and then click on the home button and yeah we're back on the home page so i want this header to look a little bit more desktoppy so if we look at the instagram site you can see that the header is a little bit taller and we have the logo over to the left so we're going to do a similar sort of thing with our app i'm going to move this logo over to the left next to the camera button and make this header a little bit taller so let's move this title over to the left first so i'm going to scroll down to our styles and we're currently setting text to line to center on this q toolbar title element on all screen size so i'm going to put this text align center property instead in a media query so it only targets smaller screens so i'm just going to steal the code from our up.sas file i'm just going to grab this media query here for smaller devices jump back to main layout.view paste that in here and then indent this text align center property and we can see that's now over to the left but if we shrink it down to mobile then the title is back in the center again and i'd like a little separator between the camera icon and the title so if we jump back to the quasar site we do have a separator component that we can use so i'm going to jump to components and then separator and we can use these separators horizontally but also vertically so i'm just going to click on the view source button for this vertical one and we have a vertical cue separator there so i'll copy the code for that we'll paste this in between our camera button and our title so i'll paste that here after this cue button save that and i'm going to split the attributes on this cue separator and i'm going to get rid of this inset prop because i think that's what's adding this gap to the top and bottom and i just want this line to go all the way from the top of the header to the bottom get rid of that and of course like every component we can see all of the possible props down here in the api section and yeah for the inset prop it says if set to true the left and right margins will be set to 16 pixels but i think that's referring to a horizontal separator but because this is a vertical separator it's going to add those margins to the top and bottom instead i'm going to use this spaced prop to give this cue separator a bit more space on the left and right because it says if set to true the top and bottom margins will be set to 8 pixels but because this is a vertical separator it'll be the left and right margins that are set to 8 pixels so add this space to prop save that and that's looking a little bit better and if we look at this camera icon we've got a little bit more space to the left of that icon than we do on the right so i'm just going to add a class to this button to add a little bit of margin on the right hand side so q button is here and the class i'm going to add is q dash m r for margin right dash sm for a small margin on the right and this is one of quasars built-in margin classes and you can find these on the quasar site if you go to style and identity and then spacing it tells you how to use these classes here and you can use them for margin and padding as well okay and the last thing i want to do is make this header a little bit taller so i'm going to jump down to the style section and if we just inspect this header the element we want to style is this q toolbar element so i'll copy the class for that and we'll set up a style here for this q toolbar uh let's see if we can style it by just adding a height property so i'll click that div in the inspector and we'll just add height say let's try 60 pixels yeah maybe a little bit taller so i'm just going to keep increasing this until it looks pretty decent yeah that looks pretty good at 77 pixels high so i'll add that here in our style section so height 77 pixels and save that but we don't want it to be this tall on mobile if we go back down to mobile view you can see it's still really tall on mobile and also we can still see the separator on mobile so i'm just going to use a media query here so that we only apply this style to larger screens so copy this media query here paste that above this height property and we also need to indent that now and we want this to apply above this excess break point so basically from the minimum of the sm break point which is the next break point and above so i'm going to change this to min width and then breakpoint dash sm min so save that and if we shrink down to mobile again it's still tall i'll just try reloading it oh yeah so it's nice and small again on mobile and they're nice and tall on desktop but we're still seeing that separator there so i'm gonna find that q separator and just use one of our classes that we created so i'll use the large screen only class so this disappears completely on mobile and let's just make sure we can still see that separator on desktop yeah we can still see it okay so this desktop header is starting to look pretty good now okay we're almost done with this desktop header and this looks great right now but if we stretch this up really wide for a really big display you can see it doesn't look too great because we have the camera icon and the logo way over there and then the home icon way over there whereas if we look at the instagram site we can see that everything in the header is nicely constrained within a particular width and if we inspect this inner part of this header we can see they're doing that by just setting the max width to 975 pixels so we'll do the same thing with our app so i'm going to jump to app.sas and i'm going to set up another generic class that we can use throughout our app for constraining our content to a max width of 975 pixels so i'll call this class constrain and we just want to set max width to 975 pixels and we also want to set margin to not and auto to ensure that any element we have this class 2 has no top and bottom margin but has an auto left and right margin which will force that element to be in the center of the page so i'll save that and we'll add that class to toolbar in the header so i'll jump back to the main layout file and this q toolbar here just going to add that constrain class there constrain save that and that's looking much better now so even on a really wide screen our header looks decent we can also use that constrain class we've created on our pages later on to make sure our page content doesn't come right over here or right over there as well okay so i think we're all done with our layout now the header looks great on desktop and footer and header look great on mobile as well we still have five videos to go in this series and in the next video we'll design our homepage and camera page make sure you subscribe so you don't miss the videos in this series or any other videos and if you're interested in the full course where you get to turn this up into a progressive web app with all of the five core pwa features go to danny's dot link slash quasar pwa and the link is in the description you

Channel: Make Apps with Danny

Views: 14,315

Keywords: vue, vue js, vue.js, vuejs, vue tutorial, vue js tutorial, vue.js tutorial, vuejs tutorial, quasar, quasar framework, node.js, nodejs, node.js & express, express, firebase, firebase cloud firestore, firebase cloud firestore database, cloud firestore database, firebase storage, cloud storage, firebase hosting, create an app, heroku, camera, location, geolocation, responsive, responsive design, instagram, instagram clone, vue instagram clone, instagram clone vue, instagram clone vuejs, udemy

Id: 9tyFBchdb00

Length: 52min 7sec (3127 seconds)

Published: Fri Aug 21 2020