ref #7587 Alternative design for the site manager

2 files changed, 139 insertions, 137 deletions

diff --git a/plugins/SitesManager/templates/sites-list/site-fields.html b/plugins/SitesManager/templates/sites-list/site-fields.html
index f9221e2c7a..4e5c740c39 100644
--- a/plugins/SitesManager/templates/sites-list/site-fields.html
+++ b/plugins/SitesManager/templates/sites-list/site-fields.html
@@ -1,122 +1,145 @@
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    {{ site.idsite }}
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    {{ site.name }}
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    <span ng-repeat="url in site.alias_urls">{{ url | prettyUrl }} <br/></span>
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    <span ng-repeat="ip in site.excluded_ips">{{ ip }} <br/></span>
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    <span ng-repeat="parameter in site.excluded_parameters">{{ parameter }} <br/></span>
-</td>
-<td ng-if="!site.editMode" ng-show="globalSettings.siteSpecificUserAgentExcludeEnabled" sites-manager-edit-trigger>
-    <span ng-repeat="userAgent in site.excluded_user_agents">{{ userAgent }} <br/></span>
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    <span ng-switch="site.sitesearch">
-        <span ng-switch-when="1">{{ 'General_Yes'|translate }}</span>
-        <span ng-switch-default>-</span>
-    </span>
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    {{ site.timezone }}
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    {{ site.currency }}
-</td>
-<td ng-if="!site.editMode" sites-manager-edit-trigger>
-    <span ng-switch="site.ecommerce">
-        <span ng-switch-default>-</span>
-        <span ng-switch-when="1">{{ 'General_Yes'|translate }}</span>
-    </span>
-</td>
-<td ng-if="!site.editMode">
-    <span class="link_but" ng-click="editSite()">
-        <img src='plugins/Morpheus/images/ico_edit.png' title="{{ 'General_Edit'|translate }}"/>
-    </span>
-    <span ng-show="site.idsite" class="link_but" ng-click="openDeleteDialog()">
-        <img src='plugins/Morpheus/images/ico_delete.png' title="{{ 'General_Delete'|translate }}"/>
-    </span>
-</td>
-<td ng-if="!site.editMode">
-    <a ng-show="site.idsite" href="?module=CoreAdminHome&action=trackingCodeGenerator&idSite={{ site.idsite }}&period={{ period }}&date={{ date }}&updated=false">
-        {{ 'SitesManager_SetUp'|translate }}
-    </a>
-</td>
-
-
-<td ng-if="site.editMode" class="editingSite" colspan="100">
-
-    <div class="form-group">
-        <label>{{ 'General_Name'|translate }}</label>
-        <input type="text" ng-model="site.name"/>
-    </div>
+<div class="site" ng-class="{'editingSite': site.editMode==true}">
+
+    <div class="row" ng-if="!site.editMode">
 
