Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can i Add or change the CSS? #1

Open
masterpowers opened this issue Oct 23, 2015 · 6 comments
Open

How can i Add or change the CSS? #1

masterpowers opened this issue Oct 23, 2015 · 6 comments

Comments

@masterpowers
Copy link

Sorry , please just give me a hitch how can i change for example
i want to add logo with class=brand-logo

<a href="#" class="brand-logo">Logo</a>

if i want to add logo
How will i do it?

Can you Explain how this works in gulp.js

elixir(function (mix) {
    mix.sass('app.scss')
        .copy(bowerDir + 'jquery/dist/jquery.min.js', 'public/js/vendor/jquery.js')
        .copy(materialDir + 'js/materialize.min.js', 'public/js/vendor/materialize.js')
        .copy(materialDir + 'css/materialize.min.css','public/css/materialize.css')
        .stylesIn('public/css')
        .scriptsIn('public/js/vendor');
});

Hope you can give a sample for a css and one for a js how will i compile it?
:) thanks

@xrexonx
Copy link
Owner

xrexonx commented Oct 25, 2015

You can edit or place your css at app.scss located at resources/assets/sass/ folder, or you can have your own css or scss files and then import it on app.scss, and then run gulp on your terminal or cmd window. Laravel Elixir is a bulit-in API of laravel 5 using gulp., it has some helper to manage your gulp tasks. for more info about elixir you can read this helpful docs -> http://laravel.com/docs/5.0/elixir. hope it helps. thankyou

@masterpowers
Copy link
Author

Hi thanks,
I got few questions since im using your repo
to experiment things out...

Is materialize already a jquery?
coz i added jquery.js

to use jquery validation and ajax form validation...

Its working but i got some minor difficulty changing

The Error being reflected by jquery is messing up materialized...

.< been doing this all day...

Here is my int.js

(function($){
  $(function(){
    $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
    });

    $('.button-collapse').sideNav();


    function loader(v){
        if(v == 'on'){
            $('#login_form').css({
                opacity : 0.2
            });
            $('#xloader').show();
        }else{
            $('#login_form').css({
                opacity : 1
            });
            $('#xloader').hide();
        }
    }

    function authenticated(url){
        window.location = url;
    }

    $('#sign_in').on('click', function(e){
            e.preventDefault();
            var login_form = $('#login_form').serializeArray();
            var url = $('#login_form').attr('action');
                loader('on');
            $.post(url, login_form, function(data){
                loader('off');
                //error
                if(data == "fail"){

                    $('#xloader').addClass('red').fadeIn(2000, function(){
                        $(this).hide();
                        $(this).removeClass("red");

                    });
                    Materialize.toast('You Failed to Login', 4000,'',function(){console.log('You Failed to Login')});
                    $.each(login_form, function(i,k){
                        $('#' + k.name).val('');
                    });

                    //unverified email
                }else if(data == "notactive"){

                    $('#xloader').addClass('red').fadeIn(2000, function(){
                        $(this).hide();
                        $(this).removeClass("red");
                    });
                    Materialize.toast('Please Verify Your Email!', 4000,'',function(){console.log('Please Verify Your Email')});
                    //successful login
                }else{
                     $('#xloader').addClass('green').fadeIn(2000, function(){
                        $(this).hide();
                        $(this).removeClass("green");
                    });
                    Materialize.toast('You Have Successfully Login!', 4000,'',function(){console.log('Welcome Back!')});
                    authenticated('profile');

                }

            });
        });
    });// end of document ready




})(jQuery); // end of jQuery name space





Dont know how to call properly ajax respose sorry i dit a direct return value here

public function authenticate(Request $request)
    {
         $loginRequest = new LoginRequest();
        $validator = Validator::make($request->all(), $loginRequest->rules(), $loginRequest->messages());
        if ($validator->fails()) {
            return "fail";
        }
        $email = $request->email;
        $password = $request->password;
        if (Auth::attempt(['email' => $email, 'password' => $password, 'active' => true])) {
            return "pass";


        }
        return "notactive";

    }

Here is my login.blade.php


<div class="progress" id="xloader" style="display:none">
      <div class="indeterminate amber" ></div>
</div>

{!! Form::open([
    'route'=> 'postLogin', 
    'class' => 'col s12 login-form', 
    'id' => 'login_form']) !!}

     <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

     <div class="row">
        <div class="input-field col s12">
        <i class="mdi-communication-email prefix"></i>
        <input id="email" type="email" class="validate text email required" name="email">
        <label for="email" ">Email Address</label>

    </div>
    </div>

    <div class="row">
        <div class="input-field col s12">
        <i class="mdi-action-lock-outline prefix"></i>
        <input id="password" type="password" class="validate text required" minlength="5" name="password">
        <label for="password" >Password</label>

    </div>
    </div>




    <button class="col s6  btn waves-effect waves-light form-submit" " type="submit" id="sign_in" name="action">Login <i class="material-icons right">power_settings_new</i></button>

    <a href="{{ route('password/email') }}" class="col s6  btn waves-effect waves-light deep-orange darken-4" type="submit" name="action">Forgot password</a>

{!! Form::close() !!}


Hope you can help me out with this thanks

@masterpowers
Copy link
Author

How can i achieve here the effect Here in
The return value is in jason
1.) if Email if not Register
2.) if Email is not Verified (notactive)
3.) if Password is Incorrect
5.)if Email and Pass is Incorrect
6.) If Email is Authenticated Succesfull (active)

@xrexonx
Copy link
Owner

xrexonx commented Oct 25, 2015

Hi, No need to add another jquery. Materialize used jquery as their dependencies for their javascripts plugin functionalities. For this project it is already been added at elixir's .copy() method line:18 and minified at .scriptsIn() line:22 in gulpfile.js and included into resources/views/partials/footer.blade.php @ line 26.

@xrexonx
Copy link
Owner

xrexonx commented Oct 25, 2015

For setting up a proper ajax response, You can use this -> response()->json();

You can try this on your code:

        $sMsg = 'notactive'; // your default return value
        if ($validator->fails()) {
            $sMsg = "fail";
        }
        $email = $request->email;
        $password = $request->password;
        if (Auth::attempt(['email' => $email, 'password' => $password, 'active' => true])) {
            $sMsg = "pass";
        }
         return response()->json(['message' => $sMsg]);

Hope it helps. for more info -> http://laravel.com/docs/5.1/responses

@masterpowers
Copy link
Author

thanks

@xrexonx xrexonx closed this as completed Oct 26, 2015
@xrexonx xrexonx reopened this Nov 14, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants