search

akveo / blur-admin

AngularJS Bootstrap Admin Panel Framework
http://akveo.github.io/blur-admin/
Other
11.36k stars 3.1k forks source link

Auth.html to (new) Login Page #169

Open vitalibr opened 7 years ago

vitalibr commented 7 years ago

The index.html of BlurAdmin is structured as a masterpage for all pages using the ui-view. I could not imagine how implement the login screen (auth.html) in BlurAdmin without using the index.html.

When I created my login screens inside the UIView of index.html. But if I do this, login screen will be inside the masterpage. lol

Could someone give an example for me to understand better?

nadunindunil commented 7 years ago

Hi @vitalibr , I hope you are expecting an answer like this - https://github.com/nadunindunil/blur-admin I used nested routing to distinguish the login page from other dashboard views. you can access to login view from - http://localhost:3000/#/login or signOut from the user profile drop down. Hope this will help you!

anup-kubade commented 7 years ago

I have referred the link https://github.com/nadunindunil/blur-admin But the default page loads is the dashboard. I need the login to be the default page.

irfanmobisoft commented 7 years ago

Hi @anup-kubade You can add the default page from pages.module.js file inside pages.

nadunindunil commented 7 years ago

Hi @anup-kubade , please refer project https://github.com/99xt/interns-portal (inside the web folder you will find changed project with login page as the default)

vitalibr commented 7 years ago

Great @nadunindunil, your repo help me! Now the login works!

But the gulp inject both styles (main.css and auth.css) and auth css crash the dashboard! In your repository is the same. I tried to change the auth.css, but the auth display requires changes in the body and html elements, like this:

html {
  min-height: 520px;
  height: 100%;
}

body {
  @include main-background();
  height: 100%;
}

.ng-scope {
  height: 100%;
}
vitalibr commented 7 years ago

I have a rather gross hack that I use for situations where I absolutely have to style an element based on the situation lower down the view hierarchy. It's not pretty, but it works.

  1. I add the $state service to the $rootScope.
  2. I bind a "state" attribute on the body element to the current state name.
<html state="{{$state.current.name}}">

Finally, I write CSS rule that selects on the body's state attribute and the element I want to target, and sets the styles I need:

[state^="signin"] html {
  min-height: 520px;
  height: 100%;
}

[state^="signin"] body {
  @include main-background();
  height: 100%;
}

[state^="signin"] .ng-scope {
  height: 100%;
}
mks1991 commented 7 years ago

I have referred the link https://github.com/nadunindunil/blur-admin. Application is running but , when use gulp serve:dist result not adjust according mobile screen.

lwazevedo commented 7 years ago

My fork https://github.com/lwazevedo/blur-admin .