shockrah/clippable
shockrah/clippable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ Adding web routes

Browse Source 
+ Skeleton code for web page routes is almost done
! Might have to add some clever Javascript but we'll see
This commit is contained in:
shockrah 2021-09-27 11:55:38 -07:00
parent a590a648c0
commit 847d7a487f
5 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
clippable-server/src/api.rs Normal file
View File

@ -0,0 +1,4 @@
#[get("/<video_id>")]
fn video_page() -> String {
format!("TODO")
}

20
clippable-server/src/main.rs Normal file
View File

@ -0,0 +1,20 @@
#![feature(decl_macro)]
#[macro_use] extern crate rocket;
use rocket_contrib::serve::StaticFiles;
use std::env;
#[get("/<id>")]
fn video_page(id: u64) -> String {
format!("Video id requested: {}", id)
}
fn main() {
// emoji's crash my terminal
env::set_var("ROCKET_CLI_COLORS", "off");
let _ = rocket::ignite()
.mount("/video", routes![video_page])
.mount("/", StaticFiles::from("static"))
.launch();
}

BIN
clippable-server/static/img/tmp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

57
clippable-server/static/index.html Normal file
View File

@ -0,0 +1,57 @@
<html>
<head>
<title>Clippable</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="main">
<div class="content">
<form class="pure-form">
<h1>Clippable</h1>
<fieldset>
<input type="text" placeholder="Search"/>
<button class="pure-button pure-button-primary">Search</button>
</fieldset>
</form>
<div class="video-gallery ">
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
<div class="video-block">
<h2>Video title</h2>
<p>some random description that's actually really long for some reason</p>
<img class="pure-img" src="/img/tmp.png">
</div>
</div>
</div>
</div>
</body>
</html>

42
clippable-server/static/style.css Normal file
View File

@ -0,0 +1,42 @@
html, body, div, tag {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: #212121;
text-align: center;
}
* {
box-sizing: border-box;
}
.content {
margin: 0 auto;
padding: 0 2em;
line-height: 1.6em;
color: whitesmoke;
}
.video-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.video-block {
padding: 1em;
width: 400px;
line-height: 1em;
margin-right: 1em;
margin-bottom: 1em;
background: #191818;
border-radius: 1em;
}
.pure-form {
text-align: center;
}
.pure-img {
border-radius: 0.5em;
}