]> git.babelmonkeys.de Git - socialXMPP.git/commitdiff
projects / socialXMPP.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: b11e25f)
Change vCard display
authorFlorian Zeitz <florob@babelmonkeys.de>
Sat, 25 Jul 2009 16:10:26 +0000 (18:10 +0200)
committerFlorian Zeitz <florob@babelmonkeys.de>
Sat, 25 Jul 2009 16:10:26 +0000 (18:10 +0200)
* vCards are now displayed in lightview-like style

css/standard.css patch | blob | history
index.html patch | blob | history
scripts/basic.js patch | blob | history
scripts/strophejs patch | blob | history
vCard.html patch | blob | history

diff --git a/css/standard.css b/css/standard.css
index b6c3b8e27a9f8a23a3fd48ab41fb0e753f4973db..eb2b9d69a0f7167f57ecb731b1812a8166b20fc6 100644 (file)
--- a/css/standard.css
+++ b/css/standard.css
@@ -7,9 +7,18 @@
 }
 
 #vCard_container {
-  float: left;
   display: none;
-  margin: 1em;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+#vCard {
+  background: white;
+  text-align: center;
+  margin: 2em auto;
+  width: 50%;
+  overflow: auto;
 }
 
 #ownInfo {
@@ -27,6 +36,17 @@
   float: left;
 }
 
+#box-overlay {
+  background: black;
+  opacity: 0.8;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
 .vCardName {
   font-weight: bold;
 }
@@ -67,3 +87,8 @@
   font-size: 15pt;
   font-weight: bold;
 }
+
+.noMarker {
+  list-style-type: none;
+  display: inline;
+}
diff --git a/index.html b/index.html
index e06ee7d10db66d68266f101e58b586bd76c5e56a..1b906984e31d89ca7d02fcda2322bde3797e2c8a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
   </div>
   <div id='friends'>
   </div>
+  <div id="box-overlay"></div>
   <div id='vCard_container'>
   </div>
   <div id='log_container'>
diff --git a/scripts/basic.js b/scripts/basic.js
index e4a63cf114cbf309b0d4cccee1ce78beef3481ad..62c00c1470500f5ab58382c7686edbe60ffd968c 100644 (file)
--- a/scripts/basic.js
+++ b/scripts/basic.js
@@ -62,9 +62,11 @@ function populateVCard(e, jid) {
     });
 
     $('#vCard').click(function () {
+       $('#box-overlay').hide();
         $('#vCard_container').slideUp("normal");
       });
 
+    $('#box-overlay').show();
     $('#vCard_container').slideDown("normal");
 }
 
