pinax / pinax-theme-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

269.0 26.0 140.0 4.2 MB

A theme for Pinax based on Twitter's Bootstrap

License: Other

Python 10.39% HTML 86.55% CSS 0.50% JavaScript 2.55%

pinax-theme-bootstrap's Introduction

Pinax Theme Bootstrap

Pinax

Pinax is an open-source platform built on the Django Web Framework. It is an ecosystem of reusable Django apps, themes, and starter project templates. This collection can be found at http://pinaxproject.com.

pinax-theme-bootstrap

pinax-theme-bootstrap is a theme for Pinax based on the open source Bootstrap front-end framework and the Font Awesome icon library.

Getting Started

Include pinax-theme-bootstrap in your requirements file and include pinax_theme_bootstrap and bootstrapform (which is installed alongside this theme) in your INSTALLED APPS.

Add django.core.context_processors.request and pinax_theme_bootstrap.context_processors.theme to your TEMPLATE_CONTEXT_PROCESSORS to ensure the user selector and site name work correctly.

Make sure both template loaders and staticfiles finders includes app directories.

Site name comes from Sites fixture.

Your site_base.html should extend theme_bootstrap/base.html and should provide footer and nav blocks (the latter should just be a ul of li of a links).

Your pages should have blocks head_title and body and should extend site_base.html.

The url name home should be defined as the homepage.

Dependencies

Bootstrap
Font Awesome
jQuery

We previously vendored these packages and had an undocumented build process pre-configured in our starter projects that use this theme. This has gone the way of the 80s hair band and we are now using proper packaging in the starter projects.

The templates in this project are currently tested with the following versions:

Bootstrap 3.3.5
Font Awesome 4.4.0
jQuery 2.1.4

If you are not using one of our starter projects, you will need to go about setting up a build environment to use these libraries. We recommend using webpack and installing these libraries with npm.

Upgrade Notes

Upgrading to 6.0, you should be aware of a few changes:

style_base and extra_style blocks have been merged into styles
script_base and extra_script blocks have been merged into scripts and the theme.js script is now loaded within a theme_script block after the scripts block. It now expects that you'll load the necessary jQuery library at the project level in the scripts block.
No vendored assets ship with the theme anymore. You are responsible for setting up your own static assets at the project level. We have made it easy by just using one of our starter projects.

Documentation

The pinax-theme-bootstrap documentation is currently under construction. If you would like to help us write documentation, please join our Slack team and let us know! The Pinax documentation is available at http://pinaxproject.com/pinax/.

Contribute

See this blog post http://blog.pinaxproject.com/2016/02/26/recap-february-pinax-hangout/ including a video, or our How to Contribute (http://pinaxproject.com/pinax/how_to_contribute/) section for an overview on how contributing to Pinax works. For concrete contribution ideas, please see our Ways to Contribute/What We Need Help With (http://pinaxproject.com/pinax/ways_to_contribute/) section.

