Improve project overview page

7 files changed, 148 insertions, 138 deletions

diff --git a/app/Template/project_overview/activity.php b/app/Template/project_overview/activity.php
new file mode 100644
index 00000000..2eb7a193
--- /dev/null
+++ b/app/Template/project_overview/activity.php
@@ -0,0 +1,8 @@
+<section class="accordion-section <?= empty($events) ? 'accordion-collapsed' : '' ?>">
+    <div class="accordion-title">
+        <h3><a href="#" class="fa accordion-toggle"></a> <?= t('Last activity') ?></h3>
+    </div>
+    <div class="accordion-content">
+        <?= $this->render('event/events', array('events' => $events)) ?>
+    </div>
+</section>
\ No newline at end of file
diff --git a/app/Template/project_overview/attachments.php b/app/Template/project_overview/attachments.php
new file mode 100644
index 00000000..eb0c5be7
--- /dev/null
+++ b/app/Template/project_overview/attachments.php
@@ -0,0 +1,16 @@
+<section class="accordion-section <?= empty($files) && empty($images) ? 'accordion-collapsed' : '' ?>">
+    <div class="accordion-title">
+        <h3><a href="#" class="fa accordion-toggle"></a> <?= t('Attachments') ?></h3>
+    </div>
+    <div class="accordion-content">
+        <?php if ($this->user->hasProjectAccess('ProjectFile', 'create', $project['id'])): ?>
+        <p style="margin-bottom: 15px;">
+            <i class="fa fa-plus fa-fw"></i>
+            <?= $this->url->link(t('Upload a file'), 'ProjectFile', 'create', array('project_id' => $project['id']), false, 'popover') ?>
+        </p>
+        <?php endif ?>
+
+        <?= $this->render('project_overview/images', array('project' => $project, 'images' => $images)) ?>
+        <?= $this->render('project_overview/files', array('project' => $project, 'files' => $files)) ?>
+    </div>
+</section>
diff --git a/app/Template/project_overview/description.php b/app/Template/project_overview/description.php
index cd6e2450..c89cb710 100644
--- a/app/Template/project_overview/description.php
+++ b/app/Template/project_overview/description.php
@@ -1,8 +1,10 @@
-<?php if (! empty($project['description'])): ?>
-    <div class="page-header">
-        <h2><?= $this->text->e($project['name']) ?></h2>
+<section class="accordion-section <?= empty($project['description']) ? 'accordion-collapsed' : '' ?>">
+    <div class="accordion-title">
+        <h3><a href="#" class="fa accordion-toggle"></a> <?= t('Description') ?></h3>
     </div>
-    <article class="markdown">
-        <?= $this->text->markdown($project['description']) ?>
-    </article>
-<?php endif ?>
+    <div class="accordion-content">
+        <article class="markdown">
+            <?= $this->text->markdown($project['description']) ?>
+        </article>
+    </div>
+</section>
diff --git a/app/Template/project_overview/files.php b/app/Template/project_overview/files.php
index 605431ed..c570b771 100644
--- a/app/Template/project_overview/files.php
+++ b/app/Template/project_overview/files.php
@@ -1,98 +1,47 @@
-<div class="page-header">
-    <h2><?= t('Attachments') ?></h2>
-    <?php if ($this->user->hasProjectAccess('ProjectFile', 'create', $project['id'])): ?>
-    <ul>
-        <li>
-            <i class="fa fa-plus fa-fw"></i>
-            <?= $this->url->link(t('Upload a file'), 'ProjectFile', 'create', array('project_id' => $project['id']), false, 'popover') ?>
-        </li>
-    </ul>
-    <?php endif ?>
-</div>
-
-<?php if (empty($files) && empty($images)): ?>
-    <p class="alert"><?= t('There is no attachment at the moment.') ?></p>
-<?php endif ?>
-
-<?php if (! empty($images)): ?>
-<div class="file-thumbnails">
-    <?php foreach ($images as $file): ?>
-        <div class="file-thumbnail">
-            <a href="<?= $this->url->href('FileViewer', 'show', array('project_id' => $project['id'], 'file_id' => $file['id'])) ?>" class="popover"><img src="<?= $this->url->href('FileViewer', 'thumbnail', array('file_id' => $file['id'], 'project_id' => $project['id'])) ?>" title="<?= $this->text->e($file['name']) ?>" alt="<?= $this->text->e($file['name']) ?>"></a>
-            <div class="file-thumbnail-content">
-                <div class="file-thumbnail-title">
-                    <div class="dropdown">
-                    <a href="#" class="dropdown-menu dropdown-menu-link-text"><?= $this->text->e($file['name']) ?> <i class="fa fa-caret-down"></i></a>
-                    <ul>
-                        <li>
-                            <i class="fa fa-download fa-fw"></i>
-                            <?= $this->url->link(t('Download'), 'FileViewer', 'download', array('project_id' => $project['id'], 'file_id' => $file['id'])) ?>
-                        </li>
-                        <?php if ($this->user->hasProjectAccess('ProjectFile', 'remove', $project['id'])): ?>
-                        <li>
-                            <i class="fa fa-trash fa-fw"></i>
-                            <?= $this->url->link(t('Remove'), 'ProjectFile', 'confirm', array('project_id' => $project['id'], 'file_id' => $file['id']), false, 'popover') ?>
-                        </li>
-                        <?php endif ?>
-                    </ul>
-                    </div>
-                </div>
-                <div class="file-thumbnail-description">
-                    <span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
-                        <i class="fa fa-info-circle"></i>
-                    </span>
-                    <?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
-                </div>
-            </div>
-        </div>
-    <?php endforeach ?>
-</div>
-<?php endif ?>
-
 <?php if (! empty($files)): ?>
