Browse Source

Design overhaul. Projects/Project pages.

Nathaniel van Diepen 10 years ago
parent
commit
3f5772c60e
11 changed files with 140 additions and 66 deletions
  1. 21 4
      api.php
  2. 1 1
      bugs.appcache
  3. 45 25
      css/style.css
  4. 6 0
      data/pages/project.template
  5. 3 0
      data/pages/projects.options
  6. 4 4
      data/pages/projects.template
  7. 44 30
      data/pages/topbar.template
  8. 1 1
      js/index.js
  9. 1 0
      php/include.php
  10. 13 0
      php/project.php
  11. 1 1
      php/user.php

+ 21 - 4
api.php

@@ -21,7 +21,7 @@
 						$context['user'] = userObj($_SESSION['username']);
 					};
 					$ret['context'] = $context;
-					retj($ret,$id);
+					retj($ret,'User - '.$context['name']);
 				break;
 				case 'group':
 					// TODO - handle group requests
@@ -32,6 +32,18 @@
 				case 'scrum':
 					// TODO - handle scrum requests
 				break;
+				case 'project':
+					if(!isset($_GET['template'])){
+						$ret['template'] = file_get_contents(PATH_DATA.'pages/project.template');
+					}
+					$context = projectObj($id);
+					if($LOGGEDIN){
+						$context['key'] = true;
+						$context['user'] = userObj($_SESSION['username']);
+					};
+					$ret['context'] = $context;
+					retj($ret,'Project - '.$context['title']);
+				break;
 				case 'admin':
 					// TODO - handle admin requests
 				break;
@@ -50,9 +62,14 @@
 							foreach($options as $key){
 								switch($key){
 									case 'users':
-										$res = query("SELECT name FROM `users`;");
-										$users = fetch_all($res,MYSQLI_ASSOC);
-										$context['users'] = $users;
+										if($res = query("SELECT name FROM `users`;")){
+											$context['users'] = fetch_all($res,MYSQLI_ASSOC);
+										}
+									break;
+									case 'projects':
+										if($res = query("SELECT title,description,id FROM `projects`;")){
+											$context['projects'] = fetch_all($res,MYSQLI_ASSOC);
+										}
 									break;
 								}
 							}

+ 1 - 1
bugs.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Version 2013-10-18 1:26
+# Version 2013-10-20 8:46pm
 
 css/style.css
 css/fonts.css

+ 45 - 25
css/style.css

@@ -24,24 +24,25 @@ div#topbar{
 	border-color: black;
 	border-style: solid;
 	border-width: 1px;
-	background-color: black;
-	color: white;
+	background-color: lightgray;
+	color: black;
 	overflow: hidden;
 }
 div.topbar-left{
 	height: 100%;
 }
 div#topbar .menuitem{
-	color: white;
+	color: black;
+	background-color: white;
 	text-decoration: none;
 	text-transform: capitalize;
 	text-align: center;
 	vertical-align: middle;
-	border-color: white;
+	/*border-color: black;
 	border-style: solid;
 	border-width: 0;
 	border-right-width: 1px;
-	border-left-width: 1px;
+	border-left-width: 1px;*/
 	margin-left: -1px;
 	float: left;
 	font-size: 20px;
@@ -50,13 +51,11 @@ div#topbar .menuitem{
 	cursor: pointer;
 	min-width: 35px;
 }
-div#topbar .menu{
-	color: black;
-}
 div#topbar .menuitem:hover{
-	background-color: white;
+	background-color: lightgray;
+}
+div#topbar .menu{
 	color: black;
