From b3c60467e133ca6f948e1df737c999f17d5b1bef Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Wed, 29 Sep 2021 16:03:37 +0200
Subject: [PATCH] UI styling, breadcrumb navigation

---
 index.cgi       |  5 +---
 page_channel.sh | 12 ++++++--
 rawnet.css      | 75 ++++++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/index.cgi b/index.cgi
index 1a8914d..f540aed 100755
--- a/index.cgi
+++ b/index.cgi
@@ -32,10 +32,7 @@ yield_page(){
 	    [form method=POST action="$_BASE/search/"
 	      [input name=search placeholder="Search"]
 	    ]
-	    $( [ ! "$USER_ID" ] \
-               && printf '[div #user_login [a href="%s/login/" Login]]' "$_BASE" \
-               || w_user_login
-            )
+	    $(w_user_login)
 	  ][main
 	EOF
   cat
diff --git a/page_channel.sh b/page_channel.sh
index d12f417..159c865 100755
--- a/page_channel.sh
+++ b/page_channel.sh
@@ -96,6 +96,9 @@ update_channel(){
       REDIRECT "${_BASE}/channel/${channel}/#ERROR_UPDATE_NOLOCK"
     fi
     ;;
+  update_channel_cancel)
+    REDIRECT "${_BASE}/channel/${channel}/"
+    ;;
   newvideo)
     video="$(POST video |checkid)"
     # database video create
@@ -161,14 +164,17 @@ elif [ "$channel" -a "$action" = edit ]; then
 	  [input name="name" value="$(HTML "$CHANNEL_NAME")" placeholder="Channel Name"]
 	  [textarea name="description" placeholder="Description" . $(HTML "$CHANNEL_DESCRIPTION")]
 	  [submit "action" "update_channel" . Update]
+	  [submit "action" "update_channel_cancel" . Cancel]
 	]
 	EOF
 elif [ "$channel" ]; then
   yield_page "$CHANNEL_NAME" "channel" <<-EOF
+	[nav [a href="../" Channels] - [span $(HTML "${CHANNEL_NAME:-(Unnamed Channel)}")]
+	  $( [ "$USER_ID" -a ! "${CHANNEL_AUTHORS##*${USER_ID}*}" ] \
+             && printf ' - [a href="edit" edit]'
+          )
+	]
 	[h1 .name $(HTML "$CHANNEL_NAME")]
-	$( [ "$USER_ID" -a ! "${CHANNEL_AUTHORS##*${USER_ID}*}" ] \
-           && printf '[a href="edit" edit]'
-        )
 	[div .description . ${CHANNEL_DESCR_CACHE}]
 	[div .videos
 	  $( [ -f "$vid_db" -a -r "$vid_db" ] \
diff --git a/rawnet.css b/rawnet.css
index 93de0da..472db1e 100644
--- a/rawnet.css
+++ b/rawnet.css
@@ -6,25 +6,70 @@ body {
 }
 
 header {
-  background-color: rgba(0,0,0,.75);
+  background-size: inherit;
+  background-position: right;
+  background-image: /* #6AF #6FF */
+    linear-gradient( 0deg, rgba(0,0,0,.75) 0% 100%),
+    linear-gradient( 0deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
+    linear-gradient(90deg, transparent 25%, rgba(128,128,128,.5) 25% 50%, transparent 50% 75%, rgba(192,192,192,.5) 75%),
+    linear-gradient( 0deg, #FFF 0% 100%);
   padding: .25em;
-  border-bottom: 1pt solid;
-  box-shadow: #000 0 .25em .5em;
+  box-shadow: #000 .25em .25em .25em;
   text-align: center;
-}
-header > * {
-  display: inline-block;
+  padding-right: .25em 12em;
+  z-index: 1;
 }
 
 header #user_login {
-  float: right;
-  margin: .125em .5em;
+  background-size: inherit;
+  background-image: inherit;
+  box-shadow: inherit;
+  position: absolute;
+  right: 0; top: 30.5pt; max-height: 0;
+  padding: 0 .5em;
+  transition: max-height linear .125s;
+  text-align: center;
+  width: 12em;
+}
+#user_login > * {
+  position: relative;
+  top: -2.5em;
+}
+#user_login > *:last-child {
+  margin-bottom: -2em;
+}
+header #user_login:hover {
+  max-height: 10em;
 }
 header #user_login > p {
-  display: inline-block;
   color: #EEE;
   font-size: .875em; line-height: 1.125em;
-  max-width: 12em;
+}
+header #user_login > p span {
+  display: block;
+  font-size: initial;
+  line-height: 1.375em;
+}
+header #user_login.login:before {
+  display: block;
+  content: "Login";
+  position: relative;
+  font-size: 1.25em;
+  text-decoration: underline;
+  top: -1.5em;
+  padding-bottom: 1em;
+  color: #EEE;
+  text-align: right;
+}
+header #user_login input,
+header #user_login button {
+  display: none;
+}
+header #user_login:hover input,
+header #user_login:hover button {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 main {
@@ -33,6 +78,16 @@ main {
   box-shadow: #000 .125em .125em 1em;
 }
 
+main nav {
+  font-size: .875em;
+  margin-top: -1em;
+}
+main nav > * {
+  padding: .125em .5em;
+  font-style: italic;
+  text-decoration: underline;
+}
+
 body.channel main h1.name {
   text-align: center;
 }
-- 
2.39.2