-<table class="table-stripped">
-    <tr>
-        <th><?= t('Filename') ?></th>
-        <th><?= t('Creator') ?></th>
-        <th><?= t('Date') ?></th>
-        <th><?= t('Size') ?></th>
-    </tr>
-    <?php foreach ($files as $file): ?>
+    <table class="table-stripped">
         <tr>
-            <td>
-                <i class="fa <?= $this->file->icon($file['name']) ?> fa-fw"></i>
-                <div class="dropdown">
-                    <a href="#" class="dropdown-menu dropdown-menu-link-text"><?= $this->text->e($file['name']) ?> <i class="fa fa-caret-down"></i></a>
-                    <ul>
-                        <?php if ($this->file->getPreviewType($file['name']) !== null): ?>
-                        <li>
-                            <i class="fa fa-eye fa-fw"></i>
-                            <?= $this->url->link(t('View file'), 'FileViewer', 'show', array('project_id' => $project['id'], 'file_id' => $file['id']), false, 'popover') ?>
-                        </li>
-                        <?php endif ?>
-                        <li>
-                            <i class="fa fa-download fa-fw"></i>
-                            <?= $this->url->link(t('Download'), 'FileViewer', 'download', array('project_id' => $project['id'], 'file_id' => $file['id'])) ?>
-                        </li>
-                        <?php if ($this->user->hasProjectAccess('ProjectFile', 'remove', $project['id'])): ?>
-                        <li>
-                            <i class="fa fa-trash fa-fw"></i>
-                            <?= $this->url->link(t('Remove'), 'ProjectFile', 'confirm', array('project_id' => $project['id'], 'file_id' => $file['id']), false, 'popover') ?>
-                        </li>
-                        <?php endif ?>
-                    </ul>
-                </div>
-            </td>
-            <td>
-                <?= $this->text->e($file['user_name'] ?: $file['username']) ?>
-            </td>
-            <td>
-                <?= $this->dt->date($file['date']) ?>
-            </td>
-            <td>
-                <?= $this->text->bytes($file['size']) ?>
-            </td>
+            <th><?= t('Filename') ?></th>
+            <th><?= t('Creator') ?></th>
+            <th><?= t('Date') ?></th>
+            <th><?= t('Size') ?></th>
         </tr>
