Fix embeddd_list formatting in small screens

And fix date field formatting, too
dmolnarqu · Oct 5, 2015 · 811182b · 811182b
1 parent b287082
commit 811182b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/examples/blog/config.js b/examples/blog/config.js
@@ -158,9 +158,9 @@
                     .cssClasses('col-sm-4'),
                 nga.field('backlinks', 'embedded_list') // display embedded list
                     .targetFields([
-                        nga.field('date', 'datetime')
-                            .template('<div class="row"><div class="col-lg-8"><ma-date-field field="::field" value="value"></ma-date-field></div></div>'),
+                        nga.field('date', 'datetime'),
                         nga.field('url')
+                            .cssClasses('col-lg-10')
                     ])
                     .sortField('date')
                     .sortDir('DESC'),

diff --git a/src/javascripts/ng-admin/Crud/field/maEmbeddedListField.js b/src/javascripts/ng-admin/Crud/field/maEmbeddedListField.js
@@ -47,9 +47,9 @@ function maEmbeddedListField() {
             }
         },
         template: `
-<div class="row">
+<div class="row"><div class="col-sm-12">
     <ng-form ng-repeat="entry in entries track by $index" class="subentry" name="subform_{{$index}}" ng-init="formName = 'subform_' + $index">
-        <div class="pull-right">
+        <div class="remove_button_container">
                 <a class="btn btn-default btn-sm" ng-click="remove(entry)"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Remove</a>
         </div>
         <div class="form-field form-group" ng-repeat="field in ::fields track by $index">
@@ -62,7 +62,7 @@ function maEmbeddedListField() {
             <a class="btn btn-default btn-sm" ng-click="addNew()"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Add new {{ field().name() }}</a>
         </div>
     </div>
-</div>`
+</div></div>`
     };
 }
 

diff --git a/src/javascripts/ng-admin/Crud/fieldView/DateFieldView.js b/src/javascripts/ng-admin/Crud/fieldView/DateFieldView.js
@@ -2,5 +2,5 @@ module.exports = {
     getReadWidget:   () => '<ma-date-column field="::field" value="::value"></ma-date-column>',
     getLinkWidget:   () => '<a ng-click="gotoDetail()">' + module.exports.getReadWidget() + '</a>',
     getFilterWidget: () => '<ma-date-field field="::field" value="value"></ma-date-field>',
-    getWriteWidget:  () => '<div class="row"><div class="col-sm-5 col-lg-4"><ma-date-field field="::field" value="value"></ma-date-field></div></div>'
+    getWriteWidget:  () => '<div class="date_widget"><ma-date-field field="::field" value="value"></ma-date-field></div>'
 };
diff --git a/src/javascripts/ng-admin/Crud/fieldView/DateTimeFieldView.js b/src/javascripts/ng-admin/Crud/fieldView/DateTimeFieldView.js
@@ -2,5 +2,5 @@ module.exports = {
     getReadWidget:   () => '<ma-date-column field="::field" value="::value"></ma-date-column>',
     getLinkWidget:   () => '<a ng-click="gotoDetail()">' + module.exports.getReadWidget() + '</a>',
     getFilterWidget: () => '<ma-date-field field="::field" value="value"></ma-date-field>',
-    getWriteWidget:  () => '<div class="row"><div class="col-sm-7 col-lg-6"><ma-date-field field="::field" value="value"></ma-date-field></div></div>'
+    getWriteWidget:  () => '<div class="datetime_widget"><ma-date-field field="::field" value="value"></ma-date-field></div>'
 };
diff --git a/src/sass/ng-admin.scss b/src/sass/ng-admin.scss
@@ -240,6 +240,29 @@ div.bottom-loader {
         width: 100%;
     }
 
+    .date_widget {
+        width: 10em;
+        @media (max-width: 768px) {
+            width: 100%
+        }
+    }
+
+    .datetime_widget {
+        width: 15em;
+        @media (max-width: 768px) {
+            width: 100%
+        }
+    }
+
+    .remove_button_container {
+        float: right;
+        @media (max-width: 992px) {
+            float: none;
+            display: block;
+            text-align: right;
+        }
+    }
+
     .ta-toolbar button {
         font-size: 12px;
         padding: 5px 8px;