Browse Source

[enh][mod] results ui refactor

Adam Tauber 11 years ago
parent
commit
47d548d6a2

+ 12
- 12
searx/static/css/style.css View File

@@ -1,14 +1,14 @@
1 1
 html{font-family:sans-serif;font-size:.9em;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;color:#444;padding:0;margin:0}
2 2
 body,#container{padding:0;margin:0}
3 3
 #container{width:100%;position:absolute;top:0}
4
-.search{background:#ecf0f1;padding:0;margin:0}.search .checkbox_container label{border-bottom:4px solid #e8e7e6}
5
-.search .checkbox_container label:hover{border-bottom:4px solid #3498db}
6
-.search .checkbox_container input[type="checkbox"]:checked+label{border-bottom:4px solid #2980b9}
7
-#search_wrapper{position:relative;max-width:600px;padding:10px}
4
+.search{padding:0;margin:0}.search .checkbox_container label{font-size:.9em;border-bottom:2px solid #e8e7e6}
5
+.search .checkbox_container label:hover{border-bottom:2px solid #3498db}
6
+.search .checkbox_container input[type="checkbox"]:checked+label{border-bottom:2px solid #2980b9}
7
+#search_wrapper{position:relative;width:50em;padding:10px}
8 8
 .center #search_wrapper{margin-left:auto;margin-right:auto}
9 9
 .q{background:none repeat scroll 0 0 #fff;border:1px solid #3498db;color:#222;font-size:16px;height:28px;margin:0;outline:medium none;padding:2px;padding-left:8px;padding-right:0 !important;width:100%;z-index:2}
10 10
 #search_submit{position:absolute;top:13px;right:1px;padding:0;border:0;background:url('../img/search-icon.png') no-repeat;background-size:24px 24px;opacity:.8;width:24px;height:30px;font-size:0}
11
-@media screen and (max-width:680px){#search_wrapper{width:90%;clear:both;overflow:hidden}}ul.autocompleter-choices{position:absolute;margin:0;padding:0;list-style:none;border:1px solid #3498db;border-left-color:#3498db;border-right-color:#3498db;border-bottom-color:#3498db;text-align:left;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;z-index:50;background-color:#fff;color:#444}ul.autocompleter-choices li{position:relative;margin:-2px 0 0 0;padding:.2em 1.5em .2em 1em;display:block;float:none !important;cursor:pointer;font-weight:normal;white-space:nowrap;font-size:1em;line-height:1.5em}ul.autocompleter-choices li.autocompleter-selected{background-color:#444;color:#fff}ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried{color:#9fcfff}
11
+@media screen and (max-width:50em){#search_wrapper{width:90%;clear:both;overflow:hidden}}ul.autocompleter-choices{position:absolute;margin:0;padding:0;list-style:none;border:1px solid #3498db;border-left-color:#3498db;border-right-color:#3498db;border-bottom-color:#3498db;text-align:left;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;z-index:50;background-color:#fff;color:#444}ul.autocompleter-choices li{position:relative;margin:-2px 0 0 0;padding:.2em 1.5em .2em 1em;display:block;float:none !important;cursor:pointer;font-weight:normal;white-space:nowrap;font-size:1em;line-height:1.5em}ul.autocompleter-choices li.autocompleter-selected{background-color:#444;color:#fff}ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried{color:#9fcfff}
12 12
 ul.autocompleter-choices span.autocompleter-queried{display:inline;float:none;font-weight:bold;margin:0;padding:0}
13 13
 .row{max-width:800px;margin:20px auto;text-align:justify}.row h1{font-size:3em;margin-top:50px}
14 14
 .row p{padding:0 10px;max-width:700px}
@@ -35,7 +35,7 @@ label.deny{background:#2ecc71;padding:4px 8px;color:#444;display:inline}
35 35
 .engine_checkbox input[type="checkbox"]:checked+label:nth-child(2)+label{display:none}
36 36
 .engine_checkbox input[type="checkbox"]:checked+label.allow{display:inline}
37 37
 a{text-decoration:none;color:#1a11be}a:visited{color:#8e44ad}
38
-.result{margin:19px 0 18px 0;padding:0;max-width:53em;clear:both}
38
+.result{margin:19px 0 18px 0;padding:0;clear:both}
39 39
 .result_title{margin-bottom:0}.result_title a{color:#2980b9;font-weight:normal;font-size:1.1em}.result_title a:hover{text-decoration:underline}
40 40
 .result_title a:visited{color:#8e44ad}
41 41
 .result h3{font-size:1em;word-wrap:break-word;margin:5px 0 1px 0;padding:0}
@@ -57,14 +57,14 @@ a{text-decoration:none;color:#1a11be}a:visited{color:#8e44ad}
57 57
 table{width:100%}
58 58
 td{padding:0 4px}
59 59
 tr:hover{background:#ddd}
60
-#results{margin:10px;padding:0;margin-bottom:20px}
61
-#sidebar{position:absolute;left:54em;width:15em;margin:0 2px 5px 5px;padding:0 2px 2px 2px}
60
+#results{margin:auto;padding:0;width:50em;margin-bottom:20px}
61
+#sidebar{position:absolute;top:100px;left:10px;margin:0 2px 5px 5px;padding:0 2px 2px 2px;width:14em}#sidebar input{padding:2px;margin:1px;font-size:.8em;display:inline-block;background:transparent;color:#444;cursor:pointer}
62
+#sidebar input[type="submit"]{text-decoration:underline}
62 63
 #suggestions span{display:block;margin:0 2px 2px 2px;padding:0}
63 64
 #suggestions form{display:block}
64
-#suggestions input{padding:2px 6px;margin:2px 4px;font-size:.8em;display:inline-block;background:#3498db;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0;cursor:pointer}
65
-#search_url{margin-top:8px}#search_url input{border:1px solid #888;padding:4px;color:#444;width:20em;display:block;margin:4px}
65
+#search_url{margin-top:8px}#search_url input{border:1px solid #888;padding:4px;color:#444;width:14em;display:block;margin:4px;font-size:.8em}
66 66
 #preferences{top:10px;padding:0;border:0;background:url('../img/preference-icon.png') no-repeat;background-size:28px 28px;opacity:.8;width:28px;height:30px;display:block}#preferences *{display:none}
67
-#pagination{clear:both}
67
+#pagination{clear:both;width:40em}
68 68
 #apis{margin-top:8px;clear:both}
69
-@media screen and (max-width:60em){#sidebar{position:static;max-width:50em;margin:0 0 2px 0;padding:0;float:none;border:none;width:auto} #suggestions span{display:inline;font-size:.8em} #suggestions form{display:inline} #suggestions input{padding:2px 6px;margin:2px 4px;font-size:.8em;display:inline-block;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0;cursor:pointer}}@media screen and (max-width:680px){.right{display:none;postion:fixed !important;top:100px;right:0} #apis{display:none} #categories{font-size:80%;clear:both}#categories .checkbox_container{margin-top:2px;margin:0 2px} .checkbox_container{display:block;width:100%}.checkbox_container label{border-bottom:0} .result{border-top:1px solid #e8e7e6;margin:7px 0 6px 0}.result img{max-width:90%;width:auto;height:auto}}.favicon{float:left;margin-right:4px;margin-top:2px}
69
+@media screen and (max-width:50em){#categories{font-size:90%;clear:both}#categories .checkbox_container{margin-top:2px;margin:auto} #results{margin:auto;padding:0;width:90%} .checkbox_container{display:block;width:90%}.checkbox_container label{border-bottom:0}}@media screen and (max-width:70em){#suggestions span{display:inline} #suggestions form{display:inline} .right{display:none;postion:fixed !important;top:100px;right:0} #sidebar{position:static;max-width:50em;margin:0 0 2px 0;padding:0;float:none;border:none;width:auto}#sidebar input{border:0} #apis{display:none} #search_url{display:none} .result{border-top:1px solid #e8e7e6;margin:7px 0 6px 0}.result img{max-width:90%;width:auto;height:auto}}.favicon{float:left;margin-right:4px;margin-top:2px}
70 70
 .preferences_back{background:none repeat scroll 0 0 #3498db;border:0 none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;cursor:pointer;display:inline-block;margin:2px 4px;padding:4px 6px}.preferences_back a{color:#fff}

+ 1
- 0
searx/static/less/definitions.less View File

@@ -17,6 +17,7 @@
17 17
 
18 18
 @color-url-font: #1a11be;
19 19
 @color-url-visited-font: #8E44AD;
20
+@results-width: 50em;
20 21
 
21 22
 
22 23
 /// Start-Screen

+ 6
- 6
searx/static/less/search.less View File

@@ -3,25 +3,25 @@
3 3
  */
4 4
 
5 5
 .search  {
6
-	background: @color-result-search-background;
7 6
 	padding: 0;
8 7
 	margin: 0;
9 8
 	.checkbox_container label {
10
-		border-bottom: 4px solid @color-categories-item-border-unselected;
9
+        font-size: 0.9em;
10
+		border-bottom: 2px solid @color-categories-item-border-unselected;
11 11
 	}
12 12
 
13 13
 	.checkbox_container label:hover {
14
-		border-bottom: 4px solid @color-categories-item-border-unselected-hover;
14
+		border-bottom: 2px solid @color-categories-item-border-unselected-hover;
15 15
 	}
16 16
 
17 17
 	.checkbox_container input[type="checkbox"]:checked + label { 
18
-		border-bottom: 4px solid @color-categories-item-border-selected;
18
+		border-bottom: 2px solid @color-categories-item-border-selected;
19 19
 	}
20 20
 }
21 21
 
22 22
 #search_wrapper {
23 23
 	position: relative;
24
-	max-width: 600px;
24
+	width: 50em;
25 25
 	padding: 10px;
26 26
 }
27 27
 
@@ -59,7 +59,7 @@
59 59
 	font-size: 0;
60 60
 }
61 61
 
62
-@media screen and (max-width: 680px) {
62
+@media screen and (max-width: @results-width) {
63 63
 	#search_wrapper {
64 64
 		width: 90%;
65 65
 		clear:both;

+ 66
- 59
searx/static/less/style.less View File

@@ -195,7 +195,6 @@ a {
195 195
 .result {
196 196
 	margin: 19px 0 18px 0;
197 197
 	padding: 0;
198
-	max-width: 53em;
199 198
 	clear: both;
200 199
 }
201 200
 
@@ -345,20 +344,36 @@ tr {
345 344
 }
346 345
 
347 346
 #results {
348
-	margin: 10px;
347
+	margin: auto;
349 348
 	padding: 0;
349
+    width: @results-width;
350 350
 	margin-bottom: 20px;
351 351
 }
352 352
 
353 353
 #sidebar {
354 354
 	position: absolute;
355
-	left: 54em;
356
-	width: 15em;
355
+    top: 100px;
356
+    left: 10px;
357 357
 	margin: 0 2px 5px 5px;
358 358
 	padding: 0 2px 2px 2px;
359
+    width: 14em;
360
+
361
+	input {
362
+		padding: 2px;
363
+		margin: 1px;
364
+		font-size: 0.8em;
365
+		display: inline-block;
366
+        background: transparent;
367
+        color: @color-result-search-url-font;
368
+		cursor: pointer;
369
+	}
370
+    input[type="submit"] {
371
+		text-decoration: underline;
372
+    }
359 373
 }
360 374
 
361 375
 #suggestions {
376
+
362 377
 	span {
363 378
 		display: block;
364 379
 		margin: 0 2px 2px 2px;
@@ -368,18 +383,6 @@ tr {
368 383
 	form {
369 384
 		display: block;
370 385
 	}
371
-
372
-	input {
373
-		padding: 2px 6px;
374
-		margin: 2px 4px;
375
-		font-size: 0.8em;
376
-		display: inline-block;
377
-		background: @color-suggestions-button-background;
378
-		color: @color-suggestions-button-font;
379
-		.rounded-corners;
380
-		border: 0;
381
-		cursor: pointer;
382
-	}
383 386
 }
384 387
 
385 388
 #search_url {
@@ -389,9 +392,10 @@ tr {
389 392
 		border: 1px solid @color-result-search-url-border;
390 393
 		padding: 4px;
391 394
 		color: @color-result-search-url-font;
392
-		width: 20em;
395
+		width: 14em;
393 396
 		display: block;
394 397
 		margin: 4px;
398
+        font-size: 0.8em;
395 399
 	}
396 400
 } 
397 401
 
@@ -413,6 +417,7 @@ tr {
413 417
 
414 418
 #pagination {
415 419
 	clear: both;
420
+    width: 40em;
416 421
 }
417 422
 
418 423
 #apis {
@@ -420,40 +425,45 @@ tr {
420 425
 	clear: both;
421 426
 }
422 427
 
423
-@media screen and (max-width: 60em) {
424
-	#sidebar {
425
-		position: static;
426
-		max-width: 50em;
427
-		margin: 0 0 2px 0;
428
-		padding: 0;
429
-		float: none;
430
-		border: none;
431
-		width: auto
428
+@media screen and (max-width: @results-width) {
429
+
430
+	#categories {
431
+		font-size: 90%;
432
+		clear: both;
433
+
434
+		.checkbox_container {
435
+			margin-top: 2px;
436
+			margin: auto; 
437
+		}
438
+	}
439
+
440
+    #results {
441
+        margin: auto;
442
+        padding: 0;
443
+        width: 90%;
444
+    }
445
+
446
+	.checkbox_container {
447
+		display: block;
448
+        width: 90%;
449
+		//float: left;
450
+
451
+		label {
452
+			border-bottom: 0;
453
+		}
432 454
 	}
455
+}
433 456
 
457
+@media screen and (max-width: 70em) {
434 458
 	#suggestions {
435 459
 		span {
436 460
 			display: inline;
437
-			font-size: 0.8em
438 461
 		}
439 462
 
440 463
 		form {
441 464
 			display: inline;
442 465
 		}
443
-
444
-		input {
445
-			padding: 2px 6px;
446
-			margin: 2px 4px;
447
-			font-size: 0.8em;
448
-			display: inline-block;
449
-			.rounded-corners;
450
-			border: 0;
451
-			cursor: pointer;
452
-		}
453 466
 	}
454
-}
455
-
456
-@media screen and (max-width: 680px) {
457 467
 	.right {
458 468
 		display: none;
459 469
 		postion: fixed !important;
@@ -461,29 +471,26 @@ tr {
461 471
 		right: 0px;
462 472
 	}
463 473
 
464
-	#apis {
465
-		display: none;
474
+	#sidebar {
475
+		position: static;
476
+		max-width: @results-width;
477
+		margin: 0 0 2px 0;
478
+		padding: 0;
479
+		float: none;
480
+		border: none;
481
+		width: auto;
482
+        input {
483
+            border: 0;
484
+        }
466 485
 	}
467 486
 
468
-	#categories {
469
-		font-size: 80%;
470
-		clear: both;
471
-
472
-		.checkbox_container {
473
-			margin-top: 2px;
474
-			margin: 0 2px; 
475
-		}
487
+	#apis {
488
+		display: none;
476 489
 	}
477 490
 
478
-	.checkbox_container {
479
-		display: block;
480
-		width: 100%;
481
-		//float: left;
482
-
483
-		label {
484
-			border-bottom: 0;
485
-		}
486
-	}
491
+    #search_url {
492
+        display: none;
493
+    }
487 494
 
488 495
 	.result {
489 496
 		border-top: 1px solid @color-result-top-border;

+ 1
- 1
searx/templates/results.html View File

@@ -2,7 +2,7 @@
2 2
 {% block title %}{{ q }} - {% endblock %}
3 3
 {% block content %}
4 4
 <div class="right"><a href="{{ url_for('preferences') }}" id="preferences"><span>preferences</span></a></div>
5
-<div class="small search">
5
+<div class="small search center">
6 6
     {% include 'search.html' %}
7 7
 </div>
8 8
 <div id="results">