Skip to content

Commit 4491e7c

Browse files
committed
Merge pull request #112 from ElDeveloper/madne-css
Revamp GUI to be homogeneous
2 parents baf3432 + 7fde585 commit 4491e7c

File tree

7 files changed

+125
-171
lines changed

7 files changed

+125
-171
lines changed

qiita_pet/static/css/style.css

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,3 @@
22
padding: 20px;
33
}
44

5-
/* navbar code from http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu */
6-
nav {
7-
padding: 0px;
8-
margin: 0px;
9-
font-size: 18px;
10-
text-align: center;
11-
}
12-
13-
nav ul ul {
14-
display: none;
15-
}
16-
17-
nav ul li:hover > ul {
18-
display: block;
19-
}
20-
21-
22-
nav ul {
23-
background: #A7A9AC;
24-
padding: 0 20px;
25-
list-style: none;
26-
position: relative;
27-
}
28-
nav ul:after {
29-
content: "";
30-
clear: both;
31-
display: block;
32-
}
33-
34-
nav ul li {
35-
float: left;
36-
}
37-
nav ul li:hover {
38-
background: #999;
39-
}
40-
nav ul li:hover a {
41-
color: #000;
42-
}
43-
44-
nav ul li a {
45-
display: block;
46-
padding: 10px 10px;
47-
color: #000;
48-
text-decoration: none;
49-
50-
}
51-
52-
53-
nav ul ul {
54-
background: #999;
55-
border-radius: 0px;
56-
padding: 0;
57-
position: absolute; top: 100%;
58-
}
59-
nav ul ul li {
60-
float: none;
61-
border-top: 1px solid #999;
62-
border-bottom: 1px solid #999;
63-
position: relative;
64-
}
65-
nav ul ul li a {
66-
padding: 10px 10px;
67-
color: #000;
68-
}
69-
nav ul ul li a:hover {
70-
background: #888;
71-
}
72-
73-
nav ul ul ul {
74-
position: absolute; left: 100%;
75-
top:0;
76-
}

qiita_pet/static/img/favicon.ico

32.2 KB
Binary file not shown.

qiita_pet/static/img/logo-clear.png

13.6 KB
Loading

qiita_pet/static/img/logo.png

-1.66 KB
Loading

qiita_pet/templates/create_analysis.html

Lines changed: 0 additions & 21 deletions
This file was deleted.

qiita_pet/templates/index.html

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@
44

55
{%block content %}
66
<div class="jumbotron">
7-
<h2>Welcome to Qiita.</h2>
7+
<h1>Welcome to Qiita</h1>
8+
<p align="justify">
9+
Qiita is a development effort powering the data analysis and storage for the Human Microbiome Project phase two of the Human Microbiome Project, a new three-year "multi-omic" study investigating the roles played by microbes and their interactions with the human body. Using inflammatory bowel disease as our focus, this project will delve into the relationship between the microbiome and disease.
10+
</p>
11+
</ br>
12+
<p align="right">
13+
<small>
14+
<i>Text taken from <a href="https://ibdmdb.org">https://ibdmdb.org</a>.</i>
15+
</small>
16+
</p>
817
</div>
9-
{% end %}
18+
{% end %}

qiita_pet/templates/sitebase.html

Lines changed: 114 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,124 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
22
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
3-
<head>
4-
<title>Qiita</title>
5-
<link rel="stylesheet" href="/static/vendor/css/bootstrap.min.css" type="text/css">
6-
<link rel="stylesheet" href="/static/vendor/css/bootstrap-theme.min.css" type="text/css">
7-
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
3+
<head>
4+
<title>Qiita</title>
5+
<link rel="stylesheet" href="/static/vendor/css/bootstrap.min.css" type="text/css">
6+
<link rel="stylesheet" href="/static/vendor/css/bootstrap-theme.min.css" type="text/css">
7+
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
88

9-
<script src="/static/vendor/js/jquery-2.1.0.min.js"></script>
10-
<script src="/static/vendor/js/bootstrap.min.js"></script>
11-
<script src="/static/vendor/js/dropdown.min.js"></script>
9+
<script src="/static/vendor/js/jquery-2.1.0.min.js"></script>
10+
<script src="/static/vendor/js/bootstrap.min.js"></script>
1211

13-
{% block head %}{% end %}
14-
</head>
15-
<body>
12+
<link rel="shortcut icon" href="/static/img/favicon.ico">
1613

