Make the profile loading ui suck less.

icculus · Jul 5, 2010 · 896236c · 896236c
1 parent 0c4288d
commit 896236c
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,47 @@
     <script type="text/javascript">
 <!--
 
-var profile = null;
+var profile = null;  // all the user state.
+
+var current_popover = null;
+function end_popover()
+{
+    if (current_popover != null)
+    {
+        $(current_popover).fadeOut("slow");
+        $("#backgroundpopover").fadeOut("slow");  
+        current_popover = null;
+    } // if
+} // end_popover
+
+function popover(element)
+{
+    if (current_popover != null)
+        $(current_popover).fadeOut("slow");
+
+    current_popover = element;
+
+    var windowWidth = document.documentElement.clientWidth;
+    var windowHeight = document.documentElement.clientHeight;
+    var popupWidth = windowWidth / 2;
+    $(element).css('width', popupWidth);
+
+    var popupHeight = $(element).height();
+
+    $(element).css({
+        position: 'absolute',
+        top: (windowHeight - popupHeight) / 2,
+        left: (windowWidth - popupWidth) / 2,
+        width: popupWidth,
+        height: popupHeight,
+    });
+
+    $('#backgroundpopover').css('height', windowHeight);
+    $("#backgroundpopover").css('opacity', '0.7');
+    $("#backgroundpopover").fadeIn('slow');
+    $(element).fadeIn('slow');
+} // popover
+
 
 // !!! FIXME: this is kinda nasty.
 function resize_ui()
@@ -56,48 +96,25 @@
     });
 
     $('div.taglist').one("click", function() { clicked_taglist($(this)); });
-    $('div.searchbox').css('visibility', 'visible');
     $('a#profileurl').attr('href', profile.profileurl);
     resize_ui();
-} // render
 
-function popover(element)
-{
-    var windowWidth = document.documentElement.clientWidth;
-    var windowHeight = document.documentElement.clientHeight;
-    var popupWidth = windowWidth / 2;
-    $(element).css('width', popupWidth);
-
-    var popupHeight = $(element).height();
-
-    $(element).css({
-        position: 'absolute',
-        top: (windowHeight - popupHeight) / 2,
-        left: (windowWidth - popupWidth) / 2,
-        width: popupWidth,
-        height: popupHeight,
-    });
-
-    $('#backgroundpopover').css('height', windowHeight);
-    $("#backgroundpopover").css('opacity', '0.7');
-    $("#backgroundpopover").fadeIn('slow');
-    $(element).fadeIn('slow');
-} // popover
+    $('div.main').show();
+    end_popover();
+} // render
 
 function process_steam_profile(xml)
 {
     var prof = $(xml).find('profile');
     var steamid = prof.find('steamid').text();
     if (steamid == '0')
     {
-        $('img.avatar').hide();
         popover('#loginpopover');
         return null;
     } // if
 
     if (prof.find('valid').text() != '1')
     {
-        $('img.avatar').hide();
         var url = 'http://steamcommunity.com/profiles/' + steamid + '/edit/settings';
         $('a#privpage').attr('href', url);
         popover('#privateprofilepopover');
@@ -388,6 +405,7 @@
 // kick off AJAX load of user profile when document is ready for action.
 $(document).ready(function(){
     $(window).resize( function() { resize_ui(); } );
+    popover('#loadingmessage');
     $.ajax({
         type: "GET",
         url: "steamprofile.php",
@@ -414,7 +432,7 @@
       <div class="global_header"> 
         <img class='avatar' width='64' height='64' src='loading.gif'/>
         <div class='nickname'></div>
-        <div class='searchbox' style='visibility: hidden;'> 
+        <div class='searchbox'> 
           <input class='tagfilter' name='filter' type='text'
                  onFocus='focus_filter_textbox();' 
                  onBlur='run_filter();'
@@ -440,6 +458,12 @@
       </div>
     </div>
 
+    <div id='loadingmessage'>
+        <center>
+            Loading your Steam Community profile...
+        </center>
+    </div>
+
     <div id='loginpopover'>
         <center>
         <p>This website lets you organize and filter your Steam purchases

diff --git a/style.css b/style.css
@@ -77,6 +77,7 @@ div.nickname {
 }
 
 div.main {
+	display:none;
 	background-image: url(content_bg.png);
 	background-repeat: repeat-x;
 	background-color: #000000;
@@ -90,6 +91,19 @@ img.avatar {
 	padding: 3px;
 }
 
+#loadingmessage {
+	display:none;
+	position:fixed;
+	_position:absolute; /* hack for internet explorer 6*/
+	width:408px;
+	background:#4a4746;
+	color: #cdc9c0;
+	border:2px solid #cecece;
+	z-index:2;
+	padding:12px;
+	font-size:13px;
+}
+
 #backgroundpopover {  
 	display:none;
 	position:fixed;