Skip to content

Commit e04dddc

Browse files
f3l1xf3l1x
committed
Layout: change layout design [closes #47] [closes #48] [closes #51]
1 parent b5e406b commit e04dddc

File tree

9 files changed

+127
-63
lines changed

9 files changed

+127
-63
lines changed

‎app/modules/front.portal/controls/AddonDetail/templates/header.latte‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1-
<h1><a data-ga="1" data-event="click" data-category="h1" data-action="repo" href="{$addon->github->linker->getRepoUrl()}">{$addon->github->name}</a></h1>
1+
{block}
2+
<div class="title-repo">
3+
<a data-ga="1" data-event="click" data-category="header" data-action="repo-image" href="{$addon->github->linker->getRepoUrl()}">
4+
<img alt="" title="{$addon->owner}" src="{plink WebImage:avatar, $addon->owner}">
5+
</a>
6+
<a data-ga="1" data-event="click" data-category="header" data-action="repo-owner" data-toggle="tooltip" data-placement="bottom" title="Show all addons by {$addon->owner}" href="{plink List:owner, slug => $addon->owner}">
7+
{$addon->owner}
8+
</a>
9+
/
10+
<a data-ga="1" data-event="click" data-category="header" data-action="repo-name" data-toggle="tooltip" data-placement="bottom" title="See {$addon->name} Github profile" href="{$addon->github->linker->getRepoUrl()}">
11+
{$addon->name}
12+
</a>
13+
</div>
214

3-
{control meta $addon}
15+
<div class="title-composer" n:if="$addon->isComposer && $addon->composer">
16+
<span class="composer-clipboard octicon octicon octicon-desktop-download" data-toggle="tooltip" data-placement="left" title="Click & copy" data-composer="composer require {$addon->github->composer->getName()}"></span>
17+
<span class="composer-code">composer require {$addon->github->composer->getName()}</span>
18+
</div>
19+
20+
<div class="clearfix"></div>

‎app/modules/front.portal/controls/AddonDetail/templates/sidebar.latte‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,10 @@
33
{var $owner => $addon->owner}
44
{var $name => $addon->name}
55

6-
<div class="title-repo">
7-
<a data-ga="1" data-event="click" data-category="sidebar" data-action="repo-title" data-toggle="tooltip" data-placement="bottom" title="{$name}" href="{$addon->github->linker->getRepoUrl()}">
8-
<span class="octicon octicon-mark-github"></span> {$name}
9-
</a>
10-
</div>
11-
12-
<div class="title-owner">
13-
<a data-ga="1" data-event="click" data-category="sidebar" data-action="owner-title" data-toggle="tooltip" data-placement="left" title="Show all addons by {$owner}" href="{plink List:owner, slug => $owner}">
14-
<img alt="" title="{$owner}" src="{plink WebImage:avatar, $addon->owner}"> {$owner}
15-
</a>
16-
</div>
17-
186
<div class="details">
7+
<div class="title">Statistics</div>
198
<table>
209
{if $addon->isComposer && $addon->composer}
21-
<tr>
22-
<td><span class="octicon octicon-gift composer-clipboard" data-toggle="tooltip" data-placement="left" title="Click & copy" data-composer="composer require {$addon->github->composer->getName()}"></span></td>
23-
<td>{$addon->github->composer->getName()}</td>
24-
</tr>
2510
<tr>
2611
<td><span class="octicon octicon-cloud-download"></span></td>
2712
<td data-toggle="tooltip" data-placement="left" title="Total downloads">{$addon->composer->downloads|count}</td>
@@ -48,6 +33,7 @@
4833
</div>
4934

5035
<div class="badges">
36+
<div class="title">Badges</div>
5137
<ul>
5238
<li>
5339
<img alt="" title="isitmaintained" src="https://isitmaintained.com/badge/resolution/{$owner|lower}/{$name|lower}.svg">

‎app/modules/front.portal/controls/Search/templates/search.latte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<form n:name="form" class="search-form">
22
<div class="icon"><span class="mega-octicon octicon-search"></span></div>
3-
<input n:name="q" class="search" type="text" autocomplete="off" autofocus placeholder="Search for... datetime, captcha, curl, extension, kdyby, nextras, minetro">
3+
<input n:name="q" class="search" type="text" autocomplete="off" placeholder="Search for... datetime, captcha, curl, extension, kdyby, nextras, minetro">
44
</form>

‎app/modules/front.portal/presenters/HomePresenter.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
namespace App\Modules\Front\Portal;
44

55
use App\Model\ORM\Addon\Addon;
6+
use App\Modules\Front\Portal\Controls\AddonList\AddonList;
67
use Nextras\Orm\Collection\ICollection;
78

89
final class HomePresenter extends BaseAddonPresenter
@@ -28,15 +29,15 @@ public function actionDefault()
2829
*/
2930

3031
/**
31-
* @return Controls\AddonList\AddonList
32+
* @return AddonList
3233
*/
3334
protected function createComponentNewest()
3435
{
3536
return $this->createAddonListControl($this->newest);
3637
}
3738

3839
/**
39-
* @return Controls\AddonList\AddonList
40+
* @return AddonList
4041
*/
4142
protected function createComponentLastActive()
4243
{

‎app/modules/front.portal/presenters/ListPresenter.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
use App\Modules\Front\Portal\Controls\AddonList\AddonList;
99
use App\Modules\Front\Portal\Controls\AddonList\CategorizedAddonList;
1010
use App\Modules\Front\Portal\Controls\AddonList\ICategorizedAddonListFactory;
11+
use App\Modules\Front\Portal\Controls\Search\Search;
1112
use Nextras\Orm\Collection\ICollection;
1213

1314
final class ListPresenter extends BaseAddonPresenter
@@ -114,6 +115,17 @@ public function renderTag($tag)
114115
* CONTROLS ****************************************************************
115116
*/
116117

118+
/**
119+
* @return Search
120+
*/
121+
protected function createComponentSearch()
122+
{
123+
$search = parent::createComponentSearch();
124+
$search['form']['q']->controlPrototype->autofocus = TRUE;
125+
126+
return $search;
127+
}
128+
117129
/**
118130
* @return AddonList
119131
*/

‎app/modules/front.portal/templates/Addon/detail.latte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
{block #wrapper}
88
<div n:snippet="search-result"></div>
99
<section class="page page-package clearfix">
10+
<section class="page-header">
11+
{control addon:header}
12+
</section>
1013
<section class="page-sidebar">
1114
{control addon:sidebar}
1215
</section>

‎app/modules/front.portal/templates/List/default.latte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@
77
<div n:snippet="search-result"></div>
88

99
<h2 class="category"><span class="mega-octicon octicon-list-unordered"></span> All packages</h2>
10-
{control categorizedAddons}
10+
{cache 'addons/all', expire => '+1 hour'}
11+
{control categorizedAddons}
12+
{/cache}

‎www/assets/front/css/theme.less‎

Lines changed: 64 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@image-path: "./../assets/front/img";
88
@bgcolor: #3484d2;
99
@global-min-width: 450px;
10+
@border-radius: 6px;
1011

1112
body, html {
1213
min-height: 100%;
@@ -337,7 +338,7 @@ a[href*="://"]:after {
337338
.addons-all {
338339
.b-addon {
339340
.b-addon__body {
340-
width: 93%;
341+
display: inline-block;
341342
padding-left: 0;
342343

343344
h3 {
@@ -445,7 +446,7 @@ a[href*="://"]:after {
445446
}
446447

447448
.meta {
448-
border-radius: 0 0 6px 6px;
449+
border-radius: 0 0 @border-radius @border-radius;
449450
padding: 0 1.2em;
450451
line-height: 40px;
451452
vertical-align: top;
@@ -489,7 +490,7 @@ a[href*="://"]:after {
489490
}
490491

491492
.page {
492-
border-radius: 6px;
493+
border-radius: @border-radius;
493494
background: #fff;
494495
margin-top: 10px;
495496
box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
@@ -498,10 +499,42 @@ a[href*="://"]:after {
498499
.page-header {
499500
padding: 20px;
500501
margin: 0;
501-
background: rgba(52, 132, 210, 0.2);
502+
border-radius: @border-radius @border-radius 0 0;
503+
background: #fafafa;
504+
505+
img {
506+
max-width: 30px;
507+
max-height: 30px;
508+
}
509+
510+
.title-repo {
511+
float: left;
512+
line-height: 30px;
513+
font-size: 20px;
514+
vertical-align: bottom;
515+
516+
a {
517+
line-height: 30px;
518+
display: inline-block;
519+
}
520+
521+
span {
522+
font-size: 40px;
523+
vertical-align: middle;
524+
}
525+
}
502526

503-
h1 {
504-
margin: 0 0 20px 0;
527+
.title-composer {
528+
float: right;
529+
background: #fff;
530+
border: 1px solid #ccc;
531+
border-radius: 3px;
532+
padding: 5px 10px;
533+
534+
.composer-clipboard {
535+
cursor: pointer;
536+
padding-right: 10px;
537+
}
505538
}
506539
}
507540

@@ -552,64 +585,38 @@ a[href*="://"]:after {
552585
padding: 20px;
553586
width: 25%;
554587
float: right;
555-
border-radius: 0 0 0 6px;
556588
margin: 0;
557589
font-size: 16px;
558-
background: linear-gradient(rgba(52, 132, 210, .3), #fff);
559590
padding-bottom: 200px;
560591

561592
a {
562593
color: #000;
563594
}
564595

565-
.title-owner {
566-
font-size: 20px;
567-
margin-bottom: 10px;
568-
overflow: hidden;
569-
white-space: nowrap;
570-
text-overflow: ellipsis;
571-
572-
img {
573-
max-width: 40px;
574-
}
575-
}
576-
577-
.title-repo {
578-
font-size: 20px;
579-
vertical-align: middle;
580-
overflow: hidden;
581-
white-space: nowrap;
582-
text-overflow: ellipsis;
583-
margin-bottom: 10px;
584-
585-
span {
586-
font-size: 40px;
587-
vertical-align: middle;
588-
}
589-
}
590-
591596
.title {
592597
font-weight: 600;
593598
margin: 15px 0;
599+
padding-bottom: 7px;
600+
border-bottom: 1px dashed #eee;
594601
}
595602

596603
div.details {
597-
margin: 10px 0;
604+
margin: 0 0 10px 0;
598605
font-size: 18px;
599606

600607
span {
601608
font-size: 20px;
602609
}
603610

604-
span.composer-clipboard {
605-
cursor: pointer;
606-
}
607-
608611
table {
609612
td:nth-child(2n+1) {
610613
padding: 0 10px;
611614
}
612615
}
616+
617+
.title {
618+
margin-top: 0;
619+
}
613620
}
614621

615622
div.badges {
@@ -670,7 +677,7 @@ a[href*="://"]:after {
670677
font-weight: 400;
671678
line-height: 1.4;
672679
background: #f8f8f8;
673-
border-radius: 3px;
680+
border-radius: @border-radius;
674681
box-shadow: none;
675682
padding: 5px;
676683
margin: 1.5em 0;
@@ -789,7 +796,7 @@ a[href*="://"]:after {
789796
display: block;
790797

791798
& > .btn {
792-
border-radius: 4px;
799+
border-radius: 2px;
793800
display: block;
794801
width: 100%;
795802
margin-bottom: 2px;
@@ -809,6 +816,22 @@ a[href*="://"]:after {
809816
}
810817
}
811818
}
819+
820+
.page {
821+
border-radius: 0;
822+
823+
.page-header {
824+
.title-repo,
825+
.title-composer {
826+
float: none;
827+
text-align: center;
828+
}
829+
830+
.title-repo {
831+
margin-bottom: 15px;
832+
}
833+
}
834+
}
812835
}
813836

814837
@media screen and (max-width: 991px) {

‎www/assets/front/js/main.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,21 @@ $.nette.ext('search', {
4848
})
4949
});
5050

51+
var Componette = {};
52+
53+
Componette.selectable = function ($el) {
54+
if (document.selection) {
55+
var div = document.body.createTextRange();
56+
div.moveToElementText($el[0]);
57+
div.select();
58+
} else {
59+
var div = document.createRange();
60+
div.setStartBefore($el[0]);
61+
div.setEndAfter($el[0]);
62+
window.getSelection().addRange(div);
63+
}
64+
};
65+
5166
$(function () {
5267
// Choosen
5368
$(".chosen").chosen({width: '100%'});
@@ -73,6 +88,11 @@ $(function () {
7388
});
7489
});
7590

91+
// Composer code
92+
$('span.composer-code').on('click', function () {
93+
Componette.selectable($(this));
94+
});
95+
7696
// Stats
7797
(function () {
7898
var $addon = $('#addon-stats');

0 commit comments

Comments
 (0)