kekskurse/kuvia2
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Wiki Activity

#6 Responsive Page
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Kekskurse 2022-01-17 10:36:47 +01:00
parent 75a336675d
commit c106da7c2a
Signed by: kekskurse
GPG key ID: 728ACCB59341E7E4
1 changed files with 57 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
templates/user_profil.tmpl
View file

@ -1,9 +1,51 @@
{{template "top" .}} {{template "top" .}}
<style> <style>
@media all and (min-width: 900px){
.row { .row {
padding-top: calc(var(--bs-gutter-x) * .5); padding-top: calc(var(--bs-gutter-x) * .5);
padding-bottom: calc(var(--bs-gutter-x) * .5); padding-bottom: calc(var(--bs-gutter-x) * .5);
} }
.col-4 {
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
}
}
@media all and (max-width: 900px){
.row {
padding-top: calc(var(--bs-gutter-x) * .1);
padding-bottom: calc(var(--bs-gutter-x) * .1);
}
.col-4 {
padding-right: calc(var(--bs-gutter-x) * .1);
padding-left: calc(var(--bs-gutter-x) * .1);
}
.centered-bottom{
display: none;
}
}
.imageContainer {
position: relative;
text-align: center;
color: white;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
color: #ffffff;
}
.centered-bottom {
position: absolute;
bottom: 8px;
left: 50%;
color: #ffffff;
transform: translate(-50%, -50%);
}
</style> </style>
<div class="container" style="margin-top: 100px;"> <div class="container" style="margin-top: 100px;">
<div class="row"> <div class="row">
@ -16,7 +58,7 @@
{{else}} {{else}}
{{ .user.Name }} {{ .user.Name }}
{{end}}</h1> {{end}}</h1>
<p class="d-sm-none d-md-block">{{ if .user.AboutMe }}{{ .user.AboutMe }}{{ end }}</p> <p class="d-none d-sm-none d-md-block">{{ if .user.AboutMe }}{{ .user.AboutMe }}{{ end }}</p>
<div style="padding-top: 30px;" class="d-none d-md-block"> <div style="padding-top: 30px;" class="d-none d-md-block">
{{ if .user.Webpage }}<i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a> {{ end }} {{ if .user.Webpage }}<i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a> {{ end }}
{{ if .user.Location}}<i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }} {{ if .user.Location}}<i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
@ -26,7 +68,7 @@
<div class="row d-block d-sm-block d-md-none" > <div class="row d-block d-sm-block d-md-none" >
<div class="col-12"> <div class="col-12">
{{ if .user.AboutMe }} <p>{{ .user.AboutMe }}</p>{{ end }} {{ if .user.AboutMe }} <p>{{ .user.AboutMe }}</p>{{ end }}
<div style="padding-top: 30px;"> <div style="padding-top: 0px;">
{{ if .user.Webpage }}<br/><i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a>{{ end }} {{ if .user.Webpage }}<br/><i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a>{{ end }}
{{ if .user.Location}}<br/><i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }} {{ if .user.Location}}<br/><i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
</div> </div>
@ -36,10 +78,16 @@
{{ range .list }} {{ range .list }}
<div class="row"> <div class="row">
{{ range . }} {{ range . }}
<div class="col-md-4"> <div class="col-4">
<div class="imageContainer">
<a href="/u/{{ $.user.Username }}/{{ .Id }}"> <a href="/u/{{ $.user.Username }}/{{ .Id }}">
<img src="/image?path={{ .MainImage }}" style="max-width: 100%"> <img src="/image?path={{ .MainImage }}" style="max-width: 100%" />
<div class="top-right"><i class="far fa-images"></i></div>
<!--<div class="centered-bottom">{{ .Name }}</div>!-->
</a> </a>
</div>
</div> </div>
{{ end }} {{ end }}
</div> </div>