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]
name = "board_server"
version = "2.0.1"
version = "2.1.0"
edition = "2018"
license = "Zlib"
repository = "https://git.solow.xyz/cgit.cgi/Boarders/"

View File

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

View File

@ -27,10 +27,10 @@ pub struct Board {
impl Board {
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) {
Ok(a) => Ok(serde_json::from_reader(a).unwrap()),
Err(e) => Err(e)
};
let mut b: std::result::Result<Board, _> = File::open(&path).map(
|a| serde_json::from_reader(a).unwrap()
);
/* backwards compatability */
if let Ok(ref mut b) = b {
if b.last_active.is_none() {
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="/static/index.css">
</head>
<body>
<body style="overflow-x: hidden;">
{{> board_bar board=board user=user}}
<div id="index">
<table style="width: 100%;" cellpadding=8px>
<!--messages-->
{{#each messages as | msg |}}
<tr style="border-bottom: 1px solid #555" class="message">
<td>
{{#if msg.author.nick}}
<div style="display: flex; flex-direction: column; align-items: center;">
{{msg.author.nick}}<br>
<div style="color: #777777;">{{author.username}}</div>
</div>
{{else}}
{{msg.author.username}}
{{/if}}
</td>
<td>
{{msg.text}}
</td>
<td>
{{msg.timestamp}}
</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>
<!--messages-->
{{#each messages as | msg |}}
<div style="border-bottom: 1px solid #555" class="message">
{{#if msg.author.nick}}
<div style="display: flex; flex-direction: column; align-items: center;">
{{msg.author.nick}}<br>
<div style="color: #777777;">{{author.username}}</div>
</div>
{{else}}
<b>{{msg.author.username}}</b>
{{/if}}
<div class="message-content">
<pre>{{msg.text}}</pre>
</div>
<div class="message-time">
{{msg.timestamp}}
</div>
</div>
{{/each}}
</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>
</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="/static/index.css">
</head>
<body>
<body style="overflow-x: hidden;">
<div id="title" class="bar">
<div>
<h1>Board Index</h1>

View File

@ -106,6 +106,20 @@ body {
margin-top: 0.5em;
margin-bottom: 0.5em;
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 {
@ -113,21 +127,10 @@ body {
background-color: inherit;
}
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 {
margin: 0;
position: absolute;
@ -149,13 +152,6 @@ th {
margin-bottom: 1em;
}
tr.a {
background-color: #3A3A3A;
}
tr.b {
background-color: inherit;
}
.auth {
margin: auto;
width: 20em;
@ -171,6 +167,9 @@ tr.b {
#index {
padding: 3em;
padding-top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@keyframes board-hover {
@ -195,3 +194,16 @@ tr.board:hover {
animation-name: board-hover;
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+ */
}