styling of channel display

diff --git a/page_channel.sh b/page_channel.sh
index 57de476c579b17dbc2db175d222bac7aa72694ea..b1fd4c50d000448ea7b00312c399a8d94ae6fe29 100755 (executable)
--- 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 eca7be70b1873930d6ff3c8d754ebab7093f5772..ef9a82edc3f8a5c4a881fd23761661b521d1ab88 100644 (file)
--- 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 c397b2d8dde2c07f63afabccadc6a10414698941..557bc825cb7bc2d5dcc659f7ba119ebaacde227d 100644 (file)
--- 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;
 }