->ng new AppName ->Add SCSS (I was informed it's the convention with angular) ->cd AppName ->ng add @angular/material ->Setup Hammer JS for gesture recognition :YES ->Set up browser animations for Angular Material :Yes ->npm install ->ng serve
All of this is from terminal / command prompt
Documentation can be found here
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/
Add font awesome as well because font awesome is awesome.
wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css');
It get's used in this project 😉
Lib CDN's can be found here
CDN's https://cdnjs.com/libraries/OwlCarousel2
Scripts and Styles for "wp-enqueu"
// Version 1.3.3
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js');
// Version 2.0.0-beta
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css');
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css');
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js');
The library is also inside the Libs folder on the server if you need it. Or you can just download it from the first link above.
<div class="owl-carousel owl-theme" id="about-banner">
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
<div class="item">
<div class="inner-block">
<div class="icon"> <i class="fas fa-cogs"></i> </div>
<div class="inner-block-header">
<h2>Quality Service</h2> </div>
<div class="inner-block-text">
<p>The best paragraph</p>
</div>
</div>
</div>
</div>
.inner-block .icon {
color: #f44336;
text-align: center;
padding: 10px;
font-size: 70px;
}
.inner-block-header {
text-align: center;
}
.inner-block-text {
text-align: center;
}
#about-banner .inner-block {
margin: 35px;
border-top: 1px solid #f44336;
border-bottom: 1px solid #f44336;
}
#about-banner {
margin: 25px;
}
$("#about-banner").owlCarousel({
items: 3,
itemsDesktop: [1000, 2],
itemsDesktopSmall: [980, 1],
itemsTablet: [768, 1],
pagination: true,
navigation: false,
navigationText: ["", ""],
autoPlay: true
})
When making a route you can set a null-able parameter, this will save you in terms of routing like doing an if, and if the parameter is there or not you can then perform your actions based on those parameter rules.
You would write is like so.
Not null-able does not have a Question Mark
Route::get('home'/{action}, function($action){
return $action;
});
Null-able does have a Question Mark
Route::get('home'/{action?}, function($action){
return $action;
});
--------------------------------------
To create your model and controller together you can do this.
Method 1 : Does not set controllers as resource items.
php artisan make:controller CustomersController --model=Customer
Method 2 : Sets controllers as resource items.php artisan make:model Todo -mcr
--------------------------------------
-m, --migration Create a new migration file for the model.
-c, --controller Create a new controller for the model.
-r, --resource Indicates if the generated controller should be a resource controller
--------------------------------------
For reference sake this is the method where you manually create each method for Model and Controller
The --resource sets up by default the controllers crud functionalities
php artisan make:model Customer php artisan make:controller CustomersController --resource
The below is an example from Laravel.
php artisan make:model Flight --factory php artisan make:model Flight -f php artisan make:model Flight --seed php artisan make:model Flight -s php artisan make:model Flight --controller php artisan make:model Flight -c php artisan make:model Flight -mfsc
Inside your Controller in this case it's the Movies Controller.
The action Result below is Index so on other words the Home of the
Movies Controller.
In this action there's two IF statements.
If you load this controller-> Index it will return this
pageIndex=1$sortBy=Name
public ActionResult Index(int? pageIndex, string sortBy){
if(!pageIndex.HasValue)
pageIndex = 1;
if (String.IsNullOrWhiteSpace(sortBy))
sortBy = "Name";
return Content(String.Format("pageIndex={0}$sortBy={1}", pageIndex, sortBy));
}
namespace Vidly.Controllers
{
public class MoviesController : Controller
{
public ActionResult Random()
{
Movie movie = new Movie() { Name = "Shrek!" };
// THE RETURN METHODS BELOW
// return View(movie);
// return Content("Hello World!");
// return HttpNotFound();
// return new EmptyResult();
// return RedirectToAction("Index","Home", new { page = 1, sortby = "name"});
}
}
}
Simply add this line to the javascript as is, for whichever page or block and it will set a delay on the input fields onchange. It will apply to all your input fields.
Outsystems default onchange delay is 800 which can be annoying when typing and it resets your cursor back to the start of your text. This will delay that jump on the text cursor.
osOnChangeTimerDelay = 3000;
function my_custom_js() {
echo '<script src="https://wchat.freshchat.com/js/widget.js"></script>';
}
// Add hook for admin <head></head>
add_action( 'admin_head', 'my_custom_js' );
// Add hook for front-end <head></head>
add_action( 'wp_head', 'my_custom_js' );