diff options
| author | Syndamia <kamen@syndamia.com> | 2025-02-01 10:52:54 +0200 |
|---|---|---|
| committer | Syndamia <kamen@syndamia.com> | 2025-02-01 10:52:54 +0200 |
| commit | 1b4732acdf222b4766eaa19a037c5e13599cb342 (patch) | |
| tree | a1beecdbf3aadee33323d74848adc1c1d0fcdb35 | |
| parent | c8cdadfabea0120526a6e0366710f9256fc999b4 (diff) | |
| download | nowayforward_human-1b4732acdf222b4766eaa19a037c5e13599cb342.tar nowayforward_human-1b4732acdf222b4766eaa19a037c5e13599cb342.tar.gz nowayforward_human-1b4732acdf222b4766eaa19a037c5e13599cb342.zip | |
feat(views/profile): Show archives and lists as proper nav buttons
| -rw-r--r-- | views/global/header.php | 2 | ||||
| -rw-r--r-- | views/profile/index.php | 22 | ||||
| -rw-r--r-- | views/styles.css | 50 |
3 files changed, 59 insertions, 15 deletions
diff --git a/views/global/header.php b/views/global/header.php index 863ba10..b3fddd8 100644 --- a/views/global/header.php +++ b/views/global/header.php @@ -11,7 +11,7 @@ <body> <script type="text/javascript" src="/authenticate.js"></script> <header> - <nav> + <nav id="global-nav"> <div class="fadeout-left"></div> <a href="/">Home</a> <div class="flex-expand"></div> diff --git a/views/profile/index.php b/views/profile/index.php index 58a43e2..a0ef2e7 100644 --- a/views/profile/index.php +++ b/views/profile/index.php @@ -13,11 +13,13 @@ <h1 class="username"><?= $user->Username ?></h1> </section> - <div class="card-blank-afterspace"></div> + <div class="user-blank-afterspace"></div> - <h2 onclick="openArchives()">Archives</h2> - <h2 onclick="openLists()">Lists</h2> - <section id="user-archives"> + <nav id="user-nav"> + <button id="openArchives" onclick="openArchives()">Archives</button> + <button id="openLists" onclick="openLists()" class="not-selected">Lists</button> + </nav> + <section id="userArchives"> <?php foreach ($user->archives() as $page) { include $VIEWS_DIR . '/archive/item.php'; @@ -26,7 +28,7 @@ ?> </section> - <section id="user-lists" hidden> + <section id="userLists" hidden> <?php foreach($user->archiveLists() as $list): ?> <section> <?= $list->Name ?> @@ -36,14 +38,20 @@ </section> <script type="text/javascript"> - const userArchives = document.getElementById('user-archives'); - const userLists = document.getElementById('user-lists'); + const elemOpenArchives = document.getElementById('openArchives'); + const elemOpenLists = document.getElementById('openLists'); + const userArchives = document.getElementById('userArchives'); + const userLists = document.getElementById('userLists'); function openArchives() { + elemOpenArchives.classList.remove('not-selected'); + elemOpenLists.classList.add('not-selected'); userArchives.hidden = false; userLists.hidden = true; } function openLists() { + elemOpenArchives.classList.add('not-selected'); + elemOpenLists.classList.remove('not-selected'); userArchives.hidden = true; userLists.hidden = false; } diff --git a/views/styles.css b/views/styles.css index 8d815ad..6d0b257 100644 --- a/views/styles.css +++ b/views/styles.css @@ -66,7 +66,7 @@ input[type=text]:focus { outline: 2px solid var(--highlight-border-color); } -input[type=submit]:hover { +input[type=submit]:hover, button:hover { cursor: pointer; } @@ -144,7 +144,7 @@ header, article { padding: 1em; } -nav { +#global-nav { display: flex; flex-direction: row; gap: 0.2em; @@ -154,7 +154,7 @@ nav { box-shadow: 0 } -nav > :not(div) { +#global-nav > :not(div) { display: block; width: fit-content; @@ -169,17 +169,17 @@ nav > :not(div) { padding: 0.6em 0.5em; } -nav > :not(div):hover { +#global-nav > :not(div):hover { border: 3px solid var(--highlight-border-color); border-bottom: none; border-top: none; } -nav > :not(div):first-child, nav > div:first-child + * { +#global-nav > :not(div):first-child, #global-nav > div:first-child + * { margin-right: 1em; } -nav > .fadeout-left { +#global-nav > .fadeout-left { width: 1em; background-color: var(--background-color); mask-image: linear-gradient( @@ -189,7 +189,7 @@ nav > .fadeout-left { ); } -nav > .fadeout-right { +#global-nav > .fadeout-right { width: 1em; background-color: var(--background-color); mask-image: linear-gradient( @@ -332,3 +332,39 @@ hr.new-section { font-size: 2.5em; vertical-align: middle; } + +.user-blank-afterspace { + height: 4em; +} + +#user-nav { + display: flex; + flex-direction: row; + gap: 1em; + margin-bottom: 2em; +} + +#user-nav button { + font-size: 1.3em; + background-color: var(--dark-green); + border: none; + color: inherit; + padding: 0.3em; + + flex: 1; + mask-image: linear-gradient( + to left, + rgba(0, 0, 0, 0) 0, + rgba(0, 0, 0, 1) 1em, + rgba(0, 0, 0, 1) calc(100% - 1em), + rgba(0, 0, 0, 0) + ); +} + +#user-nav button.not-selected { + filter: saturate(80%) brightness(80%); +} + +#user-nav button:hover { + filter: none; +} |