17-
<table width='100%' border="0" style="background:#A7A9AC">
18-
<tr style="padding-top:3px; padding-bottom:3px; padding-right:3px; padding-left:3px;">
19-
<td width="15%"><img src="/static/img/logo.png"></td>
20-
<td width="60%" style="text-align:center;">
21-
<nav>
22-
<ul>
23-
<li><a href="/">Home</a></li>
24-
{% if user != '' %}
25-
<li>
26-
<a href="/analysis/1" target="_parent">Meta Analysis</a>
27-
<ul>
28-
<li><a href="/analysis/1" target="_parent">New Meta-Analysis</a></li>
29-
<li><a href="/running/" target="_parent">Running Meta-Analyses</a></li>
30-
</ul>
31-
</li>
32-
<!--
33-
<li>
34-
<a href="" target="_parent">Tools</a>
35-
</li>
36-
-->
37-
{% end %}
38-
<li><a href="mailto:qiita.help@gmail.com" target="_blank">Help</a></li>
39-
</ul>
40-
</nav>
41-
</td>
42-
<td width="45%" id="study_info">
43-
{% if user %}
44-
<div class="nav navbar-nav navbar-right" style="color: white;">Welcome <a href="/profile/">{{user}}</a> | <a href="/auth/logout/">Log Out</a></div>
45-
{% else %}
46-
<div class="nav">
47-
{% try %}
48-
<span style="color: red;">{{loginerror}}</span>
49-
{% except %}
50-
</span>
51-
{% end %}
52-
<form class="navbar-form" role="form" action="/auth/login/" method="post">
53-
<table width="100%">
54-
<tr>
55-
<td>
56-
<div class="form-group">
57-
<input type="text" id="username" name="username" placeholder="Email" class="form-control">
14+
{% block head %}{% end %}
15+
</head>
16+
<body style="padding-top: 65px;">
17+
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
18+
<div class="container">
19+
<div class="navbar-header">
20+
<!-- button that appears if the window is re-sized to a smaller size -->
21+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
22+
<span class="sr-only">Toggle navigation</span>
23+
<span class="icon-bar"></span>
24+
<span class="icon-bar"></span>
25+
<span class="icon-bar"></span>
26+
</button>
5827
</div>
59-
</td>
60-
<td>
61-
<div class="form-group">
62-
<input type="password" id="password" name="password" placeholder="Password" class="form-control">
63-
</div>
64-
</td>
65-
<td>
66-
<button type="submit" class="btn btn-success">Sign in</button>
67-
</td>
68-
</tr>
69-
</table>
70-
</form>
71-
<a href="/auth/create/">New User</a> | <a href="/forgot/">Forgot Password</a>
28+
29+
<div class="navbar-collapse collapse">
30+
<ul class="nav navbar-nav">
31+
<li>
32+
<!-- qiita logo -->
33+
<a class="navbar-brand" rel="home" href="/" title="Qiita">
34+
<img style="max-width:100px; margin-top: -7px;" src="/static/img/logo-clear.png">
35+
</a>
36+
</li>
37+
<!-- meta-analysis menu -->
38+
{% if user != '' %}
39+
<li class="dropdown">
40+
<a href="/analysis/1" data-toggle="dropdown" class="dropdown-toggle">Meta Analysis<b class="caret"></b></a>
41+
<ul class="dropdown-menu">
42+
<li><a data-toggle="modal" data-target="#create-analysis-modal-view">Create Meta Analysis</a></li>
43+
<li><a href="#">See Running Analyses</a></li>
44+
<li><a href="#">See Old Analyses</a>
45+
</ul>
46+
</li>
47+
{% end %}
48+
<!-- generic elements -->
49+
<li>
50+
<a href="#">Help</a>
51+
</li>
52+
<li>
53+
<a href="http://github.com/biocore/qiita">GitHub</a>
54+
</li>
55+
</ul>
56+
<!-- show user name and logout button if there's a user logged in -->
57+
{% if user %}
58+
<ul class="nav navbar-nav pull-right">
59+
<li>
60+
<a href="/profile/">Welcome {{user}}</a>
61+
</li>
62+
<li class="pull-right">
63+
<a href="/auth/logout/">Log Out</a>
64+
</li>
65+
</ul>
66+
<!-- otherwise show the login form -->
67+
{% else %}
68+
{% try %}
69+
<span style="color: red;">{{loginerror}}</span>
70+
{% except %}
71+
</span>
72+
{% end %}
73+
<form class="navbar-form navbar-right" role="form" action="/auth/login/" method="post">
74+
<div class="form-group">
75+
<input type="text" id="username" name="username" placeholder="Email" class="form-control">
76+
</div>
77+
<div class="form-group">
78+
<input type="password" id="password" name="password" placeholder="Password" class="form-control">
79+
</div>
80+
<button type="submit" class="btn btn-success">Sign in</button>
81+
</form>
82+
{% end %}
83+
</div><!--/.navbar-collapse -->
7284
</div>
73-
{%end%}
74-
</td>
75-
</tr>
76-
</table>
85+
</div> <!--/.main nav-bar -->
7786

78-
<div id="template-content">
79-
{% block content %}{% end %}
80-
</div>
87+
<!-- all templates should override this portion to present their main content -->
88+
<div id="template-content" class="container">
89+
{% block content %}{% end %}
90+
</div>
8191

82-
<div id="footer">
83-
</div>
92+
<!-- modal view to enter analysis information -->
93+
<div class="modal fade" id="create-analysis-modal-view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
94+
<div class="modal-dialog">
95+
<div class="modal-content">
96+
<div class="modal-header">
97+
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
98+
<h4 class="modal-title" id="myModalLabel">Create new meta-analysis</h4>
99+
</div>
100+
<form role="form" action="/analysis/2" method="post">
101+
<div class="modal-body">
102+
<div>
103+
<div class="form-group">
104+
<label for="name">Analysis name</label>
105+
<input type="text" class="form-control" id="name" name="name" placeholder="Analysis name">
106+
</div>
107+
<div class="form-group">
108+
<label for="description">Description</label>
109+
<input type="text" class="form-control" id="description" name="description" placeholder="Short description">
110+
</div>
111+
</div>
112+
</div>
113+
<div class="modal-footer">
114+
<button type="submit" class="btn btn-primary">Create analysis</button>
115+
</div>
116+
</form>
117+
</div>
118+
</div>
119+
</div>
84120

85-
</body>
86-
</html>
121+
<div id="footer">
122+
</div>
123+
</body>
124+
</html>

0 commit comments

Comments
 (0)