From c106da7c2a05a4be5e0e68e4f81fefec79ce4179 Mon Sep 17 00:00:00 2001
From: kekskurse <git@kekskurse.de>
Date: Mon, 17 Jan 2022 10:36:47 +0100
Subject: [PATCH] #6 Responsive Page

---
 templates/user_profil.tmpl | 66 ++++++++++++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 9 deletions(-)

diff --git a/templates/user_profil.tmpl b/templates/user_profil.tmpl
index c6cc2ef..294a12b 100644
--- a/templates/user_profil.tmpl
+++ b/templates/user_profil.tmpl
@@ -1,8 +1,50 @@
 {{template "top" .}}
 <style>
-    .row {
-        padding-top: calc(var(--bs-gutter-x) * .5);
-        padding-bottom: calc(var(--bs-gutter-x) * .5);
+
+    @media all and (min-width: 900px){
+        .row {
+            padding-top: 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>
 <div class="container" style="margin-top: 100px;">
@@ -16,7 +58,7 @@
             {{else}}
                 {{ .user.Name }}
             {{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">
             {{ 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 }}
@@ -26,7 +68,7 @@
 <div class="row d-block d-sm-block d-md-none" >
 <div class="col-12">
    {{ 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.Location}}<br/><i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
     </div>
@@ -36,10 +78,16 @@
     {{ range .list }}
     <div class="row">
         {{ range . }}
-        <div class="col-md-4">
-            <a href="/u/{{ $.user.Username }}/{{ .Id }}">
-                <img src="/image?path={{ .MainImage }}" style="max-width: 100%">
-            </a>
+        <div class="col-4">
+            <div class="imageContainer">
+                <a href="/u/{{ $.user.Username }}/{{ .Id }}">
+                    <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>
+
+            </div>
+
         </div>
         {{ end }}
     </div>