jarno
/
go-resume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Print button, printing layout improvements. Summary is full width.

This commit is contained in:
Jarno Rankinen 2024-02-10 17:56:37 +02:00
parent a286b61c58
commit ee283edfd9
6 changed files with 91 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
static/css/base.css
View File

@ -70,3 +70,18 @@ body {
@media screen and (min-width: 768px) {
.has-text-right-in-desktop {
text-align: right; } }
@media print {
body:not(.tag) {
font-size: 10pt;
padding: 20px;
max-width: 100%;
overflow: hidden !important; }
.tag {
font-size: 8pt !important; }
.noprint {
display: none; }
.item {
page-break-inside: avoid; }
html {
color-adjust: exact; } }

20
static/css/base.scss
View File

@ -91,3 +91,23 @@ body {
}
}
@media print {
body:not(.tag) {
font-size: 10pt;
padding: 20px;
max-width: 100%;
overflow: hidden !important;
}
.tag {
font-size: 8pt !important;
}
.noprint {
display: none;
}
.item {
page-break-inside: avoid;
}
html {
color-adjust: exact;
}
}

15
static/css/light-style.css
View File

@ -75,3 +75,18 @@ body {
@media screen and (min-width: 768px) {
.has-text-right-in-desktop {
text-align: right; } }
@media print {
body:not(.tag) {
font-size: 10pt;
padding: 20px;
max-width: 100%;
overflow: hidden !important; }
.tag {
font-size: 8pt !important; }
.noprint {
display: none; }
.item {
page-break-inside: avoid; }
html {
color-adjust: exact; } }

2
strings.go
View File

@ -14,6 +14,7 @@ func loadStrings() {
"see_dark": "See Dark Theme",
"see_light": "See Light Theme",
"all_rights_reserved": "All Rights Reserved.",
"print_dark": "For better results, please print the page using the light theme",
"powered_by": "Powered by <a href=\"https://github.com/0ranki/go-resume\">go-resume</a>",
}
@ -29,6 +30,7 @@ func loadStrings() {
"see_dark": "Tumma teema",
"see_light": "Vaalea teema",
"all_rights_reserved": "Kaikki oikeudet pidätetään.",
"print_dark": "Paremman tuloksen varmistamiseksi tulosta sivu käyttäen vaaleaa teemaa",
"powered_by": "Luotu käyttäen sovellusta <a href=\"https://github.com/0ranki/go-resume\">go-resume</a>",
}
}

2
templates/githubCorner.html
View File

@ -1,4 +1,5 @@
{{ define "githubCorner" }}
<div class="noprint">
<a href="https://github.com/0ranki/go-resume" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="
fill: #000000;
@ -17,4 +18,5 @@
fill="currentColor" class="octo-body"></path>
</svg>
</a>
</div>
{{ end }}

56
templates/index.html
View File

@ -8,7 +8,6 @@
<head>
{{ template "meta" . }}
<link rel="stylesheet" href="/static/css/{{ .Theme }}-style.css" />
<style>
{{ if .Profile.Skills }}
.skilltag {
@ -23,7 +22,13 @@
}
{{ end }}
</style>
<script>function printPage() {
if ("{{ .Theme }}" == "dark") {
alert("{{ translate "print_dark" $lang }}")
} else {
window.print();
}
}</script>
</head>
<body id="body-app">
@ -41,12 +46,12 @@
<h1 class="title is-size-1">{{ .Profile.Name }}</h1>
<p class="subtitle">{{ .Profile.Title }}</p>
</div>
<div class="column is-2">
<div class="column">
<figure class="image image is-128x128">
<img alt="Profile photo" class="is-rounded" src="{{ .Profile.Photo }}" />
</figure>
</div>
<div class="column has-text-grey-light has-text-right-in-desktop">
<div class="column is-two-fifths has-text-grey-light has-text-right has-text-centered-mobile">
<p class="has-text-weight-light">
{{ .Profile.City }}
</p>
@ -64,21 +69,32 @@
{{ end }}
</div>
</div>
<div class="noprint">
<div class="columns ">
<div class="column is-one-fifth has-text-left has-text-centered-mobile">
<button class="button" onclick="printPage()">Print to PDF</button>
</div>
<div class="column"></div>
</div>
</div>
</div>
</section>
<div class="hr"></div>
<section class="section">
<div class="container">
<div class="summary">
<div class="title is-size-5 has-text-primary has-text-weight-bold">
{{ translate "summary" $lang | html }}
</div>
<div class="wrapper">{{ .Profile.Summary }}</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-three-fifths">
<div class="summary">
<div class="title is-size-5 has-text-primary has-text-weight-bold">
{{ translate "summary" $lang }}
</div>
<div class="wrapper">{{ .Profile.Summary }}</div>
</div>
{{ with .Profile.Experience }}
<div class="experience">
@ -207,7 +223,7 @@
{{ end }}
{{ with .Profile.Certificates }}
<div class="certificates">
<div class="certificates item">
<div class="title is-size-5 has-text-primary has-text-weight-bold">
{{ translate "certificates" $lang }}
</div>
@ -232,14 +248,16 @@
<footer class="footer">
<div class="content has-text-centered">
{{ if eq .Theme "light" }}
<a href="/dark">{{ translate "see_dark" $lang }}</a>
{{ else }}
<a href="/light">{{ translate "see_light" $lang }}</a>
{{ end }}
<br />
Copyright © {{ .Year }} {{ .Profile.Name }}. {{ translate "all_rights_reserved" $lang }}
<br />
<div class="noprint">
{{ if eq .Theme "light" }}
<a href="/dark">{{ translate "see_dark" $lang }}</a>
{{ else }}
<a href="/light">{{ translate "see_light" $lang }}</a>
{{ end }}
<br />
Copyright © {{ .Year }} {{ .Profile.Name }}. {{ translate "all_rights_reserved" $lang }}
<br />
</div>
{{ translate "powered_by" $lang | html }}
</div>
</footer>