improves profile editing display

README.md

@@ -1,30 +1,45 @@
 # Mystic Forest
 
-Thème pour le portail SSOWat
+Thème pour le portail SSOWat.
-
 
 ## Description
 
-Un thème personnalisé pour le portail SSOWat qui tire grand profit des propriétés CSS Flex. La répartition des éléments est modifiée de la manière suivante :
+Ce thème est basé sur le thème par défaut et tire profit de CSS Flex pour personnaliser l'interface.
 
-  1. Page d'identification : le logo est collé au formulaire. Avec une image sur mesure et quelques couleurs modifiée, cela rend plutôt bien.
+  1. Page d'identification : utilise un bloc visuel pour l'identification, avec une image personnalisée en entête.
-  2. Page du portail : la boîte utilisateur reprend la structure de la boîte d'identification. La liste des applications est placée en vis-à-vis de la boite utilisateur.
+  2. Page du portail : la boîte utilisateur est semblable au bloc d'identification. La liste des applications est placée en vis-à-vis de la boite utilisateur.
 
-## Personnaliser l'image
+L'image est un simple collage à partir des créations de Gabsond, disponibles ici : https://opengameart.org/content/190-pixel-art-assets-sci-fi-forest
 
-Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran).
+Un grand merci à Gabsond ! 
-Il ne devrait pas être trop difficile d'utiliser une image complètement différente. 
 
-**Voici quelques notes si vous souhaitez vous y essayer.**
+## Personnaliser le thème
 
-Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.
+Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran).  
-L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.
+L'utilisation de variables devraient faciliter l'utilisation d'une image différente. *Normalement,* il devrait être possible d'avoir l'affichage désiré en modifiant seulement la valeur des variables.
+Ceci **n'a pas été testé**, n'hésitez pas à proposer les modifications nécessaires si ce n'est pas le cas.
 
-Une fois l'image modifiée, il faut adapter les dimensions de la boîte.
+### Explication des variables
-  1. Renseigner la taille exacte `{ width: ...px, height: ...px }` pour la page d'identification et c'est bon.
+
-  2. Pour la boîte "utilisateur", c'est un peu plus complexe.
+```text
-      a. Changer l'url de l'image de fond et renseigner la hauteur de l'image dans l'attribut `padding-top` au lieu de `height`. Il faut également adapter la largeur de manière classique (`width`)
+    --background-color: couleur d'arrière-plan du document
-      b. Il faut également modifier l'attribut `margin-left` des éléments de la boîte utilisateur. La valeur de celui-ci correspond à la distance entre le bord gauche de l'image de fond et le début de la ligne de base de 336px. Pour peu qu'elle soit bien centrée, ce qui est de toute façon nécessaire, c'est simplement 
+    --primary-color: couleur utilisée pour le fond des blocs et les boutons avec la classe .classic
-      ```(largeur de l'image - 336) / 2```
+    --primary-hover-color: couleur de survol pour les boutons concernés
-      
+    --logo-url: chemin vers l'image utilisée comme entête (defaut: url("./forest.png"))
-Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.
+    --logo-width: largeur de l'image
+    --logo-height: hauteur de l'image
+    --box-width: largeur des boîtes (defaut: 21em)
+```
+
+### Notes sur l'image
+
+Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.  
+L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.  
+De plus, il sera nécessaire d'adapter la couleur du bloc (--primary-color).  
+
+Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.
+
+## License
+
+CC0 pour le fichier 'mystical_forest/forest.png'  
+GNU Affero Public Licence v3.0 pour le reste des sources.  

mystic_forest/custom_portal.css

@@ -1,21 +1,53 @@
 /*
 ===============================================================================
- This file contain extra CSS rules to customize the YunoHost user portal and
+    Mystic Forest (based on Default theme)  -  version 0.1
- can be used to customize app tiles, buttons, etc...
 ===============================================================================
 */
 
+/* Defines theme variables */
+:root {
+    --background-color: #141709;
+    --primary-color: #525c2e;
+    --primary-hover-color: #708a00;
+    --logo-url: url("./forest.png");
+    --logo-width: 412px;
+    --logo-height: 175px;
+    --box-width: 21em;
+}
+
+/*
+    Global styling
+*/
+
 .ynh-user-portal {
-	background: #141709;
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: center;
 	align-items: center;
+	background: var(--background-color);
 }
 
-.content { 
+.classic-btn { 
-	padding: 0%;
+    background: var(--primary-color); 
-	width: 21em;
+}
+.classic-btn:hover { 
+    background: var(--primary-hover-color); 
+}
+
+.messages { 
+    margin: 0; 
+}
+.messages.info { 
+    background: var(--primary-color);
+}
+
+
+/* 
+    Styling specific to portal view 
+*/
+
+.logged .messages {
+    flex: 1 1 100%;
 }
 
 .logged .content {
@@ -26,67 +58,75 @@
 }
 
 .user {
-	background: url("./forest.png");
-	background-repeat: no-repeat;
-	padding-top: 175px;
-	width: 412px;
-	flex: 0 1 auto;
 	display: flex;
 	flex-flow: column-reverse nowrap;
+	flex: 0 1 auto;
+	background: var(--logo-url) no-repeat;
+	width: var(--logo-width);
+	padding-top: var(--logo-height);
 	margin: 2%;
 	margin-left: 4%;
 }
 
-.user-menu, .user-container {
+.user-menu, 
-	background-color: #525c2e;
+.user-container {
-	max-width: 21em;
+	background-color: var(--primary-color);
-	margin-left: 38px;
+	max-width: var(--box-width);
+	margin-left: calc(
+        (var(--logo-width) - var(--box-width)) 
+        / 2
+    );
 }
 
-.apps {
+.apps, 
-	width: 50%;
+.edit, 
+.password {
 	flex: 1 1 auto;
+	width: 50%; /* Hack to force footer to wrap on another row */
 	margin: 4%;
 }
 
-.footer { flex: 1 1 auto; margin: 4%; }
+.footer { 
+    flex: 1 1 auto; 
+    margin: 4%; 
+}
+
+/* 
+    Styling specific to the login view 
+*/
+
+.content { 
+	width: var(--box-width);
+	padding: 0;
+}
 
-/* Select only non-logged in view */
 :not(.logged) > .ynh-logo{
-    background-image: url("./forest.png");
-    width: 412px;
-    height: 175px;
-    opacity: 1;
     flex: 0 0 auto;
+    background-image: var(--logo-url);
+    width: var(--logo-width);
+    height: var(--logo-height);
+    opacity: 1;
     margin-top: 0;
 }
 
-.ynh-wrapper.login { margin: 0; width: 100%;}
+.ynh-wrapper.login { 
+    width: 100%;
+    margin: 0; 
+}
 
 .login-form .form-group { 
-	margin:0; 
+	border: 0.4em solid var(--primary-color);
-	border: 0.4em solid #525c2e;
 	border-top: none;
+	margin: 0; 
 }
-.login-form .btn { margin-top: 0.4em; }
 
-.classic-btn { background: #525c2e; }
+.login-form .btn { 
-.classic-btn:hover { background: #708a00; }
+    margin-top: 0.4em; 
-
-.messages { margin: 0 auto; width: 100%; }
-.messages.info { background: #525c2e;}
-
-/*
-.login-form {
-    max-width: 21em;
-    margin: 0;
-    display: flex;
-    flex-flow: column wrap;
-    align-items: stretch;
 }
-.login-form label::before { background: #f0f1f5; }
 
-.content { padding: 1em; }
+/* 
+   End of custom theme
+   Tiles colors are copied from default theme 
 */
 
 .bluebg {