Merge pull request #675 from marmelab/view_actions_reponsive

[RFR] Make view actions more responsive
marmelab · Sep 8, 2015 · d41cda4 · d41cda4
2 parents bd77c92 + 4fc3464
commit d41cda4
Show file tree

Hide file tree

Showing 15 changed files with 33 additions and 36 deletions.
diff --git a/src/javascripts/ng-admin/Crud/button/maBackButton.js b/src/javascripts/ng-admin/Crud/button/maBackButton.js
@@ -19,7 +19,7 @@ define(function () {
             },
             template:
 ` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="back()">
-    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </a>`
         };
     }

diff --git a/src/javascripts/ng-admin/Crud/button/maBatchDeleteButton.js b/src/javascripts/ng-admin/Crud/button/maBatchDeleteButton.js
@@ -28,7 +28,7 @@ define(function () {
             },
             template:
 `<span ng-click="gotoBatchDelete()">
-    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </span>`
 
         };

diff --git a/src/javascripts/ng-admin/Crud/button/maCreateButton.js b/src/javascripts/ng-admin/Crud/button/maCreateButton.js
@@ -30,7 +30,7 @@ define(function () {
             },
             template:
 ` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoCreate()">
-    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </a>`
         };
     }

diff --git a/src/javascripts/ng-admin/Crud/button/maDeleteButton.js b/src/javascripts/ng-admin/Crud/button/maDeleteButton.js
@@ -33,7 +33,7 @@ define(function () {
             },
             template:
 ` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoDelete()">
-    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </a>`
 
         };

diff --git a/src/javascripts/ng-admin/Crud/button/maEditButton.js b/src/javascripts/ng-admin/Crud/button/maEditButton.js
@@ -32,7 +32,7 @@ define(function () {
             },
             template:
 ` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoEdit()">
-    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </a>`
         };
     }

diff --git a/src/javascripts/ng-admin/Crud/button/maExportToCsvButton.js b/src/javascripts/ng-admin/Crud/button/maExportToCsvButton.js
@@ -91,7 +91,7 @@ define(function () {
             template:
 `<span ng-if="has_export">
     <a class="btn btn-default" ng-click="exportToCsv()">
-        <span class="glyphicon glyphicon-download" aria-hidden="true"></span>&nbsp;{{ ::label }}
+        <span class="glyphicon glyphicon-download" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
     </a>
 </span>`
         };

diff --git a/src/javascripts/ng-admin/Crud/button/maListButton.js b/src/javascripts/ng-admin/Crud/button/maListButton.js
@@ -35,7 +35,7 @@ define(function () {
             },
             template:
 ` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoList()">
-    <span class="glyphicon glyphicon-list" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-list" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </a>`
         };
     }

diff --git a/src/javascripts/ng-admin/Crud/button/maShowButton.js b/src/javascripts/ng-admin/Crud/button/maShowButton.js
@@ -32,7 +32,7 @@ define(function () {
             },
             template:
 ` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoShow()">
-    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">{{ ::label }}</span>
 </a>`
         };
     }

diff --git a/src/javascripts/ng-admin/Crud/delete/delete.html b/src/javascripts/ng-admin/Crud/delete/delete.html
@@ -1,10 +1,9 @@
 <div class="row">
     <div class="col-lg-12">
-        <ma-view-actions override="::deleteController.actions" entry="::entry" entity="::deleteController.entity">
-            <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
-        </ma-view-actions>
-
         <div class="page-header">
+            <ma-view-actions override="::deleteController.actions" entry="::entry" entity="::deleteController.entity">
+                <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
+            </ma-view-actions>
             <h1 compile="::deleteController.title">
                 Delete {{ ::deleteController.view.entity.name() | humanize:true | singularize }}  #{{ ::entry.identifierValue }}
             </h1>