-    <div class="form-group">
-        <label>{{ 'SitesManager_Urls'|translate }}</label>
-        <div class="form-help">
-            {{ 'SitesManager_AliasUrlHelp' | translate }}
+        <div class="col-md-3">
+            <h4>{{ site.name }}</h4>
+            <ul>
+                <li><span class="title">{{ 'General_Id'|translate }}:</span> {{ site.idsite }}</li>
+                <li>
+                    <span class="title">{{ 'SitesManager_Urls'|translate }}</span>:
+                    {{ site.alias_urls.join(', ') }}
+                </li>
+            </ul>
+        </div>
+        <div class="col-md-3">
+            <ul>
+                <li><span class="title">{{ 'SitesManager_Timezone'|translate }}:</span> {{ site.timezone }}</li>
+                <li><span class="title">{{ 'SitesManager_Currency'|translate }}:</span> {{ site.currency }}</li>
+                <li>
+                    <span class="title">{{ 'Actions_SubmenuSitesearch'|translate }}:</span>
+                    <span ng-switch="site.sitesearch">
+                        <span ng-switch-when="1">{{ 'General_Yes'|translate }}</span>
+                        <span ng-switch-default>{{ 'General_No'|translate }}</span>
+                    </span>
+                </li>
+            </ul>
+        </div>
+        <div class="col-md-4">
+            <ul>
+                <li>
+                    <span class="title">{{ 'Goals_Ecommerce'|translate }}:</span>
+                    <span ng-switch="site.ecommerce">
+                        <span ng-switch-default>{{ 'General_No'|translate }}</span>
+                        <span ng-switch-when="1">{{ 'General_Yes'|translate }}</span>
+                    </span>
+                </li>
+                <li>
+                    <span class="title">{{ 'SitesManager_ExcludedIps'|translate }}:</span>
+                    {{ site.excluded_ips.join(', ') }}
+                </li>
+                <li>
+                    <span class="title">{{ 'SitesManager_ExcludedParameters'|translate }}:</span>
+                    {{ site.excluded_parameters.join(', ') }}
+                </li>
+                <li ng-if="globalSettings.siteSpecificUserAgentExcludeEnabled">
+                    <span class="title">{{ 'SitesManager_ExcludedUserAgents'|translate }}:</span>
+                    {{ site.excluded_user_agents.join(', ') }}
+                </li>
+            </ul>
+        </div>
+        <div class="col-md-2 text-right">
+            <ul>
+                <li>
+                    <span class="link_but" ng-click="editSite()">
+                        <img src='plugins/Morpheus/images/ico_edit.png' title="{{ 'General_Edit'|translate }}"/>
+                        Edit
+                    </span>
+                </li>
+                <li>
+                    <span ng-show="site.idsite" class="link_but" ng-click="openDeleteDialog()">
+                        <img src='plugins/Morpheus/images/ico_delete.png' title="{{ 'General_Delete'|translate }}"/>
+                        Delete
+                    </span>
+                </li>
+                <li ng-show="site.idsite">
+                    <a href="">{{ 'SitesManager_ShowTrackingTag'|translate }}</a>
+                </li>
+            </ul>
         </div>
-        <div sites-manager-multiline-field field="site.alias_urls" cols="25" rows="3"></div>
-    </div>
 
-    <div class="form-group">
-        <label>{{ 'SitesManager_KeepURLFragmentsLong'|translate }}</label>
-        <select ng-options="key as value for (key, value) in keepURLFragmentsOptions"
-                ng-model="site.keep_url_fragment"></select>
     </div>
 
-    <div class="form-group">
-        <label>{{ 'SitesManager_ExcludedIps'|translate }}</label>
-        <div ng-include="'plugins/SitesManager/templates/help/excluded-ip-help.html'"></div>
-        <div sites-manager-multiline-field field="site.excluded_ips" cols="20" rows="4"></div>
-    </div>
+    <div ng-if="site.editMode">
 
-    <div class="form-group">
-        <label>{{ 'SitesManager_ExcludedParameters'|translate }}</label>
-        <div ng-include="'plugins/SitesManager/templates/help/excluded-query-parameters-help.html'"></div>
-        <div sites-manager-multiline-field field="site.excluded_parameters" cols="20" rows="4"></div>
-    </div>
+        <div class="form-group">
+            <label>{{ 'General_Name'|translate }}</label>
+            <input type="text" ng-model="site.name"/>
+        </div>
 
-    <div class="form-group" ng-if="globalSettings.siteSpecificUserAgentExcludeEnabled">
-        <label>{{ 'SitesManager_ExcludedUserAgents'|translate }}</label>
-        <div ng-include="'plugins/SitesManager/templates/help/excluded-user-agents-help.html'"></div>
-        <div sites-manager-multiline-field field="site.excluded_user_agents" cols="20" rows="4"></div>
-    </div>
+        <div class="form-group">
+            <label>{{ 'SitesManager_Urls'|translate }}</label>
+            <div class="form-help">
+                {{ 'SitesManager_AliasUrlHelp' | translate }}
+            </div>
+            <div sites-manager-multiline-field field="site.alias_urls" cols="25" rows="3"></div>
+        </div>
 
