TG-117 : remove bootstrap css framework and replace by

angular-material and create login page
This commit is contained in:
matthieupenchenat81 2017-03-05 10:55:38 +01:00
parent d4cd89ceac
commit 5f51010615
10 changed files with 55 additions and 168 deletions

View File

@ -1,4 +1,4 @@
// Generated on 2017-01-20 using generator-angular 0.15.1
// Generated on 2017-02-26 using generator-angular 0.15.1
'use strict';
// # Globbing
@ -338,7 +338,7 @@ module.exports = function (grunt) {
ngtemplates: {
dist: {
options: {
module: 'clientApp',
module: 'frontendApp',
htmlmin: '<%= htmlmin.dist.options %>',
usemin: 'scripts/scripts.js'
},

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@ -8,7 +8,7 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
@ -20,6 +20,7 @@
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<ui-view></ui-view>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
@ -35,20 +36,20 @@
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/accueil.js"></script>
<script src="scripts/services/AuthService.js"></script>
<script src="scripts/services/DataService.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->
</body>
</html>

View File

@ -7,77 +7,5 @@
body {
padding: 0;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
background-color: #DADADA;
}

View File

@ -1,62 +0,0 @@
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">client</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li><a ng-href="#/">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
Always a pleasure scaffolding your apps.
</p>
<p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
</p>
<h4>Angular</h4>
<p>
AngularJS is a toolset for building the framework most suited to your application development.
</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>

View File

@ -0,0 +1,25 @@
<div layout="row" layout-align="center center">
<div flex flex-gt-sm="40">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Livret de l'alternant</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<div layout="column">
<md-input-container class="md-block">
<label>Email</label>
<input type="email" ng-model="email">
</md-input-container>
<md-input-container class="md-block">
<label>Mot de passe</label>
<input type="password" ng-model="password">
</md-input-container>
</div>
<md-button class="md-raised md-primary" ng-click="login()">Se connecter</md-button>
</md-card-content>
</md-card>
</div>
</div>

View File

@ -1,24 +1,17 @@
{
"name": "client",
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"angular": "^1.6.0",
"bootstrap": "^3.2.0",
"angular-sanitize": "^1.6.0",
"angular-ui-router": "1.0.0-beta.3"
"angular": "^1.4.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-material": "^1.1.3",
"angular-ui-router": "^0.4.2"
},
"devDependencies": {
"angular-mocks": "^1.6.0"
"angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "clientApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
"moduleName": "clientApp"
}

View File

@ -28,7 +28,7 @@
"jasmine-core": "^2.5.2",
"jit-grunt": "^0.9.1",
"jshint-stylish": "^1.0.0",
"karma": "^1.4.0",
"karma": "^1.5.0",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.2",
"phantomjs-prebuilt": "^2.1.14",
@ -39,6 +39,5 @@
},
"scripts": {
"test": "karma start test/karma.conf.js"
},
"dependencies": {}
}
}

View File

@ -1,5 +1,5 @@
// Karma configuration
// Generated on 2017-01-20
// Generated on 2017-02-26
module.exports = function(config) {
'use strict';
@ -20,10 +20,13 @@ module.exports = function(config) {
// list of files / patterns to load in the browser
files: [
// bower:js
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-aria/angular-aria.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/angular-material/angular-material.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-mocks/angular-mocks.js',
// endbower

View File

@ -3,7 +3,7 @@
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('clientApp'));
beforeEach(module('frontendApp'));
var MainCtrl,
scope;