Rework profile using divs instead of tables. Only one skin is

ported to the new structure.
Should fix #692, but need tests.

 htdocs/css/keynote.css        |   53 ++++++--
 templates/profile/profile.tpl |  262 +++++++++++++++++++-----------------------
 2 files changed, 164 insertions(+), 151 deletions(-)

git-svn-id: svn+ssh://murphy/home/svn/platal/trunk@1877 839d8a87-29fc-0310-9880-83ba4fa771e5

diff --git a/htdocs/css/keynote.css b/htdocs/css/keynote.css
index db17c86..f26739b 100644 (file)
--- a/htdocs/css/keynote.css
+++ b/htdocs/css/keynote.css
@@ -388,28 +388,43 @@ td.conteneur_tab {
     font-weight: bold;
 }
 
-#fiche_identite {
-    padding: 5px;
-    width: 600px;
+#fiche .part {
+    float: left;
+    clear: left;
+    width: 75%;
+    padding-right: 0em;
+    margin-right: 0em;
 }
 
-#photo { padding-left: 0em; }
+#fiche #photo {
+    float: right;
+    padding-left: 0em;
+    margin-left: 0em;
+    clear: right;
+    width: 25%;
+}
+
+#fiche #photo img {
+    width: 100%;
+}
 
 #fiche_identite div.civilite {
     text-align: center;
     font-weight: bold;
-    width: 80%;
-    float: left;
+    width: 80%; 
+    float: left; 
     color: #fff;
     background: inherit;
+    padding-top: 0.5ex;
 }
 
 #fiche_identite div.maj {
-    float: left;
-    width: 20%;
+    float: right;
+    width: 19%;
     font-size: 75%;
     text-align: right;
     vertical-align: top;
+    padding: 0.5ex 1ex 1ex 0ex;
     clear: right;
 }
 
@@ -429,8 +444,9 @@ td.conteneur_tab {
     background: inherit;
 }
 
+
 #fiche_identite div.email {
-    clear: left;
+    clear: left; 
     float: left;
 }
 #fiche_identite div.mob {
@@ -441,16 +457,31 @@ td.conteneur_tab {
 
 #fiche_identite div.formation {
     margin: 0em 1em;
-    clear: both;
+    clear: both;  
 }
 
 div.adresse {
     float: left;
-    width: 46%;
+    min-width: 46%;
     padding: 0px;
     margin: 0px 1% 1ex 1%;
 }
 
+#fiche .medal_frame {
+    float: left;
+    width: 33%;
+}
+
+#fiche .medal_frame img {
+    float: left;
+    padding: 0ex 1ex;
+}
+
+#fiche .medal_text {
+    vertical-align: middle;
+    font-weight: bold;
+}
+
 /* only for fiche_referent.php*/
 
 #fiche_referent{

diff --git a/templates/profile/profile.tpl b/templates/profile/profile.tpl
index a4a0520..dc32504 100644 (file)
--- a/templates/profile/profile.tpl
+++ b/templates/profile/profile.tpl
@@ -43,162 +43,144 @@ function chgMainWinLoc(strPage)
 [<a href="javascript:chgMainWinLoc('profile/edit')">Modifier ma fiche</a>]
 {/if}
 
