launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #30908
[Merge] ~ines-almeida/launchpad:frontpage-revamp-change-layout into ~ines-almeida/launchpad:frontpage-revamp-remove-top-project
Ines Almeida has proposed merging ~ines-almeida/launchpad:frontpage-revamp-change-layout into ~ines-almeida/launchpad:frontpage-revamp-remove-top-project.
Commit message:
ui: Launchpad homepage revamp
- Imported Vanilla framework directly to the homepage
- Re-organized homepage sections and reworked them using Vanilla components
- Cleaned up CSS styling and page views that are no longer used
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
Peter Makowski (petermakowski): code
For more details, see:
https://code.launchpad.net/~ines-almeida/launchpad/+git/launchpad/+merge/460819
Initial stab at making Launchpad's homepage a little bit more modern
--
Your team Launchpad code reviewers is requested to review the proposed merge of ~ines-almeida/launchpad:frontpage-revamp-change-layout into ~ines-almeida/launchpad:frontpage-revamp-remove-top-project.
diff --git a/lib/canonical/launchpad/icing/css/components/_index.scss b/lib/canonical/launchpad/icing/css/components/_index.scss
index 59e25ed..057da90 100644
--- a/lib/canonical/launchpad/icing/css/components/_index.scss
+++ b/lib/canonical/launchpad/icing/css/components/_index.scss
@@ -1,6 +1,7 @@
@import 'access_tokens',
'batch_navigation',
'bug_picker',
+ 'homepage',
'profiling_info',
'sidebar_portlets',
'bug_listing',
diff --git a/lib/canonical/launchpad/icing/css/components/homepage.scss b/lib/canonical/launchpad/icing/css/components/homepage.scss
new file mode 100644
index 0000000..17b63cc
--- /dev/null
+++ b/lib/canonical/launchpad/icing/css/components/homepage.scss
@@ -0,0 +1,18 @@
+.homepage {
+ margin: auto;
+ width: 90%;
+ max-width: 80em;
+}
+
+// Make search box wide
+#homepage-searchform {
+ width: 100%;
+
+ .p-form__group {
+ flex-grow: 1;
+ }
+
+ .p-form__control {
+ width: 100%;
+ }
+}
diff --git a/lib/canonical/launchpad/images/add-homepage.png b/lib/canonical/launchpad/images/add-homepage.png
new file mode 100644
index 0000000..0cd9f6f
Binary files /dev/null and b/lib/canonical/launchpad/images/add-homepage.png differ
diff --git a/lib/canonical/launchpad/images/bug-homepage.png b/lib/canonical/launchpad/images/bug-homepage.png
new file mode 100644
index 0000000..3599ff9
Binary files /dev/null and b/lib/canonical/launchpad/images/bug-homepage.png differ
diff --git a/lib/canonical/launchpad/images/ppa-icon-homepage.png b/lib/canonical/launchpad/images/ppa-icon-homepage.png
new file mode 100644
index 0000000..f6f529c
Binary files /dev/null and b/lib/canonical/launchpad/images/ppa-icon-homepage.png differ
diff --git a/lib/canonical/launchpad/images/question-homepage.png b/lib/canonical/launchpad/images/question-homepage.png
new file mode 100644
index 0000000..f43e96f
Binary files /dev/null and b/lib/canonical/launchpad/images/question-homepage.png differ
diff --git a/lib/canonical/launchpad/images/translation-homepage.png b/lib/canonical/launchpad/images/translation-homepage.png
new file mode 100644
index 0000000..6988a2b
Binary files /dev/null and b/lib/canonical/launchpad/images/translation-homepage.png differ
diff --git a/lib/lp/app/browser/tales.py b/lib/lp/app/browser/tales.py
index c91b890..d6b2760 100644
--- a/lib/lp/app/browser/tales.py
+++ b/lib/lp/app/browser/tales.py
@@ -826,11 +826,10 @@ class ObjectImageDisplayAPI:
# XXX: this should go away as soon as all image:icon where replaced
return None
- def logo(self):
- """Return the appropriate <img> tag for this object's logo.
+ def logo_src(self):
+ """Return the appropriate src attribute for this object's logo.
- :return: A string, or None if the context object doesn't have
- a logo.
+ :return: A string, or None if the context object doesn't have a logo.
"""
context = self._context
if not IHasLogo.providedBy(context):
@@ -843,10 +842,18 @@ class ObjectImageDisplayAPI:
url = context.logo.getURL()
else:
url = self.default_logo_resource(context)
- if url is None:
- # We want to indicate that there is no logo for this
- # object.
- return None
+ return url
+
+ def logo(self):
+ """Return the appropriate <img> tag for this object's logo.
+
+ :return: A string, or None if the context object doesn't have a logo.
+ """
+ url = self.logo_src()
+ if url is None:
+ # We want to indicate that there is no logo for this
+ # object.
+ return None
logo = '<img alt="" width="64" height="64" src="%s" />'
return logo % url
diff --git a/lib/lp/app/templates/root-index.pt b/lib/lp/app/templates/root-index.pt
index ee51d55..16eae94 100644
--- a/lib/lp/app/templates/root-index.pt
+++ b/lib/lp/app/templates/root-index.pt
@@ -6,48 +6,7 @@
metal:use-macro="view/macro:page/main_only"
i18n:domain="launchpad">
<metal:head fill-slot="head_epilogue">
- <style>
- .homepage {
- margin: auto;
- width: 90%;
- max-width: 80em;
- }
- #homepage-whatslaunchpad ul {
- margin-left: 1em;
- margin-bottom: 0.5em;
- }
- #homepage-whatslaunchpad ul,
- #homepage-whatslaunchpad-tour {
- font-weight: bold;
- }
- #homepage-stats {
- max-width: 50em;
- margin: auto;
- padding-top: 0.5em;
- color: gray;
- }
- #homepage-blogposts {
- padding-right: 4em;
- }
- #homepage-getstarted ul {
- padding-top: 0.5em;
- }
- .featured-project-top h3 {
- font-weight: bold;
- }
- .featured-project-top h3 img {
- vertical-align: middle;
- }
- .featured-project-top p {
- margin-top: 0.5em;
- margin-bottom: 1em;
- padding-bottom: .5em;
- border-bottom: 1px dotted #999;
- }
- #launchpad-logo-and-name {
- width: 250px;
- }
- </style>
+ <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.7.0.min.css"; />
</metal:head>
<body>
<div metal:fill-slot="main">
@@ -67,90 +26,26 @@
style="margin: 0 9em 1em 0"/>
</div>
- <div class="yui-g">
- <div class="yui-u first" style="margin-top: 1.5em;">
- <div class="homepage-whatslaunchpad"
- tal:condition="view/show_whatslaunchpad">
- <h2><span class="launchpad-gold">Launchpad</span> is a software collaboration platform that provides:</h2>
- <ul tal:define="apphomes view/apphomes">
- <li>
- <a class="sprite bug"
- tal:attributes="href apphomes/bugs">Bug tracking</a>
- </li>
- <li>
- <a class="sprite branch"
- tal:attributes="href apphomes/code">Code hosting</a>
- using <a href="http://bazaar.canonical.com/";>Bazaar</a>
- and <a href="https://git-scm.com/";>Git</a>
- </li>
- <li>
- <a class="sprite yes"
- href="https://help.launchpad.net/Code/Review";>Code reviews</a>
- </li>
- <li>
- <a class="sprite ubuntu-logo"
- tal:attributes="href apphomes/ubuntu">Ubuntu package building and hosting</a>
- </li>
- <li>
- <a class="sprite translate-icon"
- tal:attributes="href apphomes/translations">Translations</a>
- </li>
- <li>
- <a class="sprite mail"
- href="https://help.launchpad.net/Teams/MailingLists";>Mailing lists</a>
- </li>
- <li>
- <a class="sprite question"
- tal:attributes="href apphomes/answers">Answer tracking and FAQs</a>
- </li>
- <li>
- <a class="sprite blueprint"
- tal:attributes="href apphomes/blueprints">Specification tracking</a>
- </li>
- </ul>
- <div id="homepage-whatslaunchpad-tour">
- <a class="sprite tour" href="/+tour">Take the tour!</a>
- </div>
- </div>
-
- <div id="homepage-blogposts" class="homepage-portlet"
- tal:condition="features/app.root_blog.enabled">
- <h2>Recent Launchpad blog posts</h2>
- <ul tal:define="posts view/getRecentBlogPosts">
- <li class="news"
- tal:repeat="post posts">
- <a href="" tal:attributes="href post/link"
- tal:content="post/title">
- Take the Launchpad survey</a><span class="registered">
- – <tal:date content="post/date">01 July 2010</tal:date></span><br />
- <tal:description content="structure post/description">
- Tell us a little about how you use Launchpad by answering
- our short survey.
- </tal:description>
- </li>
- </ul>
- <ul class="horizontal">
- <li>
- <strong><a href="http://blog.launchpad.net";>Read the blog</a></strong>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="yui-u">
- <form id="homepage-searchform"
+ <section class="p-strip is-shallow">
+ <div class="u-fixed-width">
+ <form id="homepage-searchform" class="p-form p-form--inline"
xml:lang="en" lang="en" dir="ltr"
tal:attributes="action string:${rooturl}+search"
method="get" accept-charset="UTF-8">
- <input id="text" type="text" name="field.text" size="25" />
- <input id="search" type="submit" value="Search Launchpad" />
+ <div class="p-form__group p-form--search">
+ <label for="search-input" class="u-off-screen">Search</label>
+ <div class="p-form__control u-clearfix">
+ <input id="search-input" type="search" name="field.text" value="" autofocus="">
+ </div>
+ </div>
+ <button id="search" class="p-button--positive" type="submit" value="Search">Search</button>
</form>
<script type="text/javascript">
LPJS.use('lp', function () {
setFocusByName('field.text');
});
</script>
- <div id="homepage-stats">
+ <div id="homepage-stats" class="u-text--muted">
<strong
tal:content="view/project_count/fmt:intcomma">123</strong> projects,
<strong
@@ -167,61 +62,140 @@
tal:content="view/blueprint_count/fmt:intcomma">123</strong> blueprints,
and counting...
</div>
- <div id="homepage-getstarted" class="homepage-portlet">
- <h2>Get started</h2>
+ </div>
+ </section>
+
+ <section class="p-strip is-shallow" tal:condition="view/show_whatslaunchpad">
+ <div class="homepage-whatslaunchpad">
+ <div class="u-fixed-width u-clearfix">
+ <h2>Launchpad</h2>
+ <h4>A software collaboration platform that provides</h4>
+ </div>
+ <div class="u-fixed-width u-clearfix">
+ <ul class="p-list--divided is-split" tal:define="apphomes view/apphomes">
+ <li class="p-list__item">
+ <a class="sprite bug"
+ tal:attributes="href apphomes/bugs">Bug tracking</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite branch"
+ tal:attributes="href apphomes/code">Code hosting</a>
+ using <a href="http://bazaar.canonical.com/";>Bazaar</a>
+ and <a href="https://git-scm.com/";>Git</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite yes"
+ href="https://help.launchpad.net/Code/Review";>Code reviews</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite ubuntu-logo"
+ tal:attributes="href apphomes/ubuntu">Ubuntu package building and hosting</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite translate-icon"
+ tal:attributes="href apphomes/translations">Translations</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite mail"
+ href="https://help.launchpad.net/Teams/MailingLists";>Mailing lists</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite question"
+ tal:attributes="href apphomes/answers">Answer tracking and FAQs</a>
+ </li>
+ <li class="p-list__item">
+ <a class="sprite blueprint"
+ tal:attributes="href apphomes/blueprints">Specification tracking</a>
+ </li>
+ </ul>
+
+ <div id="homepage-whatslaunchpad-tour">
+ <a class="sprite tour" href="/+tour">Take the tour!</a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="p-strip is-shallow">
+ <div id="homepage-getstarted">
+ <div class="u-fixed-width u-clearfix">
+ <h2 class="u-float-left">Get started</h2>
+ <a href="/+tour" class="p-button u-float-right u-hide--small">Take the tour</a>
+ </div>
+ <div class="u-fixed-width u-clearfix">
<tal:logged_out condition="not:view/user" omit-tag="">
<a href="/+login">Creating an account</a> allows you to start
working within Launchpad.<br />
</tal:logged_out>
- <p>
+ <span>
Learn more about Launchpad in the
<a href="https://help.launchpad.net/";>user guide</a>
or try it for yourself in our
<a href="https://qastaging.launchpad.net/";>sandbox environment</a>.
- </p>
+ </span>
<tal:logged_in condition="view/user" omit-tag="">
If you're ready, you can:
- <ul tal:define="apphomes view/apphomes">
- <li>
- <a class="sprite add"
- href="/projects/+new">Register a project</a>
+
+ <ul class="p-matrix" tal:define="apphomes view/apphomes">
+ <li class="p-matrix__item">
+ <img class="p-matrix__img" src="/@@/add-homepage.png" alt="add">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="/projects/+new">Register a project</a></h4>
+ </div>
</li>
- <li>
- <a class="sprite add"
- href="/people/+newteam">Register a team</a>
+ <li class="p-matrix__item">
+ <img class="p-matrix__img" src="/@@/add-homepage.png" alt="add">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="/people/+newteam">Register a team</a></h4>
+ </div>
</li>
- <li tal:condition="not:view/show_whatslaunchpad">
- <a class="sprite bug"
- tal:attributes="href apphomes/bugs">Browse bugs</a>
+ <li class="p-matrix__item">
+ <img class="p-matrix__img" src="/@@/bug-homepage.png" alt="bug">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="apphomes/bugs">Browse bugs</a></h4>
+ </div>
</li>
- <li tal:condition="not:view/show_whatslaunchpad">
- <a class="sprite translate-icon"
- tal:attributes="href apphomes/translations">Help translate</a>
+ <li class="p-matrix__item">
+ <img class="p-matrix__img" src="/@@/translation-homepage.png" alt="translation">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="apphomes/translations">Help translate</a></h4>
+ </div>
</li>
- <li tal:condition="not:view/show_whatslaunchpad">
- <a class="sprite question"
- tal:attributes="href apphomes/answers">Find answers</a>
+ <li class="p-matrix__item">
+ <img class="p-matrix__img" src="/@@/question-homepage.png" alt="question">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="apphomes/answers">Find answers</a></h4>
+ </div>
</li>
- <li>
- <a class="sprite ppa-icon"
- href="/ubuntu/+ppas">Browse Ubuntu PPAs</a>
+ <li class="p-matrix__item">
+ <img class="p-matrix__img" src="/@@/ppa-icon-homepage.png" alt="ppa-icon">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="/ubuntu/+ppas">Browse Ubuntu PPAs</a></h4>
+ </div>
</li>
- <li tal:condition="not:view/show_whatslaunchpad">
- <a class="sprite tour" href="/+tour">Take the tour</a>
- </li>
</ul>
</tal:logged_in>
</div>
+ </div>
+ </section>
- <div id="homepage-featured" class="homepage-portlet">
- <h2>Featured projects</h2>
- <div class="two-column-list">
- <ul class="featured-projects-list">
- <li tal:repeat="project view/featured_projects">
- <a tal:replace="structure project/fmt:link" />
- </li>
- </ul>
- </div>
+ <section class="p-strip is-shallow">
+ <div id="homepage-featured">
+ <div class="u-fixed-width u-clearfix">
+ <h2 class="u-float-left">Featured projects</h2>
+ </div>
+ <div class="u-fixed-width u-clearfix">
+ <ul class="p-matrix featured-projects-list">
+ <li class="p-matrix__item" tal:repeat="project view/featured_projects">
+ <img class="p-matrix__img" tal:attributes="src project/image:logo_src; alt project/displayname">
+ <div class="p-matrix__content">
+ <h4 class="p-matrix__title"><a class="p-matrix__link" href="#" tal:content="structure project/displayname" tal:attributes="href project/fmt:url"></a></h4>
+ <div class="p-matrix__desc">
+ <p tal:content="structure project/summary/fmt:shorten/100"></p>
+ </div>
+ </div>
+ </li>
+ </ul>
<ul class="horizontal">
<li>
@@ -230,14 +204,37 @@
projects</a>!</strong>
</li>
<li tal:condition="context/required:launchpad.Edit">
- <a class="sprite edit" href="+featuredprojects">Manage
- featured project list</a>
+ <a class="sprite edit" href="+featuredprojects">
+ Manage featured project list
+ </a>
</li>
</ul>
</div>
- </div><!-- yui-u -->
+ </div>
+ </section>
+
+ <section class="p-strip is-shallow" tal:condition="features/app.root_blog.enabled">
+ <div id="homepage-blogposts">
+ <div class="u-fixed-width u-clearfix">
+ <h2 class="u-float-left">Recent Launchpad blog posts</h2>
+ <a href="http://blog.launchpad.net"; class="p-button u-float-right u-hide--small">Read the blog</a>
+ </div>
+ <div class="u-fixed-width u-clearfix">
+ <ul tal:define="posts view/getRecentBlogPosts">
+ <li class="news" tal:repeat="post posts">
+ <a tal:attributes="href post/link" tal:content="post/title">
+ </a>
+ <span class="registered">– <tal:date content="post/date"></tal:date></span><br />
+ <tal:description content="structure post/description">
+ Tell us a little about how you use Launchpad by answering
+ our short survey.
+ </tal:description>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </section>
- </div><!-- yui-gc -->
</div><!-- homepage -->
</div><!--main-->
</body>
Follow ups