-	border-bottom-color: black;
 }
 div.topbar-right{
 	float: right;
@@ -64,9 +63,6 @@ div.topbar-right{
 div.topbar-left{
 	float: left;
 }
-a.topbar-home{
-	background-color: darkred;
-}
 a.topbar-home:hover{
 	background-color: gray !important;
 }
@@ -144,14 +140,39 @@ span.icon-bugs-invert{
 	border-style: solid;
 	border-width: 1px;
 }
+.top{
+	z-index: 2147483638;
+}
 @media screen and (max-width: 767px){
-	div#topbar .menuitem, !a.topbar-home{
+	div#topbar a.menuitem:not(.topbar-home){
 		padding-left: 5px;
 		padding-right: 5px;
 	}
+	div.topbar-left .menuitem{
+		border-style: solid;
+		border-color: black;
+		border-width: 0;
+		border-right-width: 1px;
+		border-left-width: 1px;
+	}
+	div.topbar-right .menuitem{
+		border-style: solid;
+		border-color: black;
+		border-width: 1px;
+		margin-bottom: -1px;
+	}
 	a.topbar-home{
 		padding: 0;
 	}
+	div.topbar-left a.topbar-current{
+		float: right !important;
+	}
+	div.topbar-right a.topbar-current{
+		position: absolute;
+		right: 1px;
+		top: 0;
+		width: auto;
+	}
 	div.topbar-right{
 		display: none;
 	}
@@ -162,30 +183,21 @@ span.icon-bugs-invert{
 		clear: both;
 		float: right !important;
 		width: 100%;
-		border-left-style: none !important;
-	}
-	a.topbar-current{
-		float: right !important;
 	}
 	a.topbar-back,a.topbar-history,a.topbar-index{
 		width: 35px !important;
 		position: absolute;
 		top: 0;
 		padding: 0 !important;
-		border-bottom: 1px solid white !important;
-	}
-	a.topbar-back{
-		background-color: darkred;
-		left: 0;
 	}
 	a.topbar-back:hover{
 		background-color: gray !important;
 	}
 	a.topbar-history{
-		left: 36px;
+		left: 37px;
 	}
 	a.topbar-index{
-		left: 72px;
+		left: 73px;
 		width: auto !important;
 		padding-right: 5px !important;
 	}
@@ -206,6 +218,11 @@ span.icon-bugs-invert{
 		font-size: 15px;
 		padding-left: 5px;
 		padding-right: 5px;
+		border-style: solid;
+		border-color: black;
+		border-width: 0;
+		border-right-width: 1px;
+		border-left-width: 1px;
 	}
 	div#topbar .menuitem:hover + a{
 		border-left-color: black;
@@ -216,6 +233,9 @@ span.icon-bugs-invert{
 	div.topbar-right{
 		height: 100%;
 	}
+	div.topbar-right a.topbar-current{
+		display: none;
+	}
 	a.topbar-index{
 		display: none;
 	}

+ 6 - 0
data/pages/project.template

@@ -0,0 +1,6 @@
+<h3>
+	{{title}}
+</h3>
+<div>
+	{{description}}
+</div>

+ 3 - 0
data/pages/projects.options

@@ -0,0 +1,3 @@
+[
+	"projects"
+]

+ 4 - 4
data/pages/projects.template

@@ -3,15 +3,15 @@
 		New
 	</a>
 {{/if}}
-<div id="accordion">
+<div class="accordion">
 	{{#each projects}}
 		<h3>
-			{{name}}
-		</h3>
-		<div>
+			{{title}}
 			<a href="#project-{{id}}" class="button">
 				Open
 			</a>
+		</h3>
+		<div>
 			{{description}}
 		</div>
 	{{/each}}

+ 44 - 30
data/pages/topbar.template

@@ -28,7 +28,10 @@
 		&larr;
 	</a>
 	<a class="topbar-index menuitem" href="#page-index">
-		<span class="icon-bugs-invert"></span>Home
+		<span class="icon-bugs"></span>Home
+	</a>
+	<a class="topbar-current menuitem" href="#{{url}}">
+		{{title}}
 	</a>
 	{{#unless key}}
 		<a class="menuitem" href="#page-register">
@@ -38,36 +41,47 @@
 			Login
 		</a>
 	{{else}}
-		<span class="menuitem screen-large" onclick="$(this).next().toggle();">
-			{{user.name}}
+		<span class="menuitem screen-large" onclick="$(this).children('.menu').css({'left':$(this).position().left}).toggle();">
+			<span style="float:left">
+				Menu
+			</span>
+			<span class="ui-icon ui-icon-circle-triangle-s" style="float:right;margin-top:9px;"></span>
+			<ul class="menu top" style="display:none;margin-top:35px;position:absolute;right:0;">
+				<li>
+					<a href="#page-projects">
+						Projects
+					</a>
+				</li>
+				<li>
+					<a href="#page-issues">
+						Issues
+					</a>
+				</li>
+				<li>
+					<a href="#page-users">
+						Users
+					</a>
+				</li>
+			</ul>
+		</span>
+		<span class="menuitem screen-large" onclick="$(this).children('.menu').toggle();">
+			<span style="float:left">
+				{{user.name}}
+			</span>
+			<span class="ui-icon ui-icon-circle-triangle-s" style="float:right;margin-top:9px;"></span>
+			<ul class="menu top" style="display:none;margin-top:35px;position:absolute;right:0;">
+				<li>
+					<a href="#~{{user.name}}">
+						Profile
+					</a>
+				</li>
+				<li>
+					<a href="#page-logout">
+						Logout
+					</a>
+				</li>
+			</ul>
 		</span>
-		<ul class="menu" style="display: none;margin-top:35px;position:absolute;right:0;">
-			<li>
-				<a href="#page-projects">
-					Projects
-				</a>
-			</li>
-			<li>
-				<a href="#page-issues">
-					Issues
-				</a>
-			</li>
-			<li>
-				<a href="#page-users">
-					Users
-				</a>
-			</li>
-			<li>
-				<a href="#~{{user.name}}">
-					Profile
-				</a>
-			</li>
-			<li>
-				<a href="#page-logout">
-					Logout
-				</a>
-			</li>
-		</ul>
 		<span class="screen-small">
 			<a class="menuitem" href="#~{{user.name}}">
 				Profile

+ 1 - 1
js/index.js

@@ -291,7 +291,7 @@
 			if(!equal(State.data,Old)){
 				document.title = State.title;
 				switch(State.data.type){
-					case 'page':case 'user':
+					case 'page':case 'user':case 'project':
 						apiCall(State.data,function(d){
 							if(exists(d.context)){
 								if(!exists(d.context.key)&&Key!==null){

+ 1 - 0
php/include.php

@@ -11,6 +11,7 @@
 	require_once(PATH_PHP.'security.php');
 	require_once(PATH_PHP.'captcha.php');
 	require_once(PATH_PHP.'user.php');
+	require_once(PATH_PHP.'project.php');
 	require_once(PATH_PHP.'emails.php');
 	authenticate();
 ?>

+ 13 - 0
php/project.php

@@ -0,0 +1,13 @@
+<?php
+	require_once(realpath(dirname(__FILE__)).'/config.php');
+	require_once(PATH_PHP.'database.php');
+	global $mysqli;
+	function projectObj($id){
+		if($res = query("SELECT * FROM `projects` WHERE id='%d'",Array($id))){
+			if($res->num_rows == 1){
+				return $res->fetch_assoc();
+			}
+		}
+		return false;
+	}
+?>

+ 1 - 1
php/user.php

@@ -2,7 +2,7 @@
 	require_once(realpath(dirname(__FILE__)).'/config.php');
 	require_once(PATH_PHP.'database.php');
 	require_once(PATH_PHP.'security.php');
-	$mysqli = $GLOBALS['mysqli'];
+	global $mysqli;
 	function addUser($username,$password,$email){
 		global $mysqli;
 		$salt = $mysqli->escape_string(salt());