From: Paul Hänsch <paul@plutz.net>
Date: Wed, 29 Sep 2021 23:26:45 +0000 (+0200)
Subject: styling of channel display
X-Git-Url: https://git.plutz.net/?p=rawnet;a=commitdiff_plain;h=8d0b3c5e1934c4bb2a3a5dbd9e0a14ab4efa438b

styling of channel display
---

diff --git a/page_channel.sh b/page_channel.sh
index 57de476..b1fd4c5 100755
--- a/page_channel.sh
+++ b/page_channel.sh
@@ -134,15 +134,14 @@ esac
 w_video(){
   local CID="$1" thumb
   local ID NAME DESCRIPTION RESX RESY LENGTH COVER STATUS UPLOADER HITS DESCR_CACHE FUTUREUSE
-  if read -r ID NAME DESCRIPTION RESX RESY LENGTH COVER STATUS UPLOADER HITS FUTUREUSE; then
+  if read -r ID NAME DESCRIPTION RESX RESY LENGTH COVER STATUS UPLOADER HITS DESCR_CACHE FUTUREUSE; then
     thumb="${_BASE}/${CID}/thumb_${ID}.jpg"
     [ "$NAME" = \\ ] && NAME="(Unnamed Video)"
-    cat <<-EOF
-	[div .video
-	  [h3 [a href="${ID}/" . $(UNSTRING "$NAME" |HTML)]]
-	  [img href="${thumb}" alt="$(UNSTRING "$DESCR_CACHE")"]
-	]
-	EOF
+    printf '[div .video .thumb
+              [h3 [a href="%s/" . %s]]
+              [figure [img src="%s" alt=""]]
+              [div .description . %s]
+            ]' "$ID" "$(UNSTRING "$NAME" |HTML)" "$thumb" "$(UNSTRING "$DESCR_CACHE")"
   else
     return 1
   fi
@@ -156,10 +155,12 @@ w_channel(){
     [ "$NAME" = \\ ] && NAME="(UNNAMED CHANNEL)"
     cat <<-EOF
 	[div .channel
-	  [h2 [a href="${_BASE}/channel/${ID}/" $(UNSTRING "${NAME}" |HTML)]]
-	  [div .description . $(UNSTRING "$DESCR_CACHE")]
-	  $( [ -f "$vid_db" -a -r "$vid_db" ] \
-	     && while w_video "$ID"; do :; done <"$vid_db"
+	  [div .description
+	    [h2 [a href="${_BASE}/channel/${ID}/" $(UNSTRING "${NAME}" |HTML)]]
+	    $(UNSTRING "$DESCR_CACHE")
+	  ]$(
+            [ -f "$vid_db" -a -r "$vid_db" ] \
+	    && while w_video "$ID"; do :; done <"$vid_db"
 	  )
 	]
 	EOF
@@ -203,18 +204,16 @@ elif [ "$channel" ]; then
 	[h1 .name $(HTML "$CHANNEL_NAME")]
 	[div .description . ${CHANNEL_DESCR_CACHE}]
 	[h1 .videos Videos]
-	[div .videos
-	  $( [ "$USER_ID" -a ! "${CHANNEL_AUTHORS##*${USER_ID}*}" ] \
-	     && printf '
-                [form .video .newvideo method=POST
-                  [hidden "video" "%s"]
-                  [submit "action" "newvideo" New Video]
-                ]' "$(timeid)"
-          )
-	  $( [ -f "$vid_db" -a -r "$vid_db" ] \
-	     && while w_video "$ID"; do :; done <"$vid_db"
-	  )
-	]
+	[div .videos . $(
+          [ "$USER_ID" -a ! "${CHANNEL_AUTHORS##*${USER_ID}*}" ] \
+	  && printf '
+             [form .video .newvideo method=POST
+               [hidden "video" "%s"]
+               [submit "action" "newvideo" New Video]
+             ]' "$(timeid)"
+	  [ -f "$vid_db" -a -r "$vid_db" ] \
+	  && while w_video "$ID"; do :; done <"$vid_db"
+	)]
 	EOF
 else
   yield_page "Channels" "channels" <<-EOF
diff --git a/page_video.sh b/page_video.sh
index eca7be7..ef9a82e 100644
--- a/page_video.sh
+++ b/page_video.sh
@@ -33,7 +33,7 @@ update_video(){
                "$(STRING "$cover")" "${status:-void}" "${uploader:-\\}" "$hits" \
                "$(printf %s "$description" |markdown |STRING)" "${futureuse:-\\}"
       else
-        printf '%s      %s\n' "$ID" "$INFO"
+        printf '%s	%s\n' "$ID" "$INFO"
       fi
     done <"$vid_db" >"${vid_db}.$$"
     mv -- "${vid_db}.$$" "${vid_db}"
diff --git a/rawnet.css b/rawnet.css
index c397b2d..557bc82 100644
--- a/rawnet.css
+++ b/rawnet.css
@@ -118,13 +118,80 @@ body.channels main .channel {
   margin-bottom: .5em;
 }
 
-body.channels main .channel > h2,
 body.channels main .channel > .description {
+  overflow: hidden;
+}
+body.channels main .channel > .description h2 {
   margin: 0;
-  width: 140pt;
-  background-color: #FFF;
 }
 
-body.channel .videos .video {
+.channel > .description, .video.thumb, .newvideo {
   display: inline-block;
+  vertical-align: top;
+  height: 14em;
+  width: 99%; margin: 0 .5%;
+  margin-bottom: 1em;
+}
+
+.newvideo button {
+  display: block;
+  margin: 3em auto;
+}
+
+.video.thumb:before, .newvideo:before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right:0; height: 11em;
+  box-shadow: #000 .25em .25em .5em;
+}
+
+@media(min-width:  24em) { .channel > .description, .video.thumb, .newvideo { max-width: 49%; } }
+@media(min-width:  44em) { .channel > .description, .video.thumb, .newvideo { max-width: 32%; } }
+@media(min-width:  64em) { .channel > .description, .video.thumb, .newvideo { max-width: 24%; } }
+@media(min-width:  84em) { .channel > .description, .video.thumb, .newvideo { max-width: 19%; } }
+@media(min-width: 104em) { .channel > .description, .video.thumb, .newvideo { max-width: 19em; } }
+
+.video.thumb figure {
+  position: absolute; top: 0;
+  height: 11em; width: 100%;
+  overflow: hidden;
+}
+.video.thumb figure img {
+  position: absolute; top: 0;
+  height: 11em; min-width: 1000%;
+  background-color: #888;
+  max-width: unset;
+  margin-left: 50%;
+  transform: translate(-05%, 0);
+  object-fit: cover;
+}
+.video.thumb:hover img {
+  animation: thumbscroll 8s steps(10, end) infinite;
+}
+@keyframes thumbscroll {
+  from { transform: translate(-05%, 0);}
+  to   { transform: translate(-105%, 0);}
+}
+
+.video.thumb h3 {
+  position: absolute;
+  top: 10.25em; width: 100%;
+  height: 3em;
+  font-weight: bolder;
+  text-align: center;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.video.thumb .description {
+  position: absolute;
+  left:0; right:0; bottom: 3.5em;
+  font-size: .875em;
+  max-height: 1em;
+  background-color: rgba(0,0,0,.75);
+  color: #EEE;
+  transition: height linear .25s;
+}
+.video.thumb .description:hover {
+  max-height: 8em;
 }