Evolution #554: Design

app/Resources/translations/userui.fr.yml

   email:            Adresse email
   favorite_tags:    Vos tags préférés
   change_password:  Changer mon mot de passe
+  change_password_submit: Mettre à jour mon mot de passe
   change_email:     Changer mon adresse email
+  change_email_submit: Mettre à jour mon email
   address:
     title:          Mon adresse
     description:    Avec votre adresse Muzi.ch pourra vous avertir plus aisément des événements à venirs dans votre région.
       errors:
         notown:     Veuillez saisir la ville
         nocountry:  Veuillez saisir le pays
+  help_clicks:      |
+                    Cliquez sur les titres ci-dessous pour accèder aux autres paramètres
   
 connexion:
   password_lost:    Mot de passe perdu ?

src/Muzich/UserBundle/Resources/views/Security/change_password_form.html.twig

   <div class="field">
     {{ form_errors(form.current) }}
     {{ form_label(form.current, 'password.actual'|trans({}, 'userform')) }}
-    {{ form_widget(form.current) }}
+    {{ form_widget(form.current, {'attr':{'class':'niceinput'}}) }}
   </div>
 
   <div class="field">
     {{ form_errors(form.new.first) }}
     {{ form_label(form.new.first, 'password.new.first'|trans({}, 'userform')) }}
-    {{ form_widget(form.new.first) }}
+    {{ form_widget(form.new.first, {'attr':{'class':'niceinput'}}) }}
   </div>
 
   <div class="field">
     {{ form_errors(form.new.second) }}
     {{ form_label(form.new.second, 'password.new.second'|trans({}, 'userform')) }}
-    {{ form_widget(form.new.second) }}
+    {{ form_widget(form.new.second, {'attr':{'class':'niceinput'}}) }}
   </div>
 
 {{ form_rest(form) }}

src/Muzich/UserBundle/Resources/views/User/account.html.twig

 
 {% block content %}
 
-  <h2>{{ 'my_account.title'|trans({}, 'userui') }}</h2>
+<div id="myaccount">
   
-  <ul>
-    <li>
-      <b>{{ 'my_account.username'|trans({}, 'userui') }}</b>: {{ user.name }}
-    </li>
-    <li>
-      <b>{{ 'my_account.email'|trans({}, 'userui') }}</b>: {{ user.email }}
-    </li>
-  </ul>
-  
-  <h3>{{ 'my_account.favorite_tags'|trans({}, 'userui') }}</h3>
-  
-  {% include "MuzichCoreBundle:Tag:tagFavoritesForm.html.twig" with { 
-    'form'             : form_tags_favorites,
-    'redirect'         : 'account',
-    'form_name'        : form_tags_favorites_name,
-    'favorite_tags_id' : favorite_tags_id
-  } %}
-  
-  <h3>{{ 'my_account.change_password'|trans({}, 'userui') }}</h3>
-  
-  <form action="{{ path('change_password') }}" method="post" {{ form_enctype(form_password) }}>
-    
-    {% include "MuzichUserBundle:Security:change_password_form.html.twig" with { 
-      'form': form_password
-    } %}
+    <h1>{{ 'my_account.title'|trans({}, 'userui') }}</h1>
 
-    <input type="submit" class="button" />
-  </form>
-  
-  <h3>{{ 'my_account.change_email'|trans({}, 'userui') }}</h3>
-  
-  <form action="{{ path('change_email_request') }}" method="post" {{ form_enctype(change_email_form) }}>
+    <ul>
+      <li>
+        <b>{{ 'my_account.username'|trans({}, 'userui') }}</b>: {{ user.name }}
+      </li>
+      <li>
+        <b>{{ 'my_account.email'|trans({}, 'userui') }}</b>: {{ user.email }}
+      </li>
+    </ul>
+
+    <form id="address_update" action="{{ path('update_address', {"token":app.user.getPersonalHash}) }}" method="post">
+      <p>
+        {{ 'my_account.address.form.ilivenear'|trans({}, 'userui') }}
+        <input type="text" name="town" class="intext" value="{{ app.user.town }}" />
+        {{ 'my_account.address.form.in'|trans({}, 'userui') }}
+        <input type="text" name="country" class="intext" value="{{ app.user.country }}" />
+        <input type="submit" value="{{ 'my_account.address.form.submit'|trans({}, 'userui') }}" class="button address_submit" />
+        <img class="loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
+      </p>
+    </form>
     
-    {% include "MuzichUserBundle:User:change_email_form.html.twig" with { 
-      'form': change_email_form
-    } %}
+    <p class="help">
+      {{ 'my_account.help_clicks'|trans({}, 'userui') }}
+    </p>
 
