feat(views/archive): Better ui for archives

But not final

2 files changed, 48 insertions, 3 deletions

diff --git a/views/archive/index.php b/views/archive/index.php
index f96c34f..7aba050 100644
--- a/views/archive/index.php
+++ b/views/archive/index.php
@@ -5,10 +5,21 @@
 ?>
 
 <?php if ($page !== null): ?>
-    <iframe src="<?php echo "/archives/{$page->WID}" ?>"></iframe>
+    <iframe src="<?php echo "/archives/{$page->WID}" ?>" scrolling="no"></iframe>
+    <h2>Archives by date:</h2>
     <?php foreach (Database\Webpage::allArchives($page->URL) as $page): ?>
-        <section>
-            <?php echo $page->Date ?>
+        <section class="item">
+            <section>
+                <div>
+                    <img src="<?php echo "/archives/{$page->WID}/favicon.ico" ?>" class="favicon">
+                    <a href="<?php echo "/archives/{$page->WID}" ?>"><?php echo $page->URL ?></a>
+                    <span class="float-right"><?php echo $page->Date ?></span>
+                </div>
+                <div class="details">
+                    <span>Visits: <?php echo $page->Visits ?></span>
+                    <span class="float-right"><?php echo Database\User::fromDBuid($page->RequesterUID)->Username ?></span>
+                </div>
+            </section>
         </section>
     <?php endforeach; ?>
 
diff --git a/views/styles.css b/views/styles.css
index 776f97b..d4f61cc 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -103,6 +103,12 @@ input[type=submit]:hover {
   flex: 1;
 }
 
+iframe {
+  border: 2px solid var(--foreground-color);
+  height: 20em;
+  pointer-events: none;
+}
+
 /* Main containers */
 header, article {
   max-width: 60rem;
@@ -203,3 +209,31 @@ hr.new-section {
 .card-blank-afterspace {
   height: var(--card-expand-with);
 }
+
+.item {
+  border: 2px solid teal;
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  border-radius: 0.25em;
+  font-size: 1.08em;
+  margin-bottom: 1em;
+}
+
+.item > :first-child {
+  flex: 1;
+}
+
+.item img {
+  vertical-align: middle;
+}
+
+.item .favicon {
+  height: 2em;
+}
+
+.item .details {
+  font-size: 0.9em;
+  color: gray;
+  margin: 0.25em;
+}