Add frontend form layout demo

viewflow · Jul 4, 2016 · 897ba40 · 897ba40
1 parent 2773e5a
commit 897ba40
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 16 deletions.
diff --git a/demo/tests/integration/urls.py b/demo/tests/integration/urls.py
@@ -6,8 +6,8 @@
 urlpatterns = [
     url('^$', generic.RedirectView.as_view(url='./city/'), name="index"),
     url('^city/', include(views.CityViewSet().urls)),
-    url('^continent/', include(views.ContinentsViewSet().urls)),
-    url('^country/', include(views.CountriesViewSet().urls)),
-    url('^ocean/', include(views.OceansViewSet().urls)),
-    url('^sea/', include(views.SeasViewSet().urls)),
-]
+    url('^continent/', include(views.ContinentViewSet().urls)),
+    url('^country/', include(views.CountryViewSet().urls)),
+    url('^ocean/', include(views.OceanViewSet().urls)),
+    url('^sea/', include(views.SeaViewSet().urls)),
+]
diff --git a/demo/tests/integration/views.py b/demo/tests/integration/views.py
@@ -1,3 +1,4 @@
+from material import Layout, Row, Fieldset
 from material.frontend.views import ModelViewSet
 from . import models
 
@@ -7,11 +8,21 @@ class CityViewSet(ModelViewSet):
     list_display = ('name', 'country', 'population')
 
 
-class ContinentsViewSet(ModelViewSet):
+class ContinentViewSet(ModelViewSet):
     model = models.Continent
     list_display = (
         'name', 'surrounded_oceans', 'countries_count',
         'area', 'population', )
+    layout = Layout(
+        'name',
+        Fieldset('Details',
+                 'area',
+                 Row('oceans', 'hemisphere'),
+                 Row('population', 'population_density')),
+        Fieldset('Fun facts',
+                 Row('largest_country', 'biggest_mountain'),
+                 Row('biggest_city', 'longest_river'))
+    )
 
     def surrounded_oceans(self, contintent):
         return ', '.join(ocean.name for ocean in contintent.oceans.all())
@@ -20,7 +31,7 @@ def countries_count(self, contintent):
         return contintent.countries.count()
 
 
-class CountriesViewSet(ModelViewSet):
+class CountryViewSet(ModelViewSet):
     model = models.Country
     list_display = (
         'tld', 'name', 'continent',
@@ -37,14 +48,20 @@ def became_independent_in_20_century(self, country):
             return 1900 <= country.independence_day.year <= 2000
 
 
-class OceansViewSet(ModelViewSet):
+class OceanViewSet(ModelViewSet):
     model = models.Ocean
     list_display = ('name', 'area', )
 
 
-class SeasViewSet(ModelViewSet):
+class SeaViewSet(ModelViewSet):
     model = models.Sea
     list_display = ('name', 'parent', 'ocean', 'sea_area', )
+    layout = Layout(
+        Row('name', 'parent'),
+        'ocean',
+        Row('area', 'avg_depth', 'max_depth'),
+        'basin_countries'
+    )
 
     def sea_area(self, sea):
         return None if sea.area == 0 else sea.area
diff --git a/material/frontend/static/material/frontend/css/frontend.css b/material/frontend/static/material/frontend/css/frontend.css
@@ -156,10 +156,20 @@ ul.side-nav.module-menu li.active > a > span.badge {
   margin-bottom: 10px;
   margin-top: 0px; }
 
-.frontend-form .card-content > .row {
+.frontend-form .card-content .row {
   margin-left: -0.75rem;
   margin-right: -0.75rem; }
 
+.frontend-form .section {
+  padding-top: 0;
+  padding-bottom: 0; }
+
+.frontend-form h5 {
+  font-size: 1.2rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid black;
+  margin-bottom: 10px; }
+
 /*
   Responsible layout 
 */

diff --git a/material/frontend/static/material/frontend/sass/frontend.scss b/material/frontend/static/material/frontend/sass/frontend.scss
@@ -201,10 +201,23 @@ ul.side-nav.module-menu li.active>a>span.badge {
     margin-top: 0px;
 }
 
-.frontend-form .card-content>.row {
+.frontend-form .card-content .row {
     margin-left: -0.75rem;
     margin-right: -0.75rem;
 }
+
+.frontend-form .section {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.frontend-form h5 {
+    font-size: 1.2rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 2px solid black;
+	margin-bottom: 10px;
+}
+
 /*
   Responsible layout 
 */

diff --git a/material/frontend/templates/material/frontend/views/form.html b/material/frontend/templates/material/frontend/views/form.html
@@ -13,7 +13,7 @@
             {% csrf_token %}
             <div class="card">
                 <div class="card-content">
-                    <div class="form-title">{% if object.pk %}{% trans 'Change' %}{% else %}{% trans 'Add' %}{% endif %} {{ opts.verbose_name|title }}</div>
+                    <div class="form-title">{% if object.pk %}{{ opts.verbose_name|title }}: {{ object }}{% else %}{% trans 'Add' %} {{ opts.verbose_name|title }}{% endif %}</div>
                     {% block form %}
                     {% if view.layout or form.layout%}
                         {% if view.layout %}

diff --git a/material/frontend/views/detail.py b/material/frontend/views/detail.py
@@ -7,7 +7,7 @@ def get_template_names(self):
             opts = self.model._meta
             return [
                 '{}/{}{}.html'.format(opts.app_label, opts.model_name, self.template_name_suffix),
-                'material/frontend/views/details.html',
+                'material/frontend/views/detail.html',
             ]
 
         return [self.template_name]
diff --git a/material/frontend/views/viewset.py b/material/frontend/views/viewset.py
@@ -24,7 +24,7 @@ class ModelViewSet(object):
     list_display = DEFAULT
     list_display_links = DEFAULT
 
-    form_layout = DEFAULT
+    layout = DEFAULT
     form_class = DEFAULT
 
     def _filter_options(self, view_class, options):
@@ -65,7 +65,7 @@ def get_common_kwargs(self, **kwargs):
 
     def get_create_view_kwargs(self, **kwargs):
         result = {
-            'layout': self.form_layout,
+            'layout': self.layout,
             'form_Class': self.form_class,
         }
         result.update(kwargs)
@@ -92,7 +92,7 @@ def get_detail_view_kwargs(self, **kwargs):
 
     def get_update_view_kwargs(self, **kwargs):
         result = {
-            'layout': self.form_layout,
+            'layout': self.layout,
             'form_Class': self.form_class,
         }
         result.update(kwargs)