-    <div ng-include="'plugins/SitesManager/templates/sites-list/site-search-field.html'"></div>
+        <div class="form-group">
+            <label>{{ 'SitesManager_KeepURLFragmentsLong'|translate }}</label>
+            <select ng-options="key as value for (key, value) in keepURLFragmentsOptions"
+                    ng-model="site.keep_url_fragment"></select>
+        </div>
 
-    <div class="form-group">
-        <label>{{ 'SitesManager_Timezone'|translate }}</label>
-        <div ng-include="'plugins/SitesManager/templates/help/timezone-help.html'"></div>
-        <select ng-model="site.timezone" ng-options="t.code as t.label group by t.group for t in timezones"></select>
-    </div>
+        <div class="form-group">
+            <label>{{ 'SitesManager_ExcludedIps'|translate }}</label>
+            <div ng-include="'plugins/SitesManager/templates/help/excluded-ip-help.html'"></div>
+            <div sites-manager-multiline-field field="site.excluded_ips" cols="20" rows="4"></div>
+        </div>
 
-    <div class="form-group">
-        <label>{{ 'SitesManager_Currency'|translate }}</label>
-        <div class="form-help">
-            {{ 'SitesManager_CurrencySymbolWillBeUsedForGoals' | translate }}
+        <div class="form-group">
+            <label>{{ 'SitesManager_ExcludedParameters'|translate }}</label>
+            <div ng-include="'plugins/SitesManager/templates/help/excluded-query-parameters-help.html'"></div>
+            <div sites-manager-multiline-field field="site.excluded_parameters" cols="20" rows="4"></div>
         </div>
-        <select ng-model="site.currency" ng-options="k as v for (k, v) in currencies"></select>
-    </div>
 
-    <div class="form-group">
-        <label>{{ 'Goals_Ecommerce'|translate }}</label>
-        <div class="form-help">
-            {{ 'SitesManager_EcommerceHelp' | translate }}
-            <br/>
-            <span ng-bind-html="'SitesManager_PiwikOffersEcommerceAnalytics'|translate:'<a href=\'http://piwik.org/docs/ecommerce-analytics/\' target=\'_blank\'>':'</a>'"></span>
+        <div class="form-group" ng-if="globalSettings.siteSpecificUserAgentExcludeEnabled">
+            <label>{{ 'SitesManager_ExcludedUserAgents'|translate }}</label>
+            <div ng-include="'plugins/SitesManager/templates/help/excluded-user-agents-help.html'"></div>
+            <div sites-manager-multiline-field field="site.excluded_user_agents" cols="20" rows="4"></div>
+        </div>
+
+        <div ng-include="'plugins/SitesManager/templates/sites-list/site-search-field.html'"></div>
+
+        <div class="form-group">
+            <label>{{ 'SitesManager_Timezone'|translate }}</label>
+            <div ng-include="'plugins/SitesManager/templates/help/timezone-help.html'"></div>
+            <select ng-model="site.timezone" ng-options="t.code as t.label group by t.group for t in timezones"></select>
+        </div>
+
+        <div class="form-group">
+            <label>{{ 'SitesManager_Currency'|translate }}</label>
+            <div class="form-help">
+                {{ 'SitesManager_CurrencySymbolWillBeUsedForGoals' | translate }}
+            </div>
+            <select ng-model="site.currency" ng-options="k as v for (k, v) in currencies"></select>
+        </div>
+
+        <div class="form-group">
+            <label>{{ 'Goals_Ecommerce'|translate }}</label>
+            <div class="form-help">
+                {{ 'SitesManager_EcommerceHelp' | translate }}
+                <br/>
+                <span ng-bind-html="'SitesManager_PiwikOffersEcommerceAnalytics'|translate:'<a href=\'http://piwik.org/docs/ecommerce-analytics/\' target=\'_blank\'>':'</a>'"></span>
+            </div>
+            <select ng-options="option.key as option.value for option in eCommerceptions" ng-model="site.ecommerce"></select>
+        </div>
+
+        <div class="editingSiteFooter">
+            <input type="submit" class="btn" value="{{ 'General_Save' | translate }}" ng-click="saveSite()"/>
+            <button class="btn btn-link" ng-click="cancelEditSite($event)">{{ 'General_Cancel' | translate:'':'' }}</button>
         </div>
