UI updates
This commit is contained in:
parent
59c1daeac5
commit
95fde911c5
7 changed files with 241 additions and 36 deletions
78
static/img/full.svg
Normal file
78
static/img/full.svg
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="128.51335"
|
||||
height="128.51335"
|
||||
viewBox="0 0 128.51335 128.51335"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="full.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="0.24705882"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="2.8284272"
|
||||
inkscape:cx="95.459413"
|
||||
inkscape:cy="85.206365"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-100.04388,-5.4976611)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect1"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="108.74121"
|
||||
y="5.4976611"
|
||||
ry="24.793957" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect2"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="188.74121"
|
||||
y="5.4976611"
|
||||
ry="24.793957" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect3"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="14.194984"
|
||||
y="-228.55724"
|
||||
ry="24.793957"
|
||||
transform="rotate(90)" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect4"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="94.194984"
|
||||
y="-228.55724"
|
||||
ry="24.793957"
|
||||
transform="rotate(90)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -2,9 +2,9 @@
|
|||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="222.31953"
|
||||
height="222.31953"
|
||||
viewBox="0 0 222.31953 222.31953"
|
||||
width="64.496506"
|
||||
height="82.610687"
|
||||
viewBox="0 0 64.496505 82.610686"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1.4142136"
|
||||
inkscape:cx="105.00535"
|
||||
inkscape:cy="77.781744"
|
||||
inkscape:zoom="2.8284272"
|
||||
inkscape:cx="101.11627"
|
||||
inkscape:cy="112.07642"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
|
|
@ -39,10 +39,11 @@
|
|||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-17.543759,-18.097959)">
|
||||
transform="translate(-108.95572,-104.59504)">
|
||||
<path
|
||||
id="path5"
|
||||
style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
|
||||
d="M 128.70353,18.097959 A 22.586276,22.586276 0 0 0 106.11724,40.684235 V 106.67145 H 40.130023 A 22.586276,22.586276 0 0 0 17.543759,129.25773 22.586276,22.586276 0 0 0 40.130023,151.844 h 65.987217 v 65.98721 a 22.586276,22.586276 0 0 0 22.58629,22.58629 22.586276,22.586276 0 0 0 22.58626,-22.58629 V 151.844 h 65.98722 A 22.586276,22.586276 0 0 0 239.8633,129.25773 22.586276,22.586276 0 0 0 217.27701,106.67145 H 151.28979 V 40.684235 A 22.586276,22.586276 0 0 0 128.70353,18.097959 Z" />
|
||||
id="rect1"
|
||||
style="fill:#ffffff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="m 124.51507,104.97721 c 11.49035,3.35469 40.09694,16.30449 47.97259,34.31989 1.98795,4.54738 0.67496,10.50752 -1.86441,14.77158 -9.67692,16.24936 -39.51007,32.3491 -46.10818,33.06351 -8.56979,0.92789 -15.55935,-7.06913 -15.55935,-15.85008 v -50.45482 c 0,-8.78094 7.28491,-18.26586 15.55935,-15.85008 z"
|
||||
sodipodi:nodetypes="saassss" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -2,9 +2,9 @@
|
|||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="170.4344"
|
||||
height="170.4344"
|
||||
viewBox="0 0 170.4344 170.4344"
|
||||
width="71.118706"
|
||||
height="82.154984"
|
||||
viewBox="0 0 71.118705 82.154982"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1.4142136"
|
||||
inkscape:cx="52.679454"
|
||||
inkscape:cy="25.455843"
|
||||
inkscape:zoom="2.8284272"
|
||||
inkscape:cx="66.644812"
|
||||
inkscape:cy="38.890872"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
|
|
@ -39,10 +39,22 @@
|
|||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-43.486324,-44.040524)">
|
||||
<path
|
||||
id="path5"
|
||||
style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
|
||||
d="m 207.30536,50.655902 a 22.586276,22.586276 0 0 0 -31.94183,-10e-6 L 128.70352,97.3159 82.043514,50.655891 a 22.586276,22.586276 0 0 0 -31.941812,1.1e-5 22.586276,22.586276 0 0 0 -5e-6,31.941805 l 46.660009,46.660013 -46.660004,46.66 a 22.586276,22.586276 0 0 0 0,31.94184 22.586276,22.586276 0 0 0 31.941817,-2e-5 l 46.660001,-46.66001 46.66001,46.66001 a 22.586276,22.586276 0 0 0 31.94183,2e-5 22.586276,22.586276 0 0 0 -1e-5,-31.94183 l -46.66001,-46.66001 46.66001,-46.660011 a 22.586276,22.586276 0 0 0 1e-5,-31.941807 z" />
|
||||
transform="translate(-128.74121,-51.85603)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect1"
|
||||
width="31.118704"
|
||||
height="82.154984"
|
||||
x="128.74121"
|
||||
y="51.85603"
|
||||
ry="15.850081" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect2"
|
||||
width="31.118704"
|
||||
height="82.154984"
|
||||
x="168.74121"
|
||||
y="51.85603"
|
||||
ry="15.850081" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 1.8 KiB |
78
static/img/tiny.svg
Normal file
78
static/img/tiny.svg
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="128.51335"
|
||||
height="128.51335"
|
||||
viewBox="0 0 128.51335 128.51335"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="tiny.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="0.24705882"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="2.8284272"
|
||||
inkscape:cx="95.63619"
|
||||
inkscape:cy="85.206365"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-100.04388,-5.4976611)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect1"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="128.74121"
|
||||
y="5.4976611"
|
||||
ry="24.793957" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect2"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="168.74121"
|
||||
y="5.4976616"
|
||||
ry="24.793957" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect3"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="34.194984"
|
||||
y="-228.55724"
|
||||
ry="24.793957"
|
||||
transform="rotate(90)" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="rect4"
|
||||
width="31.118704"
|
||||
height="128.51335"
|
||||
x="74.194984"
|
||||
y="-228.55724"
|
||||
ry="24.793957"
|
||||
transform="rotate(90)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -8,7 +8,6 @@ body {
|
|||
align-items: center;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
@ -41,6 +40,7 @@ form,
|
|||
.comment {
|
||||
border: solid var(--dark-2) 3px;
|
||||
border-radius: 5px;
|
||||
background: var(--light-1);
|
||||
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -50,6 +50,21 @@ form,
|
|||
video {
|
||||
border: solid var(--dark-2) 3px;
|
||||
border-radius: 5px;
|
||||
width: 900px;
|
||||
max-width: 90vmin;
|
||||
}
|
||||
|
||||
.full video {
|
||||
width: 100vw;
|
||||
height: 80vh;
|
||||
max-width: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.full .progressbar {
|
||||
width: 95vw;
|
||||
max-width: 95vw;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
form span {
|
||||
|
|
@ -124,20 +139,15 @@ form {
|
|||
height: 2em;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 900px;
|
||||
max-width: 90vmin;
|
||||
}
|
||||
|
||||
.video img {
|
||||
width: 190px;
|
||||
height: 150px;
|
||||
margin-left: 5px;
|
||||
width: 180px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 200px;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.videos {
|
||||
|
|
@ -151,6 +161,7 @@ video {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.videos a {
|
||||
|
|
@ -186,6 +197,16 @@ textarea {
|
|||
|
||||
.controls img {
|
||||
width: 45px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.video-wrapper.full {
|
||||
background: rgba(0,0,0,0.5);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
img.dark {
|
||||
|
|
|
|||
|
|
@ -37,12 +37,12 @@ function prog(vid, bar) {
|
|||
}
|
||||
|
||||
function controls(vid) {
|
||||
let isFull = false;
|
||||
let bar = vid.querySelector('.progressbar');
|
||||
let video = vid.querySelector('video');
|
||||
let play = vid.querySelector('.play');
|
||||
|
||||
video.onclick = play.onclick = () => {
|
||||
|
||||
play.querySelector('img').src = !video.paused ? '/static/img/play.svg' : '/static/img/stop.svg';
|
||||
|
||||
if (video.paused) {
|
||||
|
|
@ -52,6 +52,16 @@ function controls(vid) {
|
|||
video.pause();
|
||||
}
|
||||
|
||||
vid.querySelector('.full').onclick = (e) => {
|
||||
isFull = !isFull;
|
||||
e.target.src = isFull ? '/static/img/tiny.svg' : '/static/img/full.svg';
|
||||
if (isFull) {
|
||||
vid.classList.add('full')
|
||||
} else {
|
||||
vid.classList.remove('full')
|
||||
}
|
||||
}
|
||||
|
||||
bar.onclick = (e) => moveBar(e, bar, video);
|
||||
|
||||
video.addEventListener('timeupdate', () => prog(video,bar));
|
||||
|
|
|
|||
|
|
@ -8,16 +8,21 @@
|
|||
</div>
|
||||
<div class='controls'>
|
||||
<div class='play'><img src='/static/img/play.svg' class='dark'></div>
|
||||
<div class='full'><img src='/static/img/full.svg' class='dark'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><b>
|
||||
<%= videoData.title %>
|
||||
</b>
|
||||
</div>
|
||||
<div>by <a href="/client/user?id=<%= videoData.username %>">
|
||||
<%= videoData.username %>
|
||||
</a></div>
|
||||
<div>Created by <b><a href="/client/user?id=<%= videoData.username %>">
|
||||
@<%= videoData.username %></a></b>
|
||||
</a> on
|
||||
<b>
|
||||
<%= (new Date(videoData.date)+'').split(/(GMT|UTC)/g)[0] %>
|
||||
</b>
|
||||
</div>
|
||||
<pre><%= videoData.desc %></pre>
|
||||
</div>
|
||||
<%- include('comments.ejs') -%>
|
||||
<%- include('footer.ejs') -%>
|
||||
<%- include('footer.ejs') -%>
|
||||
Loading…
Reference in a new issue