UI styling, breadcrumb navigation

diff --git a/index.cgi b/index.cgi
index 1a8914de810937ad190990855392245b46bd86ba..f540aedc7e3156bceb0113af0a4ee70ef4361051 100755 (executable)
--- 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 d12f41719f3a70cd262ed532c4ccecadcf128494..159c865e66ad1705128b1b3099bc01418024956b 100755 (executable)
--- 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 93de0dad5874882a0b964c6cc817bf9d05861a37..472db1eb086132303e2ae1677d14c1ae96a965d9 100644 (file)
--- 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;
 }