In case of any questions we recommend you join our Pinax Slack team (http://slack.pinaxproject.com) and ping us there instead of creating an issue on GitHub. Creating issues on GitHub is of course also valid but we are usually able to help you faster if you ping us in Slack.

We also highly recommend reading our Open Source and Self-Care blog post (http://blog.pinaxproject.com/2016/01/19/open-source-and-self-care/).

License

The Pinax Bootstrap theme is released under the MIT license.

Code of Conduct

In order to foster a kind, inclusive, and harassment-free community, the Pinax Project has a code of conduct, which can be found here http://pinaxproject.com/pinax/code_of_conduct/. We ask you to treat everyone as a smart human programmer that shares an interest in Python, Django, and Pinax with you.

Pinax Project Blog and Twitter

For updates and news regarding the Pinax Project, please follow us on Twitter at @pinaxproject and check out our blog http://blog.pinaxproject.com.

pinax-theme-bootstrap's People

Contributors

Stargazers

Watchers

Forkers

crccheck nkeilar tubaman bmihelac rabidcabbage saz tswicegood issackelly santiagobasulto applegrew dfalk azizmb henrosoft joshmarshall dstufft kevinelong chrisdev lilac mrmmm strogo httpdss uxscripts jonykalavera kazu2012 ameya1984 cheekybastard arnima scopart matiasherranz jcbclnt justhamade hwangtamu scorpiusjin zheli lwbcsd iepathos prashantsharma43 shinsingsam arkebi lptorres johansja takeplace garnertb chenjd chu888chu888 vichali eldavitech geyser rizumu paulmand3l dbfclark ptwobrussell rajushahi magogoba llenroc carpincho wrightrocket jacobwegner ravashjalil rw239 mgaitan alcolo47 beigna haganf shahidgadda yulka hivernales jrisaza durasnow tarunbehal amnesic grahamu shekharkhanna ethankent mclean25 mikeshi42 hsingjun0 huangfeng dzyk jpic irothschild aungmyo csenkbeil zodman rosepog 837278709 atrus6 bytearchive micrypt qorbarsi kleopatra999 buddingboy lovetrap01 oneuptim konoufo yvescr smeek153 okere-prince zerokami shutahuck

pinax-theme-bootstrap's Issues

Account dropdown menu is hidden behind the main container on mobile.

After you log into the site, the account dropdown menu will become unaccessible because it is hidden behind the main content on mobile.

Need block for <body> attributes, to enable scrollspy

Right now, there's no good way to enable scrollspy with the included base.html. Changing the body tag to look like:

<body class="{% block body_class %}{% endblock %}" id="{% block body_id %}{% endblock %}"{% block body_extra_attributes %}{% endblock %}>

would be helpful

inconsistency in use of section between base.html and subnav_base.html

base.html has:

{% block body_base %}
    <section id="content_body">
        <div class="container">
            ...
        </div>
    </section>
{% endblock %}

whereas subnav_base.html has:

{% block body_base %}
    <div class="container">
        ....
    </div>
{% endblock %}

The subnav_base.html template should have the section element too.

consider swapping Account and Settings in in account/base.html

In pinax-project-account the overall link is Settings and the first part is headed "Account"

no padding around columns in account email table

missing waitinglist/success.html

missing signup_codes/failure.html

rethink relationship between _account_bar in theme vs projects

At the moment, the theme contains an _account_bar appropriate to and assuming django-user-accounts is used. This is then zeroed out in starter projects that don't use django-user-accounts. The _account_bar seems to be then duplicated in the account project (we need to check if it's in fact exactly the same).

So Option 1 would be just make the _account_bar in PTB blank to remove the duplication.

Option 2 would be to rename the _account_bar in PTB to something else and a project that wants to use it includes that newly named template in their _account_bar

But then Patrick suggested Option 3 which I like more than Option 2: rather than have the extra level of indirection, just have the various starter projects either include PTB's _account_bar or not in their own site_base.html

get rid of banner_base.html and less_base.html

Make pinax-theme.less main style sheet, provide unmodified bootstrap files

This is for the *less branch.

I think that the original bootstrap .less files should be provided as is and any modifications should go to a separate style sheet as overrides of the original rules.

This will improve maintainability and help avoid merging errors when updating bootstrap assets.

For example right now there is a modified version of sprites.less that has a background-image url path adjusted to Django project layout. This modification could easily be moved to a separate style sheet that will override the original value. The pinax-theme.less then could look like:

@import "bootstrap.less";

i {
  background-image: url(../img/glyphicons-halflings-sprite.png);
}

// any other Pinax specific styles

Additionally I think it would be useful to put bootstrap files in a less/bootstrap or even better less/pinax/bootstrap namespace directory to avoid conflicts with other static assets. And similarly for js and img files as well.

styling on form errors

A general form error message, like is a username/password combo are incorrect, doesn't apply the proper styling. This is with latest Pinax and theme. Screenshot: http://dl.dropbox.com/u/363845/Screenshots/j_0d.png

Release for Bootstrap v2.3.2

I see Bootstrap has been updated to v2.3.2 in master. Any chance of getting a release so we can pick this up? It looks like it'll fix a problem for some of our users. (PyCon/pycon2019#206)

Inline forms are not supported

as_bootstrap templatefilter wraps fields in control-group and controls divs. This currently makes it impossible to apply form-inline class.

Non translatable strings

There are non translatable strings in templates for example in delete_account.html: https://github.com/pinax/pinax-theme-bootstrap/blob/master/pinax_theme_bootstrap/templates/account/delete.html

It would be great if all strings were translatable.

Of course, the problem is that running makemessages in django-user-accounts won't help since the templates are in pinax-theme-bootstrap. So I'm also wondering what's your take on this.

"{% load i18n %}" missing in template/account/settings.html

While the translation tags are added in the template/account/settings.html , the necessary {% load i18n %} is not added into the template, as the official doc of django points out:

https://docs.djangoproject.com/en/1.7/topics/i18n/translation/#internationalization-in-template-code

To give your template access to these tags, put {% load i18n %} toward the top of your template. As with all template tags, this tag needs to be loaded in all templates which use translations, even those templates that extend from other templates which have already loaded the i18n tag.

As a result, when users enters the site setting.html , django will give out an error

Invalid block tag: 'trans', expected 'endblock'

I suppose we should insert a line of {% load i18n %} at the head of the settings.html?

footer kicked out of subnav_base

Since the footer has been moved into base.html {% block body_base %} and subnav_base overrides this whole block without including the footer, well, footer's gone in all my subnav_base extensions :( Not a big fat issue, but I guess it wasn't the first intention.

.alert-error no longer in bootstrap3 ,is now only .alert-danger

I had to add .alert-error to work with the messages framework, don't know where you want to put this, i added this to my custom less:

.alert-error {
  .alert-danger;
}

btn-group class does not work

when using btn-group class, it does not group buttons as it should according to this: http://twitter.github.com/bootstrap/components.html#buttonGroups

dropdown menu not showing

With the bootstrap theme that were included by Pinax==0.9a2 (pinax-theme-boostrap==0.1.2), when doing the following sequence:

create a pinax instance with bootstrap theme, create an account and login.
open the site with wide browser viewport
click on the dropdown menu on topbar, check that the dropdown works fine
resize the browser viewport to turn into tablet layout
open the collapsible topbar menu
resize the browser viewport back into desktop layout
click on the dropdown menu on topbar again, now the dropdown menu won't show up, only the inverted triangle

Changing account e-mail

Shouldn't the Changing E-mail setting require confirmation, just like when the user signs up? Implementing this may make this package a bit more turnkey for implementors.

make subnav base 3/9 not 2/10

update to bootstrap 2.0.3

need to update media to bootstrap 2.0.3 and review changelog for any syntax changes

pinax.modal.js does not correctly handle selectors that return multiple elements

The original bootstrap-modal.js allows the common jquery pattern of calling functions on every element in a selector: $("a").modal() would essentially create a Modal instance using each a element in the document. Using pinax-bootstrap-theme breaks this pattern. Even more problematical, it does so by assigning the same modal dialogue to every element in the selector. In cases where data is being edited or deleted via modal dialogues, this leads to silent data corruption or loss. Currently, this can be worked around by using .each() to call .modal() on each element: $("a").each(function() { $(this).modal(); }); However, this is not documented anywhere, or immediately obvious to someone familiar with bootstrap's original implementation.

Add templates for pinax-stripe

Here are screenshots from templates I've worked up in what I hope will become a demo project.

{% load bootstrap_form_filters %} need to be replaced with {% load bootstrap_tags %}

here https://github.com/pinax/pinax-theme-bootstrap/blob/master/pinax_theme_bootstrap/templates/account/email.html#L4 error: {% load bootstrap_form_filters %} need to be replaced with {% load bootstrap_tags %}

Templates seem out of date from django-user-accounts

Trying to crib from this repo (namely DUA doesn't say what some of these templates are or what context variables they get, etc), but its out of date and making it difficult.

Missing tags for releases

The repo does not have tags for recent pypi releases, which makes hard to track development. for example, I want to fork from 2.0.2.post3 to introduce some changes, and there's no information about which commit that version is.

topbar requires bootstrap-topbar.js

topbar requires bootstrap-dropdown.js and it's should be included from bootstrap's js-examples branch.
without this js file menus doesn't drops down.

remove legacy template files

Upgrade Font Awesome to 4.2 / Bootstrap 3.3.0

http://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/

Unbundle Vendored Assets

Desired State

I would love to see us break out including jQuery, bootstrap, and font-awesome, directly into versioned releases of the theme and instead use npm and webpack.

bootstrap-webpack seems promising but am having a difficult time of seeing how to bridge the gap of being able to ship a Django app as a theme that is (mostly) plug and play.

Granted, right now, it's far from plug and play given the Makefile and static setup.

Current Thoughts of How to Get There

Remove the vendored code from the theme
Document / Provide package.json, webpack.config.js, bootstrap.config.less and bootstrap.config.js as part of the theme documentation
Ship our starter projects with the setup of these 4 files instead of the Makefile

But I was wondering if we could do better. Is there some way that the installation of the theme couldn't be something like:

Add pinax_theme_bootstrap to INSTALLED_APPS
Run ./manage.py init_theme to generate the 4 files needed

Questions

Is there a better way to handle the bootstrapping than running ./manage.py init_theme (e.g. npm install pinax-theme-bootstrap)?
Is there anything about what I am proposing that is inappropriate or could be done better?

Translation files missing

I see there are various translation files on transifex, should these be pulled into github?

The main reason I'm asking this question is because I'm wondering how I should go about translating pinax-theme-bootstrap. What's your recommendation?

link between sign up and log in

Add templates for pinax-documents

pinax.modal.js breaks non-ajax modal dialogues

If you're using the pinax-bootstrap theme then you cannot create static modal dialogues ala the example in the twitter bootstrap docs.

The following does not work for example:

    <a class="m btn" href="#modal1">Modal 1</a>

    <div class="modal" id="modal1">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">×</button>
            <h3>Modal 1 header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
</div>

Re-evaluate Theme Structure

@yulka had originally sent me these notes per a change she made in her fork and wanted to share publicly so we could discuss in the open. Thanks, Yulka!

one reason I often end up overriding the base template is because it doesn’t support sticky footer. By adding block page and leaving block footer outside of it, we can add a couple of styles in css and have a have the footer stick
make markup more semantic: aside, section instead of div
make class names consistent, always use dashes: main-content, not main_content
use scss, not just css
create columns inside scss, keep them out of html (see changes to sidebar_base.html)
use sidebar_base.html instead of subnav_base.html, because there can be other content in the sidebar, not just navigation
give classes to the site header and footer since these html tags can be used in other places (header.header, footer.footer)
refactor account templates. markup there is very inconsistent and I always end up rewriting all those templates (e.g. always use h2 for page titles instead of a mix of h1, h2 and legend)
avoid tags like hr, borders can be added in css (see base.html, footer)

bootstrap.min.js missing

See: https://github.com/pinax/pinax-theme-bootstrap/blob/master/pinax_theme_bootstrap/templates/theme_bootstrap/base.html#L83

This file is not part of the source tree or package.

_account_bar.html doesn't honour ACCOUNT_OPEN_SIGNUP

It should not offer Sign Up as an option if ACCOUNT_OPEN_SIGNUP = False

Requires pinax

pinax-theme-bootstrap seems to depend on pinax, as far as I can tell. I tried to install it following the directions, but it did not load, due to a missing ifsetting_tag template tag. With a little research, I found that this tag was provided by pinax. So it seems as though pinax should be listed as a dependency. Maybe this is implied since this is a pinax app, but if so, that wasn't clear to me, because my understanding was that the external apps more or less stand alone, save for explicit dependencies.

{% load account_tags %} forces an error in clean installation

I have just started a new django project and decided to give pinax-theme-bootstrap a try. I am currently not using any other django apps from Pinax project.

According to documentation, I only needed to install and add to settings.INSTALLED_APPS 2 modules: 'pinax_theme_bootstrap' and 'django_forms_bootstrap'. Unfortunately after creating some basic templates I encountered an error: 'account_tags' is not a valid tag library: Template library account_tags not found

{% load account_tags %} comes from _account_bar.html template which seems to be included by theme_bootstrap/base.html template which I am supposed to use as a basis for my site_base.html according to documentation.

If I understand correctly, I actually need to install an extra package, django-user-accounts, to get rid of this error (and I need to properly follow instructions to include it properly in settings.py and urls.py).

So, my conclusion is either documentation should be updated to include django-user-accounts as a requirement or the templates should be fixed to not cause exceptions if this package is not installed

Can pinax-theme-bootstrap be used without Pinax?

I'm trying to use pinax-theme-bootstrap for a site that doesn't use Pinax. The theming of the homepage and other subpages seems to work, but when I go to the login, logout or any of the /account pages, it doesn't seem to load the templates in pinax_theme_bootstrap/templates/account. Is there something else I need to do in order to get these pages to load?

idios css

I'm not finding this idios css file anywere:

<link rel="stylesheet" href="{{ STATIC_URL }}pinax/css/idios.css" />

From https://github.com/pinax/pinax-theme-bootstrap/blob/master/pinax_theme_bootstrap/templates/idios/base.html

For reference see http://zoompf.com/blog/2012/05/html5shiv-and-serving-content-from-code-repositories.