Home Explore Help
Register Sign In
Omnimaga
/
bugs
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Lots of UI changes

Nathaniel van Diepen 10 years ago
parent
a1cafabcd7
commit
feabbbde11
10 changed files with 238 additions and 75 deletions
Split View Show Diff Stats
  1. 1 0
      .htaccess
  2. 8 8
      css/fonts.css
  3. 46 8
      css/style.css
  4. 28 11
      data/pages/login.template
  5. 18 0
      data/pages/projects.template
  6. 47 18
      data/pages/register.template
  7. 53 24
      data/pages/topbar.template
  8. 3 0
      img/index.php
  9. 6 6
      index.php
  10. 28 0
      js/index.js

+ 1 - 0
.htaccess
View File 

@@ -10,6 +10,7 @@
 
 	RewriteRule ^\+([^/]*)$ /index.php?type=group&id=$1 [QSA,L]
 
 	RewriteRule ^\!([^/]*)$ /index.php?type=issue&id=$1 [QSA,L]
 
 	RewriteRule ^scrum-([^/]*)$ /index.php?type=scrum&id=$1 [QSA,L]
 
+	RewriteRule ^project-([^/]*)$ /index.php?type=project&id=$1 [QSA,L]
 
 	RewriteRule ^admin-([^/]*)$ /index.php?type=admin&id=$1 [QSA,L]
 
 	RewriteRule ^page-([^/]*)$ /index.php?type=page&id=$1 [QSA,L]
 
 	ErrorDocument 404 /

+ 8 - 8
css/fonts.css
View File 

@@ -2,29 +2,29 @@
 
 	font-family: 'FiraSans';
 
 	word-wrap: break-word;
 
 }
 
