Print button, printing layout improvements. Summary is full width.
This commit is contained in:
parent
a286b61c58
commit
ee283edfd9
|
@ -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; } }
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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; } }
|
||||
|
|
|
@ -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>",
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 }}
|
|
@ -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,6 +69,14 @@
|
|||
{{ 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>
|
||||
|
||||
|
@ -71,14 +84,17 @@
|
|||
|
||||
<section class="section">
|
||||
<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 }}
|
||||
{{ 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">
|
||||
|
||||
|
||||
{{ 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,6 +248,7 @@
|
|||
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<div class="noprint">
|
||||
{{ if eq .Theme "light" }}
|
||||
<a href="/dark">{{ translate "see_dark" $lang }}</a>
|
||||
{{ else }}
|
||||
|
@ -240,6 +257,7 @@
|
|||
<br />
|
||||
Copyright © {{ .Year }} {{ .Profile.Name }}. {{ translate "all_rights_reserved" $lang }}
|
||||
<br />
|
||||
</div>
|
||||
{{ translate "powered_by" $lang | html }}
|
||||
</div>
|
||||
</footer>
|
||||
|
|
Loading…
Reference in New Issue