feat: add line breaks on threads list text

This commit is contained in:
Yanislav Igonin 2022-01-20 21:03:18 +02:00
parent 16d5fa039e
commit 62be228308
5 changed files with 41 additions and 56 deletions

View File

@ -15,11 +15,3 @@
.file { .file {
width: 100%; width: 100%;
} }
.line-break {
white-space: pre-line;
}
.word-wrap {
word-break: break-word;
}

3
static/styles/utils.css Normal file
View File

@ -0,0 +1,3 @@
.line-break {
white-space: pre-line;
}

View File

@ -1,34 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
{{ template "static" }} {{ template "static" }}
<link <link href="/static/styles/index.css" rel="stylesheet">
href="/static/styles/index.css"
rel="stylesheet"
>
{{ template "meta-tags-static" }} {{ template "meta-tags-static" }}
</head> </head>
<body> <body>
<h1 class="display-1 text-center">Welcome to Micrach</h1> <h1 class="display-1 text-center">Welcome to Micrach</h1>
<div class="container"> <div class="container">
{{ template "post-form" .FormData }} {{ template "post-form" .FormData }}
<div id="" class="row row-cols-auto gy-4 mb-4 justify-content-center"> <div id="" class="row row-cols-auto gy-4 mb-4 justify-content-center">
{{ range $Post := .Threads }} {{ range $Post := .Threads }}
<div class="col col-sm-6 col-md-4 col-lg-3"> <div class="col col-sm-6 col-md-4 col-lg-3">
<div class="card"> <div class="card">
{{ $length := len $Post.Files }} {{ $length := len $Post.Files }}
{{ if gt $length 0 }} {{ if gt $length 0 }}
{{ $FirstFile := index $Post.Files 0 }} {{ $FirstFile := index $Post.Files 0 }}
<img <img src="/uploads/{{$Post.ID}}/t/{{$FirstFile.ID}}.{{$FirstFile.Ext}}" class="card-img-top"
src="/uploads/{{$Post.ID}}/t/{{$FirstFile.ID}}.{{$FirstFile.Ext}}" alt="Uploaded picture">
class="card-img-top"
alt="Uploaded picture"
>
{{ end }} {{ end }}
<div class="card-body"> <div class="card-body">
@ -38,9 +33,9 @@
{{ $textLength := len $Post.Text }} {{ $textLength := len $Post.Text }}
{{ if gt $textLength 300 }} {{ if gt $textLength 300 }}
<p class="card-text">{{ slice $Post.Text 0 300 }} ...</p> <p class="card-text line-break text-break">{{ slice $Post.Text 0 300 }} ...</p>
{{ else }} {{ else }}
<p class="card-text">{{$Post.Text}}</p> <p class="card-text line-break text-break">{{$Post.Text}}</p>
{{ end }} {{ end }}
<a href="/{{$Post.ID}}" class="btn btn-outline-primary">Open</a> <a href="/{{$Post.ID}}" class="btn btn-outline-primary">Open</a>
@ -55,9 +50,9 @@
<ul id="pagesList" class="pagination justify-content-center"> <ul id="pagesList" class="pagination justify-content-center">
{{ $ActivePage := .Page }} {{ $ActivePage := .Page }}
{{ range $i := Iterate .PagesCount }} {{ range $i := Iterate .PagesCount }}
<li class="page-item {{ if (eq $i $ActivePage) }} active {{ end }}"> <li class="page-item {{ if (eq $i $ActivePage) }} active {{ end }}">
<a class="page-link" href="/?page={{ $i }}">{{ $i }}</a> <a class="page-link" href="/?page={{ $i }}">{{ $i }}</a>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>

View File

@ -11,8 +11,6 @@
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
<link rel="icon" href="/static/favicon.ico"/> <link rel="icon" href="/static/favicon.ico"/>
<link <link href="/static/styles/utils.css" rel="stylesheet">
href="/static/styles/post-form.css" <link href="/static/styles/post-form.css" rel="stylesheet">
rel="stylesheet"
>
{{ end }} {{ end }}

View File

@ -2,11 +2,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
{{ template "static" }} {{ template "static" }}
{{ template "meta-tags-dynamic" $FirstPost }} {{ template "meta-tags-dynamic" $FirstPost }}
<link href="/static/styles/thread.css" rel="stylesheet" > <link href="/static/styles/thread.css" rel="stylesheet">
<link href="/static/styles/post.css" rel="stylesheet" > <link href="/static/styles/post.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -14,42 +15,38 @@
<h1 class="display-1 text-center thread-title"> <h1 class="display-1 text-center thread-title">
{{ if ne $FirstPost.Title "" }} {{ if ne $FirstPost.Title "" }}
{{$FirstPost.Title}} {{$FirstPost.Title}}
{{ else }} {{ else }}
Welcome to Micrach Welcome to Micrach
{{ end }} {{ end }}
</h1> </h1>
</a> </a>
<div class="container"> <div class="container">
{{ template "post-form" .FormData }} {{ template "post-form" .FormData }}
<div id="postsСontainer"> <div id="postsСontainer">
{{ range $Post := .Thread }} {{ range $Post := .Thread }}
<div class="post-container mb-4"> <div class="post-container mb-4">
{{ $filesLength := len $Post.Files }} {{ $filesLength := len $Post.Files }}
{{ if gt $filesLength 0 }} {{ if gt $filesLength 0 }}
<div class="files-container"> <div class="files-container">
{{ range $File := $Post.Files }} {{ range $File := $Post.Files }}
<div class="file-container"> <div class="file-container">
<a href="/uploads/{{$FirstPost.ID}}/o/{{$File.ID}}.{{$File.Ext}}" target="blank"> <a href="/uploads/{{$FirstPost.ID}}/o/{{$File.ID}}.{{$File.Ext}}" target="blank">
<img <img src="/uploads/{{$FirstPost.ID}}/t/{{$File.ID}}.{{$File.Ext}}" class="file" alt="Uploaded picture">
src="/uploads/{{$FirstPost.ID}}/t/{{$File.ID}}.{{$File.Ext}}" </a>
class="file"
alt="Uploaded picture"
>
</a>
</div>
{{ end }}
</div> </div>
{{ end }} {{ end }}
<div class="p-2">
<p class="card-text line-break word-wrap">{{$Post.Text}}</p>
</div>
</div> </div>
{{ end }}
<div class="p-2">
<p class="card-text line-break text-break">{{$Post.Text}}</p>
</div>
</div>
{{end}} {{end}}
</div> </div>
</div> </div>