diff options
| -rw-r--r-- | public/emotes/index.php | 2 | ||||
| -rw-r--r-- | public/static/style.css | 26 | ||||
| -rw-r--r-- | src/emotes/multiple_page.php | 44 | ||||
| -rw-r--r-- | src/emotes/single_page.php | 129 | ||||
| -rw-r--r-- | src/partials.php | 31 |
5 files changed, 152 insertions, 80 deletions
diff --git a/public/emotes/index.php b/public/emotes/index.php index a4bf585..c73b3d0 100644 --- a/public/emotes/index.php +++ b/public/emotes/index.php @@ -58,6 +58,8 @@ $id = str_replace("/", "", $id); $emotes = null; $emote = null; +include "../../src/partials.php"; + if ($id == "" || !is_numeric($id)) { $page = intval($_GET["p"] ?? "0"); $limit = 50; diff --git a/public/static/style.css b/public/static/style.css index f4d8380..8f4c95b 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -34,9 +34,10 @@ table.vertical td { .wrapper { flex-grow: 1; display: flex; + flex-direction: column; } -main.content { +section.content { flex-grow: 1; display: flex; flex-direction: column; @@ -44,6 +45,29 @@ main.content { margin: 6px; } +.page { + display: flex; + flex-direction: row; +} + +/** +----------- + NAVBAR +----------- +*/ + +.navbar { + display: flex; + flex-direction: row; + padding: 4px; +} + +.navbar .links { + display: flex; + align-items: end; + gap: 4px; +} + /** ------------- BUTTONS diff --git a/src/emotes/multiple_page.php b/src/emotes/multiple_page.php index e46c7ab..8e2b4d7 100644 --- a/src/emotes/multiple_page.php +++ b/src/emotes/multiple_page.php @@ -8,26 +8,32 @@ <body> <div class="container"> <div class="wrapper"> - <main class="content"> - <section class="box"> - <div class="box navtab"> - <?php echo isset($emotes) ? "Emotes" : "Emote" ?> - </div> - <div class="box content items"> - <?php - if (isset($emotes)) { - foreach ($emotes as $e) { - echo "<a class=\"box emote\" href=\"/emotes/" . $e->get_id() . "\">"; - echo "<img src=\"/static/userdata/emotes/" . $e->get_id() . "/2x." . $e->get_ext() . "\" alt=\"" . $e->get_code() . "\"/>"; - echo "<p>" . $e->get_code() . "</p>"; - echo "</a>"; + <?php html_navigation_bar(); ?> + <main class="page"> + <section class="sidebar"> + <?php html_navigation_search(); ?> + </section> + <section class="content"> + <section class="box"> + <div class="box navtab"> + <?php echo isset($emotes) ? "Emotes" : "Emote" ?> + </div> + <div class="box content items"> + <?php + if (isset($emotes)) { + foreach ($emotes as $e) { + echo "<a class=\"box emote\" href=\"/emotes/" . $e->get_id() . "\">"; + echo "<img src=\"/static/userdata/emotes/" . $e->get_id() . "/2x." . $e->get_ext() . "\" alt=\"" . $e->get_code() . "\"/>"; + echo "<p>" . $e->get_code() . "</p>"; + echo "</a>"; + } + } else { + // info + echo ""; } - } else { - // info - echo ""; - } - ?> - </div> + ?> + </div> + </section> </section> </main> </div> diff --git a/src/emotes/single_page.php b/src/emotes/single_page.php index 254e0e9..434b0da 100644 --- a/src/emotes/single_page.php +++ b/src/emotes/single_page.php @@ -8,71 +8,80 @@ <body> <div class="container"> <div class="wrapper"> - <main class="content"> - <section class="box"> - <div class="box navtab"> - Emote - <?php echo $emote->get_code() ?> - </div> - <div class="box content"> - <div class="emote-showcase"> - <img src="<?php echo '/static/userdata/emotes/' . $emote->get_id() . '/' . '1x.' . $emote->get_ext() ?>" - alt="<?php echo $emote->get_code() ?>"> - <img src="<?php echo '/static/userdata/emotes/' . $emote->get_id() . '/' . '2x.' . $emote->get_ext() ?>" - alt="<?php echo $emote->get_code() ?>"> - <img src="<?php echo '/static/userdata/emotes/' . $emote->get_id() . '/' . '3x.' . $emote->get_ext() ?>" - alt="<?php echo $emote->get_code() ?>"> - </div> - </div> + <?php html_navigation_bar(); ?> + <main class="page"> + <section class="sidebar"> + <?php html_navigation_search(); ?> </section> + <section class="content"> + <section class="box"> + <div class="box navtab"> + Emote - <?php echo $emote->get_code() ?> + </div> + <div class="box content"> + <div class="emote-showcase"> + <img src="<?php echo '/static/userdata/emotes/' . $emote->get_id() . '/' . '1x.' . $emote->get_ext() ?>" + alt="<?php echo $emote->get_code() ?>"> + <img src="<?php echo '/static/userdata/emotes/' . $emote->get_id() . '/' . '2x.' . $emote->get_ext() ?>" + alt="<?php echo $emote->get_code() ?>"> + <img src="<?php echo '/static/userdata/emotes/' . $emote->get_id() . '/' . '3x.' . $emote->get_ext() ?>" + alt="<?php echo $emote->get_code() ?>"> + </div> + </div> + </section> - <section class="box items row"> - <div class="items row left full"> - <form action="/emotes/add.php" method="POST"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" style="display: none;"> - <button type="submit" class="green">Add to my channel</button> - </form> - </div> - <div class="items row right full"> - <form action="/emotes/rate.php" method="POST"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" style="display: none;"> - <input type="text" name="rate" value="5" style="display:none;"> - <button type="submit" class="transparent">gem</button> - </form> - <form action="/emotes/rate.php" method="POST"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" style="display: none;"> - <input type="text" name="rate" value="1" style="display:none;"> - <button type="submit" class="transparent">coal</button> - </form> - <a class="button red" href="/emotes/report.php?id=<?php echo $emote->get_id() ?>">Report - emote</a> - </div> - </section> + <section class="box items row"> + <div class="items row left full"> + <form action="/emotes/add.php" method="POST"> + <input type="text" name="id" value="<?php echo $emote->get_id() ?>" + style="display: none;"> + <button type="submit" class="green">Add to my channel</button> + </form> + </div> + <div class="items row right full"> + <form action="/emotes/rate.php" method="POST"> + <input type="text" name="id" value="<?php echo $emote->get_id() ?>" + style="display: none;"> + <input type="text" name="rate" value="5" style="display:none;"> + <button type="submit" class="transparent">gem</button> + </form> + <form action="/emotes/rate.php" method="POST"> + <input type="text" name="id" value="<?php echo $emote->get_id() ?>" + style="display: none;"> + <input type="text" name="rate" value="1" style="display:none;"> + <button type="submit" class="transparent">coal</button> + </form> + <a class="button red" href="/emotes/report.php?id=<?php echo $emote->get_id() ?>">Report + emote</a> + </div> + </section> - <section class="box"> - <table class="vertical"> - <tr> - <th>Uploader</th> - <td><?php - echo '<a href="/users/' . "0" . '">' . "someone" . '</a>, '; - echo date("d M Y", $emote->get_created_at()); - ?></td> - </tr> - <tr> - <th>Rating</th> - <td>Not rated</td> - </tr> - </table> - </section> + <section class="box"> + <table class="vertical"> + <tr> + <th>Uploader</th> + <td><?php + echo '<a href="/users/' . "0" . '">' . "someone" . '</a>, '; + echo date("d M Y", $emote->get_created_at()); + ?></td> + </tr> + <tr> + <th>Rating</th> + <td>Not rated</td> + </tr> + </table> + </section> - <section class="box"> - <div class="content"> - <p>Added in <?php echo 20 ?> channels</p> - <div class="items row"> - <a href="/users/1">forsen</a> - <a href="/users/2">not_forsen</a> - <a href="/users/3">lidl_forsen</a> + <section class="box"> + <div class="content"> + <p>Added in <?php echo 20 ?> channels</p> + <div class="items row"> + <a href="/users/1">forsen</a> + <a href="/users/2">not_forsen</a> + <a href="/users/3">lidl_forsen</a> + </div> </div> - </div> + </section> </section> </main> </div> diff --git a/src/partials.php b/src/partials.php new file mode 100644 index 0000000..c5170af --- /dev/null +++ b/src/partials.php @@ -0,0 +1,31 @@ +<?php +function html_navigation_bar() +{ + echo '' ?> + <section class="navbar"> + <h1>AlrightTV</h1> + <div class="links"> + <a href="/emotes" class="button">Emotes</a> + <a href="/emotes/upload.php" class="button">Upload</a> + <a href="/login" class="button">Log in...</a> + </div> + </section> + <?php ; +} + +function html_navigation_search() +{ + echo '' ?> + <section class="box"> + <div class="box navtab"> + Search... + </div> + <div class="box content"> + <form action="/emotes/search.php" method="get"> + <input type="text" name="q" style="padding:4px;"><br> + <button type="submit" style="width:100%;margin-top:6px;">Find</button> + </form> + </div> + </section> + <?php ; +}
\ No newline at end of file |