-    <input type="submit" class="button" />
-  </form>
-  
-  <h3>{{ 'my_account.address.title'|trans({}, 'userui') }}</h3>
-  
-  <p>{{ 'my_account.address.description'|trans({}, 'userui') }}</p>
+    <h2 data-open="myaccount_favorites_tags">{{ 'my_account.favorite_tags'|trans({}, 'userui') }}</h2>
+
+    <div id="myaccount_favorites_tags" class="myaccount_part" style="display: none;">
+      {% include "MuzichCoreBundle:Tag:tagFavoritesForm.html.twig" with { 
+        'form'             : form_tags_favorites,
+        'redirect'         : 'account',
+        'form_name'        : form_tags_favorites_name,
+        'favorite_tags_id' : favorite_tags_id
+      } %}
+    </div>
+
+    <h2 data-open="myaccount_favorites_password">{{ 'my_account.change_password'|trans({}, 'userui') }}</h2>
+
+    <div id="myaccount_favorites_password" class="myaccount_part" style="display: none;">
+      <form class="nicelabels changepassword" action="{{ path('change_password') }}" method="post" {{ form_enctype(form_password) }}>
+
+        {% include "MuzichUserBundle:Security:change_password_form.html.twig" with { 
+          'form': form_password
+        } %}
+
+        <input type="submit" class="button" value="{{ 'my_account.change_password_submit'|trans({}, 'userui') }}" />
+      </form>
+    </div>
+
+    <h2 data-open="myaccount_favorites_email">{{ 'my_account.change_email'|trans({}, 'userui') }}</h2>
+
+    <div id="myaccount_favorites_email" class="myaccount_part" style="display: none;">
+      <form class="nicelabels changeemail" action="{{ path('change_email_request') }}" method="post" {{ form_enctype(change_email_form) }}>
+
+        {% include "MuzichUserBundle:User:change_email_form.html.twig" with { 
+          'form': change_email_form
+        } %}
+
+        <input type="submit" class="button" value="{{ 'my_account.change_email_submit'|trans({}, 'userui') }}" />
+      </form>
+    </div>
+    <div style="clear:both;"></div>
   
-  <form id="address_update" action="{{ path('update_address', {"token":app.user.getPersonalHash}) }}" method="post">
-    <p>
-      {{ 'my_account.address.form.ilivenear'|trans({}, 'userui') }}
-      <input type="text" name="town" class="intext" value="{{ app.user.town }}" />
-      {{ 'my_account.address.form.in'|trans({}, 'userui') }}
-      <input type="text" name="country" class="intext" value="{{ app.user.country }}" />
-      <input type="submit" value="{{ 'my_account.address.form.submit'|trans({}, 'userui') }}" class="button address_submit" />
-      <img class="loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading"/>
-    </p>
-  </form>
-    
+  </div>
 {% endblock %}

src/Muzich/UserBundle/Resources/views/User/change_email_form.html.twig

     
   {{ form_errors(form.email) }}
   {{ form_label(form.email) }}
-  {{ form_widget(form.email) }}
+  {{ form_widget(form.email, {'attr':{'class':'niceinput'}}) }}
 
 {{ form_rest(form) }}

web/bundles/muzichcore/js/muzich.js

       $(this).css('height', '283px');
     }
   });
+  
+  /* Sous menus page mon compte (myaccount) */
+  $('div#myaccount h2').click(function(){
+    $('div#myaccount div.myaccount_part:visible').slideUp();
+    console.log($(this).data('open'));
+    $('div#'+$(this).data('open')).slideDown();
+  });
 
 });
 

web/css/main.css

   background: -ms-linear-gradient(top,  #f6282d 0%,#f6282d 0%,#c50617 100%,#c50617 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #f6282d 0%,#f6282d 0%,#c50617 100%,#c50617 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6282d', endColorstr='#c50617',GradientType=0 ); /* IE6-8 */
+}
+
+div#tags_prompt_tag_favorites_form input.tag_prompt
+{
+  width: 95%;
+}
+
+form[name="tag_favorites_form"] input.button
+{
+  float: right;
+  margin-right: 11px;
+  margin-top: 5px;
+}
+
+form.changepassword label
+{
+  width: 210px;
+}
+
+form.changepassword input[type="password"]
+{
+  margin-bottom: 2px;
+  width: 388px;
+}
+
+form.changepassword input[type="submit"]
+{
+  float: right;
+  margin-top: 5px;
+  margin-right: 7px;
+}
+
+form.changeemail label
+{
+  width: 210px;
+}
+
+form.changeemail input[type="text"]
+{
+  width: 388px;
+}
+
+form.changeemail input[type="submit"]
+{
+  float: right;
+  margin-top: 5px;
+  margin-right: 7px;
+}
+
+div#myaccount h2
+{
+  cursor: pointer;
+}
+
+div#myaccount h2:hover
+{
+  text-decoration: underline;
 }