-<table id="fiche" cellpadding="0" cellspacing="0">
-  <tr>
-    <td id="fiche_identite">
-      <div class="civilite">
-        {if $x.sexe}&bull;{/if}
-        {$x.prenom} {if $x.nom_usage eq ""}{$x.nom}{else}{$x.nom_usage} ({$x.nom}){/if}
-        {if $logged}
-        {if $x.nickname} (alias {$x.nickname}){/if}&nbsp;
-        <a href="vcard/{$x.forlife}.vcf">{*
-          *}{icon name=vcard title="Afficher la carte de visite"}</a>
-        {if !$x.is_contact}
-        <a href="javascript:chgMainWinLoc('carnet/contacts?action=ajouter&amp;user={$x.forlife}')">
-          {icon name=add title="Ajouter à mes contacts"}</a>
+<div id="fiche">
+  <div id="photo" class="part">
+    {if $photo_url}<img alt="Photo de {$x.forlife}" src="{$photo_url}" width="{$x.x}"/>{/if}
+    {if $logged}
+      {if $x.section}<div><em class="intitule">Section : </em><span>{$x.section}</span></div>{/if}
+      {if $x.binets_join}<div><em class="intitule">Binet(s) : </em><span>{$x.binets_join}</span></div>{/if}
+      {if $x.gpxs_join}<div><em class="intitule">Groupe(s) X : </em><span>{$x.gpxs_join|smarty:nodefaults}</span></div>{/if}
+    {/if}
+    {if $x.web}<div><em class="intitule">Site Web : </em><a href="{$x.web}" class='popup'>{$x.web}</a></div>{/if}
+    {if $x.freetext}<div><em class="intitule">Commentaires : </em><br /><span>{$x.freetext|smarty:nodefaults}</span></div>{/if}
+  </div>
+  <div id="fiche_identite" class="part">
+    <div class="civilite">
+      {if $x.sexe}&bull;{/if}
+      {$x.prenom} {if $x.nom_usage eq ""}{$x.nom}{else}{$x.nom_usage} ({$x.nom}){/if}
+      {if $logged}
+      {if $x.nickname} (alias {$x.nickname}){/if}&nbsp;
+      <a href="vcard/{$x.forlife}.vcf">{*
+        *}{icon name=vcard title="Afficher la carte de visite"}</a>
+      {if !$x.is_contact}
+      <a href="javascript:chgMainWinLoc('carnet/contacts?action=ajouter&amp;user={$x.forlife}')">
+        {icon name=add title="Ajouter à mes contacts"}</a>
+      {else}
+      <a href="javascript:chgMainWinLoc('carnet/contacts?action=retirer&amp;user={$x.forlife}')">
+        {icon name=cross title="Retirer de mes contacts"}</a>
+      {/if}
+      {if $smarty.session.perms->hasFlag('admin')}
+      <a href="javascript:chgMainWinLoc('admin/user/{$x.forlife}')">
+        {icon name=wrench title="administrer user"}</a>
+      {/if}
+      {/if}
+    </div>
+    {if $logged}
+    <div class='maj'>
+      Fiche mise à jour<br />
+      le {$x.date|date_format}
+    </div>
+    {/if}
+    {if $logged || $x.mobile}
+    <div class="contact">
+      {if $logged}
+      <div class='email'>
+        {if $x.dcd}
+        Décédé{if $x.sexe}e{/if} le {$x.deces|date_format}
+        {elseif !$x.actif}
+        Ce camarade n'a plus d'adresse redirection valide,<br />
+        <a href="marketing/broken/{$x.forlife}" class="popup">clique ici si tu connais son adresse email !</a>
+        {elseif !$x.inscrit}
+        Cette personne n'est pas inscrite à Polytechnique.org,<br />
+        <a href="marketing/public/{$x.user_id}" class="popup">clique ici si tu connais son adresse email !</a>
         {else}
-        <a href="javascript:chgMainWinLoc('carnet/contacts?action=retirer&amp;user={$x.forlife}')">
-          {icon name=cross title="Retirer de mes contacts"}</a>
+        {if $virtualalias}
+        <a href="mailto:{$virtualalias}">{$virtualalias}</a><br />
         {/if}
