From 2d635efae542549045bc7200394ffa59fb3d70e6 Mon Sep 17 00:00:00 2001
From: oliver <oliver@localhost>
Date: Sun, 19 Apr 2015 14:01:04 +0200
Subject: [PATCH] redesign page for editing Character types

---
 views/html/charactertypes/edit.tpl | 160 ++++++++++++++++-------------
 www/css/desktop.css                |  12 ++-
 2 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/views/html/charactertypes/edit.tpl b/views/html/charactertypes/edit.tpl
index 26b4b31a..06dbf6ad 100644
--- a/views/html/charactertypes/edit.tpl
+++ b/views/html/charactertypes/edit.tpl
@@ -43,77 +43,95 @@
 	</fieldset>
 	<fieldset>
 		<legend><?=_('Avatars')?></legend>
-		<ul>
-			<?php foreach($xplevels as &$xplevel) : ?>
-			<li>
-				<?php if($avatarsValidation !== true && array_key_exists($xplevel['id'], $avatarsValidation)) : ?>
-				<ul>
-					<?php if(array_key_exists('portrait', $avatarsValidation[$xplevel['id']])) : ?>
-					<?php foreach($avatarsValidation[$xplevel['id']]['portrait'] as $field => &$settings) : ?>
-					<li>
-						<ul>
-							<?php foreach($settings as $setting => $value) : ?>
-							<li>
-								<?php switch($field) {
-									case 'avatar':
-										switch($setting) {
-											case 'error': printf(_('Error during avatar portrait upload: %s'), $value);
-											break;
-											case 'mimetype': printf(_('Avatar portrait has wrong type “%s”'), $value);
-											break;
-											case 'size': echo _('Avatar portrait exceeds size maximum');
-											break;
-											default: echo _('Avatar portrait invalid');
-										}
-									break;
-								} ?>
-							</li>
-							<?php endforeach ?>
-						</ul>
-					</li>
-					<?php endforeach ?>
-					<?php endif ?>
-					<?php if(array_key_exists('avatar', $avatarsValidation[$xplevel['id']])) : ?>
-					<?php foreach($avatarsValidation[$xplevel['id']]['avatar'] as $field => &$settings) : ?>
-					<li>
-						<ul>
-							<?php foreach($settings as $setting => $value) : ?>
-							<li>
-								<?php switch($field) {
-									case 'avatar':
-										switch($setting) {
-											case 'error': printf(_('Error during avatar upload: %s'), $value);
-											break;
-											case 'mimetype': printf(_('Avatar has wrong type “%s”'), $value);
-											break;
-											case 'size': echo _('Avatar exceeds size maximum');
-											break;
-											default: echo _('Avatar invalid');
-										}
-									break;
-								} ?>
-							</li>
-							<?php endforeach ?>
-						</ul>
-					</li>
-					<?php endforeach ?>
-					<?php endif ?>
-				</ul>
-				<?php endif ?>
-				<?=_('Level')?> <?=$xplevel['level']?>:<br />
-				<?php if(array_key_exists('avatar', $xplevel) && !is_null($xplevel['avatar']['small_avatarpicture_id'])) : ?>
-				<img id="avatar" src="<?=$linker->link(array('media','avatar',$seminary['url'],$charactertype['url'],$xplevel['level'],'portrait'))?>" />
-				<?php endif ?>
-				<label for="avatar-<?=$xplevel['id']?>-portrait"><?=_('Protrait')?>:</label>
-				<input id="avatar-<?=$xplevel['id']?>-portrait" type="file" name="avatars[<?=$xplevel['id']?>][portrait]" accept="<?=implode(',', array_map(function($m) { return $m['mimetype']; }, $mimetypes))?>" /><br />
-				<?php if(array_key_exists('avatar', $xplevel) && !is_null($xplevel['avatar']['avatarpicture_id'])) : ?>
-				<img id="avatar" src="<?=$linker->link(array('media','avatar',$seminary['url'],$charactertype['url'],$xplevel['level']))?>" />
-				<?php endif ?>
-				<label for="avatar-<?=$xplevel['id']?>-avatar"><?=_('Avatar')?>:</label>
-				<input id="avatar-<?=$xplevel['id']?>-avatar" type="file" name="avatars[<?=$xplevel['id']?>][avatar]" accept="<?=implode(',', array_map(function($m) { return $m['mimetype']; }, $mimetypes))?>" />
-			</li>
-			<?php endforeach ?>
-		</ul>
+		<table class="avatars">
+            <thead>
+                <tr>
+                    <th>Level</th>
+                    <th>Portrait</th>
+                    <th>Avatar</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php foreach($xplevels as &$xplevel) : ?>
+                <?php if($avatarsValidation !== true && array_key_exists($xplevel['id'], $avatarsValidation)) : ?>
+                <tr>
+                    <td colspan="3">
+                        <?php if(array_key_exists('portrait', $avatarsValidation[$xplevel['id']])) : ?>
+                        <ul class="validation">
+                            <?php foreach($avatarsValidation[$xplevel['id']]['portrait'] as $field => &$settings) : ?>
+                            <li>
+                                <ul>
+                                    <?php foreach($settings as $setting => $value) : ?>
+                                    <li>
+                                        <?php switch($field) {
+                                            case 'avatar':
+                                                switch($setting) {
+                                                    case 'error': printf(_('Error during avatar portrait upload: %s'), $value);
+                                                    break;
+                                                    case 'mimetype': printf(_('Avatar portrait has wrong type “%s”'), $value);
+                                                    break;
+                                                    case 'size': echo _('Avatar portrait exceeds size maximum');
+                                                    break;
+                                                    default: echo _('Avatar portrait invalid');
+                                                }
+                                            break;
+                                        } ?>
+                                    </li>
+                                    <?php endforeach ?>
+                                </ul>
+                            </li>
+                            <?php endforeach ?>
+                        </ul>
+                        <?php endif ?>
+                        <?php if(array_key_exists('avatar', $avatarsValidation[$xplevel['id']])) : ?>
+                        <?php foreach($avatarsValidation[$xplevel['id']]['avatar'] as $field => &$settings) : ?>
+                        <li>
+                            <ul>
+                                <?php foreach($settings as $setting => $value) : ?>
+                                <li>
+                                    <?php switch($field) {
+                                        case 'avatar':
+                                            switch($setting) {
+                                                case 'error': printf(_('Error during avatar upload: %s'), $value);
+                                                break;
+                                                case 'mimetype': printf(_('Avatar has wrong type “%s”'), $value);
+                                                break;
+                                                case 'size': echo _('Avatar exceeds size maximum');
+                                                break;
+                                                default: echo _('Avatar invalid');
+                                            }
+                                        break;
+                                    } ?>
+                                </li>
+                                <?php endforeach ?>
+                            </ul>
+                        </li>
+                        <?php endforeach ?>
+                        <?php endif ?>
+                    </td>
+                </tr>
+                <?php endif ?>
+                <tr>
+                    <!--<th><?=_('Level')?> <?=$xplevel['level']?>:</th>-->
+                    <th><?=$xplevel['level']?></th>
+                    <td>
+                        <!--<label for="avatar-<?=$xplevel['id']?>-portrait"><?=_('Protrait')?>:</label><br />-->
+                        <?php if(array_key_exists('avatar', $xplevel) && !is_null($xplevel['avatar']['small_avatarpicture_id'])) : ?>
+                        <img id="avatar" src="<?=$linker->link(array('media','avatar',$seminary['url'],$charactertype['url'],$xplevel['level'],'portrait'))?>" />
+                        <?php endif ?>
+                        <input id="avatar-<?=$xplevel['id']?>-portrait" type="file" name="avatars[<?=$xplevel['id']?>][portrait]" accept="<?=implode(',', array_map(function($m) { return $m['mimetype']; }, $mimetypes))?>" />
+                    </td>
+                    <td>
+                        <!--<label for="avatar-<?=$xplevel['id']?>-avatar"><?=_('Avatar')?>:</label><br />-->
+                        <?php if(array_key_exists('avatar', $xplevel) && !is_null($xplevel['avatar']['avatarpicture_id'])) : ?>
+                        <img id="avatar" src="<?=$linker->link(array('media','avatar',$seminary['url'],$charactertype['url'],$xplevel['level']))?>" />
+                        <?php endif ?>
+                        <input id="avatar-<?=$xplevel['id']?>-avatar" type="file" name="avatars[<?=$xplevel['id']?>][avatar]" accept="<?=implode(',', array_map(function($m) { return $m['mimetype']; }, $mimetypes))?>" />
+                    </td>
+                </tr>
+                <?php endforeach ?>
+            </tbody>
+		</table>
 		<p><?=_('Allowed file types')?>:</p>
 		<ul>
 			<?php foreach($mimetypes as &$mimetype) : ?>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index 56adcbc6..2a827543 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -12,7 +12,7 @@ img{border:0}
 h1,h2,h3{color:#103a3e}
 h2{font-size:120%;margin-top:25px}
 h3{font-size:100%}
-ul,ol,nav{padding:0;list-style-type:none}
+ul,ol,nav{padding:0;margin-top:0;list-style-type:none}
 p{margin:0 0 16px;padding:0}
 audio,canvas,video{display:inline-block}
 audio:not([controls]){display:none;height:0}
@@ -29,8 +29,8 @@ sup{top:-.5em}
 sub{bottom:-.25em}
 svg:not(:root){overflow:hidden}
 figure{margin:0}
-fieldset{border:1px dotted #f7f5f2;padding:0 10px 0}
-legend{border:0;margin:0 0 10px;padding:0}
+fieldset{border:1px solid #eae8e4;padding:5px 10px}
+legend{border:0;padding:0}
 button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
 button,input{line-height:normal}
 button,select{text-transform:none}
@@ -177,6 +177,7 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 /** Login, Registration & Filter **/
 
 .logreg{margin:15px 0;width:auto;display:inline-block;padding:15px 20px;background:#eae8e4;border-radius:3px}
+.logreg fieldset{border-color:#f7f5f2}
 .logreg label{display:block;font-size:.875em}
 .logreg input{margin:5px 0 15px}
 .logreg textarea,.logreg select{width:100%;margin:5px 0 15px;-webkit-box-sizing: border-box;-moz-box-sizing:border-box;box-sizing:border-box}
@@ -462,8 +463,13 @@ aside .cranks li:nth-child(odd){background:#f7f5f2}
 
 div.cond{display:none;margin-left:15px}
 input[type="checkbox"]:checked + label + div.cond{display:block}
+input[type="file"]{display:block}
 form.mng{margin:30px 0}
 form.mng p{margin:0}
 form.mng ul{margin:0}
 form.mng input[type="submit"]{margin:0}
 .mnglst li{text-align:center}
+form h2{font-size:120%;margin-top:0}
+table.avatars tbody tr{border:0 solid #EAE8E4;border-width:1px 0}
+table.avatars td{vertical-align:bottom;padding:5px 0}
+table.avatars img{max-height:15em}