diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 3d1973fac582203a1fbfa9cab0937ff213a45c51..08273bc1bba5a74c518361f71f7d88bb53774811 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -183,6 +183,7 @@ main .badgesBlock{
}
footer {
+ z-index: 99;
bottom: 0%;
left: 0%;
position: fixed;
diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css
index 6c7bcdb486f6922819d951c5ba903c541810ff5c..bed70992d4d273e52aae558c84c075d7c904714d 100644
--- a/src/main/resources/static/css/templatingstyle.css
+++ b/src/main/resources/static/css/templatingstyle.css
@@ -1,31 +1,3 @@
-* {
- margin:0;
- padding:0;
-}
-body {
- background: linear-gradient(135deg, #9f74be, #3e126b);
- height: 100svh;
-}
-
-main {
- background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
- border-radius: 1vw;
- margin-inline: 5%;
- margin-block: 5%;
- width: auto;
- padding-block: 2svh;
- padding-inline: 1vw;
- box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
- @media only screen and (max-device-width: 500px) {
- min-height: 90svh;
- }
-
- @media only screen and (min-device-width: 1000px) {
- margin-block: 2.5%
- }
-}
-
-
/* Header */
.headerBar {
/*border-bottom: 2px rgb(230, 230, 230) solid;*/
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index 0f19b40b43be3a56afb4bf657c3941802c3992b7..d59daa0689371b0adb2a204035b6a42d89dadab3 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -1,8 +1,47 @@
/* AUTHOR: Gabriel Copat*/
+
+/*FONTS, TYPOGRAPHY & BACKGROUNDS*/
+* {
+ margin: 0;
+ padding: 0;
+
+ & h1, & h2 {
+ letter-spacing: 0.25vw;
+ line-height: 1.3;
+ text-align: center;
+ color: white;
+ text-justify: inter-word;
+ }
+}
+@media only screen and (max-device-width: 500px) {
+ /*ADJUSTING FOR SMALLER SCREENS*/
+ * {
+ & h1, & h2 { text-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1svh;}
+ & p { line-height: 1.1; color: white;}
+ }
+}
+
+body {
+ background: linear-gradient(135deg, #9f74be, #3e126b);
+ height: 100svh;
+}
+main {
+ background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
+ border-radius: 1vw;
+ margin-inline: 5%;
+ /*margin-block: 5%;*/
+ width: auto;
+ padding-block: 2svh;
+ margin-top: 6em;
+ padding-inline: 1vw;
+ box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+}
+
+
.userInfo {
display: flex;
flex-direction: column;
- padding: min(2vw, 4em);
+ /*padding: min(2vw, 4em);*/
text-align: center;
& #userPicture {
@@ -27,22 +66,15 @@
-ms-scrollbar-darkshadow-color: transparent;
}
#badgesBar {
- /* border-radius: 1vw; */
display: grid;
grid-template-areas:
"header"
"badges";
overflow-x: scroll;
overflow-y: hidden;
- scrollbar-width: none;
- scrollbar-color: transparent transparent;
color: white;
padding-bottom: 2%;
- z-index: 99999;
- /* margin-right: 10px; */
- /*background: linear-gradient(to bottom, transparent, darkgoldenrod 200%);*/
- @media only screen and (
- min-device-width: 501px) {
+ @media only screen and (min-device-width: 501px) {
height: 24vw;
}
& h2 {
@@ -54,7 +86,9 @@
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px;
font-size: 4vw;
- width: 25%;
+ width: 7em;
+ height: 1.2em;
+
}
& #allBadgesContainer {
margin-top: 3svh;
@@ -62,8 +96,7 @@
height: 10svh;
align-content: center;
display: flex;
- @media only screen and (
- min-device-width: 501px) {
+ @media only screen and (min-device-width: 501px) {
height: 20vw;
margin-top: 6vw;
}
@@ -71,9 +104,8 @@
& .badgeImg {
margin-inline: 3vw;
height: 8svh;
- z-index: 999;
- @media only screen and (
- min-device-width: 501px) {
+ z-index: 50;
+ @media only screen and (min-device-width: 501px) {
height: 15vw;
}
transition: 0.3s ease-out 100ms;
@@ -131,15 +163,13 @@
width: 100%;
/*padding-top: 1svh;*/
- @media only screen and (
- min-device-width: 501px) {
+ @media only screen and (min-device-width: 501px) {
height: 28vw;
margin-bottom: 0;
padding-bottom: 5svh;
}
& h1 {
font-size: 3em;
- color: white;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px;
border-top: #36454F solid 2px;
@@ -153,14 +183,12 @@
& .dragonImg {
height: 10svh;
width: 16svh;
- @media only screen and (
- min-device-width: 501px) {
+ @media only screen and (min-device-width: 501px) {
height: 22vw;
width: 30vw;
}
}
-
& .dragonFill {
position: absolute;
overflow: hidden;
@@ -171,3 +199,32 @@
overflow: hidden;
}
}
+header {
+ z-index: 99;
+ top: 0.5svh;
+ left: 0;
+ position: fixed;
+ width: 100vw;
+ justify-content: center;
+ display: flex;
+}
+header .footerBar {
+ display: flex;
+ list-style: none;
+ border-radius: 1vw;
+ overflow: hidden;
+ justify-content: space-evenly;
+ background-color: rgba(0, 0, 0, 0.7);
+}
+header .footerButton {
+ padding: 1vw;
+ text-align: center;
+ /*flex: 1 1;*/
+ color:crimson;
+ background-color: rgba(31, 31, 31, 0.7);
+ font-size: 2.5em;
+ width: 15vw;
+}
+header .footerButton:hover {
+ background-color: #36454F;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/rewards/userProfile.html b/src/main/resources/templates/rewards/userProfile.html
index f75061bc436ffe914cff805122fe7e2c0651e2b9..bd502cfc61f804533f7195de53ef812187d3f0ec 100644
--- a/src/main/resources/templates/rewards/userProfile.html
+++ b/src/main/resources/templates/rewards/userProfile.html
@@ -4,11 +4,19 @@
<meta charset="UTF-8">
<title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
<link rel="stylesheet" th:href="@{/css/userProfile.css}">
- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+<!-- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
</head>
<body>
-<header></header>
+<header>
+ <ul class="footerBar">
+ <li class="footerButton"><b>Home</b></li>
+ <li class="footerButton"><b>About</b></li>
+ <li class="footerButton"><b>Map</b></li>
+ <li class="footerButton"><b>Facilities</b></li>
+ <li class="footerButton"><b>Search</b></li>
+ </ul>
+</header>
<main>
<!--PICTURE - DATA - BADGES -->
@@ -54,7 +62,9 @@
</main>
-<footer></footer>
+<footer>
+
+</footer>