User table for mobiles/tablets

src/lang/en_US.lang.php

@@ -70,7 +70,7 @@ $sm_lang = array(
 		'help' => 'Help',
 	),
 	'users' => array(
-		'user' => 'user',
+		'user' => 'User',
 		'name' => 'Name',
 		'user_name' => 'Username',
 		'password' => 'Password',

src/lang/fr_FR.lang.php

@@ -80,7 +80,7 @@ $sm_lang = array(
 		'level_10' => 'Administrateur',
 		'level_20' => 'Utilisateur',
 		'level_description' => 'Les <b>Administrateurs</b> ont un accès total. Ils peuvent gérer les serveurs, les utilisateurs et éditer la configuration globale.<br/>Les <b>Utilisateurs</b> ne peuvent que voir et mettre à jour les serveurs qui leur ont été assignés.',
-		'mobile' => 'Numéro de téléphone',
+		'mobile' => 'Téléphone',
 		'email' => 'Email',
 		'delete_title' => 'Supprimer un utilisateur',
 		'delete_message' => 'Êtes-vous sûr de vouloir supprimer l\'utilisateur \'%1\' ?',

src/lang/it_IT.lang.php

@@ -70,7 +70,7 @@ $sm_lang = array(
 		'help' => 'Aiuto',
 	),
 	'users' => array(
-		'user' => 'utente',
+		'user' => 'Utente',
 		'name' => 'Nome',
 		'user_name' => 'Username',
 		'password' => 'Password',

src/lang/nl_NL.lang.php

@@ -70,7 +70,7 @@ $sm_lang = array(
 		'help' => 'Help',
 	),
 	'users' => array(
-		'user' => 'gebruiker',
+		'user' => 'Gebruiker',
 		'name' => 'Naam',
 		'user_name' => 'Gebruikersnaam',
 		'password' => 'Wachtwoord',

src/lang/pt_BR.lang.php

@@ -70,7 +70,7 @@ $sm_lang = array(
 		'help' => 'Ajuda',
 	),
     'users' => array(
-        'user' => 'usuário',
+        'user' => 'Usuário',
         'name' => 'Nome',
 		'user_name' => 'Username',
 		'password' => 'Senha',

src/psm/Module/User/Controller/UserController.class.php

@@ -290,6 +290,7 @@ class UserController extends AbstractController {
 			array(
 				'subtitle' => psm_get_lang('menu', 'user'),
 				'label_users' => psm_get_lang('menu', 'users'),
+				'label_user' => psm_get_lang('users', 'user'),
 				'label_name' => psm_get_lang('users', 'name'),
 				'label_user_name' => psm_get_lang('users', 'user_name'),
 				'label_password' => psm_get_lang('users', 'password'),
@@ -304,9 +305,11 @@ class UserController extends AbstractController {
 				'label_action' => psm_get_lang('system', 'action'),
 				'label_save' => psm_get_lang('system', 'save'),
 				'label_go_back' => psm_get_lang('system', 'go_back'),
-				'label_edit' => psm_get_lang('system', 'edit') . ' ' . psm_get_lang('users', 'user'),
-				'label_delete' => psm_get_lang('system', 'delete') . ' ' . psm_get_lang('users', 'user'),
+				'label_edit' => psm_get_lang('system', 'edit'),
+				'label_delete' => psm_get_lang('system', 'delete'),
 				'label_add_new' => psm_get_lang('system', 'add_new'),
+				'icon_level_10' => 'icon-admin',
+				'icon_level_20' => 'icon-user',
 			)
 		);
 

src/templates/server/server.tpl.html

@@ -1,9 +1,9 @@
 <!--%tpl_server_list-->
-<table class="table table-bordered table-striped table-align-middle">
+<table class="table table-bordered table-striped">
 	<thead>
 		<tr>
 			<th class="hidden-phone">&nbsp;</th>
-			<th>{label_label}</th>
+			<th class="hidden-phone">{label_label}</th>
 			<th class="hidden-phone">{label_domain}</th>
 			<th class="visible-desktop">{label_port}</th>
 			<th class="visible-desktop">{label_type}</th>
@@ -18,29 +18,29 @@
 	<tbody>
 		<!--%tpl_repeat_servers-->
 		<tr>
-			<td class="hidden-phone">
-				<span class="label label-status-{status}"><a href="{url_view}" title="{error}">{status}</a></span>
-			</td>
-			<td class="hidden-phone"><a href="{url_view}">{label}</a></td>
-			<td class="nowrap visible-tablet"><i class="{type_icon}" title="{type}"></i> {ip_short}</td>
-			<td class="nowrap visible-desktop">{ip}</td>
-			<td class="nowrap visible-desktop">{port}</td>
-			<td class="nowrap visible-desktop">{type}</td>
-			<td class="nowrap hidden-phone">{rtime} s</td>
-			<td class="nowrap hidden-phone">{last_online}</td>
-			<td class="tight visible-tablet"><i class="{active_icon}" title="{active_title}"></i> <i class="{email_icon}" title="{label_email}"></i> <i class="{sms_icon}" title="{label_sms}"></i></td>
-			<td class="tight visible-desktop">{active}</td>
-			<td class="tight visible-desktop">{email}</td>
-			<td class="tight visible-desktop">{sms}</td>
+			<td class="hidden-phone"><div class="table-cell-title"><span class="label label-status-{status}"><a href="{url_view}" title="{error}">{status}</a></span></div></td>
+			<td class="hidden-phone"><div class="table-cell-title"><a href="{url_view}">{label}</a></div></td>
+			<td class="nowrap visible-tablet"><div class="table-cell-title"><i class="{type_icon}" title="{type}"></i> {ip_short}</div></td>
+			<td class="nowrap visible-desktop"><div class="table-cell-title">{ip}</div></td>
+			<td class="nowrap visible-desktop"><div class="table-cell-title">{port}</div></td>
+			<td class="nowrap visible-desktop"><div class="table-cell-title">{type}</div></td>
+			<td class="nowrap hidden-phone"><div class="table-cell-title">{rtime} s</div></td>
+			<td class="nowrap hidden-phone"><div class="table-cell-title">{last_online}</div></td>
+			<td class="tight visible-tablet"><div class="table-cell-title"><i class="{active_icon}" title="{active_title}"></i> <i class="{email_icon}" title="{label_email}"></i> <i class="{sms_icon}" title="{label_sms}"></i></div></td>
+			<td class="tight visible-desktop"><div class="table-cell-title">{active}</div></td>
+			<td class="tight visible-desktop"><div class="table-cell-title">{email}</div></td>
+			<td class="tight visible-desktop"><div class="table-cell-title">{sms}</div></td>
 			<td class="tight hidden-phone">
-				<a class="btn btn-small" href="index.php?mod=server&amp;action=view&amp;id={server_id}"><i class="icon-chart"></i></a>
-				{html_actions}
+				<div class="table-cell-title">
+					<a class="btn btn-small" href="index.php?mod=server&amp;action=view&amp;id={server_id}"><i class="icon-chart"></i></a>
+					{html_actions}
+				</div>
 			</td>
 			<td class="visible-phone">
 				<div class="table-body">
 					<div class="table-cell-title">
 						<span class="label label-status-{status}"><a href="{url_view}" title="{error}">{status}</a></span>
-						<a href="{url_view}">{label}</a>
+						<a class="title" href="{url_view}">{label}</a>
 					</div>
 					<div class="table-cell tight">
 						&nbsp;<a class="btn btn-small" href="index.php?mod=server&amp;action=view&amp;id={server_id}"><i class="icon-chart"></i></a>

src/templates/user/profile.tpl.html

@@ -2,15 +2,15 @@
 <form class="form-horizontal well" action="{form_action}" method="post">
 	 <fieldset>
 		<div class="control-group">
-			<label class="control-label" for="name">{label_name}</label>
+			<label class="control-label" for="user_name">{label_user_name}</label>
 			<div class="controls">
-				<input type="text" id="name" name="name" value="{name}" maxlength="255" required>
+				<input type="text" id="user_name" name="user_name" value="{user_name}" maxlength="64" required autofocus=>
 			</div>
 		</div>
 		<div class="control-group">
-			<label class="control-label" for="user_name">{label_user_name}</label>
+			<label class="control-label" for="name">{label_name}</label>
 			<div class="controls">
-				<input type="text" id="user_name" name="user_name" value="{user_name}" maxlength="64" required>
+				<input type="text" id="name" name="name" value="{name}" maxlength="255" required>
 			</div>
 		</div>
 		<div class="control-group">
@@ -29,18 +29,18 @@
 				<input type="password" id="password_repeat" name="password_repeat" maxlength="255" placeholder="{placeholder_password}" />
 			</div>
 		</div>
-		<div class="control-group">
-			<label class="control-label" for="mobile">{label_mobile}</label>
-			<div class="controls">
-				<input type="text" id="mobile" name="mobile" value="{mobile}" maxlength="15" />
-			</div>
-		</div>
 		<div class="control-group">
 			<label class="control-label" for="email">{label_email}</label>
 			<div class="controls">
 				<input type="text" id="email" name="email" value="{email}" maxlength="255" required>
 			</div>
 		</div>
+		<div class="control-group">
+			<label class="control-label" for="mobile">{label_mobile}</label>
+			<div class="controls">
+				<input type="text" id="mobile" name="mobile" value="{mobile}" maxlength="15" />
+			</div>
+		</div>
 		<div class="form-actions">
 			<button class="btn btn-success" type="submit">{label_save}</button>
 		</div>

src/templates/user/user.tpl.html

@@ -2,25 +2,50 @@
 <table class="table table-bordered table-striped">
 	<thead>
 		<tr>
-			<th>{label_name}</th>
-			<th>{label_user_name}</th>
-			<th>{label_level}</th>
-			<th>{label_mobile}</th>
-			<th>{label_email}</th>
-			<th>{label_servers}</th>
-			<th width="75">{label_action}</th>
+			<th class="hidden-phone">{label_user}</th>
+			<th class="visible-desktop">{label_name}</th>
+			<th class="visible-desktop">{label_level}</th>
+			<th class="hidden-phone">{label_email}</th>
+			<th class="hidden-phone">{label_mobile}</th>
+			<th class="hidden-phone">{label_servers}</th>
+			<th class="hidden-phone tight">{label_action}</th>
 		</tr>
 	</thead>
 	<tbody>
 	<!--%tpl_repeat_users-->
 	<tr>
-		<td>{name}</td>
-		<td>{user_name}</td>
-		<td>{label_level_{level}}</td>
-		<td>{mobile}</td>
-		<td>{email}</td>
-		<td>{emp_servers}</td>
 		<td>
+			<div class="table-body">
+				<div class="table-cell-title nowrap">
+					<span class="hidden-desktop"><i class="{icon_level_{level}}" title="{label_level_{level}}"></i>&nbsp;</span>
+					<span class="title">{user_name}</span>
+					<span class="hidden-desktop">&nbsp;({name})</span>
+				</div>
+				<div class="table-cell tight">
+					<div class="visible-phone">
+						<a class="btn btn-small" href="index.php?mod=user&amp;action=edit&amp;id={user_id}" title="{label_edit}">
+							<i class="icon-pencil"></i>
+						</a>
+						<a class="btn btn-small btn-danger show-modal" href="index.php?mod=user&action=delete&id={user_id}" title="{label_delete}" data-modal-id="delete" data-modal-param="{user_name}">
+							<i class="icon-remove icon-white"></i>
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="visible-phone">
+				<div class="table-body">
+					<div class="table-row"><div class="table-cell-details tight">{label_email}:&nbsp;</div><div class="table-cell-details">{email}</div></div>
+					<div class="table-row"><div class="table-cell-details tight">{label_mobile}:&nbsp;</div><div class="table-cell-details">{mobile}</div></div>
+					<div class="table-row"><div class="table-cell-details tight">{label_servers}:&nbsp;</div><div class="table-cell-details">{emp_servers}</div></div>
+				</div>
+			</div>
+		</td>
+		<td class="visible-desktop nowrap"><div class="table-cell-title">{name}</div></td>
+		<td class="visible-desktop tight"><div class="table-cell-title">{label_level_{level}}</div></td>
+		<td class="hidden-phone tight"><div class="table-cell-title">{email}</div></td>
+		<td class="hidden-phone tight"><div class="table-cell-title">{mobile}</div></td>
+		<td class="hidden-phone"><div class="table-cell-title">{emp_servers}</div></td>
+		<td class="hidden-phone tight">
 			<a class="btn btn-small" href="index.php?mod=user&amp;action=edit&amp;id={user_id}" title="{label_edit}">
 				<i class="icon-pencil"></i>
 			</a>
@@ -39,18 +64,18 @@
 <form class="form-horizontal well" action="index.php?mod=user&amp;action=save&amp;id={edit_user_id}" method="post">
 	 <fieldset>
 			<legend>{titlemode}</legend>
-			<div class="control-group">
-				<label class="control-label" for="name">{label_name}</label>
-				<div class="controls">
-					<input type="text" id="name" name="name" value="{edit_value_name}" maxlength="255" required>
-				</div>
-			</div>
 			<div class="control-group">
 				<label class="control-label" for="user_name">{label_user_name}</label>
 				<div class="controls">
 					<input type="text" id="user_name" name="user_name" value="{edit_value_user_name}" maxlength="64" required>
 				</div>
 			</div>
+			<div class="control-group">
+				<label class="control-label" for="name">{label_name}</label>
+				<div class="controls">
+					<input type="text" id="name" name="name" value="{edit_value_name}" maxlength="255" required>
+				</div>
+			</div>
 			<div class="control-group">
 				<label class="control-label" for="level">{label_level}</label>
 				<div class="controls">
@@ -77,18 +102,18 @@
 					<input type="password" id="password_repeat" name="password_repeat" maxlength="255" placeholder="{placeholder_password}" />
 				</div>
 			</div>
-			<div class="control-group">
-				<label class="control-label" for="mobile">{label_mobile}</label>
-				<div class="controls">
-					<input type="text" id="mobile" name="mobile" value="{edit_value_mobile}" maxlength="15" />
-				</div>
-			</div>
 			<div class="control-group">
 				<label class="control-label" for="email">{label_email}</label>
 				<div class="controls">
 					<input type="text" id="email" name="email" value="{edit_value_email}" maxlength="255" required>
 				</div>
 			</div>
+			<div class="control-group">
+				<label class="control-label" for="mobile">{label_mobile}</label>
+				<div class="controls">
+					<input type="text" id="mobile" name="mobile" value="{edit_value_mobile}" maxlength="15" />
+				</div>
+			</div>
 			<div class="control-group">
 				<label class="control-label" for="servers[]">{label_servers}</label>
 				<div class="controls">

static/css/style.css

@@ -85,7 +85,7 @@ fieldset {
 }
 
 /* Tables */
-.table-align-middle td {
+.align-middle {
 	vertical-align: middle;
 }
 .tight {
@@ -111,13 +111,18 @@ fieldset {
 	display: table-cell;
 	vertical-align: middle;
 	height: 32px;
-	font-size: 1.1em;
-	font-weight: bold;
 }
 .table-cell-title .label {
 	position: relative;
 	top: -2px;
 }
+
+@media (max-width: 767px) {
+	.table-cell-title .title {
+		font-size: 1.1em;
+		font-weight: bold;
+	}
+}
 .table-cell-details {
 	display: table-cell;
 	font-size: 11px;
@@ -184,11 +189,18 @@ td.hidden-tablet, th.hidden-tablet {
 	display: table-cell;
 }
 
-td.visible-phone, th.visible-phone,
-td.visible-tablet, th.visible-tablet,
-td.hidden-desktop, th.hidden-desktop {
+span.visible-desktop, span.visible-desktop,
+span.hidden-phone, span.hidden-phone,
+span.hidden-tablet, span.hidden-tablet {
+	display: inline-block;
+}
+
+span.visible-phone, span.visible-phone,
+span.visible-tablet, span.visible-tablet,
+span.hidden-desktop, span.hidden-desktop {
 	display: none;
 }
+
 @media (min-width: 980px) {
 	.hidden-desktop {
 		display: none !important;
@@ -227,20 +239,36 @@ td.hidden-desktop, th.hidden-desktop {
 	td.hidden-desktop, th.hidden-desktop {
 		display: table-cell;
 	}
+	span.visible-phone, span.visible-phone,
+	span.hidden-desktop, span.hidden-desktop {
+		display: inline-block;
+	}
 	td.hidden-phone, th.hidden-phone,
 	td.visible-desktop, th.visible-desktop {
 		display: none;
 	}
+	span.hidden-phone, span.hidden-phone,
+	span.visible-desktop, span.visible-desktop {
+		display: none;
+	}
 }
 @media (min-width: 768px) and (max-width: 979px) {
 	td.visible-tablet, th.visible-tablet,
 	td.hidden-desktop, th.hidden-desktop {
 		display: table-cell;
 	}
+	span.visible-tablet, span.visible-tablet,
+	span.hidden-desktop, span.hidden-desktop {
+		display: inline-block;
+	}
 	td.hidden-tablet, th.hidden-tablet,
 	td.visible-desktop, th.visible-desktop {
 		display: none;
 	}
+	span.hidden-tablet, span.hidden-tablet,
+	span.visible-desktop, span.visible-desktop {
+		display: none;
+	}
 }
 @media (max-width: 479px) {
 	#main-container, .container-fluid {
@@ -437,6 +465,11 @@ legend{
 .icon-chart {
   background-position: 0px -168px;
 }
+
 .icon-mobile {
   background-position: -24px -168px;
-}
+}
+
+.icon-admin {
+  background-position: -48px -168px;
+}