wagtail-materializecss 0.0.6

Creator: danarutscher

Last updated:

Add to Cart

Description:

wagtailmaterializecss 0.0.6

# wagtail_materializecssStyle your wagtail pages with materializecss!Run the demo project to see how it in action.### Includes * Demo project to show how you may want to style a page * Component blocks * Badge * Breadcrumb * Button * Card * Collection * FAB * Footer * Icon * links * Navbar * Preloader * Scrollspy (table of contents) * MaterializePage with base.html * Default page variables to style the navbar and footer * Additionally includes Abstract models Navbar and Footer * Functions to get common components for StreamFields * get_headings(exclude=None) - Return h1, h2, h3, h4, h5, h6 tags with scrollspy table of contetns support * get_components(exclude=None) - Returns blocks for Card, Collection, Button, Icon, ... * get_footer_blocks(exclude=None) - Returns common components that someone might want in a footer.## Example Page![Example Page](./example_page.PNG)![Example Admin](example_admin.PNG)```pythonfrom django.db import modelsfrom wagtail.core.fields import StreamField, RichTextFieldfrom wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel, MultiFieldPanel, FieldRowPanelfrom wagtail.images.edit_handlers import ImageChooserPanelfrom wagtail.core.blocks import RichTextBlockfrom wagtail_materializecss.models import MaterializePage, get_headings, get_componentsfrom wagtail_materializecss.components import Collectionclass BloggerHomePage(MaterializePage): author = models.CharField(max_length=255) background_image = models.ForeignKey('wagtailimages.Image', on_delete=models.SET_NULL, null=True, related_name='+') user_image = models.ForeignKey('wagtailimages.Image', on_delete=models.SET_NULL, null=True, related_name='+') body = StreamField([ *get_headings(exclude=['h6']), ('paragraph', RichTextBlock(icon='pilcrow')), ('collection', Collection()), *get_components(), ]) content_panels = MaterializePage.content_panels + [ MultiFieldPanel([ FieldPanel('author'), ImageChooserPanel('background_image'), ImageChooserPanel('user_image'), ], heading="Author Fields",), FieldPanel('intro', classname="full"), ]```Template```djangotemplate{% extends "wagtail_materializecss/base.html" %}{% load static wagtailcore_tags wagtailimages_tags wagtail_materializecss_tags %}{% block body_class %}template-bloggerhomepage{% endblock %}{% block before_container %} <div class="row"> {% image page.background_image original as page_image %} <div class='hero-image' style="background-image: url('{{ page_image.url }}')"></div> </div>{% endblock %}{% block content %} <div class="row"> <div class="col s12 m4 right" style="margin-top: 1rem;"> {% image page.user_image fill-200x200 class="responsive-img circle center-object" %} <h3 class="center-object {{ page.color }}-text">{{ page.author }}</h3> </div> <div class="col s12 m8"> <h1 class="{{ page.color }}-text scrollspy">Introduction</h1> {% include_block page.body %} </div> </div> <div class="row"> <h5>Posts</h5> <div class="divider"></div> {% for post in blogpages %} <div class="col s12 m6 l4"> {% make_link None "Go to Post" post.specific as post_link %} {% make_card post.specific.title post.specific.description post_link size='small' %} </div> {% endfor %} </div>{% endblock %}```

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Customer Reviews

There are no reviews.