Commit: cc4b509d7bb6bae2893df7978df0ba4613bacb32
Author: Hannes Magnusson <[email protected]> Wed, 11 Dec 2013
22:32:17 -0800
Parents: a59c37a3e16211cdee8cd2f23e13d0b254bc507d
Branches: master
Link:
http://git.php.net/?p=web/people.git;a=commitdiff;h=cc4b509d7bb6bae2893df7978df0ba4613bacb32
Log:
Rewrite layout to look like www.php.net redesign
The markup and CSS is rewritten from the www markup/css.
It is dramatically simpler, yet offering all the same benefits
(e.g. "responsive") - plus no need for js workarounds for anchors
Need to work on migrating it over to www
Changed paths:
A include/footer.inc
A include/header.inc
M include/layout.php
M include/misc.php
A include/sidebar.inc
M index.php
M js/search.js
M styles.css
M user.php
diff --git a/include/footer.inc b/include/footer.inc
new file mode 100644
index 0000000..9b12328
--- /dev/null
+++ b/include/footer.inc
@@ -0,0 +1,18 @@
+<?php /* vim: set ft=html et ts=2 sw=2: : */ ?>
+</section>
+<footer>
+ <nav class="fullscreen">
+ <ul>
+ <li><a href="//php.net/copyright">Copyright © 2001-2013 The PHP
Group</a></li>
+ <li><a href="//php.net/site">Other PHP.net sites</a></li>
+ <li><a href="//php.net/privacy">Privacy policy</a></li>
+ </ul>
+ </nav>
+</footer>
+
+ <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";></script>
+ <script type="text/javascript"
src="js/jquery.autocomplete.min.js"></script>
+ <script type="text/javascript" src="js/userlisting.php"></script>
+ <script type="text/javascript" src="js/search.js"></script>
+</body>
+</html>
diff --git a/include/header.inc b/include/header.inc
new file mode 100644
index 0000000..b8a1c08
--- /dev/null
+++ b/include/header.inc
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>PHP: <?=$title ?></title>
+ <link type="text/css" media="all" rel="stylesheet" href="/styles.css?v=3">
+ <link
href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic|Source+Code+Pro&subset=latin,latin-ext"
rel="stylesheet" type="text/css">
+ <link rel="shortcut icon" href="//php.net/favicon.ico">
+</head>
+<body>
+
+<header>
+ <nav class="fullscreen">
+ <div class="mainscreen">
+ <a href="/" class="home"><img src="//php.net/images/logo.php" width="48"
height="24" alt="php"><span class="subdomain">people</span></a>
+ <ul>
+ <li><a href="/user.php">Users</a></li>
+ </ul>
+ </div>
+ <div class="secondscreen">
+ <form method="get" action="user.php">
+ <input type="search" placeholder="Search profiles" name="username"
class="search">
+ </form>
+ </div>
+ </nav>
+</header>
+
+<section class="fullscreen">
diff --git a/include/layout.php b/include/layout.php
index a38981e..a3d1f66 100644
--- a/include/layout.php
+++ b/include/layout.php
@@ -2,56 +2,17 @@
/* $Id$ */
function site_header($title) {
-?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd";>
-<html
- xml:lang="en"
- xmlns="http://www.w3.org/1999/xhtml";
- xmlns:foaf="http://xmlns.com/foaf/0.1/";
- xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#";
->
-<head>
- <title><?php echo $title ?></title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link type="text/css" media="all" rel="stylesheet" href="styles.css" />
- <link rel="shortcut icon" href="http://php.net/favicon.ico"; />
- <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";></script>
- <script type="text/javascript"
src="js/jquery.autocomplete.min.js"></script>
- <script type="text/javascript" src="js/userlisting.php"></script>
-</head>
-
-<body>
- <h1 id="header"><a href="http://php.net/index.php";>PHP: Hypertext
Preprocessor</a> - <a href="http://people.php.net/index.php";
rel="home">Developers Profile pages</a></h1>
- <form id="searchbox" method="get" action="user.php">
- <label for="search">User search</label>
- <input type="text" name="username" id="search" />
- </form>
- <script type="text/javascript" src="js/search.js"></script>
- <ul id="mainmenu">
- <li><a href="http://php.net/downloads.php";>Downloads</a></li>
- <li><a href="http://php.net/docs.php";>Documentation</a></li>
- <li><a href="http://php.net/FAQ.php";>Faq</a></li>
- <li><a href="http://php.net/support.php";>Getting Help</a></li>
- <li><a href="http://php.net/mailing-lists.php";>Mailing Lists</a></li>
- <li><a href="http://bugs.php.net";>Reporting Bugs</a></li>
- <li><a href="http://php.net/sites.php";>PHP.net Sites</a></li>
- <li><a href="http://php.net/links.php";>Links</a></li>
- <li><a href="http://php.net/conferences/";>Conferences</a></li>
- <li><a href="http://php.net/my.php";>My PHP.net</a></li>
- </ul>
-<?php
+ include dirname(__FILE__) . "/header.inc";
}
function site_footer() {
-?>
- <p id="copyright">
- <a href="http://php.net/copyright.php";>Copyright © 2009-<?php
echo date('Y');?> The PHP Group</a><br />
- All rights reserved.
- </p>
-</body>
-</html>
-<?php
+ include dirname(__FILE__) . "/footer.inc";
}
+function site_panel($data) {
+ include dirname(__FILE__) . "/sidebar.inc";
+}
+
+
// vim: set expandtab shiftwidth=4 softtabstop=4 tabstop=4 :
diff --git a/include/misc.php b/include/misc.php
index 9da9ecd..d9359da 100644
--- a/include/misc.php
+++ b/include/misc.php
@@ -117,7 +117,7 @@ function findPHPUserProfile($username)
function error($errormsg)
{
- echo '<p class="warning error">', $errormsg, "</p>";
+ echo '<p class="warning error">', $errormsg, "</p></section>";
site_footer();
exit;
}
diff --git a/include/sidebar.inc b/include/sidebar.inc
new file mode 100644
index 0000000..43015e0
--- /dev/null
+++ b/include/sidebar.inc
@@ -0,0 +1,3 @@
+<aside class="secondscreen">
+<?=$data?>
+</aside>
diff --git a/index.php b/index.php
index e87d17b..e1202b4 100644
--- a/index.php
+++ b/index.php
@@ -12,8 +12,10 @@ if ($USERNAME) {
site_header("PHP: Developers Profile Pages");
?>
- <p class="warning smaller"><strong>WARNING</strong>: This is obviously
work in progress :)</p>
- <p>Use the searchbox to search for usernames/names</p>
+<section class="fullscreen">
+ <p class="warning smaller"><strong>WARNING</strong>: This is obviously work
in progress :)</p>
+ <p>Use the searchbox to search for usernames/names</p>
+</section>
<?php
site_footer();
diff --git a/js/search.js b/js/search.js
index 9be8adc..ecbd310 100644
--- a/js/search.js
+++ b/js/search.js
@@ -7,10 +7,9 @@ var fnFormatSearchResult = function(value, data, currentValue)
{
return '<img src="http://www.gravatar.com/avatar/' + users[value]["email"]
+ '.jpg?s=25" /> ' + listing;
};
-$('#search').autocomplete({
+$('input.search').autocomplete({
minChars:2,
maxHeight:400,
- width:300,
fnFormatResult: fnFormatSearchResult,
onSelect: function(value, data){ window.location = "user.php?username=" +
users[value]["username"]; },
lookup: lookup
diff --git a/styles.css b/styles.css
index 2f93193..0a2d8d9 100644
--- a/styles.css
+++ b/styles.css
@@ -1,124 +1,148 @@
-/* $Id$ */
-
-body {
- margin: 0;
- font-family: Tahoma, Arial, sans-serif, serif, monospace;
- background-color: #f8f8f8;
-}
-h2 {
- margin: 0;
- font-size: 1em;
-}
-
-#header {
- margin: 0;
- background: url(/images/php.gif) #5a5993 no-repeat;
- padding: 20px 0 10px 150px;
- height: 37px;
- font-style: italic;
- font-size: 1em;
- color: #B5B5E9;
-}
-#header a {
- color: #B5B5E9;
-}
-
-#mainmenu {
- margin: 0;
- background-color: #f3f3f3;
- font-size: 0.9em;
- padding: 8px 10px;
- text-align: center;
- border-top: 1px solid #000000;
- border-bottom: 1px solid #D0D0D0;
-}
-#mainmenu li {
- display: inline;
- padding: 0 1%;
- border-right: 1px solid #CDCDCD;
-}
-#mainmenu li a {
- color: #6181B7;
-}
-#mainmenu li:last-child {
- border: 0px;
-}
+/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */
-#searchbox {
- color: #B5B5E9;
- position: absolute;
- top: 20px;
- right: 200px;
+/* {{{ widths blatantly stolen from bootstrap */
+.fullscreen {
+ width: 940px;
+}
+.fullscreen {
+ margin-right: auto;
+ margin-left: auto;
+ *zoom: 1;
+}
+.mainscreen, .secondscreen {
+ display: inline-block;
+}
+.mainscreen {
+ width: 700px;
+}
+.secondscreen {
+ width: 220px;
+}
+@media (max-width: 767px) {
+ .fullscreen {
+ width: auto;
+ padding: 0px 10px 0px 10px;
+ }
+}
+@media (min-width: 768px) and (max-width: 979px) {
+ .fullscreen {
+ width: 724px;
+ }
+ .mainscreen {
+ width: 538px;
+ }
+ .secondscreen {
+ width: 166px;
+ }
+}
+@media (min-width: 1200px) {
+ .fullscreen {
+ width: 1170px;
+ }
+ .mainscreen {
+ width: 870px;
+ }
+ .secondscreen {
+ width: 270px;
+ }
}
-#copyright {
- margin: 0;
- background-color: #f3f3f3;
- font-size: 0.9em;
- padding: 8px 10px;
- text-align: left;
- border-top: 1px solid #000000;
- border-bottom: 1px solid #D0D0D0;
+@media (min-width: 1500px) {
+ .fullscreen {
+ width: 1440px;
+ }
}
+/* }}} */
-#profile {
- margin: 10px 100px 0 100px;
- padding-bottom: 20px;
+body {
+ background-color: #eeeef6;
+ color: #444;
+ font-family: Tahoma, Arial, sans-serif, serif, monospace;
+ background-color: #fff;
+ margin: 50px 0 0 0;
}
+header {
+ top: 0px;
+ left: 0px;
+ position: fixed;
+ width: 100%;
-#profile dl {
- padding-bottom: 20px;
- margin: 0;
+ border-bottom: 0.25em solid #669;
+ background-color: #99c;
+ box-shadow: 0 .25em .25em rgba(0,0,0,.1);
+ z-index: 1;
}
-#profile dd {
- line-height: 20px;
- margin-left: 150px;
-}
-#profile dt {
- float: left;
- line-height: 20px;
- color: #5A5993;
+footer {
+ width: 100%;
+ position: absolute;
+ border-top: .25em solid #99C;
+ background-color: #262626;
}
-#blurb,
-#karma,
-#notes {
- color: #5A5993;
+nav {
+ line-height: 2.5;
}
-
-.blurb {
- margin: 0 0 0 2em;
- width: 600px;
+nav img {
+ vertical-align: middle;
}
-
-.warning {
- padding: 1em;
- margin: 0px;
- border-bottom:1px solid #D0D0D0;
- margin-bottom: 6px;
- text-align: center;
- font-weight: bold;
- font-size:1.17em;
- background:#ffffff;
- color:#6F0000;
-}
-.error {
- background: #FFEEEE;
- border: 1px solid #666600;
- color: #660000;
-}
-.smaller {
- font-size: .9em;
+nav ul {
+ display: inline-block;
+ list-style: none;
+ list-style-type: none;
+ margin: 0;
}
-
-.note {
- text-indent: 30px;
- margin: 5px;
- padding: 5px 0 0 0;
- border-bottom:1px dashed #5A5993;
- width: 600px;
+nav li {
+ display: inline-block;
}
-.note:last-child {
- border-bottom: 0;
+nav a {
+ display: inline-block;
+ font-weight: normal;
+ padding: 0 0.75em;
+ color: #eef;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ text-decoration: none;
+ font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+}
+nav a:hover {
+ color: #fff;
+}
+nav form {
+ display: inline-block;
+ width: 100%;
+}
+nav input {
+ width: 100%;
+ color: #333;
+ font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+ font-size: 1em;
+ text-shadow: 0 1px 0 #ffffff;
+ border: 0;
+ border-radius: 2px;
+ box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
+ line-height: 1.5;
+}
+/* Pad the #fragment below the header */
+section *[id] {
+ margin-top: -50px;
+ padding-top: 50px;
+}
+section.fullscreen {
+ /* Force the content below the fixed header */
+ display: block;
+}
+.secondscreen {
+ vertical-align: top;
+ display: inline-block;
+ margin-left: 10px;
+}
+.secondscreen .panel {
+ background: #f0f0f0;
+ border: 1px solid #e3e3e3;
+ border-radius: 2px;
+}
+.secondscreen a {
+ color: #333;
+ display: block;
+ padding: .75em 1em;
}
/* {{{ Stolen from http://www.devbridge.com/projects/autocomplete/jquery/ */
@@ -128,19 +152,16 @@ h2 {
top: 0px;
left: 0px;
margin: 6px 0 0 6px;
- /* IE6 fix: */
- _background:none; _margin:1px 0 0 0;
+ z-index: 1;
}
.autocomplete {
border: 1px solid #999;
background: #FFF;
cursor: default;
text-align: left;
- max-height: 350px;
+ max-height: 270px;
overflow: auto;
margin: -6px 6px 6px -6px;
- /* IE6 specific: */
- _height:350px; _margin:0; _overflow-x:hidden;
}
.autocomplete .selected {
background:#F0F0F0;
@@ -156,5 +177,18 @@ h2 {
/* }}} */
-/* vim: set expandtab shiftwidth=2 softtabstop=2 tabstop=2 fdm=marker : */
+/* Grab attention with a warning */
+.warning {
+ background: #f9ecf2;
+ border: 1px solid #eecdde;
+
+ padding: 1em;
+ margin: 0px;
+
+ text-align: center;
+ font-weight: bold;
+ font-size:1.17em;
+
+ color: #660000;
+}
diff --git a/user.php b/user.php
index 0a843e1..8d86e19 100644
--- a/user.php
+++ b/user.php
@@ -6,7 +6,7 @@ require "./include/misc.php";
require "./include/karma.php";
$USERNAME = filter_input(INPUT_GET, "username", FILTER_SANITIZE_ENCODED,
FILTER_FLAG_STRIP_HIGH);
-site_header("PHP: Developers Profile Pages; $USERNAME");
+site_header("Developers Profile Pages; $USERNAME");
$NFO = findPHPUser($USERNAME);
$PEAR = findPEARUser($USERNAME);
@@ -18,6 +18,7 @@ $email = $NFO["enable"] ? $NFO["username"].'@php.net' : "";
$location = isset($PEAR["long"], $PEAR["lat"]) ? $PEAR["lat"] . ", " .
$PEAR["long"] : null;
?>
+<section class="mainscreen">
<div about="#me" typeof="foaf:Person" id="profile">
<?php
if ($email) {
@@ -108,7 +109,13 @@ if (isset($GITHUB["location"])) {
<?php } ?>
</div>
+</section>
<?php
+$SIDEBAR = <<< SIDEBAR
+ <p class="panel"><a
href="https://master.php.net/manage/users.php?username=$USERNAME";>Edit
$USERNAME on master</a></p>
+SIDEBAR;
+
+site_panel($SIDEBAR);
site_footer();
// vim: set expandtab shiftwidth=4 softtabstop=4 tabstop=4 :--
PHP Webmaster List Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