-    <?php endforeach ?>
-</table>
+        <?php foreach ($files as $file): ?>
+            <tr>
+                <td>
+                    <i class="fa <?= $this->file->icon($file['name']) ?> fa-fw"></i>
+                    <div class="dropdown">
+                        <a href="#" class="dropdown-menu dropdown-menu-link-text"><?= $this->text->e($file['name']) ?> <i class="fa fa-caret-down"></i></a>
+                        <ul>
+                            <?php if ($this->file->getPreviewType($file['name']) !== null): ?>
+                                <li>
+                                    <i class="fa fa-eye fa-fw"></i>
+                                    <?= $this->url->link(t('View file'), 'FileViewer', 'show', array('project_id' => $project['id'], 'file_id' => $file['id']), false, 'popover') ?>
+                                </li>
+                            <?php endif ?>
+                            <li>
+                                <i class="fa fa-download fa-fw"></i>
+                                <?= $this->url->link(t('Download'), 'FileViewer', 'download', array('project_id' => $project['id'], 'file_id' => $file['id'])) ?>
+                            </li>
+                            <?php if ($this->user->hasProjectAccess('ProjectFile', 'remove', $project['id'])): ?>
+                                <li>
+                                    <i class="fa fa-trash fa-fw"></i>
+                                    <?= $this->url->link(t('Remove'), 'ProjectFile', 'confirm', array('project_id' => $project['id'], 'file_id' => $file['id']), false, 'popover') ?>
+                                </li>
+                            <?php endif ?>
+                        </ul>
+                    </div>
+                </td>
+                <td>
+                    <?= $this->text->e($file['user_name'] ?: $file['username']) ?>
+                </td>
+                <td>
+                    <?= $this->dt->date($file['date']) ?>
+                </td>
+                <td>
+                    <?= $this->text->bytes($file['size']) ?>
+                </td>
+            </tr>
+        <?php endforeach ?>
+    </table>
 <?php endif ?>
diff --git a/app/Template/project_overview/images.php b/app/Template/project_overview/images.php
new file mode 100644
index 00000000..f6937e12
--- /dev/null
+++ b/app/Template/project_overview/images.php
@@ -0,0 +1,35 @@
+<?php if (! empty($images)): ?>
+    <div class="file-thumbnails">
+        <?php foreach ($images as $file): ?>
+            <div class="file-thumbnail">
+                <a href="<?= $this->url->href('FileViewer', 'show', array('project_id' => $project['id'], 'file_id' => $file['id'])) ?>" class="popover"><img src="<?= $this->url->href('FileViewer', 'thumbnail', array('file_id' => $file['id'], 'project_id' => $project['id'])) ?>" title="<?= $this->text->e($file['name']) ?>" alt="<?= $this->text->e($file['name']) ?>"></a>
+                <div class="file-thumbnail-content">
+                    <div class="file-thumbnail-title">
+                        <div class="dropdown">
+                            <a href="#" class="dropdown-menu dropdown-menu-link-text"><?= $this->text->e($file['name']) ?> <i class="fa fa-caret-down"></i></a>
+                            <ul>
+                                <li>
+                                    <i class="fa fa-download fa-fw"></i>
+                                    <?= $this->url->link(t('Download'), 'FileViewer', 'download', array('project_id' => $project['id'], 'file_id' => $file['id'])) ?>
+                                </li>
+                                <?php if ($this->user->hasProjectAccess('ProjectFile', 'remove', $project['id'])): ?>
+                                    <li>
+                                        <i class="fa fa-trash fa-fw"></i>
+                                        <?= $this->url->link(t('Remove'), 'ProjectFile', 'confirm', array('project_id' => $project['id'], 'file_id' => $file['id']), false, 'popover') ?>
+                                    </li>
+                                <?php endif ?>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="file-thumbnail-description">
+                    <span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
+                        <i class="fa fa-info-circle"></i>
+                    </span>
+                        <?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
+                    </div>
+                </div>
+            </div>
+        <?php endforeach ?>
+    </div>
+<?php endif ?>
+
diff --git a/app/Template/project_overview/information.php b/app/Template/project_overview/information.php
index 95508d98..2032ed28 100644
--- a/app/Template/project_overview/information.php
+++ b/app/Template/project_overview/information.php
@@ -1,35 +1,39 @@
-<div class="page-header">
-    <h2><?= t('Information') ?></h2>
-</div>
-<div class="listing">
-<ul>
-    <?php if ($project['owner_id'] > 0): ?>
-        <li><?= t('Project owner: ') ?><strong><?= $this->text->e($project['owner_name'] ?: $project['owner_username']) ?></strong></li>
-    <?php endif ?>
+<section class="accordion-section">
+    <div class="accordion-title">
+        <h3><a href="#" class="fa accordion-toggle"></a> <?= t('Information') ?></h3>
+    </div>
+    <div class="accordion-content">
+        <div class="listing">
+            <ul>
+                <?php if ($project['owner_id'] > 0): ?>
+                    <li><?= t('Project owner: ') ?><strong><?= $this->text->e($project['owner_name'] ?: $project['owner_username']) ?></strong></li>
+                <?php endif ?>
 
