diff options
| -rw-r--r-- | views/list/index.php | 11 | ||||
| -rw-r--r-- | views/list/item.php | 19 | ||||
| -rw-r--r-- | views/list/item_show.php | 8 | ||||
| -rw-r--r-- | views/profile/index.php | 12 | ||||
| -rw-r--r-- | views/styles.css | 38 |
5 files changed, 75 insertions, 13 deletions
diff --git a/views/list/index.php b/views/list/index.php index 9047fb3..9bc348d 100644 --- a/views/list/index.php +++ b/views/list/index.php @@ -15,11 +15,12 @@ <p><?= $list->Description ?></p> <p><?= $author->Username ?></p> </section> - <?php foreach($list->allItems() as $webpage): ?> - <section> - <?= $webpage->URL ?> - </section> - <?php endforeach; ?> + <?php + foreach ($list->allItems() as $page) { + include $VIEWS_DIR . '/archive/item.php'; + } + include_once $VIEWS_DIR . '/archive/item_show.php'; + ?> <?php else: ?> <p> diff --git a/views/list/item.php b/views/list/item.php new file mode 100644 index 0000000..6316669 --- /dev/null +++ b/views/list/item.php @@ -0,0 +1,19 @@ +<section class="list" onclick="window.location.href = '/list/<?= $list->LID ?>'"> + <section> + <div class="heading"> + <h2> + <?= $list->Name ?> + </h2> + <a href="<?= '/profile/' . $user->Username ?>" class="float-right"> + <?= $user->Username ?> + </a> + </div> + <p> + <?= $list->Description ?> + </p> + </section> + <section name="itemButton" hidden> + <span><!-- Edit button --></span> + <span><!-- Delete button --></span> + </section> +</section> diff --git a/views/list/item_show.php b/views/list/item_show.php new file mode 100644 index 0000000..1a31f4b --- /dev/null +++ b/views/list/item_show.php @@ -0,0 +1,8 @@ +<script type="text/javascript"> + function showButtons() { + for (buttonset of document.getElementsByName('itemButton')) { + buttonset.hidden = false; + } + } + authenticated(showButtons); +</script> diff --git a/views/profile/index.php b/views/profile/index.php index a0ef2e7..c1e067d 100644 --- a/views/profile/index.php +++ b/views/profile/index.php @@ -29,12 +29,12 @@ </section> <section id="userLists" hidden> - <?php foreach($user->archiveLists() as $list): ?> - <section> - <?= $list->Name ?> - <?= $list->Description ?> - </section> - <?php endforeach; ?> + <?php + foreach ($user->archiveLists() as $list) { + include $VIEWS_DIR . '/list/item.php'; + } + include_once $VIEWS_DIR . '/list/item_show.php'; + ?> </section> <script type="text/javascript"> diff --git a/views/styles.css b/views/styles.css index 142b530..440da4e 100644 --- a/views/styles.css +++ b/views/styles.css @@ -6,6 +6,7 @@ --dark-green: #526962; --dark-purple: #9084ae; + --dark-cherry: #ae6773; --blue: #add8e6; @@ -224,6 +225,7 @@ hr.new-section { } +/* Preview card */ .card { display: flex; flex-direction: column; @@ -274,7 +276,8 @@ hr.new-section { height: var(--card-expand-with); } -.item { +/* Webpage item */ +.item, .list { background-image: url(/paper.jpg); background-repeat: repeat; @@ -293,7 +296,8 @@ hr.new-section { border-bottom: none; } -.item > :first-child { +.item > :first-child, +.list > :first-child { flex: 1; } @@ -342,6 +346,36 @@ hr.new-section { color: var(--cherry); } +/* List item */ +.list { + border-color: var(--dark-cherry); +} + +.list:hover { + cursor: pointer; +} + +.list > :first-child > * { + padding-left: 0.25em; + padding-right: 0.25em; +} + +.list .heading { + border-bottom: 3px dotted #909090; + padding-bottom: 0.5em; +} + +.list h2 { + margin: 0; + font-size: 1.7em; + display: inline-block; +} + +.list h2 + .float-right { + line-height: 1.7em; + text-align: center; +} + /* User */ .user-icon { height: 7em; |