Actual auth UI!

icculus · Jul 5, 2010 · df41d93 · df41d93
1 parent cae657e
commit df41d93
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -21,11 +21,7 @@
 function render()
 {
     if (profile == null)
-    {
-        $('div.nickname').text("This user's profile is invalid or marked private");
-        $('img.avatar').hide();
         return;
-    } // if
 
     $('img.avatar').attr('src', profile.avatarurl_medium);
     $('div.nickname').text(profile.nickname);
@@ -64,12 +60,36 @@
     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
+
 function process_steam_profile(xml)
 {
     var prof = $(xml).find('profile');
     if (prof.find('steamid').text() == '0')
     {
-        $('div.loginpopover').show();
+        $('img.avatar').hide();
+        popover('#loginpopover');
         return null;
     } // if
 
@@ -382,19 +402,10 @@
     </script>
   </head>
   <body>
-    <div class='loginpopover'>
-        <center>
-        <p>You need to login to Steam Community to access this page.</p>
-        <p>We are forwarding you to steamcommunity.com.</p>
-        <p>Your password will only be supplied to the Steam website and not
-           to this one.</p>
-        <p><a href='auth.php'>Go there now.</a></p>
-        </center>
-    </div>
     <div class='main'>
-      <div id="global_header"> 
-        <img class='avatar' src='loading.gif'/>
-        <div class='nickname'>Loading your steam profile...</div>
+      <div class="global_header"> 
+        <img class='avatar' width='64' height='64' src='loading.gif'/>
+        <div class='nickname'></div>
         <div class='searchbox' style='visibility: hidden;'> 
           <input class='tagfilter' name='filter' type='text'
                  onFocus='focus_filter_textbox();' 
@@ -418,8 +429,21 @@
         ]
       </div>
     </div>
-      <table class='gametable'><tbody></tbody></table>
+
+    <div id='loginpopover'>
+        <center>
+        <p>This website lets you organize and filter your Steam purchases
+           through tags.</p>
+        <br/>
+        <p>You need to log in to Steam Community to access this page.</p>
+        <p>Your password will only be supplied to the Steam website. This
+           website will never have access to your login information.</p>
+        <br/>
+        <p><a style='text-decoration: underline;' href='auth.php'>
+          Click here to log in through steamcommunity.com</a></p>
+        </center>
     </div>
+    <div id='backgroundpopover'></div>
   </body>
 </html>
 
diff --git a/style.css b/style.css
@@ -90,15 +90,30 @@ img.avatar {
 	padding: 3px;
 }
 
-div.loginpopover {
-    position: absolute;
-    left: 10%;
-    top: 10%;
-    width: 80%;
-    height: 80%;
-    background-color: #ff0000;
-    color: inherit;
-    visibility: hidden;
+#backgroundpopover {  
+	display:none;
+	position:fixed;
+	_position:absolute; /* hack for internet explorer 6*/
+	height:100%;
+	width:100%;
+	top:0;
+	left:0;
+	background:#000000;
+	border:1px solid #cecece;
+	z-index:1;
+}  
+
+#loginpopover {
+	display:none;
+	position:fixed;
+	_position:absolute; /* hack for internet explorer 6*/
+	width:408px;
+	background:#FF0000;
+	color:#FFFFFF;
+	border:2px solid #cecece;
+	z-index:2;
+	padding:12px;
+	font-size:13px;
 }
 
 div.taglist {