-        <select ng-options="option.key as option.value for option in eCommerceptions" ng-model="site.ecommerce"></select>
-    </div>
 
-    <div class="editingSiteFooter">
-        <input type="submit" class="btn" value="{{ 'General_Save' | translate }}" ng-click="saveSite()"/>
-        <button class="btn btn-link" ng-click="cancelEditSite($event)">{{ 'General_Cancel' | translate:'':'' }}</button>
     </div>
 
-</td>
+</div>
diff --git a/plugins/SitesManager/templates/sites-list/sites-list.html b/plugins/SitesManager/templates/sites-list/sites-list.html
index 15e2b9bc9b..8b847622a4 100644
--- a/plugins/SitesManager/templates/sites-list/sites-list.html
+++ b/plugins/SitesManager/templates/sites-list/sites-list.html
@@ -2,36 +2,15 @@
 
     <div ng-repeat="site in adminSites.sites" ng-include="'plugins/SitesManager/templates/dialogs/dialogs.html?cb=' + cacheBuster"></div>
 
-    <table ng-class="{'isLoading': adminSites.isLoading==true}">
-        <thead>
-        <tr>
-            <th>{{ 'General_Id'|translate }}</th>
-            <th>{{ 'General_Name'|translate }}</th>
-            <th>{{ 'SitesManager_Urls'|translate }}</th>
-            <th>{{ 'SitesManager_ExcludedIps'|translate }}</th>
-            <th>{{ 'SitesManager_ExcludedParameters'|translate }}</th>
-            <th ng-show="globalSettings.siteSpecificUserAgentExcludeEnabled">
-                {{ 'SitesManager_ExcludedUserAgents'|translate }}
-            </th>
-            <th>{{ 'Actions_SubmenuSitesearch'|translate }}</th>
-            <th>{{ 'SitesManager_Timezone'|translate }}</th>
-            <th>{{ 'SitesManager_Currency'|translate }}</th>
-            <th>{{ 'Goals_Ecommerce'|translate }}</th>
-            <th>{{ 'General_Actions'|translate }}</th>
-            <th>{{ 'General_JsTrackingTag'|translate }}</th>
-        </tr>
-        </thead>
-        <tbody>
-            <tr ng-show="adminSites.searchTerm && 0 === adminSites.sites.length && !adminSites.isLoading">
-                <td colspan="12">
-                    {{ 'SitesManager_NotFound'|translate }} <strong>{{ adminSites.searchTerm }}</strong>
-                </td>
-            </tr>
-            <tr ng-controller="SitesManagerSiteController"
-                ng-repeat="site in adminSites.sites"
-                ng-include="'plugins/SitesManager/templates/sites-list/site-fields.html?cb=' + cacheBuster">
-            </tr>
-        </tbody>
-    </table>
+    <p ng-if="adminSites.isLoading">
+        {{ 'General_Loading'|translate }}
+    </p>
+    <p ng-if="adminSites.searchTerm && 0 === adminSites.sites.length && !adminSites.isLoading">
+        {{ 'SitesManager_NotFound'|translate }} <strong>{{ adminSites.searchTerm }}</strong>
+    </p>
+
+    <div ng-controller="SitesManagerSiteController" ng-repeat="site in adminSites.sites"
+         ng-include="'plugins/SitesManager/templates/sites-list/site-fields.html?cb=' + cacheBuster">
+    </div>
 
 </div>