v2.1.0 - Pirate Stache - HTML Rendering

Fixed some HTML rendering issues, the largest being text overflow with
the `<pre>` elements.

Centered text input box

Made text content background different

When opening a board it will now trim excess whitespace around strings
for storage efficiency and backward compatability.
This commit is contained in:
saw 2021-07-15 20:19:29 -04:00
parent 1a3db7f676
commit b92d1e6236
6 changed files with 66 additions and 60 deletions

View File

@ -1,6 +1,6 @@
[package] [package]
name = "board_server" name = "board_server"
version = "2.0.1" version = "2.1.0"
edition = "2018" edition = "2018"
license = "Zlib" license = "Zlib"
repository = "https://git.solow.xyz/cgit.cgi/Boarders/" repository = "https://git.solow.xyz/cgit.cgi/Boarders/"

View File

@ -122,10 +122,8 @@ pub async fn board_post(
} else { } else {
return Err(HttpResponse::Unauthorized().body("Unauthorized: Bad login attempt, invalid auth token")); return Err(HttpResponse::Unauthorized().body("Unauthorized: Bad login attempt, invalid auth token"));
} }
}, form.content.clone()); }, form.content.clone().trim());
println!("new message"); println!("new message");
//println!("board: {{ id: {}, name: {} }}{:?}", a.id, a.title, msg);
//let a = a.clone().add_message(msg);
a.add_message(msg); a.add_message(msg);
Ok(HttpResponse::SeeOther().header("location", format!("/board/{}/", a.id)).finish()) Ok(HttpResponse::SeeOther().header("location", format!("/board/{}/", a.id)).finish())
}, },

View File

@ -27,10 +27,10 @@ pub struct Board {
impl Board { impl Board {
pub fn open<P>(path: P) -> Result<Board> where P: AsRef<Path> { pub fn open<P>(path: P) -> Result<Board> where P: AsRef<Path> {
let mut b: std::result::Result<Board, std::io::Error> = match File::open(&path) { let mut b: std::result::Result<Board, _> = File::open(&path).map(
Ok(a) => Ok(serde_json::from_reader(a).unwrap()), |a| serde_json::from_reader(a).unwrap()
Err(e) => Err(e) );
}; /* backwards compatability */
if let Ok(ref mut b) = b { if let Ok(ref mut b) = b {
if b.last_active.is_none() { if b.last_active.is_none() {
b.last_active = b.messages.borrow().last().map(|x| x.timestamp); b.last_active = b.messages.borrow().last().map(|x| x.timestamp);

View File

@ -3,40 +3,36 @@
<link rel="stylesheet" type="text/css" href="https://orbitalfox.us/Music/index.css"> <link rel="stylesheet" type="text/css" href="https://orbitalfox.us/Music/index.css">
<link rel="stylesheet" type="text/css" href="/static/index.css"> <link rel="stylesheet" type="text/css" href="/static/index.css">
</head> </head>
<body> <body style="overflow-x: hidden;">
{{> board_bar board=board user=user}} {{> board_bar board=board user=user}}
<div id="index"> <div id="index">
<table style="width: 100%;" cellpadding=8px> <!--messages-->
<!--messages--> {{#each messages as | msg |}}
{{#each messages as | msg |}} <div style="border-bottom: 1px solid #555" class="message">
<tr style="border-bottom: 1px solid #555" class="message"> {{#if msg.author.nick}}
<td> <div style="display: flex; flex-direction: column; align-items: center;">
{{#if msg.author.nick}} {{msg.author.nick}}<br>
<div style="display: flex; flex-direction: column; align-items: center;"> <div style="color: #777777;">{{author.username}}</div>
{{msg.author.nick}}<br> </div>
<div style="color: #777777;">{{author.username}}</div> {{else}}
</div> <b>{{msg.author.username}}</b>
{{else}} {{/if}}
{{msg.author.username}} <div class="message-content">
{{/if}} <pre>{{msg.text}}</pre>
</td> </div>
<td> <div class="message-time">
{{msg.text}} {{msg.timestamp}}
</td> </div>
<td> </div>
{{msg.timestamp}} {{/each}}
</td>
</tr>
{{/each}}
</table>
<form action="/boards/post" method="post">
<label for="content">Content:</label><br/>
<input type="hidden" id="board_id" name="board_id" value="{{board.id}}">
<input type="hidden" id="user_id" name="user_id" value="{{user.user_id}}">
<textarea name="content" id="content" rows=12 cols=50 placeholder="Enter message here..."></textarea>
<br/>
<input type="submit" value="Post Message" style="margin: 0.5em;">
</form>
</div> </div>
<form action="/boards/post" method="post" style="display: flex; align-items: center; flex-direction: column;">
<label for="content">Content:</label><br/>
<input type="hidden" id="board_id" name="board_id" value="{{board.id}}">
<input type="hidden" id="user_id" name="user_id" value="{{user.user_id}}">
<textarea name="content" id="content" rows=12 cols=50 placeholder="Enter message here..."></textarea>
<br/>
<input type="submit" value="Post Message" style="margin: 0.5em;">
</form>
</body> </body>
</html> </html>

View File

@ -3,7 +3,7 @@
<link rel="stylesheet" type="text/css" href="https://orbitalfox.us/Music/index.css"> <link rel="stylesheet" type="text/css" href="https://orbitalfox.us/Music/index.css">
<link rel="stylesheet" type="text/css" href="/static/index.css"> <link rel="stylesheet" type="text/css" href="/static/index.css">
</head> </head>
<body> <body style="overflow-x: hidden;">
<div id="title" class="bar"> <div id="title" class="bar">
<div> <div>
<h1>Board Index</h1> <h1>Board Index</h1>

View File

@ -106,6 +106,20 @@ body {
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-bottom: 1px solid #555; border-bottom: 1px solid #555;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.message > * {
padding: 0.2em;
}
.message:hover {
background-color: #3a3a3a;
animation-duration: 0.1s;
animation-name: msg-hover;
} }
@keyframes msg-hover { @keyframes msg-hover {
@ -113,21 +127,10 @@ body {
background-color: inherit; background-color: inherit;
} }
to { to {
background-color: #5a5a5a background-color: #3a3a3a;
} }
} }
tr.message:hover {
animation-duration: 0.2s;
animation-name: msg-hover;
background-color: #5a5a5a
}
.message.right {
}
.message.left {
}
.vertical-center { .vertical-center {
margin: 0; margin: 0;
position: absolute; position: absolute;
@ -149,13 +152,6 @@ th {
margin-bottom: 1em; margin-bottom: 1em;
} }
tr.a {
background-color: #3A3A3A;
}
tr.b {
background-color: inherit;
}
.auth { .auth {
margin: auto; margin: auto;
width: 20em; width: 20em;
@ -171,6 +167,9 @@ tr.b {
#index { #index {
padding: 3em; padding: 3em;
padding-top: 0; padding-top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
@keyframes board-hover { @keyframes board-hover {
@ -195,3 +194,16 @@ tr.board:hover {
animation-name: board-hover; animation-name: board-hover;
background-color: #444; background-color: #444;
} }
.message-content {
flex-grow: 1;
max-width: 90%;
}
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}