diff --git a/src/javascripts/ng-admin/Crud/filter/maFilterButton.js b/src/javascripts/ng-admin/Crud/filter/maFilterButton.js
@@ -17,7 +17,7 @@ function maFilterButtonDirective() {
         template:
 `<span class="btn-group" dropdown is-open="isopen" ng-if="hasFilters()">
     <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle >
-        <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>&nbsp;Add filter <span class="caret"></span>
+        <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>&nbsp;<span class="hidden-xs">Add filter </span><span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu">
         <li ng-repeat="filter in notYetEnabledFilters()" ng-switch="button">

diff --git a/src/javascripts/ng-admin/Crud/form/create.html b/src/javascripts/ng-admin/Crud/form/create.html
@@ -1,10 +1,9 @@
 <div class="row">
     <div class="col-lg-12">
-        <ma-view-actions override="::formController.actions" entry="entry" entity="::formController.entity">
-            <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
-        </ma-view-actions>
-
         <div class="page-header">
+            <ma-view-actions override="::formController.actions" entry="entry" entity="::formController.entity">
+                <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
+            </ma-view-actions>
             <h1 compile="::formController.title">
                 Create new {{ ::formController.view.entity.name() | humanize:true | singularize }}
             </h1>

diff --git a/src/javascripts/ng-admin/Crud/form/edit.html b/src/javascripts/ng-admin/Crud/form/edit.html
@@ -1,11 +1,10 @@
 <div class="row">
     <div class="col-lg-12">
-        <ma-view-actions override="::formController.actions" entry="entry" entity="::formController.entity">
-            <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
-            <ma-delete-button ng-if="::entity.deletionView().enabled" entry="entry" entity="::entity"></ma-delete-button>
-        </ma-view-actions>
-
         <div class="page-header">
+            <ma-view-actions override="::formController.actions" entry="entry" entity="::formController.entity">
+                <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
+                <ma-delete-button ng-if="::entity.deletionView().enabled" entry="entry" entity="::entity"></ma-delete-button>
+            </ma-view-actions>
             <h1 compile="::formController.title">
                 Edit {{ ::formController.entity.name() | humanize:true | singularize }}  #{{ ::entry.identifierValue }}
             </h1>

diff --git a/src/javascripts/ng-admin/Crud/list/listLayout.html b/src/javascripts/ng-admin/Crud/list/listLayout.html
@@ -1,13 +1,14 @@
 <div class="row list-header">
     <div class="col-lg-12">
-        <ma-view-actions override="::llCtrl.actions" selection="selection" batch-buttons="::llCtrl.batchActions" entity="::llCtrl.entity" datastore="::llCtrl.dataStore" search="::llCtrl.search" filters="::llCtrl.filters" enabled-filters="llCtrl.enabledFilters" enable-filter="llCtrl.enableFilter">
-            <ma-filter-button filters="filters()" enabled-filters="enabledFilters" enable-filter="enableFilter()"></ma-filter-button>
-            <ma-view-batch-actions buttons="::batchButtons()" selection="selection" entity="::entity"></ma-view-batch-actions>
-            <ma-export-to-csv-button entity="::entity" search="::search" datastore="::datastore"></ma-export-to-csv-button>
-            <ma-create-button ng-if="::entity.creationView().enabled" entity="::entity"></ma-create-button>
-        </ma-view-actions>
-
         <div class="page-header">
+
+            <ma-view-actions override="::llCtrl.actions" selection="selection" batch-buttons="::llCtrl.batchActions" entity="::llCtrl.entity" datastore="::llCtrl.dataStore" search="::llCtrl.search" filters="::llCtrl.filters" enabled-filters="llCtrl.enabledFilters" enable-filter="llCtrl.enableFilter">
+                <ma-filter-button filters="filters()" enabled-filters="enabledFilters" enable-filter="enableFilter()"></ma-filter-button>
+                <ma-view-batch-actions buttons="::batchButtons()" selection="selection" entity="::entity"></ma-view-batch-actions>
+                <ma-export-to-csv-button entity="::entity" search="::search" datastore="::datastore"></ma-export-to-csv-button>
+                <ma-create-button ng-if="::entity.creationView().enabled" entity="::entity"></ma-create-button>
+            </ma-view-actions>
+
             <h1 compile="::llCtrl.view.title()">
                 {{ ::llCtrl.view.entity.name() | humanize | pluralize }} list
             </h1>

diff --git a/src/javascripts/ng-admin/Crud/show/show.html b/src/javascripts/ng-admin/Crud/show/show.html
@@ -1,12 +1,11 @@
 <div class="row">
     <div class="col-lg-12">
-        <ma-view-actions override="::showController.actions" entry="entry" entity="::showController.entity">
-            <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
-            <ma-edit-button ng-if="::entity.editionView().enabled" entry="entry" entity="::entity"></ma-edit-button>
-            <ma-delete-button ng-if="::entity.deletionView().enabled" entry="entry" entity="::entity"></ma-delete-button>
-        </ma-view-actions>
-
         <div class="page-header">
+            <ma-view-actions override="::showController.actions" entry="entry" entity="::showController.entity">
+                <ma-list-button ng-if="::entity.listView().enabled" entity="::entity"></ma-list-button>
+                <ma-edit-button ng-if="::entity.editionView().enabled" entry="entry" entity="::entity"></ma-edit-button>
+                <ma-delete-button ng-if="::entity.deletionView().enabled" entry="entry" entity="::entity"></ma-delete-button>
+            </ma-view-actions>
             <h1 compile="::showController.title">
                 {{ ::showController.view.entity.name() | humanize:true | singularize }}  #{{ ::entry.identifierValue }} Detail
             </h1>

diff --git a/src/sass/ng-admin.scss b/src/sass/ng-admin.scss
@@ -104,7 +104,7 @@ ul.collapsible {
 }
 
 ma-view-actions {
-    margin: 25px 0 15px 0;
+    margin: 3px 0 0 0;
     float: right;
 }