@@ -84,10 +86,7 @@ function _cbVCard(e) {
 
 function _cbOwnVCard(e) {
     $('#ownInfo').empty();
-    $('#ownInfo').load('vCard.html #vCard', function() {
-    $('#ownInfo').find('div').each(function() {
-       $(this).attr('id', 'own' + $(this).attr('id'));
-    });
+    $('#ownInfo').load('vCard.html #ownvCard', function() {
     var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
     for (var i=0; i<easy_cases.length; i++) {
        var text = e.getElementsByTagName(easy_cases[i])[0];
@@ -330,8 +329,10 @@ function showConnect() {
     var button = $('#connect').get(0); 
 
     $('#log').empty();
+    $('#ownInfo').empty();
     $('#ownInfo').hide();
     $('#vCard_container').empty();
+    $('#friends').empty();
     $('#friends').hide();
     $('.chat').remove();
     $('label').show();
diff --git a/scripts/strophejs b/scripts/strophejs
index 869a007c919936756c3f00cd298450e6a6b27a7a..b3177bf164e2a8d26f18535d117a18f935340379 160000 (submodule)
--- a/scripts/strophejs
+++ b/scripts/strophejs
@@ -1 +1 @@
-Subproject commit 869a007c919936756c3f00cd298450e6a6b27a7a
+Subproject commit b3177bf164e2a8d26f18535d117a18f935340379
diff --git a/vCard.html b/vCard.html
index 28e56979322fbce7ed99d90b621d460e94b62a45..1769db4fc62dd69c476aa3a5a7e93542109230ee 100644 (file)
--- a/vCard.html
+++ b/vCard.html
@@ -5,19 +5,38 @@
 </head>
 <body>
   <div id='vCard'>
-    <div id="PHOTO"><span class="vCardName">Avatar: </span><img src="imgs/none.png" /></div>
-    <div id="FN"><span class="vCardName">Full Name: </span></div>
-    <div id="FAMILY"><span class="vCardName">Last Name: </span></div>
-    <div id="GIVEN"><span class="vCardName">First Name: </span></div>
-    <div id="MIDDLE"><span class="vCardName">Middle Name: </span></div>
-    <div id="NICKNAME"><span class="vCardName">Nickname: </span></div>
-    <div id="BDAY"><span class="vCardName">Birthday: </span></div>
-    <div id="TELHOME"><span class="vCardName">Telephone (Home): </span></div>
-    <div id="TELWORK"><span class="vCardName">Telephone (Work): </span></div>
-    <div id="EMAILHOME"><span class="vCardName">E-Mail (Home): </span></div>
-    <div id="EMAILWORK"><span class="vCardName">E-Mail (Work): </span></div>
-    <div id="CTRY"><span class="vCardName">Country: </span></div>
-    <div id="USERID"><span class="vCardName">E-Mail: </span></div>
+    <ul class="noMarker">
+      <li id="PHOTO"><span class="vCardName">Avatar: </span><img src="imgs/none.png" /></li>
+      <li id="FN"><span class="vCardName">Full Name: </span></li>
+      <li id="FAMILY"><span class="vCardName">Last Name: </span></li>
+      <li id="GIVEN"><span class="vCardName">First Name: </span></li>
+      <li id="MIDDLE"><span class="vCardName">Middle Name: </span></li>
+      <li id="NICKNAME"><span class="vCardName">Nickname: </span></li>
+      <li id="BDAY"><span class="vCardName">Birthday: </span></li>
+      <li id="TELHOME"><span class="vCardName">Telephone (Home): </span></li>
+      <li id="TELWORK"><span class="vCardName">Telephone (Work): </span></li>
+      <li id="EMAILHOME"><span class="vCardName">E-Mail (Home): </span></li>
+      <li id="EMAILWORK"><span class="vCardName">E-Mail (Work): </span></li>
+      <li id="CTRY"><span class="vCardName">Country: </span></li>
+      <li id="USERID"><span class="vCardName">E-Mail: </span></li>
+    </ul>
+  </div>
+  <div id='ownvCard'>
+    <ul class="noMarker">
+      <li id="ownPHOTO"><span class="vCardName">Avatar: </span><img src="imgs/none.png" /></li>
+      <li id="ownFN"><span class="vCardName">Full Name: </span></li>
+      <li id="ownFAMILY"><span class="vCardName">Last Name: </span></li>
+      <li id="ownGIVEN"><span class="vCardName">First Name: </span></li>
+      <li id="ownMIDDLE"><span class="vCardName">Middle Name: </span></li>
+      <li id="ownNICKNAME"><span class="vCardName">Nickname: </span></li>
+      <li id="ownBDAY"><span class="vCardName">Birthday: </span></li>
+      <li id="ownTELHOME"><span class="vCardName">Telephone (Home): </span></li>
+      <li id="ownTELWORK"><span class="vCardName">Telephone (Work): </span></li>
+      <li id="ownEMAILHOME"><span class="vCardName">E-Mail (Home): </span></li>
+      <li id="ownEMAILWORK"><span class="vCardName">E-Mail (Work): </span></li>
+      <li id="ownCTRY"><span class="vCardName">Country: </span></li>
+      <li id="ownUSERID"><span class="vCardName">E-Mail: </span></li>
+    </ul>
   </div>
 </body>
 </html>
A proof of concept social networking web-app based on XMPP