-    <?php if (! empty($users)): ?>
-        <?php foreach ($roles as $role => $role_name): ?>
-            <?php if (isset($users[$role])): ?>
-            <li>
-                <?= $role_name ?>:
-                <strong><?= implode(', ', $users[$role]) ?></strong>
-            </li>
-            <?php endif ?>
-        <?php endforeach ?>
-    <?php endif ?>
+                <?php if (! empty($users)): ?>
+                    <?php foreach ($roles as $role => $role_name): ?>
+                        <?php if (isset($users[$role])): ?>
+                            <li>
+                                <?= $role_name ?>:
+                                <strong><?= implode(', ', $users[$role]) ?></strong>
+                            </li>
+                        <?php endif ?>
+                    <?php endforeach ?>
+                <?php endif ?>
 
-    <?php if ($project['start_date']): ?>
-        <li><?= t('Start date: ').$this->dt->date($project['start_date']) ?></li>
-    <?php endif ?>
+                <?php if ($project['start_date']): ?>
+                    <li><?= t('Start date: ').$this->dt->date($project['start_date']) ?></li>
+                <?php endif ?>
 
-    <?php if ($project['end_date']): ?>
-        <li><?= t('End date: ').$this->dt->date($project['end_date']) ?></li>
-    <?php endif ?>
+                <?php if ($project['end_date']): ?>
+                    <li><?= t('End date: ').$this->dt->date($project['end_date']) ?></li>
+                <?php endif ?>
 
-    <?php if ($project['is_public']): ?>
-        <li><i class="fa fa-share-alt"></i> <?= $this->url->link(t('Public link'), 'board', 'readonly', array('token' => $project['token']), false, '', '', true) ?></li>
-        <li><i class="fa fa-rss-square"></i> <?= $this->url->link(t('RSS feed'), 'feed', 'project', array('token' => $project['token']), false, '', '', true) ?></li>
-        <li><i class="fa fa-calendar"></i> <?= $this->url->link(t('iCal feed'), 'ical', 'project', array('token' => $project['token'])) ?></li>
-    <?php endif ?>
-</ul>
-</div>
+                <?php if ($project['is_public']): ?>
+                    <li><i class="fa fa-share-alt"></i> <?= $this->url->link(t('Public link'), 'board', 'readonly', array('token' => $project['token']), false, '', '', true) ?></li>
+                    <li><i class="fa fa-rss-square"></i> <?= $this->url->link(t('RSS feed'), 'feed', 'project', array('token' => $project['token']), false, '', '', true) ?></li>
+                    <li><i class="fa fa-calendar"></i> <?= $this->url->link(t('iCal feed'), 'ical', 'project', array('token' => $project['token'])) ?></li>
+                <?php endif ?>
+            </ul>
+        </div>
+    </div>
+</section>
diff --git a/app/Template/project_overview/show.php b/app/Template/project_overview/show.php
index 0038d952..9a9786e8 100644
--- a/app/Template/project_overview/show.php
+++ b/app/Template/project_overview/show.php
@@ -6,11 +6,7 @@
 
     <?= $this->render('project_overview/columns', array('project' => $project)) ?>
     <?= $this->render('project_overview/description', array('project' => $project)) ?>
-    <?= $this->render('project_overview/files', array('project' => $project, 'images' => $images, 'files' => $files)) ?>
+    <?= $this->render('project_overview/attachments', array('project' => $project, 'images' => $images, 'files' => $files)) ?>
     <?= $this->render('project_overview/information', array('project' => $project, 'users' => $users, 'roles' => $roles)) ?>
-
-    <div class="page-header">
-        <h2><?= t('Last activity') ?></h2>
-    </div>
-    <?= $this->render('event/events', array('events' => $events)) ?>
+    <?= $this->render('project_overview/activity', array('project' => $project, 'events' => $events)) ?>
 </section>