From 16a28eb88b8f7cc49d430b343ccd3db531213c2f Mon Sep 17 00:00:00 2001 From: William Petit Date: Wed, 8 Apr 2015 23:22:53 +0200 Subject: [PATCH] =?UTF-8?q?Angular,=20premi=C3=A8re=20partie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- javascript/angular/angular.md | 2 +- javascript/angular/controleurs.md | 2 +- javascript/angular/directives-1.md | 35 ++++++++++++++ javascript/angular/directives-2.md | 29 ++++++++++++ javascript/angular/directives-3.md | 29 ++++++++++++ javascript/angular/directives-4.md | 22 +++++++++ javascript/angular/directives-5.md | 23 +++++++++ javascript/angular/directives-6.md | 26 ++++++++++ .../exercices/conditions/.solution/app.js | 16 +++++++ .../exercices/conditions/.solution/index.html | 28 +++++++++++ .../angular/exercices/conditions/app.js | 16 +++++++ .../angular/exercices/conditions/index.html | 28 +++++++++++ .../exercices/iteration/.solution/app.js | 47 +++++++++++++++++++ .../exercices/iteration/.solution/index.html | 32 +++++++++++++ javascript/angular/exercices/iteration/app.js | 47 +++++++++++++++++++ .../angular/exercices/iteration/index.html | 29 ++++++++++++ .../{scope-2 => scope-1/.solution}/app.js | 4 +- .../{scope-2 => scope-1/.solution}/index.html | 10 ++-- javascript/angular/exercices/scope-1/app.js | 2 +- .../exercices/services-1/.solution/app.js | 36 ++++++++++++++ .../exercices/services-1/.solution/index.html | 30 ++++++++++++ .../exercices/services-2/.solution/app.js | 32 +++++++++++++ .../exercices/services-2/.solution/index.html | 21 +++++++++ .../angular/exercices/services-2/app.js | 5 +- .../angular/exercices/services-2/index.html | 3 +- javascript/angular/fin.md | 7 +++ javascript/angular/index.html | 7 +++ javascript/angular/plan.md | 28 ++++++----- javascript/angular/scope-1.md | 10 ++-- javascript/angular/scope-2.md | 4 +- javascript/angular/scope-3.md | 8 ++-- javascript/cadoles-theme.css | 2 +- 32 files changed, 585 insertions(+), 35 deletions(-) create mode 100644 javascript/angular/directives-1.md create mode 100644 javascript/angular/directives-2.md create mode 100644 javascript/angular/directives-3.md create mode 100644 javascript/angular/directives-4.md create mode 100644 javascript/angular/directives-5.md create mode 100644 javascript/angular/directives-6.md create mode 100644 javascript/angular/exercices/conditions/.solution/app.js create mode 100644 javascript/angular/exercices/conditions/.solution/index.html create mode 100644 javascript/angular/exercices/conditions/app.js create mode 100644 javascript/angular/exercices/conditions/index.html create mode 100644 javascript/angular/exercices/iteration/.solution/app.js create mode 100644 javascript/angular/exercices/iteration/.solution/index.html create mode 100644 javascript/angular/exercices/iteration/app.js create mode 100644 javascript/angular/exercices/iteration/index.html rename javascript/angular/exercices/{scope-2 => scope-1/.solution}/app.js (83%) rename javascript/angular/exercices/{scope-2 => scope-1/.solution}/index.html (62%) create mode 100644 javascript/angular/exercices/services-1/.solution/app.js create mode 100644 javascript/angular/exercices/services-1/.solution/index.html create mode 100644 javascript/angular/exercices/services-2/.solution/app.js create mode 100644 javascript/angular/exercices/services-2/.solution/index.html create mode 100644 javascript/angular/fin.md diff --git a/javascript/angular/angular.md b/javascript/angular/angular.md index 06a89ce..a070176 100644 --- a/javascript/angular/angular.md +++ b/javascript/angular/angular.md @@ -2,7 +2,7 @@ .cadoles-list[ -- Framework applicatif côté client en Javascript +- Framework applicatif côté client en Javascript - Initialement présenté par Google en 2009 - Licence MIT - Dernière version stable 1.3.15 (version 2 en alpha) diff --git a/javascript/angular/controleurs.md b/javascript/angular/controleurs.md index dabf07a..97f8574 100644 --- a/javascript/angular/controleurs.md +++ b/javascript/angular/controleurs.md @@ -3,7 +3,7 @@ .cadoles-small[ - Les contrôleurs permettent de gérer la logique métier dans votre application Angular. -- La définition du périmètre d'action d'un contrôleur est lié à un élément du DOM et se fait via l'utilisation de la directive `ng-controller` +- Le périmètre d'action d'un contrôleur est lié à un élément du DOM et sa définition s'effectue via l'utilisation de la directive `ng-controller` ] diff --git a/javascript/angular/directives-1.md b/javascript/angular/directives-1.md new file mode 100644 index 0000000..5bfe68d --- /dev/null +++ b/javascript/angular/directives-1.md @@ -0,0 +1,35 @@ +# .cadoles-slide-title[Les directives de base (1/)] + +**Itération avec ng-repeat: sur un tableau** +```html + + +
+ +
+ + + + +``` diff --git a/javascript/angular/directives-2.md b/javascript/angular/directives-2.md new file mode 100644 index 0000000..6675ab5 --- /dev/null +++ b/javascript/angular/directives-2.md @@ -0,0 +1,29 @@ +# .cadoles-slide-title[Les directives de base (2/)] + +**Itération avec ng-repeat: sur un objet** +```html + + +
+ +
+ + + + +``` diff --git a/javascript/angular/directives-3.md b/javascript/angular/directives-3.md new file mode 100644 index 0000000..d2f1db7 --- /dev/null +++ b/javascript/angular/directives-3.md @@ -0,0 +1,29 @@ +# .cadoles-slide-title[Les directives de base (3/)] + +**Itération avec ng-repeat: sur un objet** +```html + + +
+ +
+ + + + +``` diff --git a/javascript/angular/directives-4.md b/javascript/angular/directives-4.md new file mode 100644 index 0000000..13119bc --- /dev/null +++ b/javascript/angular/directives-4.md @@ -0,0 +1,22 @@ +# .cadoles-slide-title[Les directives de base (4/)] + +**Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`** +```html + + +
+ + Caché ! + Affiché ! + +
+ Affiché ! + Caché ! + Caché ! +
+ +
+ + + +``` diff --git a/javascript/angular/directives-5.md b/javascript/angular/directives-5.md new file mode 100644 index 0000000..ca41f37 --- /dev/null +++ b/javascript/angular/directives-5.md @@ -0,0 +1,23 @@ +# .cadoles-slide-title[Les directives de base (5/)] + +**Modification dynamique du style: `ng-class`** +```html + + + + +
+ + Rouge et large + + Bleu + +
+ + + +``` diff --git a/javascript/angular/directives-6.md b/javascript/angular/directives-6.md new file mode 100644 index 0000000..1db80c3 --- /dev/null +++ b/javascript/angular/directives-6.md @@ -0,0 +1,26 @@ +# .cadoles-slide-title[Les directives de base (6/)] + +**Inclusion de template avec la directive `ng-include`** + +```html + + + + + + + + + + + + +
+
+ +
+
+``` + +- Les templates sont chargés à la volée, en AJAX +- Il est possible de les précompiler et de les inclures sous leur forme Javascript lors de la mise en production diff --git a/javascript/angular/exercices/conditions/.solution/app.js b/javascript/angular/exercices/conditions/.solution/app.js new file mode 100644 index 0000000..3c887a4 --- /dev/null +++ b/javascript/angular/exercices/conditions/.solution/app.js @@ -0,0 +1,16 @@ +/* + * Énoncé: + * Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules. + * + * Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et + * avoir un côté horizontale de longueur "edge" + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', function($scope) { + + $scope.range = new Array(100); + $scope.edge = 10; + +}]); diff --git a/javascript/angular/exercices/conditions/.solution/index.html b/javascript/angular/exercices/conditions/.solution/index.html new file mode 100644 index 0000000..a6d74a4 --- /dev/null +++ b/javascript/angular/exercices/conditions/.solution/index.html @@ -0,0 +1,28 @@ + + + + Exercice: conditions + + + + + + +
+
+ {{$index}} +
+
+ + + + + + diff --git a/javascript/angular/exercices/conditions/app.js b/javascript/angular/exercices/conditions/app.js new file mode 100644 index 0000000..3c887a4 --- /dev/null +++ b/javascript/angular/exercices/conditions/app.js @@ -0,0 +1,16 @@ +/* + * Énoncé: + * Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules. + * + * Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et + * avoir un côté horizontale de longueur "edge" + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', function($scope) { + + $scope.range = new Array(100); + $scope.edge = 10; + +}]); diff --git a/javascript/angular/exercices/conditions/index.html b/javascript/angular/exercices/conditions/index.html new file mode 100644 index 0000000..64cd5cd --- /dev/null +++ b/javascript/angular/exercices/conditions/index.html @@ -0,0 +1,28 @@ + + + + Exercice: conditions + + + + + + +
+
+ {{$index}} +
+
+ + + + + + diff --git a/javascript/angular/exercices/iteration/.solution/app.js b/javascript/angular/exercices/iteration/.solution/app.js new file mode 100644 index 0000000..b14fba8 --- /dev/null +++ b/javascript/angular/exercices/iteration/.solution/app.js @@ -0,0 +1,47 @@ +/* + * Énoncé: + * Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences + * disponibles sur Github lors de la création d'un nouveau dépôt. + * + * Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description". + * Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode + * showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur. + * + * Aide: + * Voir l'élément pour l'affichage du lien et la directive ng-href sur la + * documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref + * + * Liens: + * - API Github https://developer.github.com/v3/licenses + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) { + + $scope.licences = []; + + $http({ + method: 'GET', + url: 'https://api.github.com/licenses', + headers: { Accept: 'application/vnd.github.drax-preview+json' } + }) + .then(function(res) { + $scope.licences = res.data; + }) + ; + + $scope.showLicenseDesc = function(licenceUrl) { + $http({ + method: 'GET', + url: licenceUrl, + headers: { Accept: 'application/vnd.github.drax-preview+json' } + }) + .then(function(res) { + $window.alert(res.data.description); + }) + .catch(console.error.bind(console)) + ; + }; + +}]); diff --git a/javascript/angular/exercices/iteration/.solution/index.html b/javascript/angular/exercices/iteration/.solution/index.html new file mode 100644 index 0000000..38dda60 --- /dev/null +++ b/javascript/angular/exercices/iteration/.solution/index.html @@ -0,0 +1,32 @@ + + + + Exercice: itération + + + + +
+ +

Github Licenses

+ + + + + + + + + + + + + +
NameActions
{{l.name}}
+
+ + + + + + diff --git a/javascript/angular/exercices/iteration/app.js b/javascript/angular/exercices/iteration/app.js new file mode 100644 index 0000000..b14fba8 --- /dev/null +++ b/javascript/angular/exercices/iteration/app.js @@ -0,0 +1,47 @@ +/* + * Énoncé: + * Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences + * disponibles sur Github lors de la création d'un nouveau dépôt. + * + * Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description". + * Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode + * showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur. + * + * Aide: + * Voir l'élément pour l'affichage du lien et la directive ng-href sur la + * documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref + * + * Liens: + * - API Github https://developer.github.com/v3/licenses + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) { + + $scope.licences = []; + + $http({ + method: 'GET', + url: 'https://api.github.com/licenses', + headers: { Accept: 'application/vnd.github.drax-preview+json' } + }) + .then(function(res) { + $scope.licences = res.data; + }) + ; + + $scope.showLicenseDesc = function(licenceUrl) { + $http({ + method: 'GET', + url: licenceUrl, + headers: { Accept: 'application/vnd.github.drax-preview+json' } + }) + .then(function(res) { + $window.alert(res.data.description); + }) + .catch(console.error.bind(console)) + ; + }; + +}]); diff --git a/javascript/angular/exercices/iteration/index.html b/javascript/angular/exercices/iteration/index.html new file mode 100644 index 0000000..0d7713d --- /dev/null +++ b/javascript/angular/exercices/iteration/index.html @@ -0,0 +1,29 @@ + + + + Exercice: itération + + + + +
+ +

Github Licenses

+ + + + + + + + + + +
NameActions
+
+ + + + + + diff --git a/javascript/angular/exercices/scope-2/app.js b/javascript/angular/exercices/scope-1/.solution/app.js similarity index 83% rename from javascript/angular/exercices/scope-2/app.js rename to javascript/angular/exercices/scope-1/.solution/app.js index a892389..af4f19d 100644 --- a/javascript/angular/exercices/scope-2/app.js +++ b/javascript/angular/exercices/scope-1/.solution/app.js @@ -18,8 +18,8 @@ Exo.controller('MainCtrl', ['$scope', function($scope) { $scope.prenom = null; $scope.age = null; - $scope.direBonjour = function() { - // alert('...'); + $scope.sayHello = function() { + alert('Bonjour '+$scope.nom+' '+$scope.prenom+'. Votre âge est '+$scope.age); }; }]); diff --git a/javascript/angular/exercices/scope-2/index.html b/javascript/angular/exercices/scope-1/.solution/index.html similarity index 62% rename from javascript/angular/exercices/scope-2/index.html rename to javascript/angular/exercices/scope-1/.solution/index.html index 2c9a6ea..60162bb 100644 --- a/javascript/angular/exercices/scope-2/index.html +++ b/javascript/angular/exercices/scope-1/.solution/index.html @@ -9,22 +9,22 @@
- +
- +
- +
- +
- + diff --git a/javascript/angular/exercices/scope-1/app.js b/javascript/angular/exercices/scope-1/app.js index a892389..9a7c67e 100644 --- a/javascript/angular/exercices/scope-1/app.js +++ b/javascript/angular/exercices/scope-1/app.js @@ -18,7 +18,7 @@ Exo.controller('MainCtrl', ['$scope', function($scope) { $scope.prenom = null; $scope.age = null; - $scope.direBonjour = function() { + $scope.sayHello = function() { // alert('...'); }; diff --git a/javascript/angular/exercices/services-1/.solution/app.js b/javascript/angular/exercices/services-1/.solution/app.js new file mode 100644 index 0000000..ef4e39d --- /dev/null +++ b/javascript/angular/exercices/services-1/.solution/app.js @@ -0,0 +1,36 @@ +/* + * Énoncé: + * Récupérer les données du formulaire et envoyer celles-ci via un clic sur le bouton "Envoyer". + * Les données devront être transmises sous la forme JSON au serveur NodeJS fourni avec l'exercice + * via la méthode HTTP POST avec le service $http. + * + * Documentation service $http: https://code.angularjs.org/1.3.15/docs/api/ng/service/$http + * + * Partie serveur: + * - Se placer dans le répertoire de l'exercice avec un terminal + * - Lancer "node server.js" + * + */ + +var ENDPOINT = 'http://localhost:3000/'; + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', '$http', function($scope, $http) { + + $scope.data = { + nom: '', + prenom: '', + age: 0 + }; + + $scope.sendData = function() { + $http.post(ENDPOINT, $scope.data) + .then(function(res) { + console.log(res); + alert(res.data.message); + }) + ; + }; + +}]); diff --git a/javascript/angular/exercices/services-1/.solution/index.html b/javascript/angular/exercices/services-1/.solution/index.html new file mode 100644 index 0000000..23d2453 --- /dev/null +++ b/javascript/angular/exercices/services-1/.solution/index.html @@ -0,0 +1,30 @@ + + + + Exercice: utilisation de service + + + + +
+ + + +
+ + + +
+ + + +
+ + +
+ + + + + + diff --git a/javascript/angular/exercices/services-2/.solution/app.js b/javascript/angular/exercices/services-2/.solution/app.js new file mode 100644 index 0000000..0edc413 --- /dev/null +++ b/javascript/angular/exercices/services-2/.solution/app.js @@ -0,0 +1,32 @@ +/* + * Énoncé: + * Implémenter le service "myPrompt" qui pose une question et retourne la réponse entrée par l'utilisateur. + * Le service devra lui même utiliser le service $window, service "alias" de l'objet Window fourni par Angular et sa méthode + * prompt(). + * + * Documentation: + * - Service $window: https://code.angularjs.org/1.3.15/docs/api/ng/service/$window + * - window.prompt(): https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt + * + */ + +var Exo = angular.module('Exo', []); + +Exo.controller('MainCtrl', ['$scope', 'myPrompt', function($scope, myPrompt) { + + $scope.question = 'Quel est votre age ?'; + $scope.response = '--'; + + $scope.poserQuestion = function() { + $scope.response = myPrompt.ask($scope.question); + }; + +}]); + +Exo.service('myPrompt', ['$window', function($window) { + + this.ask = function(question) { + return $window.prompt(question); + }; + +}]); diff --git a/javascript/angular/exercices/services-2/.solution/index.html b/javascript/angular/exercices/services-2/.solution/index.html new file mode 100644 index 0000000..a7f6b38 --- /dev/null +++ b/javascript/angular/exercices/services-2/.solution/index.html @@ -0,0 +1,21 @@ + + + + Exercice: création de service + + + + +
+ + + +

+ Votre réponse: {{ response }} +
+ + + + + + diff --git a/javascript/angular/exercices/services-2/app.js b/javascript/angular/exercices/services-2/app.js index 0a81516..c0c8232 100644 --- a/javascript/angular/exercices/services-2/app.js +++ b/javascript/angular/exercices/services-2/app.js @@ -8,7 +8,6 @@ * - Service $window: https://code.angularjs.org/1.3.15/docs/api/ng/service/$window * - window.prompt(): https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt * - * */ var Exo = angular.module('Exo', []); @@ -18,6 +17,8 @@ Exo.controller('MainCtrl', ['$scope', /*'myPrompt',*/ function($scope /*,myPromp $scope.question = 'Quel est votre age ?'; $scope.response = '--'; - // scope.response = myPrompt.ask($scope.question); + $scope.poserQuestion = function() { + // $scope.response = myPrompt.ask($scope.question); + }; }]); diff --git a/javascript/angular/exercices/services-2/index.html b/javascript/angular/exercices/services-2/index.html index 6e2da8e..d3aa2ab 100644 --- a/javascript/angular/exercices/services-2/index.html +++ b/javascript/angular/exercices/services-2/index.html @@ -9,7 +9,8 @@
-
+ +

Votre réponse: {{ response }}
diff --git a/javascript/angular/fin.md b/javascript/angular/fin.md new file mode 100644 index 0000000..d3c32ce --- /dev/null +++ b/javascript/angular/fin.md @@ -0,0 +1,7 @@ +# .cadoles-slide-title[Fin] + +.cadoles-center[ + +# Fin de la première partie + +] diff --git a/javascript/angular/index.html b/javascript/angular/index.html index cc01570..34581c9 100644 --- a/javascript/angular/index.html +++ b/javascript/angular/index.html @@ -22,6 +22,13 @@ 'scope-4', 'services-1', 'services-2', + 'directives-1', + 'directives-2', + 'directives-3', + 'directives-4', + 'directives-5', + 'directives-6', + 'fin', 'licence' ]; diff --git a/javascript/angular/plan.md b/javascript/angular/plan.md index f2eb691..4c28d45 100644 --- a/javascript/angular/plan.md +++ b/javascript/angular/plan.md @@ -7,10 +7,12 @@ - Modules - Contrôleurs et scopes - Services et injection de dépendances -- Templates et expressions +- Les directives de base +- Routage avec le module `ngRoute` - Les filtres -- Directives +- Création de directives - Animations +- Organisation du projet - Tests unitaires - Tests fonctionnels @@ -25,16 +27,20 @@ - Modules - Contrôleurs et scopes - Les contrôleurs - - L'objet `$scope` + - L'objet `$scope` (exercice scope-1) - Services et injection de dépendances - - Utilisation de services - - Création de services personalisés -- Templates et expressions - - Itération sur des éléments avec ng-repeat - - Réaction aux changements des modèles avec `ng-show`, `ng-hide`, `ng-switch`, `ng-class` - - Inclusion de templates -- Les filtres -- Directives + - Utilisation de services (exercice services-1) + - Création de services personalisés (exercice services-2) +- Les directives de base + - Itération sur des éléments avec ng-repeat (exercice iteration) + - Réaction aux changements des modèles avec `ng-show`, `ng-hide`, `ng-switch`, `ng-class`, 'ng-if' (exercice conditions) + - Inclusion de templates (exercice include) +- Routage avec le module `ngRoute` + - Le routage côté client + - Utilisation du module (exercice routage) +- Les filtres (exercice filtres) +- Création de directives - Animations +- Organisation du projet - Tests unitaires - Tests fonctionnels diff --git a/javascript/angular/scope-1.md b/javascript/angular/scope-1.md index d0cc8ff..536780d 100644 --- a/javascript/angular/scope-1.md +++ b/javascript/angular/scope-1.md @@ -14,8 +14,10 @@
+ + {{ myValue }} - +
@@ -24,9 +26,9 @@ myApp.controller('MyAppCtrl', ['$scope', function($scope) { - $scope.buttonClickHandler = function() { - alert('Click !'); - }; + $scope.myValue = 'Foo !' + + $scope.myButtonClickHandler = function() { alert('Click !'); }; }]); diff --git a/javascript/angular/scope-2.md b/javascript/angular/scope-2.md index c5d87af..6953e4b 100644 --- a/javascript/angular/scope-2.md +++ b/javascript/angular/scope-2.md @@ -18,11 +18,11 @@ var myApp = angular.module('myApp', []); myApp.controller('ParentCtrl', ['$scope', function($scope) { -* $scope.parentProp = "Foo"; + $scope.parentProp = "Foo"; }]); myApp.controller('ChildCtrl', ['$scope', function($scope) { -* $scope.childProp = "Bar"; + $scope.childProp = "Bar"; }]); diff --git a/javascript/angular/scope-3.md b/javascript/angular/scope-3.md index 241c3f5..5fdb778 100644 --- a/javascript/angular/scope-3.md +++ b/javascript/angular/scope-3.md @@ -16,15 +16,15 @@ myApp.controller('ParentCtrl', ['$scope', function($scope) { -* $scope.$on('child-event', function(evt) { console.log('Emitted event: ', evt); }); -* $scope.$broadcast('parent-event', {data: 'Parent event !'}); + $scope.$on('child-event', function(evt) { console.log('Emitted event: ', evt); }); + $scope.$broadcast('parent-event', {data: 'Parent event !'}); }]); myApp.controller('ChildCtrl', ['$scope', function($scope) { -* $scope.$emit('child-event', {data: 'Child event !'}); -* $scope.$on('parent-event', function(evt) { console.log('Broadcasted event: ', evt); }); + $scope.$emit('child-event', {data: 'Child event !'}); + $scope.$on('parent-event', function(evt) { console.log('Broadcasted event: ', evt); }); }]); diff --git a/javascript/cadoles-theme.css b/javascript/cadoles-theme.css index 79bce00..118d103 100644 --- a/javascript/cadoles-theme.css +++ b/javascript/cadoles-theme.css @@ -82,7 +82,7 @@ ul > li { .cadoles-xlarge { font-size: 1.5em; } .cadoles-large { font-size: 1.2em; } .cadoles-small { font-size: 0.8em; } -.cadoles-xs { font-size: 0.7em; } +.cadoles-xsmall { font-size: 0.7em; } .cadoles-center { text-align: center; } .cadoles-left-column {