30 Days to Learn Laravel, Ep 28 - Blade and Tailwind Techniques for Your Laravel Views

[Music] all right welcome back there's no time to waste so I'm going to jump right in if I switch back to Zeppelin yeah we currently have one job card but right down here we have a second version and while we could figure out a way to consolidate both of these Styles within a single blade component often it's just easier to create two separate components and that's what I'm going to do so let's go to job card and if I open up the sidebar here I will duplicate it and we'll call this one Whatever you want job card wide how about that all right so let's see we should work left or right so first up on the left is the image itself the employer's logo next we'll have a div that wraps the employer's name and then the title and the salary requirements so I should be able to get rid of this and why don't we change this to some kind of anchor tag and actually we're going to talk more about this at the endend of the video uh but basically how can we have multiple anchor tags within a card while still allowing the card itself to be clickable it's a little bit tricky but I'll show you how to do it all right so we have the employer name the job title the salary and then finally on the far right let's just display the tags for now and we can come back later if we have a little more time but I'm trying to be as quick as we can here all right that's the general shape all right so of course there's more to do but let's see this in the browser so here's our main welcome page where we have the tags and then the recent jobs I'm going to grab this div here and we'll have a new one this time for uh job card wide all right and why don't we do three but this time we'll have space between them vertically so maybe I don't know space Y3 all right let's have a look so we come back to the browser and whoa we have a gigantic image and this is probably related to uh F box it's always flexbox so let's fix it I can command click here and yeah one thing you learn if you've used flexbox for a long time is you want to be careful about things like images or buttons that are direct children of a flex container uh which is what you see here you always end up with weird uh with weird issues so for example if I just wrap this with an a div and switch back yeah we've solved that problem there okay but yeah it still doesn't look great because we are using Flex call this time we want a flex of row and I don't want the Tex to be centered there we go all right next up let's tweak some of the spacing so I'll start by saying in between each of the flex items let's add a gap of about six and then with that in mind if I switch back to the welcome view I'm going to increase the space uh the vertical space in between each of the wide cards up to six a little more breathing room all right come back and yeah that looks a little better all right next I want this section itself to flex expand as much as it can and that will push the tags to the far right so back to our wide card and we'll say right here Flex One Flex to fill the available space or Shrink uh if it needs to all right good next the employer logo is a little bit wider than 42 pixels I think it's 90 uh let's double check back to Zeppelin and let's see I can click right here and sure enough 90 by 90 save it switch back and yeah that looks better but that blue is killing me so you know what I'm going to do I'd rather reference an actual image or at least a dummy image so I will use a different placeholder surface and let's see if I can remember it it's pixum do photos and I believe once again I can just pass the dimensions here there we go now we have a random image but notice it is repeated for each item there uh ideally I want them to be unique for each job so there is a way to do that I believe we pass seed and then some kind of identifier so then um the the image pick some photos returns will always be unique to that idid so if I come back and refresh well they're all using the same identifier so we see the same photo there so all we have to do is make it unique um once we have actual jobs in the database we will reference the ID of the job for now I'm just going to say give me a random uh number between one and you know a massive number now if we come back yeah we have some Unique Images there and that's fine for a demo all right back to Zeppelin next we have this gray text now I happen to know the hash is C2 C2 C2 but let's see if Tailwind has something close let's go with gray 600 and yeah it doesn't have to be perfect maybe 700 that's too much how about 400 you know what close enough for me I'm not going to squawk okay so while I'm here notice the font is different from what we see on Zeppelin so as it turns out this pixel positions demo is using the same font that we reference on lass and that comes directly from fonts. google.com so here's what I'll do I'm going to visit our layout file and at the very top I will save us some time and just paste it in and yeah all of this is again coming from fonts. goole.com for this font here hanen grotesque is that how you pronounce it uh and we're getting a handful of Weights if we need them cool so now I want to reference this within Tailwind so here's what I'll do I'll open our Tailwind doc configuration file and I'm going to extend the font family object to include a new one we'll call it hanen grotesque and then I will reference uh a font tree so ideally I want that font we pulled in with a fall back to sans's serif if it didn't load for some reason okay so now yeah once again Tailwind will reload and I can now reference this as a utility class I'll show you let's go into our layout out file and let's set it sitewide on the body so I'll say font hen grotesque and let's see it in the browser yeah there we go looking good all right so let's continue with our wide job card job card wide and yeah of course the title itself should be bold it should be large and then for the paragraph yeah this is going to be very similar I also want it to be small and gray okay so if we switch back yeah that's looking fairly good but notice how everything is grouped at the top ideally I want to push the salary to the bottom of this section down here like you see in the image so maybe we should do this maybe once again Flex to the rescue let's set a display of flex but I want it um in in the direction of a column and then for this last item I will set March and Top Auto uh to push it down as much as it can go and now yeah that looks better all right next the title could probably be a little larger and I want to push it down from the salary so how about push it down march on top of three maybe and then let's change it to text extra large yeah that's looking reasonable okay now let's move on to some other miscellaneous things uh at the moment we have two different uh versions of our employer logo but of course we want to consolidate them so this once again sounds like a good use case for a dedicated component so I'm going to copy this and create a brand new one we'll call it employer logo. play. PHP and I'll paste that in and again don't forget ultimately we will update these components to accept uh for example the the employer object and then we will reference it but for now once again everything is static all right so let's update this with our new component uh employer logo and then I will switch to our standard job card and I can update it here as well employer load go but now we do have one issue you'll remember if I switch back the width in this case should be 42 but within our component it's set to 100 by 100 so now we have messed up our layout as you see there okay so why don't we do this let's accept a prop uh an initial prop for the width and that will default to 90 pixels but if you want to override it you can okay so then I can swap this out with the width and I believe if we just provide a width it will be treated as a square so we wouldn't have to do a height uh or something like that duplicate it we should be able to provide just one and it'll work okay so now back to job card I could say width is uh what was it 42 give that a shot switch back and now we have two different sizes for our job cards all right next up I'd like to do a little more work with the tags they don't look that great if I switch back to Zeppelin let's zoom in a little bit and we can see this Tex text is actually very small if I open the sidebar I can see it is set to yeah about 10 pixels what do we have currently I'll go to computed and look for font size ah it's set to 12 okay so that's extra small and I don't think tail one goes below that so why don't we create a custom size back to our tail one configuration file and let's override font size and we'll have how about if we already have an extra small let's do two extra small and I want this to be 10 pixels I could hardcode this or I could set it in rims so if I do some math let's take 10 pixels divided by the base font size and we get 625 all right let's use it back to job card actually into tag and yeah let's see if we can update it to text 2 XS come back and yeah now it's just a little bit smaller all right let's keep going I would like this to be bold and maybe we should give it a little more padding on the left and right all right back to Arc and that's looking pretty good okay now I'm thinking our font might be a little bit too heavy so if I compare this to Zeppelin yeah notice that here even for the navigation area the font is set to bold but it's much softer than what we currently have in Arc so let's do this let's go back to our layout file and yeah why don't we remove both 800 and 700 we'll stick with 400 500 and 600 weights so if I switch back yeah that's much softer than it was before all right next up you'll see that we have some hover Styles if your mouse is over a card it looks like the title goes blue and the border is blue so let's go into job card and we can say uh well by default we have a border but maybe we hide it let's make it transparent but you hover over the card and we make it border blue and again I'm just going to eyeball it maybe 800 come back and yeah close enough all right but now I want to make the title blue as well so how do we do that well you can't just add hover styling to the H3 because then you would only see the blue if you hover over the H3 and that's not what we're doing here so a way to solve this with Tailwind is to apply a class of group and then on the H3 you can listen for when an element with that class is hovered over so I could say for example if you hover over the group meaning this parent element then I want to set uh the text for this to also text blue 600 and I think that will solve the problem yeah cool so actually real quick while we're here if I switch back to Zeppelin you'll notice that the salary is pushed down a little bit and much much smaller I want to fix that pretty quickly while we're here so for the title let's make it bigger like XL and yeah then for the salary we will make it maybe small and then I will push it down uh a little bit so I'll set some March and top to push it down from the title come back yeah better but hm the salary is still too bold let's see oh that's because we applied it to the div okay let's apply it only to the title and then the salary itself can be a base level yeah and that's looking a little better okay but next I would also have to apply those hover uh those border styles to the wide card as well and that's not ideal but yeah let's just see what that would look like notice I'm doing a bit of duplication here which is a sign so let's go to job card wide and I'm going to paste those Styles in here and then for the video producer group hover text blue 8 oh 800 you know what I think I used the wrong ones here yeah notice I have 600 and 800 up here we want those to be consistent okay so now if I hover over it that looks good maybe it's too dark maybe it should be 600 but we're not going to get stuck in the weeds here you get the idea now once again if you want to transition these so it's a nice um smooth transition from uh transparent to Blue do this once again set transition colors duration and let's make it really long so you can clearly see it so come back and well the title isn't quite right but notice the border is definitely transitioning end yeah I guess I forgot the title has to receive the same thing transition colors duration and this time let's make it much quicker a third of a second often seems to be uh a good value to go with a third of a second or 300 milliseconds yeah if you like that it's just a little bit smoother okay so once again we'd have to do the same thing for the job card wide this feels kind of gross doesn't it then right down here the exact same thing and now that works as well it's not the end of the world but H it seems like we could have more than one card well we already do but in a real pixel positions application we could have many cards that have this styling they're almost like panels or or you can call them cards if you want I often call them panels um so with that in mind could this be a candidate for a component let's give it a shot create a component called panel and I'm going to use a split view here let's take the wrapper here and then we can have a slot like so all right let's see how that looks if we took that route I could swap it out with our X panel component so now we've effectively uh consolidated all of those Styles so let's see how job card wide looks yep no difference good next I can go to job card and we're going to do the exact same thing however I want to make sure is there any um unique classes here so did we duplicate the classes here I'm just going to paste this in um yeah we actually have a couple differences and yeah that would be the flex information and the Gap okay so that should be excluded all right let's do this I'm going to change this to X panel there we go and then I'll get rid of everything except for the unique parts so it sounds like the unique parts are that within the panel we want to display a flexx so get rid of yeah and then if I click through to panel this is unique to job card wide so I don't want to assume it but everything else should be the same all right so job card wide pass these in and then of course we've learned if we want to merge these well we would have to do something like this and I'll show you a little shortcut so up until this point we've been saying attributes merge and then we set the default class like so and now we do the trick however if we just call attributes as a function it's going to merge it so this is sort of a shorthand for attributes merge and yeah that would work also keep in mind if you want you can do things like this where you could open up PHP blocks uh like this and then you could say default classes or keep it even simpler classes now you can reference that variable within your template here so you could do something like this just to make it a little easier to consume right especially on a low resolution like I have those utility classes go off the screen very quickly so this is an option if you want all right so back to Arc and yeah notice now we have the exact same thing as we had before but we have Consolidated those stylings within a panel component pretty cool so now for example if we go back to welcome if we were to add a new section for something totally different I could open up a panel and say um hello there whatever you want and you'll see it will receive those same Styles and yeah it seems like that's a repeating pattern for this site so it makes sense to extract it into its own component let's get rid of it all right so now uh yeah these tags are way too small they're fine for a job card but if I switch back to Zeppelin yeah you can see they're much larger here okay so it sounds like hm we should make this configurable let's go into tag and yeah let's do this let's accept the prop for the size uh and maybe we'll accept like a base or normal how about base uh but also maybe a small size or something like that okay so then we could do something like this open up a PHP block and we could say well if size is base then use these classes but if the size is small then use these other classes okay so let's figure out what our base classes here we'll do the exact same thing at the top I will have our CSS classes but then yeah the the text size and the padding should be unique based on the size so how about if the size is small then I will append to classes and I'm just going to grab these here all right and then what else uh text to exess so those are the classes that are unique to to a small size at least so far clean that up okay now I just have to figure out what the classes should be for uh the base level and I'm just going to eyeball it uh maybe text small and then I will increase the left and right padding to five and yeah maybe that's enough uh by the way notice I am including a space so that when we concatenate they aren't grouped with the uh the previous class there okay so now I'm going to reference them and yeah that would be one way to handle this all right so our default size is base so if I switch back to Arc uh yeah those look good now but these are now too large so we just switch back to job card and I will update these to say all right set a size of small and then I will uh create three of those all right and let's even update these to look a little more real backend front end manager something like that there you go we have our small tags and our larger tags all right back to Zeppelin last up well we'll still have some form work to do later uh in the series but all I want to do to wrap up this video is add the section at the top let's find you a great job followed by a uh an input back to welcome this will be its own section at the top and it's not a standard section heading so it's more of a banner let's find your next job I already know it's going to be bold and maybe pretty large how about 4 XEL and then below it I want a form so we will handle the logic for the form later but yeah within it we'll have an input type of text we'll give it a placeholder uh to give you an idea of what to search for how about web developer and then for the classes let's see if I zoom in all right so we have a dark uh gray background there's a border it's rounded there's a good bit of padding there all right let's see if we can make this work make it rounded let's set a background color of again let's use Alpha how about background of white but only at 5% and that way I could do a border of white at 10% so just a little bit larger and then we know we want a good bit of padding on the left and right and the top and bottom it's a pretty large input all right let's have a look in Arc and yeah so next let's align it to the center and you know what maybe can I and just set text Center to the section itself yeah that looks good uh let's make the input wider so H how about set width to full yeah and actually just in case on your screen you're not seeing this uh overly well let's increase it temporarily so it's Crystal Clear uh where we are all right we want to push it down so let's say class mt6 and then it's a little too wide so we should set a maximum width now tail one includes a handful of Maximum width classes not sure which one to do um typically I would just eyeball it so here's large here's extra large extra large looks pretty good to me okay finally if we check Zeppelin it is pushed down just a little bit um let's do well we already have spacing in between don't we so I can't set margin um let's do this how about padding top of 10 yeah and that pushes it down and then also we should push uh let's find your next job down from the navigation area a little bit as well so maybe I don't want pt10 maybe a little bit less pt6 and yeah I don't want to spend too much time on this uh because we have a lot of LL specific work to do although this is LL specific you know we are working with blade components and refactoring things and figuring out how it works with utility classes and stuff like that and yeah I think this is looking pretty good okay so let's bring this back to background white of five and uh yeah clearly there's a lot more tweaking we could do in real life um I'm sure there's a bunch of hover Styles and focus Styles we've missed but again for a demo where you're working along I think this is pretty good all right so very good job yeah I don't know what the deal is but in my head whenever I have videos like this that are almost exclusively HTML and CSS based I feel like the programmers among you are thinking come on come on fast forward this isn't what I signed up to L cast for move on to the next part um I don't know maybe that's not true maybe some of you enjoy watching it but either way it doesn't matter because we're done in the next video we're going to do a lot we're going to build up the whole architecture for this project so that means we will be generating eloquent models uh we will whip up seed data and factories we'll work with relationships I will introduce you to testing there's a lot to do and I hope we can pull it off um so yeah that's it I will see you in the next video stay [Music] tuned what pull to show outro

Channel: Laracasts

Views: 2,843

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: iCn0NxC8osY

Length: 23min 53sec (1433 seconds)

Published: Tue May 21 2024