-body{
 
+body,input[type=text],input[type=password]{
 
 	font-size: 130%;
 
 	line-height: 1.6875;
 
 }
 
+pre {
 
+	font-family: 'FiraMono';
 
+	white-space: pre-wrap;
 
+}
 
 @media only screen and (min-width: 400px){
 
-	body{
 
+	body,input[type=text],input[type=password]{
 
 		font-size: 120%;
 
 	}
 
 }
 
 @media only screen and (min-width: 800px){
 
-	body{
 
+	body,input[type=text],input[type=password]{
 
 		font-size: 100%;
 
 	}
 
 }
 
 @media only screen and (min-width: 1100px){
 
-	body{
 
+	body,input[type=text],input[type=password]{
 
 		font-size: 90%;
 
 	}
 
 }
 
-pre {
 
-	font-family: 'FiraMono';
 
-	white-space: pre-wrap;
 
-}
 
 @font-face {
 
 	font-family: 'FiraSans';
 
 	src: url('fonts/FiraSans/FiraSans/FiraSans-Regular.eot');

+ 46 - 8
css/style.css
View File 

@@ -20,7 +20,7 @@ p{
 
 	top: 0 !important;
 
 }
 
 div#topbar{
 
-	width: 100%;
 
+	width: calc(100% - 2px);
 
 	border-color: black;
 
 	border-style: solid;
 
 	border-width: 1px;
 
@@ -31,7 +31,7 @@ div#topbar{
 
 div.topbar-left{
 
 	height: 100%;
 
 }
 
-div#topbar a{
 
+div#topbar .menuitem{
 
 	color: white;
 
 	text-decoration: none;
 
 	text-transform: capitalize;
 
@@ -50,7 +50,10 @@ div#topbar a{
 
 	cursor: pointer;
 
 	min-width: 35px;
 
 }
 
-div#topbar a:hover{
 
+div#topbar .menu{
 
+	color: black;
 
+}
 
+div#topbar .menuitem:hover{
 
 	background-color: white;
 
 	color: black;
 
 	border-bottom-color: black;
 
@@ -106,8 +109,43 @@ span.icon-bugs-invert{
 
 .screen-small, .screen-large{
 
 	display: none;
 
 }
 
+.table{
 
+	display: table;
 
+}
 
+.row{
 
+	display: table-row;
 
+}
 
+.cell{
 
+	display: table-cell;
 
+}
 
+.column{
 
+	display: table-column;
 
+}
 
+.fill,.fill-width{
 
+	width: 100%;
 
+}
 
+.fill,.fill-height{
 
+	height: 100%;
 
+}
 
+.align-right{
 
+	text-align: right;
 
+}
 
+.align-left{
 
+	text-align: left;
 
+}
 
+.align-center{
 
+	text-align: center;
 
+}
 
+.block{
 
+	display: block;
 
+}
 
+.outline{
 
+	border-color: black;
 
+	border-style: solid;
 
+	border-width: 1px;
 
+}
 
 @media screen and (max-width: 767px){
 
-	div#topbar a, !a.topbar-home{
 
+	div#topbar .menuitem, !a.topbar-home{
 
 		padding-left: 5px;
 
 		padding-right: 5px;
 
 	}
 
@@ -160,16 +198,16 @@ span.icon-bugs-invert{
 
 		padding-top: 35px;
 
 	}
 
 	.screen-small{
 
-		display: inline-block;
 
+		display: block;
 
 	}
 
 }
 
 @media screen and (min-width: 768px){
 
-	div#topbar a{
 
+	div#topbar .menuitem{
 
 		font-size: 15px;
 
 		padding-left: 5px;
 
 		padding-right: 5px;
 
 	}
 
-	div#topbar a:hover + a{
 
+	div#topbar .menuitem:hover + a{
 
 		border-left-color: black;
 
 	}
 
 	a.topbar-back{
 
@@ -182,7 +220,7 @@ span.icon-bugs-invert{
 
 		display: none;
 
 	}
 
 	.screen-large{
 
-		display: inline-block;
 
+		display: block;
 
 	}
 
 }
 
 @viewport{

+ 28 - 11
data/pages/login.template
View File 

@@ -1,21 +1,38 @@
 
-<h1>
 
-	{{title}}
 
-</h1>
 
-<form id="login">
 
-	<div>
 
-		Username: <input name="username" type="text"/>
 
+<form id="form" class="table outline ui-corner-all">
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			<label from="login" for="login-username">
 
+				Username:
 
+			</label>
 
+		</span>
 
+		<span class="cell">
 
+			<input name="username" id="login-username" type="text"/>
 
+		</span>
 
 	</div>
 
-	<div>
 
-		Password: <input name="password" type="password"/>
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			<label from="login" for="login-password">
 
+				Password:
 
+			</label>
 
+		</span>
 
+		<span class="cell">
 
+			<input id="login-password" name="password" type="password"/>
 
+		</span>
 
+	</div>
 
+	<div class="row">
 
+		<div class="cell align-right">
 
+			<input type="submit" value="login"/>
 
+		</div>
 
+		<div class="cell">
 
+			<input type="button" value="cancel" class="cancel"/>
 
+		</div>
 
 	</div>
 
-	<input type="submit" value="login"/>
 
-	<input type="button" value="cancel" class="cancel"/>
 
 </form>
 
 <script>
 
 	{{#if key}}
 
 		History.back();
 
 	{{else}}
 
-		$('form#login').submit(function(){
 
+		$('form#form').submit(function(){
 
 			var data = $(this).serializeObject(),
 
 				State = History.getState();
 
 			for(var i in State.data){

+ 18 - 0
data/pages/projects.template
View File 

@@ -0,0 +1,18 @@
 
+{{#if key}}
 
+	<a class="button" href="#page-newproject">
 
+		New
 
+	</a>
 
+{{/if}}
 
+<div id="accordion">
 
+	{{#each projects}}
 
+		<h3>
 
+			{{name}}
 
+		</h3>
 
+		<div>
 
+			<a href="#project-{{id}}" class="button">
 
+				Open
 
+			</a>
 
+			{{description}}
 
+		</div>
 
+	{{/each}}
 
+</div>

+ 47 - 18
data/pages/register.template
View File 

@@ -1,32 +1,61 @@
 
-<h1>
 
-	{{title}}
 
-</h1>
 
-<form id="register">
 
-	<div>
 
-		Email: <input name="email" type="text"/>
 
+<form id="form" class="table outline ui-corner-all">
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			Email:
 
+		</span>
 
+		<span class="cell">
 
+			<input name="email" type="text"/>
 
+		</span>
 
 	</div>
 
-	<div>
 
-		Username: <input name="username" type="text"/>
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			Username:
 
+		</span>
 
+		<span id="cell">
 
+			<input name="username" type="text"/>
 
+		</span>
 
 	</div>
 
-	<div>
 
-		Password: <input name="password" type="password"/>
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			Password:
 
+		</span>
 
+		<span class="cell">
 
+			<input name="password" type="password"/>
 
+		</span>
 
 	</div>
 
-	<div>
 
-		Verify Password: <input name="password1" type="password"/>
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			Verify Password:
 
+		</span>
 
+		<span class="cell">
 
+			<input name="password1" type="password"/>
 
+		</span>
 
 	</div>
 
-	<div>
 
+	<div class="align-right">
 
 		<image id="captcha" src="index.php?get=captcha"/>
 
-		<br/>
 
-		Captcha: <input name="captcha" type="text"/>
 
 	</div>
 
-	<input type="submit" value="register"/>
 
-	<input type="button" value="cancel" class="cancel"/>
 
+	<div class="row">
 
+		<span class="cell align-right">
 
+			Captcha:
 
+		</span>
 
+		<span class="cell">
 
+			<input name="captcha" type="text"/>
 
+		</span>
 
+	</div>
 
+	<div class="row">
 
+		<div class="cell align-right">
 
+			<input type="submit" value="register"/>
 
+		</div>
 
+		<div class="cell">
 
+			<input type="button" value="cancel" class="cancel"/>
 
+		</div>
 
+	</div>
 
 </form>
 
 <script>
 
 	{{#if key}}
 
 		History.back();
 
 	{{else}}
 
-		$('form#register').submit(function(){
 
+		$('form#form').submit(function(){
 
 			var data = $(this).serializeObject(),
 
 					State = History.getState();
 
 				for(var i in State.data){

+ 53 - 24
data/pages/topbar.template
View File 

@@ -7,7 +7,7 @@
 
 		&#128281;	Arrow with back under
 
 -->
 
 <div class="topbar-left">
 
-	<a class="topbar-home" href="#page-index">
 
+	<a class="topbar-home menuitem" href="#page-index">
 
 		<span class="screen-large">
 
 			<span class="icon-bugs"></span>
 
 			Home
 
@@ -16,45 +16,74 @@
 
 			&#8801;
 
 		</span>
 
 	</a>
 
-	<a class="topbar-current" href="#{{url}}">
 
+	<a class="topbar-current menuitem" href="#{{url}}">
 
 		{{title}}
 
 	</a>
 
 </div>
 
 <div class="topbar-right">
 
-	<a class="topbar-back" href="#{{url}}">
 
+	<a class="topbar-back menuitem" href="#{{url}}">
 
 		&#8801;
 
 	</a>
 
-	<a class="topbar-history" href="#page-index">
 
+	<a class="topbar-history menuitem" href="#page-index">
 
 		&larr;
 
 	</a>
 
-	<a class="topbar-index" href="#page-index">
 
+	<a class="topbar-index menuitem" href="#page-index">
 
 		<span class="icon-bugs-invert"></span>Home
 
 	</a>
 
 	{{#unless key}}
 
-		<a href="#page-users">
 
-			Users
 
-		</a>
 
-		<a href="#page-register">
 
+		<a class="menuitem" href="#page-register">
 
 			Register
 
 		</a>
 
-		<a href="#page-login">
 
+		<a class="menuitem" href="#page-login">
 
 			Login
 
 		</a>
 
 	{{else}}
 
-		<a href="#page-issues">
 
-			Issues
 
-		</a>
 
-		<a href="#page-projects">
 
-			Projects
 
-		</a>
 
-		<a href="#page-users">
 
-			Users
 
-		</a>
 
-		<a href="#~{{user.name}}">
 
+		<span class="menuitem screen-large" onclick="$(this).next().toggle();">
 
 			{{user.name}}
 
-		</a>
 
-		<a href="#page-logout">
 
-			Logout
 
-		</a>
 
+		</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
 
+			</a>
 
+			<a class="menuitem" href="#page-Projects">
 
+				Projects
 
+			</a>
 
+			<a class="menuitem" href="#page-issues">
 
+				Issues
 
+			</a>
 
+			<a class="menuitem" href="#page-users">
 
+					Users
 
+				</a>
 
+			<a class="menuitem" href="#page-logout">
 
+				Logout
 
+			</a>
 
+		</span>
 
 	{{/unless}}
 
 </div>

+ 3 - 0
img/index.php
View File 

@@ -0,0 +1,3 @@
 
+<?php
 
+	header('Location: ../');
 
+?>

+ 6 - 6
index.php
View File 

@@ -8,10 +8,6 @@
 
 			@rmdir('install');
 
 		}
 
 	}
 
-	if(!isset($_GET['type'])||!isset($_GET['id'])){
 
-		header('Location: page-index');
 
-		die();
 
-	}
 
 	require_once('php/include.php');
 
 	$salt = salt();
 
 	if(isset($_GET['get'])){
 
@@ -56,6 +52,10 @@
 
 			break;
 
 		}
 
 	}
 
+	if(!isset($_GET['type'])||!isset($_GET['id'])){
 
+		header('Location: page-index');
 
+		die();
 
+	}
 
 ?>
 
 <!doctype html>
 
 <html manifest="bugs.appcache">
 
@@ -71,7 +71,7 @@
 
 		<link rel="apple-touch-startup-image" href="img/startup.png">
 
 		<link rel="shortcut icon" href="img/favicon.ico" />
 
 		<link rel="icon" type="image/png" href="img/favicon-60.png" />
 
-		<link href="http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css"/>
 
+		<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
 
 		<link href="css/style.css" rel="stylesheet" type="text/css"/>
 
 		<title>Bugs</title>
 
 		<script src="js/modernizr.js"></script>
 
@@ -114,7 +114,7 @@
 
 		<script src="js/index.js"></script>
 
 	</head>
 
 	<body lang="en">
 
-		<div id="topbar"></div>
 
+		<div id="topbar" class="ui-corner-bottom"></div>
 
 		<div id="content" class="container"></div>
 
 		<div id="loading"></div>
 
 	</body>

+ 28 - 0
js/index.js
View File 

@@ -212,6 +212,8 @@
 
 			topbar: function(t,c){
 
 				$('#topbar').html(Handlebars.compile(t)(c));
 
 				render.links('#topbar');
 
+				render.buttons('#topbar');
 
+				render.menus('#topbar');
 
 				$(window).resize();
 
 			},
 
 			content: function(t,c){
 
@@ -219,8 +221,33 @@
 
 					Handlebars.compile(t)(c)
 
 				);
 
 				render.links('#content');
 
+				render.buttons('#content');
 
+				render.accordions('#content');
 
+				render.menus('#content');
 
+				render.form('#content');
 
 				$(window).resize();
 
 			},
 
+			accordions: function(selector){
 
+				$(selector).find('.accordion').accordion();
 
+			},
 
+			buttons: function(selector){
 
+				$(selector).find('.button').button();
 
+				$(selector).find('input[type=submit]').button();
 
+				$(selector).find('input[type=button]').button();
 
+				$(selector).find('button').button();
 
+			},
 
+			menus: function(selector){
 
+				$(selector).find('.menu').css({
 
+					'list-style':'none'
 
+				}).menu({
 
+					icons:{
 
+						submenu: "ui-icon-circle-triangle-e"
 
+					}
 
+				}).removeClass('ui-corner-all').addClass('ui-corner-bottom');
 
+			},
 
+			form: function(selector){
 
+				$(selector).find('#form').position({of:selector,my:'center',at:'center'});
 
+			},
 
 			links: function(selector){
 
 				$(selector).find('a').each(function(){
 
 					var href = this.href;
 
@@ -316,6 +343,7 @@
 
 			}
 
 			$('#content').height($('body').height()-$('#topbar').height());
 
 			$('#content').getNiceScroll().resize();
 
+			render.form('#content');
 
 		});
 
 		var data = {
 
 			get: 'settings',