improve search page design ・ 7f8709f ・ Gitprep

- improve search page design;
- Browse files
- Yuki Kimoto commited on 2016-01-23
- 1 parent ef7cb9a
  
  commit 7f8709f45f9fe248531331ade8624f6e50ec64e3

Showing 2 changed files with 146 additions and 67 deletions

+80

public/css/bootstrap.css

...	...	@@ -35,6 +35,14 @@
35	35	box-sizing: border-box;
36	36	}
37	37
	38	+.text-gray { color:#767676 }
	39	+
	40	+input[type=text], input[type=password] {
	41	+ border:1px solid #d8d8d8;
	42	+ border-radius: 3px;
	43	+ padding:6px 5px;
	44	+}
	45	+
38	46	.container {
39	47	width: 980px;
40	48	margin:0 auto;
...	...	@@ -2181,6 +2189,76 @@ button.close {
2181	2189	min-height:1px;
2182	2190	}
2183	2191
	2192	+.search-top {
	2193	+ border-bottom:1px solid #d8d8d8;
	2194	+ margin-bottom:20px;
	2195	+ padding-bottom:20px;
	2196	+}
	2197	+
	2198	+.search-top input {
	2199	+ margin-left:5px;
	2200	+}
	2201	+
	2202	+.search-top > div:first-child {
	2203	+ font-size:19px;
	2204	+ display:inline-block;
	2205	+}
	2206	+
	2207	+.search-top form {
	2208	+ display:inline-block;
	2209	+}
	2210	+
	2211	+.search-result {
	2212	+ overflow:hidden;
	2213	+}
	2214	+
	2215	+.search-result .left {
	2216	+ float:left;
	2217	+ width:15%;
	2218	+ padding-right:10px;
	2219	+}
	2220	+
	2221	+.search-result .left li {
	2222	+ border:1px solid #d8d8d8;
	2223	+ border-top:none;
	2224	+ padding:7px 10px;
	2225	+}
	2226	+
	2227	+.search-result .left li:first-child {
	2228	+ border-top:1px solid #d8d8d8;
	2229	+}
	2230	+
	2231	+.search-result .right {
	2232	+ float:left;
	2233	+ width:85%;
	2234	+ padding-left:15px;
	2235	+}
	2236	+
	2237	+.search-result .right li {
	2238	+ border-bottom: 1px solid #d8d8d8;
	2239	+ padding:5px 0px;
	2240	+ margin-bottom:10px;
	2241	+}
	2242	+
	2243	+.search-result .right li > div {
	2244	+ padding-bottom:1px;
	2245	+}
	2246	+
	2247	+.search-result .right > div:first-child {
	2248	+ font-size:18px;
	2249	+ padding-bottom:10px;
	2250	+ margin-bottom:10px;
	2251	+ border-bottom:1px solid #EEEEEE;
	2252	+ font-weight:bold;
	2253	+}
	2254	+
	2255	+.search-result .left li.active a {
	2256	+ color:black;
	2257	+ font-weight:bold;
	2258	+ text-decoration:none;
	2259	+}
	2260	+
	2261	+
2184	2262	.project-settings {
2185	2263	overflow:hidden;
2186	2264	}
...	...	@@ -2358,3 +2436,5 @@ button.close {
2358	2436	width:100%;
2359	2437	min-height:200px;
2360	2438	}
	2439	+
	2440	+.pagination-num{margin:20px 0}.pagination-num ul{display:inline-block;display:inline;margin-bottom:0;margin-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;zoom:1;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.05);box-shadow:0 1px 2px rgba(0,0,0,0.05)}.pagination-num ul>li{display:inline}.pagination-num ul>li>a,.pagination-num ul>li>span{float:left;padding:4px 12px;line-height:20px;text-decoration:none;background-color:#fff;border:1px solid #ddd;border-left-width:0}.pagination-num ul>li>a:hover,.pagination-num ul>li>a:focus,.pagination-num ul>.active>a,.pagination-num ul>.active>span{background-color:#f5f5f5}.pagination-num ul>.active>a,.pagination-num ul>.active>span{color:#999;cursor:default}.pagination-num ul>.disabled>span,.pagination-num ul>.disabled>a,.pagination-num ul>.disabled>a:hover,.pagination-num ul>.disabled>a:focus{color:#999;cursor:default;background-color:transparent}.pagination-num ul>li:first-child>a,.pagination-num ul>li:first-child>span{border-left-width:1px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-webkit-border-top-left-radius:4px;border-top-left-radius:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-topleft:4px}.pagination-num ul>li:last-child>a,.pagination-num ul>li:last-child>span{-webkit-border-top-right-radius:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px}.pagination-num-centered{text-align:center}.pagination-num-right{text-align:right}.pagination-num-large ul>li>a,.pagination-num-large ul>li>span{padding:11px 19px;font-size:17.5px}.pagination-num-large ul>li:first-child>a,.pagination-num-large ul>li:first-child>span{-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-webkit-border-top-left-radius:6px;border-top-left-radius:6px;-moz-border-radius-bottomleft:6px;-moz-border-radius-topleft:6px}.pagination-num-large ul>li:last-child>a,.pagination-num-large ul>li:last-child>span{-webkit-border-top-right-radius:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-right-radius:6px;-moz-border-radius-topright:6px;-moz-border-radius-bottomright:6px}.pagination-num-mini ul>li:first-child>a,.pagination-num-small ul>li:first-child>a,.pagination-num-mini ul>li:first-child>span,.pagination-num-small ul>li:first-child>span{-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px}.pagination-num-mini ul>li:last-child>a,.pagination-num-small ul>li:last-child>a,.pagination-num-mini ul>li:last-child>span,.pagination-num-small ul>li:last-child>span{-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px}.pagination-num-small ul>li>a,.pagination-num-small ul>li>span{padding:2px 10px;font-size:11.9px}.pagination-num-mini ul>li>a,.pagination-num-mini ul>li>span{padding:0 6px;font-size:10.5px}

+66 -67

templates/auto/_search.html.ep

View

@@ -56,97 +56,96 @@
   
   %= include '/include/header', title => 'Gitprep';
   <!-- Index page -->
-  <div class="container" style="min-heigth:500px">
-    <div class="row">
-      <div class="span2">
-        <h3 style="font-size:19px;display:inline-block;margin-top:5px;margin-bottom:0;padding-bottom:0;padding-top:0">Search</h3>
-      </div>
-      <div class="span10" style="height:30px">
-        <form action="<%= url_for %>">
-          <%= text_field 'q', style => "width:600px;margin-top:10px;margin-right:3px" %>
-          <input class="btn" type="submit" value="Search">
-          % if ($type_exists) {
-            %= hidden_field type => $type;
-          % }
-        </form>
-      </div>
+  <div class="container">
+    <div class="search-top">
+      <div>Search</div>
+      <form action="<%= url_for %>">
+        <%= text_field 'q', style => "width:600px;margin-top:10px;margin-right:3px" %>
+        <input class="btn" type="submit" value="Search">
+        % if ($type_exists) {
+          %= hidden_field type => $type;
+        % }
+      </form>
     </div>
   </div>
-  <hr>
-  <div class="container" style="min-heigth:500px">
-    <div class="row">
-      <div class="span2">
-        <ul class="nav nav-tabs nav-stacked">
-          <li class="<%= $type eq 'repositories' ? 'active' : '' %>" style="<%= $type eq 'repositories' ? 'font-weight:bold' : '' %>">
+  <div class="container">
+    <div class="search-result">
+      <div class="left">
+        <ul>
+          <li class="<%= $type eq 'repositories' ? 'active' : '' %>">
             <a href="<%= url_with->query([type => 'repositories']) %>">Repositories</a>
           </li>
-          <li class="<%= $type eq 'users' ? 'active' : '' %>" style="<%= $type eq 'users' ? 'font-weight:bold' : '' %>">
+          <li class="<%= $type eq 'users' ? 'active' : '' %>">
             <a href="<%= url_with->query([type => 'users']) %>">Users</a>
           </li>
         </ul>
       </div>
-      <div class="span10">
+      <div class="right">
         % if ($type eq 'users') {
           % if (@$rows) {
-            <div style="font-size:18px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #EEEEEE">
-              <b>We've found <%= $total %> user results</b>
+            <div>
+              We've found <%= $total %> user results
             </div>
-            % for my $user (@$rows) {
-              % my $user = $user->{id};
-              <div>
-                <div>
-                  <a style="font-size:19px" href="<%= url_for("/$user") %>"><%= $user %></a>
-                </div>
-                <hr style="margin:10px 0;padding:0">
-              </div>
-            % }
+            <ul>
+              % for my $user (@$rows) {
+                % my $user = $user->{id};
+                <li>
+                  <div>
+                    <a style="font-size:19px" href="<%= url_for("/$user") %>"><%= $user %></a>
+                  </div>
+                </li>
+              % }
+            </ul>
           % } else {
-            <div class="well">
-              <b>We couldn't find any users matching '<%= $q %>'</b>
+            <div>
+              We couldn't find any users matching '<%= $q %>'
             </div>
           % }
         % } else {
           % if (@$rows) {
-            <div style="font-size:18px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #EEEEEE">
-              <b>We've found <%= $total %> repository results</b>
+            <div>
+              We've found <%= $total %> repository results
             </div>
-            % for my $project (@$rows) {
-              % my $user = $project->{user_id};
-              % my $project = $project->{name};
-              % my $rev = app->manager->default_branch($user, $project);
-              % my $desc = app->git->description($user, $project);
-              % my $branches = app->git->branches($user, $project);
-              % my $commit;
-              % if (@$branches) {
-                % $commit = app->git->get_commit($user, $project, $rev);
+            <ul>
+              % for my $project (@$rows) {
+                <%
+                  my $user = $project->{user_id};
+                  my $project = $project->{name};
+                  my $rev = app->manager->default_branch($user, $project);
+                  my $desc = app->git->description($user, $project);
+                  my $branches = app->git->branches($user, $project);
+                  my $commit;
+                  if (@$branches) {
+                    $commit = app->git->get_commit($user, $project, $rev);
+                  }
+                %>
+                
+                <li>
+                  <div>
+                    <a style="font-size:19px" href="<%= url_for("/$user/$project") %>"><%= $user %>/<%= $project %></a>
+                  </div>
+                  <div>
+                    <%= $desc %>
+                  </div>
+                  <div class="text-gray" style="font-size:13px;">
+                    % if ($commit) {
+                      <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %>
+                    % } else {
+                      <span >Repositry is not yet created.
+                    % }
+                  </div>
+                </li>
               % }
-              
-              <div>
-                <div>
-                  <a style="font-size:19px" href="<%= url_for("/$user/$project") %>"><%= $user %>/<%= $project %></a>
-                </div>
-                <div>
-                  <span style="font-size:15px;color:#333333"><%= $desc %></span>
-                </div>
-                <div>
-                  % if ($commit) {
-                    <span style="font-size:13px" class="muted" title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
-                  % } else {
-                    <span style="font-size:13px" class="muted">Repositry is not yet created.</span>
-                  % }
-                </div>
-                <hr style="margin:10px 0;padding:0">
-              </div>
-            % }
+            </ul>
           % } else {
-            <div class="well">
-              <b>We couldn't find any repositories matching '<%= $q %>'</b>
+            <div>
+              We couldn't find any repositories matching '<%= $q %>'
             </div>
           % }
         % }
 
         % if (@$rows && $pager->last_page != 1) {
-          <div class="pagination">
+          <div class="pagination-num">
             <ul>
               % if ($pager->previous_page) {
                 <li><a href="<%= url_with->query([page => $pager->previous_page]) %>">&laquo;</a></li>

...	...	@@ -56,97 +56,96 @@
56	56
57	57	%= include '/include/header', title => 'Gitprep';
58	58	<!-- Index page -->
59		- <div class="container" style="min-heigth:500px">
60		- <div class="row">
61		- <div class="span2">
62		- <h3 style="font-size:19px;display:inline-block;margin-top:5px;margin-bottom:0;padding-bottom:0;padding-top:0">Search</h3>
63		- </div>
64		- <div class="span10" style="height:30px">
65		- <form action="<%= url_for %>">
66		- <%= text_field 'q', style => "width:600px;margin-top:10px;margin-right:3px" %>
67		- <input class="btn" type="submit" value="Search">
68		- % if ($type_exists) {
69		- %= hidden_field type => $type;
70		- % }
71		- </form>
72		- </div>
	59	+ <div class="container">
	60	+ <div class="search-top">
	61	+ <div>Search</div>
	62	+ <form action="<%= url_for %>">
	63	+ <%= text_field 'q', style => "width:600px;margin-top:10px;margin-right:3px" %>
	64	+ <input class="btn" type="submit" value="Search">
	65	+ % if ($type_exists) {
	66	+ %= hidden_field type => $type;
	67	+ % }
	68	+ </form>
73	69	</div>
74	70	</div>
75		- <hr>
76		- <div class="container" style="min-heigth:500px">
77		- <div class="row">
78		- <div class="span2">
79		- <ul class="nav nav-tabs nav-stacked">
80		- <li class="<%= $type eq 'repositories' ? 'active' : '' %>" style="<%= $type eq 'repositories' ? 'font-weight:bold' : '' %>">
	71	+ <div class="container">
	72	+ <div class="search-result">
	73	+ <div class="left">
	74	+ <ul>
	75	+ <li class="<%= $type eq 'repositories' ? 'active' : '' %>">
81	76	<a href="<%= url_with->query([type => 'repositories']) %>">Repositories</a>
82	77	</li>
83		- <li class="<%= $type eq 'users' ? 'active' : '' %>" style="<%= $type eq 'users' ? 'font-weight:bold' : '' %>">
	78	+ <li class="<%= $type eq 'users' ? 'active' : '' %>">
84	79	<a href="<%= url_with->query([type => 'users']) %>">Users</a>
85	80	</li>
86	81	</ul>
87	82	</div>
88		- <div class="span10">
	83	+ <div class="right">
89	84	% if ($type eq 'users') {
90	85	% if (@$rows) {
91		- <div style="font-size:18px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #EEEEEE">
92		- <b>We've found <%= $total %> user results</b>
	86	+ <div>
	87	+ We've found <%= $total %> user results
93	88	</div>
94		- % for my $user (@$rows) {
95		- % my $user = $user->{id};
96		- <div>
97		- <div>
98		- <a style="font-size:19px" href="<%= url_for("/$user") %>"><%= $user %></a>
99		- </div>
100		- <hr style="margin:10px 0;padding:0">
101		- </div>
102		- % }
	89	+ <ul>
	90	+ % for my $user (@$rows) {
	91	+ % my $user = $user->{id};
	92	+ <li>
	93	+ <div>
	94	+ <a style="font-size:19px" href="<%= url_for("/$user") %>"><%= $user %></a>
	95	+ </div>
	96	+ </li>
	97	+ % }
	98	+ </ul>
103	99	% } else {
104		- <div class="well">
105		- <b>We couldn't find any users matching '<%= $q %>'</b>
	100	+ <div>
	101	+ We couldn't find any users matching '<%= $q %>'
106	102	</div>
107	103	% }
108	104	% } else {
109	105	% if (@$rows) {
110		- <div style="font-size:18px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #EEEEEE">
111		- <b>We've found <%= $total %> repository results</b>
	106	+ <div>
	107	+ We've found <%= $total %> repository results
112	108	</div>
113		- % for my $project (@$rows) {
114		- % my $user = $project->{user_id};
115		- % my $project = $project->{name};
116		- % my $rev = app->manager->default_branch($user, $project);
117		- % my $desc = app->git->description($user, $project);
118		- % my $branches = app->git->branches($user, $project);
119		- % my $commit;
120		- % if (@$branches) {
121		- % $commit = app->git->get_commit($user, $project, $rev);
	109	+ <ul>
	110	+ % for my $project (@$rows) {
	111	+ <%
	112	+ my $user = $project->{user_id};
	113	+ my $project = $project->{name};
	114	+ my $rev = app->manager->default_branch($user, $project);
	115	+ my $desc = app->git->description($user, $project);
	116	+ my $branches = app->git->branches($user, $project);
	117	+ my $commit;
	118	+ if (@$branches) {
	119	+ $commit = app->git->get_commit($user, $project, $rev);
	120	+ }
	121	+ %>
	122	+
	123	+ <li>
	124	+ <div>
	125	+ <a style="font-size:19px" href="<%= url_for("/$user/$project") %>"><%= $user %>/<%= $project %></a>
	126	+ </div>
	127	+ <div>
	128	+ <%= $desc %>
	129	+ </div>
	130	+ <div class="text-gray" style="font-size:13px;">
	131	+ % if ($commit) {
	132	+ <span title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %>
	133	+ % } else {
	134	+ <span >Repositry is not yet created.
	135	+ % }
	136	+ </div>
	137	+ </li>
122	138	% }
123		-
124		- <div>
125		- <div>
126		- <a style="font-size:19px" href="<%= url_for("/$user/$project") %>"><%= $user %>/<%= $project %></a>
127		- </div>
128		- <div>
129		- <span style="font-size:15px;color:#333333"><%= $desc %></span>
130		- </div>
131		- <div>
132		- % if ($commit) {
133		- <span style="font-size:13px" class="muted" title="<%= $commit->{age_string_datetime_local} %>"><%= $commit->{age_string} %></span>
134		- % } else {
135		- <span style="font-size:13px" class="muted">Repositry is not yet created.</span>
136		- % }
137		- </div>
138		- <hr style="margin:10px 0;padding:0">
139		- </div>
140		- % }
	139	+ </ul>
141	140	% } else {
142		- <div class="well">
143		- <b>We couldn't find any repositories matching '<%= $q %>'</b>
	141	+ <div>
	142	+ We couldn't find any repositories matching '<%= $q %>'
144	143	</div>
145	144	% }
146	145	% }
147	146
148	147	% if (@$rows && $pager->last_page != 1) {
149		- <div class="pagination">
	148	+ <div class="pagination-num">
150	149	<ul>
151	150	% if ($pager->previous_page) {
152	151	<li><a href="<%= url_with->query([page => $pager->previous_page]) %>">«</a></li>