Added layout of filters on project page.

This commit is contained in:
Russell Keith-Magee 2016-06-27 19:18:03 +08:00
parent 94d6f8de26
commit 94eea69912
17 changed files with 129 additions and 30 deletions

View file

@ -180,3 +180,21 @@ body {
.icon {
width: 25px;
}
/*----------------------------------------------------
Projects
--------------------------------------------------- */
.project-type h6 {
font-weight: bold;
text-align: center;
}
.gutter ul {
list-style-type: none;
}
.gutter li {
text-align: left;
cursor: pointer;
}

View file

@ -1,6 +1,6 @@
name: Batavia
---
project_type: transpiler
project_type: bridge
---
maturity: alpha
---

View file

@ -1,6 +1,6 @@
name: Briefcase
---
project_type: devtool
project_type: tool
---
maturity: beta
---

View file

@ -1,6 +1,6 @@
name: Bugjar
---
project_type: devtool
project_type: tool
---
maturity: experimental
---

View file

@ -25,7 +25,7 @@ languages: py
---
platforms: macOS, linux, win
---
project_type: devtool
project_type: tool
---
pun:

View file

@ -1,6 +1,6 @@
name: Duvet
---
project_type: devtool
project_type: tool
---
maturity: alpha
---

View file

@ -1,6 +1,6 @@
name: Galley
---
project_type: devtool
project_type: tool
---
maturity: experimental
---

View file

@ -1,6 +1,6 @@
name: Remarkable
---
project_type: satool
project_type: app
---
maturity: beta
---

View file

@ -1,6 +1,6 @@
name: Rubicon
---
project_type: library
project_type: bridge
---
maturity: production
---

View file

@ -1,6 +1,6 @@
name: Seasnake
---
project_type: transpiler
project_type: bridge
---
maturity: alpha
---

View file

@ -1,6 +1,6 @@
name: VOC
---
project_type: transpiler
project_type: bridge
---
maturity: alpha
---

View file

@ -6,8 +6,9 @@
satool = Standalone tool
devtool = Development tool
library = Library
transpiler = Transpiler
bridge = Bridge
template = Template
support = Support
; Maturity
attic = Attic

View file

@ -12,8 +12,8 @@ width = 1/2
[fields.project_type]
label = Project type
type = select
choices = satool, devtool, library, transpiler, template, support
choice_labels = Standalone tool, Development tool, Library, Transpiler, Template, Support
choices = app, tool, library, bridge, template, support
choice_labels = Application, Tool, Library, Bridge, Template, Support
width = 1/4
[fields.maturity]

View file

@ -24,27 +24,27 @@
{% endblock %}
{% block body %}
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-8 col-md-8 col-lg-8 col-xl-8 project-description">
<div class="col-sm-12 col-md-8 project-description">
<h3>Python native tools...</h3>
<p><img src="/static/images/python.png" class="hidden-sm-down pull-sm-right pull-md-right pull-lg-right pull-xl-right"> Python has proven itself as a highly capable language - approachable for newcomers, but powerful in the hands of experts. Why shouldn't you be able to use Python everywhere that you need to tell a computer to do something? And shouldn't your tools exploit all the capabilities of Python as a language, not just the bits that map nicely to a C binding?</p>
<p><img src="/static/images/python.png" class="hidden-sm-down pull-sm-right"> Python has proven itself as a highly capable language - approachable for newcomers, but powerful in the hands of experts. Why shouldn't you be able to use Python everywhere that you need to tell a computer to do something? And shouldn't your tools exploit all the capabilities of Python as a language, not just the bits that map nicely to a C binding?</p>
<h3>...on mobile &amp; desktop...</h3>
<p><img src="/static/images/cross-platform.png" class="hidden-sm-down pull-sm-left pull-md-left pull-lg-left pull-xl-left"> Modern computing doesn't happen in an 80x25 console window. It happens on phones, tablets, and desktop machines with rich user interfaces. Shouldn't you be able to use Python in all those locations, and exploit the unique capabilities of those platforms?</p>
<p><img src="/static/images/cross-platform.png" class="hidden-sm-down pull-sm-left"> Modern computing doesn't happen in an 80x25 console window. It happens on phones, tablets, and desktop machines with rich user interfaces. Shouldn't you be able to use Python in all those locations, and exploit the unique capabilities of those platforms?</p>
<h3>...behaving natively.</h3>
<p><img src="/static/images/native.png" class="hidden-sm-down pull-sm-right pull-md-right pull-lg-right pull-xl-right"> End users shouldn't have to care what language their tools are written in. And that starts with looking and behaving like completely native tools. Native appearance, native behavior, delivered in the way a native app is delivered. Why shouldn't your Python tools fit in just as well as a native tool?</p>
<p><img src="/static/images/native.png" class="hidden-sm-down pull-sm-right"> End users shouldn't have to care what language their tools are written in. And that starts with looking and behaving like completely native tools. Native appearance, native behavior, delivered in the way a native app is delivered. Why shouldn't your Python tools fit in just as well as a native tool?</p>
<h2>This is BeeWare.</h2>
<p><img src="/static/images/brutus-97.png" class="hidden-sm-down pull-sm-left pull-md-left pull-lg-left pull-xl-left"> This is what BeeWare provides. Tools to help you write Python code with a rich, native user interface; and the libraries and support code necessary to get that code running on iOS, Android, macOS, Linux, Windows, tvOS, and more.</p>
<p><img src="/static/images/brutus-97.png" class="hidden-sm-down pull-sm-left"> This is what BeeWare provides. Tools to help you write Python code with a rich, native user interface; and the libraries and support code necessary to get that code running on iOS, Android, macOS, Linux, Windows, tvOS, and more.</p>
<h3>Open source</h3>
<p><img src="/static/images/opensource.png" class="hidden-sm-down pull-sm-right pull-md-right pull-lg-right pull-xl-right"> The Open Source development process has proven itself to be the most reliable way to develop robust and reliable software. That's why the entire BeeWare suite of tools are BSD licensed, and available for all to use and modify.</p>
<p><img src="/static/images/opensource.png" class="hidden-sm-down pull-sm-right"> The Open Source development process has proven itself to be the most reliable way to develop robust and reliable software. That's why the entire BeeWare suite of tools are BSD licensed, and available for all to use and modify.</p>
<h3>All contributions welcome</h3>
<p><img src="/static/images/labhr.png" class="hidden-sm-down pull-sm-left pull-md-left pull-lg-left pull-xl-left"> But it's not just about code. A successful software project requires documentation, design skills, feedback and bug reports. The BeeWare community acknowledges that <i>all</i> contributions are important - not just the ones that come as a pull request on Github.</p>
<p><img src="/static/images/labhr.png" class="hidden-sm-down pull-sm-left"> But it's not just about code. A successful software project requires documentation, design skills, feedback and bug reports. The BeeWare community acknowledges that <i>all</i> contributions are important - not just the ones that come as a pull request on Github.</p>
<h3>From diversity comes strength</h3>
<p><img src="/static/images/diversity.png" class="hidden-sm-down pull-sm-right pull-md-right pull-lg-right pull-xl-right"> A diverse community is a strong community. This means being accepting people of all levels of experience, from all backgrounds, of all races, creeds, orientations and expressions. The BeeWare project is committed to developing and maintaining a diverse, welcoming community. We have an open offer to mentor anyone who wants to get involved as a contributor, backed up by a <a href="community/code-of-conduct/">Code of Conduct</a> that is rigourously enforced. </p>
<p><img src="/static/images/diversity.png" class="hidden-sm-down pull-sm-right"> A diverse community is a strong community. This means being accepting people of all levels of experience, from all backgrounds, of all races, creeds, orientations and expressions. The BeeWare project is committed to developing and maintaining a diverse, welcoming community. We have an open offer to mentor anyone who wants to get involved as a contributor, backed up by a <a href="community/code-of-conduct/">Code of Conduct</a> that is rigourously enforced. </p>
<hr/>
@ -64,7 +64,7 @@
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-4 col-lg-4 col-xl-4 gutter">
<div class="col-sm-12 col-md-4 gutter">
<h5>Many thanks to</h5>
<div id="carousel-sponsors" class="carousel slide" data-ride="carousel">

View file

@ -12,13 +12,13 @@
{% endblock %}
{% block body %}
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-8 col-md-8 col-lg-8 col-xl-8">
<div class="col-sm-12 col-md-8">
{{ this.body }}
{% for child in this.children %}
<h2><a href="{{ child|url }}">{{ child.title }}</a></h2>
<p>{{ child.summary }}</p>
{% endfor %}
</div>
<div class="hidden-sm-down col-md-4 col-md-4 col-lg-4 col-xl-4"></div>
<div class="hidden-sm-down col-md-4"></div>
</div>
{% endblock %}

View file

@ -15,7 +15,7 @@
{% endblock %}
{% block body %}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
<div class="col-sm-12 col-md-8">
{% if this.project_type == "template" %}
<p>This project is a <a href="https://github.com/audreyr/cookiecutter">CookieCutter</a> template. Explain what CookieCutter is here</p>
@ -39,7 +39,7 @@
<p>{{ this.pun }}</p>
{% endif %}
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 gutter">
<div class="col-sm-12 col-md-4 gutter">
<a href="https://github.com/pybee/{{this._id}}">GitHub Source Code</a>
<hr>
<li>{{ badge("Project Type", this.project_type) }}

View file

@ -12,17 +12,97 @@
{% endblock %}
{% block body %}
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="col-sm-12 col-md-8">
<p>BeeWare isn't a single package or tool. It's an entire <em>suite</em> of tools. Each tool performs exactly one task in the app development process, with the output of one tool forming the input to the next.</p>
<p>Each project of the BeeWare suite fills one of the following 6 roles:</p>
</div>
<div class="hidden-sm-down col-md-4"></div>
</div>
<div class="row project-type">
<div class="col-md-4">
<h6>Application</h6>
<p>A standalone end-user application. Although applications are written in Python, this is an implementation detail - you shouldn't ever be aware of this fact. Applications are installed and run the same way as any other end-user application on your computer.</p>
</div>
<div class="col-md-4">
<h6>Tools</h6>
<p>A special class of application that is installed into a Python virtual environment. Tools are used to assist when developing standalone applications, in roles from debugging and testing to packaging.</p>
</div>
<div class="col-md-4">
<h6>Libraries</h6>
<p>A re-usable block of code that can be used in a project. Libraries will usually be installed as dependencies of tools, applications, or other libraries.</p>
</div>
</div>
<div class="row project-type">
<div class="col-md-4">
<h6>Bridge</h6>
<p>A bridge is a combination tool &amp; library that is used to run Python code where the CPython runtime cannot be used. The bridge provides the mechanism to run Python code in a different runtime environment.</p>
</div>
<div class="col-md-4">
<h6>Templates</h6>
<p><a href="">Cookiecutter</a> templates for the boilerplate code needed to get a Python project running as an application on a particular platform.</p>
</div>
<div class="col-md-4">
<h6>Support</h6>
<p>Pre-packaged bundles of compiled artefacts that are needed to run on a particular platform.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-8">
<h2 class="clearfix">The BeeWare Projects</h2>
{% for child in this.children %}
<div class="clearfix">
<img src="./{{ child._id }}/{{ child._id }}-72.png" class="pull-xs-left pull-sm-left pull-md-left pull-lg-left pull-xl-left">
<img src="./{{ child._id }}/{{ child._id }}-72.png" class="pull-xs-left">
<h2><a href="{{ child|url }}">{{ child.name }}</a></h2>
<p>{{ child.short_description }}</p>
</div>
{% endfor %}
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-3 gutter">
Filters over here...
<div class="col-sm-12 col-md-4 gutter">
<h6>Project type</h6>
<ul>
<li onclick="toggle('app')">Application</a>
<li onclick="toggle('tool')">Tool</a>
<li onclick="toggle('library')">Library</a>
<li onclick="toggle('bridge')">Bridge</a>
<li onclick="toggle('template')">Template</a>
<li onclick="toggle('support')">Support</a>
</ul>
<h6>Platform</h6>
<ul>
<li onclick="toggle('independent')">Platform independent</a>
<li onclick="toggle('macOS')"><i class="fa fa-apple" aria-hidden="true"></i> macOS</a>
<li onclick="toggle('linux')"><i class="fa fa-linux" aria-hidden="true"></i> Linux</a>
<li onclick="toggle('win')"><i class="fa fa-windows" aria-hidden="true"></i> Windows</a>
<li onclick="toggle('iOS')"><i class="fa fa-apple" aria-hidden="true"></i> iOS</a>
<li onclick="toggle('android')"><i class="fa fa-android" aria-hidden="true"></i> Android</a>
<li onclick="toggle('tvOS')"><i class="fa fa-apple" aria-hidden="true"></i> tvOS</a>
<li onclick="toggle('watchOS')"><i class="fa fa-apple" aria-hidden="true"></i> watchOS</a>
<li onclick="toggle('browser')"><i class="fa fa-chrome" aria-hidden="true"></i> Browser</a>
</ul>
<h6>Language</h6>
<ul>
<li onclick="toggle('py')">Python</a>
<li onclick="toggle('c')">C</a>
<li onclick="toggle('m')">Objective C</a>
<li onclick="toggle('cpp')">C++</a>
<li onclick="toggle('java')">Java</a>
<li onclick="toggle('js')">JavaScript</a>
</ul>
<h6>Maturity</h6>
<ul>
<li onclick="toggle('production')">Stable</a>
<li onclick="toggle('beta')">In development</a>
<li onclick="toggle('alpha')">Early development</a>
<li onclick="toggle('experimental')">Experimental</a>
<li onclick="toggle('attic')">Attic</a>
</ul>
</div>
</div>
{% endblock %}