Character編集画面のデザイン変更

diff --git a/app/views/characters/edit.ctp b/app/views/characters/edit.ctp
index cf6cdd5..fff8d9f 100644 (file)
--- a/app/views/characters/edit.ctp
+++ b/app/views/characters/edit.ctp
@@ -1,42 +1,131 @@
-<div class="characters form">
+<div class="characters form edit">
+<h2><?php echo __('Edit Character'); ?></h2>
+<p>
 <?php echo $form->create('Character');?>
-       <fieldset>
-               <legend><?php __('Add Character');?></legend>
-<?php
-       echo $form->input('name', array(
-                       'type' => 'text',
-                       'label' => __('Name', true),
-                       'after' => $html->tag(
-                               'span',
-                               __(' * required', true),
-                               array('class' => 'required')
-                       )
-               )
-       );
+
+<table class="Character">
+<tbody>
+<tr>
+<td colspan="2" class="SystemRow">
+<table class="System">
+<tbody>
+<tr>
+<td>
+<?php 
        echo $form->input('system_id', array(
                        'label' => __('System', true),
                )
        );
+ ?>
+</td>
+<td class="sort_order">
+<?php 
        echo $form->input('sort_order', array(
-                       'label' => __('Sort Order', true)               )
+                       'label' => __('Order', true),
+                       'class' => 'sortOrder',
+               )
        );
+ ?>
+</td>
+<td>
+<?php 
        echo $select->create_status_select($status, 'status', array(
                        'label' => __('Status', true)
                )
        );
+ ?>
+</td>
+</tr>
+</table>
+</td>
+<td class="image" rowspan="4">
+<div class="imagefile">
+<?php if ($this->data['Character']['image_filename']): ?>
+<?php 
+       echo $html->link(
+               $html->image($this->data['Character']['image_filename'], array(
+                       'alt' => $this->data['Character']['name'],
+               )),
+               array('action' => 'edit_image', $this->data['Character']['id'])
+       );
+ ?>
+<?php else: ?>
+<div class="editImageLink">
+<?php 
+       echo $html->link(__('Edit Image', true), array('action' => 'edit_image', $this->data['Character']['id']));
+ ?>
+</div>
+<?php endif; ?>
+</div>
+</td>
+</tr>
+
+<tr>
+<th class="CharacterName">
+<?php
+       __('Charater Name');
+       echo $html->div('required',
+               __(' * required', true)
+       );
+?>
+</th>
+<td class="CharacterName">
+<?php 
+       echo $form->input('name', array(
+                       'type' => 'text',
+                       'label' => false,
+                       'class' => 'name character',
+               )
+       );
+?>
+</td>
+</tr>
+<tr>
+<th class="UserName">
+<?php
+       __('Player Name');
+?>
+</th>
+<td class="UserName">
+<?php 
+       echo $this->data['User']['name'];
+?>
+</td>
+</tr>
+<tr>
+<th>
+       <?php __('Public Flag'); ?>
+</th>
+<td>
+<?php 
        echo $select->create_publicflag_select($public_flags, 'public_flag', array(
-                       'label' => __('Public Flag', true)
+                       'label' => false,
                )
        );
+ ?>
+</td>
+</tr>
+<tr>
+<th>
+       <?php __('Notes'); ?>
+</th>
+<td colspan="3">
+<?php 
        echo $form->input('notes', array(
-                       'label' => __('Notes', true)
+                       'label' => false,
                )
        );
+ ?>
+</td>
+</tr>
+</tbody>
+</table>
 
+<?php
        echo $token->create();
        ?>
-       </fieldset>
 <?php echo $form->end('Submit');?>
+</p>
 </div>
 <div class="actions">
        <ul>

diff --git a/app/webroot/css/base.css b/app/webroot/css/base.css
index 3caa4c9..818c5aa 100644 (file)
--- a/app/webroot/css/base.css
+++ b/app/webroot/css/base.css
@@ -258,6 +258,7 @@ table tr td {
        vertical-align: middle;
 }
 table tr.altrow td {
+       background: #f5f5f5;
 }
 td.actions {
        text-align: center;
@@ -290,6 +291,7 @@ dl {
        width: 60%;
 }
 dl.altrow {
+       background: #f5f5f5;
 }
 dt {
        font-weight: bold;
@@ -343,7 +345,7 @@ form div.input {
        color: #444;
 }
 form .required {
-       color: #333;
+       color: #ff3300;
        font-weight: bold;
 }
 form div.submit {
@@ -355,7 +357,7 @@ form div.submit {
 label {
        display: block;
        font-size: 110%;
-       padding-right: 20px;
+       padding-right: 5px;
 }
 input, textarea {
        clear: both;
@@ -447,52 +449,99 @@ div.related {
 
 
 /* パーツ */
-#content {
-}
-#content table {
+/* テーブル表示 */
+table {
        width: auto;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
 }
-#content th, td {
+th, td {
        border: 1px solid #ccc;
        border-right: 0 none;
        border-bottom: 0 none;
        padding: 4px;
 }
-#content th {
+th {
        background-color: #ddd;
 }
-#content td {
+table tr td {
        text-align: left;
 }
-#content td.table {
+td.table {
        padding: 0;
        margin: 0;
 }
-#content td.table table {
+td.table table {
        padding: 0;
        margin: 0;
 }
 .blank {
        min-height: 1em;
 }
-#content div.view .select {
+
+/* フォーム関連 */
+div.view .select {
        display: inline;
        padding-right: 5px;
 }
-#content div.inline {
+div.inline {
        display: inline;
 }
-#content div.inline div.checkbox {
+div.inline div.checkbox {
        display: inline;
 }
-#content div.inline input[type="radio"],
-#content div.inline input[type="checkbox"]  {
+div.inline input[type="radio"],
+div.inline input[type="checkbox"]  {
        float: none;
        margin: 2px 5px 2px 2px;
 }
-#content div.inline label {
+div.inline label {
        display: inline;
        padding-right: 5px;
-}
\ No newline at end of file
+}
+
+input.sortOrder {
+       width: 2.5em;
+}
+
+/* キャラシ */
+table.right {
+       margin-left : auto;
+       margin-right : 0;
+}
+table.inner {
+       border: 0px none;
+       padding: 0;
+       margin: 0;
+}
+td.SystemRow {
+       padding: 0;
+}
+table.System {
+       border: 0px none;
+       text-align: left;
+       margin: 0;
+}
+table.System th,
+table.System td {
+       border: 0px none;
+}
+table.Character {
+       width: 780px;
+}
+
+/* キャラ画像 */
+td.image {
+       width: 160px;
+}
+div.imagefile {
+       border: 1px solid #ccc;
+       width: 150px;
+       height: 150px;
+       padding: 0;
+       margin: 5px;
+       overflow: hidden;
+}
+div.editImageLink {
+       text-align: center;
+}