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) { @media screen and (min-width: 768px) {
.has-text-right-in-desktop { .has-text-right-in-desktop {
text-align: right; } } 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) { @media screen and (min-width: 768px) {
.has-text-right-in-desktop { .has-text-right-in-desktop {
text-align: right; } } 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_dark": "See Dark Theme",
"see_light": "See Light Theme", "see_light": "See Light Theme",
"all_rights_reserved": "All Rights Reserved.", "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>", "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_dark": "Tumma teema",
"see_light": "Vaalea teema", "see_light": "Vaalea teema",
"all_rights_reserved": "Kaikki oikeudet pidätetään.", "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>", "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" }} {{ define "githubCorner" }}
<div class="noprint">
<a href="https://github.com/0ranki/go-resume" class="github-corner" aria-label="View source on GitHub"> <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=" <svg width="80" height="80" viewBox="0 0 250 250" style="
fill: #000000; fill: #000000;
@ -17,4 +18,5 @@
fill="currentColor" class="octo-body"></path> fill="currentColor" class="octo-body"></path>
</svg> </svg>
</a> </a>
</div>
{{ end }} {{ end }}

34
templates/index.html
View File

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