-        {if $smarty.session.perms->hasFlag('admin')}
-        <a href="javascript:chgMainWinLoc('admin/user/{$x.forlife}')">
-          {icon name=wrench title="administrer user"}</a>
+        <a href="mailto:{$x.bestalias}@{#globals.mail.domain#}">{$x.bestalias}@{#globals.mail.domain#}</a>
+        {if $x.bestalias neq $x.forlife}<br />
+        <a href="mailto:{$x.forlife}@{#globals.mail.domain#}">{$x.forlife}@{#globals.mail.domain#}</a>
         {/if}
         {/if}
       </div>
-      {if $logged}
-      <div class='maj'>
-        Fiche mise à jour<br />
-        le {$x.date|date_format}
-      </div>
       {/if}
-      {if $logged || $x.mobile}
-      <div class="contact">
-        {if $logged}
-        <div class='email'>
-          {if $x.dcd}
-          Décédé{if $x.sexe}e{/if} le {$x.deces|date_format}
-          {elseif !$x.actif}
-          Ce camarade n'a plus d'adresse redirection valide,<br />
-          <a href="marketing/broken/{$x.forlife}" class="popup">clique ici si tu connais son adresse email !</a>
-          {elseif !$x.inscrit}
-          Cette personne n'est pas inscrite à Polytechnique.org,<br />
-          <a href="marketing/public/{$x.user_id}" class="popup">clique ici si tu connais son adresse email !</a>
-          {else}
-          {if $virtualalias}
-          <a href="mailto:{$virtualalias}">{$virtualalias}</a><br />
-          {/if}
-          <a href="mailto:{$x.bestalias}@{#globals.mail.domain#}">{$x.bestalias}@{#globals.mail.domain#}</a>
-          {if $x.bestalias neq $x.forlife}<br />
-          <a href="mailto:{$x.forlife}@{#globals.mail.domain#}">{$x.forlife}@{#globals.mail.domain#}</a>
-          {/if}
-          {/if}
-        </div>
-        {/if}
-        <div class="mob">
-          {if $x.mobile}<em class="intitule">Mobile : </em>{$x.mobile}<br />{/if}
-        </div>
-        <div class='spacer'></div>
+      <div class="mob">
+        {if $x.mobile}<em class="intitule">Mobile : </em>{$x.mobile}<br />{/if}
       </div>
+      <div class='spacer'></div>
+    </div>
+    {/if}
+    <div class='formation'>
+      {if $x.iso3166}
+      <img src='images/flags/{$x.iso3166}.gif' alt='{$x.nationalite}' height='11' title='{$x.nationalite}' />&nbsp;
       {/if}
-      <div class='formation'>
-        {if $x.iso3166}
-        <img src='images/flags/{$x.iso3166}.gif' alt='{$x.nationalite}' height='11' title='{$x.nationalite}' />&nbsp;
-        {/if}
-        X {$x.promo}
-        {if ($x.promo_sortie-3 > $x.promo)}
-          - X {math equation="a-b" a=$x.promo_sortie b=3}
-        {/if}
-        {if $x.applis_join}
-          &nbsp;-&nbsp;Formation&nbsp;: {$x.applis_join|smarty:nodefaults}
-        {/if}
-        {if $logged}
-        {if $x.is_referent}
-        [<a href="referent/{$x.forlife}" class='popup2'>Ma fiche référent</a>]
-        {/if}
-        {/if}
-      </div>
-    </td>
-    <td rowspan="4" id='photo'>
-      {if $photo_url}<img alt="Photo de {$x.forlife}" src="{$photo_url}" width="{$x.x}" height="{$x.y}" />{/if}
-      {if $logged}
-      {if $x.section}<div><em class="intitule">Section : </em><span>{$x.section}</span></div>{/if}
-      {if $x.binets_join}<div><em class="intitule">Binet(s) : </em><span>{$x.binets_join}</span></div>{/if}
-      {if $x.gpxs_join}<div><em class="intitule">Groupe(s) X : </em><span>{$x.gpxs_join|smarty:nodefaults}</span></div>{/if}
+      X {$x.promo}
+      {if ($x.promo_sortie-3 > $x.promo)}
+        - X {math equation="a-b" a=$x.promo_sortie b=3}
+      {/if}
+      {if $x.applis_join}
+        &nbsp;-&nbsp;Formation&nbsp;: {$x.applis_join|smarty:nodefaults}
       {/if}
-      {if $x.web}<div><em class="intitule">Site Web : </em><a href="{$x.web}" class='popup'>{$x.web}</a></div>{/if}
-      {if $x.freetext}<div><em class="intitule">Commentaires : </em><br /><span>{$x.freetext|smarty:nodefaults}</span></div>{/if}
-    </td>
-  </tr>
+      {if $logged && $x.is_referent}
+      [<a href="referent/{$x.forlife}" class='popup2'>Ma fiche référent</a>]
+      {/if}
+    </div>
+  </div>
   {if $x.adr}
-  <tr>
-    <td>
-      <h2>Contact : </h2>
-      {foreach from=$x.adr item="address" key="i"}
-        {if $address.active}
-        {include file="geoloc/address.tpl" address=$address titre_div=true titre="Mon adresse actuelle :"
-                 for="`$x.prenom` `$x.nom`"}
-        {elseif $address.secondaire}
-        {include file="geoloc/address.tpl" address=$address titre_div=true titre="Adresse secondaire :"
-                 for="`$x.prenom` `$x.nom`"}
-        {else}
-        {include file="geoloc/address.tpl" address=$address titre_div=true titre="Adresse principale :"
-                 for="`$x.prenom` `$x.nom`"}
-        {/if}
-      {/foreach}
-      <div class="spacer">&nbsp;</div>
-    </td>
-  </tr>
+  <div class="part">
+    <h2>Contact : </h2>
+    {foreach from=$x.adr item="address" key="i" name=adresses}
+      {if $address.active}
+      {include file="geoloc/address.tpl" address=$address titre_div=true titre="Mon adresse actuelle :"
+               for="`$x.prenom` `$x.nom`"}
+      {elseif $address.secondaire}
+      {include file="geoloc/address.tpl" address=$address titre_div=true titre="Adresse secondaire :"
+               for="`$x.prenom` `$x.nom`"}
+      {else}
+      {include file="geoloc/address.tpl" address=$address titre_div=true titre="Adresse principale :"
+               for="`$x.prenom` `$x.nom`"}
+      {/if}
+      {if $i is odd}<div class="spacer"></div>{/if}
+    {/foreach}
+  </div>
   {/if}
   {if $x.adr_pro}
-  <tr>
-    <td>
-      <h2>Informations professionnelles :</h2>
-      {foreach from=$x.adr_pro item="address" key="i"}
-      {include file="include/emploi.tpl" address=$address}
-      {include file="geoloc/address.tpl" address=$address titre="Adresse : " for=$address.entreprise}
-      <div class="spacer">&nbsp;</div>
-      {/foreach}
-    </td>
-  </tr>
+  <div class="part">
+    <h2>Informations professionnelles :</h2>
+    {foreach from=$x.adr_pro item="address" key="i"}
+    {include file="include/emploi.tpl" address=$address}
+    {include file="geoloc/address.tpl" address=$address titre="Adresse : " for=$address.entreprise}
+    <div class="spacer">&nbsp;</div>
+    {/foreach}
+  </div>
   {/if}
   {if $x.medals}
-  <tr>
-    <td>
-      <h2>Distinctions : </h2>
-      {foreach from=$x.medals item=m}
-      <table style="float: left; width: 33%;">
-        <tr>
-          <td>
-            <img src="images/medals/{$m.img}" width="24" alt="{$m.medal}" title="{$m.medal}" style='float: left;' />
-          </td>
-          <td>
-            <strong>{$m.medal}</strong>
-            <br />{$m.grade}
-          </td>
-        </tr>
-      </table>
-      {/foreach}
-      <div class="spacer">&nbsp;</div>
-    </td>
-  </tr>
+  <div class="part">
+    <h2>Distinctions : </h2>
+    {foreach from=$x.medals item=m}
+    <div class="medal_frame">
+      <img src="images/medals/{$m.img}" width="24" alt="{$m.medal}" title="{$m.medal}" style='float: left;' />
+      <div class="medal_text">
+        {$m.medal}<br />{$m.grade}
+      </div>
+    </div>
+    {/foreach}
+    <div class="spacer">&nbsp;</div>
+  </div class="part">
   {/if}
-  {if $logged}
-  {if $x.cv}
-  <tr>
-    <td>
-      <h2>Curriculum Vitae :</h2>
-      {$x.cv|smarty:nodefaults}
-    </td>
-  </tr>
+  {if $logged && $x.cv}
+  <div class="part">
+    <h2>Curriculum Vitae :</h2>
+    {$x.cv|smarty:nodefaults}
+  </div>
   {/if}
+  {if !$logged}
+  <div class="part">
+    Cette fiche est publique et visible par tout internaute,<br />
+    vous pouvez aussi voir <a href="profile/private/{$x.forlife}?display=light">celle&nbsp;réservée&nbsp;aux&nbsp;X</a>.
+  </div>
   {/if}
-{if !$logged}
-<tr><td colspan="2">Cette fiche est publique et visible par tout internaute,<br />
-vous pouvez aussi voir <a href="profile/private/{$x.forlife}?display=light">celle&nbsp;réservée&nbsp;aux&nbsp;X</a>.
-</td></tr>
-{/if}
-
-</table>
+  <div class="spacer"></div>
+</div>
 
 {* vim:set et sw=2 sts=2 sws=2 enc=utf-8: *}