diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1fc24fd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.env
+db_data/
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 0000000..dfea154
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,19 @@
+version: '3.1'
+
+services:
+ db:
+ image: mariadb
+ restart: always
+ environment:
+ MARIADB_ROOT_PASSWORD: 39In1bx7
+ volumes:
+ - ./db_data:/var/lib/mysql
+
+ phpmyadmin:
+ image: phpmyadmin
+ restart: always
+ ports:
+ - 8080:80
+ environment:
+ - PMA_ARBITRARY=1
+
diff --git a/frontend/css/_general.css b/frontend/css/_general.css
index b27ebf0..2c69a75 100644
--- a/frontend/css/_general.css
+++ b/frontend/css/_general.css
@@ -5,7 +5,11 @@
}
body {
- font-family: OpenSans;
+ font-family: OpenSans Roboto sans-serif;
+}
+
+a {
+ text-decoration: none;
}
.flex {
diff --git a/frontend/css/home.css b/frontend/css/home.css
index c14229e..5611d11 100644
--- a/frontend/css/home.css
+++ b/frontend/css/home.css
@@ -9,4 +9,7 @@
}
.card {
width: 15rem;
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+ padding: .5rem;
+ cursor: pointer;
}
diff --git a/frontend/css/modal.css b/frontend/css/modal.css
index 227154f..938478f 100644
--- a/frontend/css/modal.css
+++ b/frontend/css/modal.css
@@ -9,6 +9,9 @@
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+ animation-name: fadein;
+ animation-duration: 0.4s;
}
/* Modal Content/Box */
@@ -17,21 +20,58 @@
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
+ border-radius: 15px;
width: 80%; /* Could be more or less, depending on screen size */
position: relative;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
- animation-name: animatetop;
- animation-duration: 0.4s
+ animation-name: fadein;
+ animation-duration: 0.4s;
+}
+
+.md-close {
+ position: relative;
+ left: 95%;
+ cursor: pointer;
}
.md-active {
display: block;
}
-/* Add Animation */
-@keyframes animatetop {
- from {top: -300px; opacity: 0}
- to {top: 0; opacity: 1}
+
+.md-active-mobile {
+ display: block;
}
+
+@media only screen and (min-width: 600px) {
+ .md-active {
+ display: none;
+ }
+}
+
+.modal-content h2 {
+ margin-bottom: 2rem;
+}
+.modal-content a {
+ text-decoration: none;
+ padding: 1rem 0rem;
+ width: 100%;
+ text-align: center;
+}
+
+.modal-content a:hover {
+ background-color: #888;
+}
+
+/* Add Animation */
+@keyframes fadein {
+ from { opacity: 0}
+ to {opacity: 1}
+}
+
+@keyframes fadeout {
+ from { opacity: 1}
+ to {opacity: 0}
+}
\ No newline at end of file
diff --git a/frontend/css/nav.css b/frontend/css/nav.css
index 9b315fd..102805a 100644
--- a/frontend/css/nav.css
+++ b/frontend/css/nav.css
@@ -23,3 +23,25 @@ a {
width: 3rem;
}
+@media only screen and (min-width: 600px) {
+ .nav-user-dropdown {
+ position: absolute;
+ right: .5rem;
+ top: 4rem;
+ background: white;
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+ height: 5rem;
+ width: 8rem;
+ display: flex !important;
+ flex-direction: column;
+ gap: .5rem;
+ visibility: hidden;
+ }
+}
+.nav-user-dropdown {
+ display: none;
+}
+
+.visible {
+ visibility: visible;
+}
diff --git a/frontend/index.php b/frontend/index.php
index 19125dd..f7a5a15 100644
--- a/frontend/index.php
+++ b/frontend/index.php
@@ -31,9 +31,9 @@
-
-
-
+
+
+
@@ -109,8 +114,10 @@
diff --git a/frontend/js/modal.js b/frontend/js/modal.js
index eae89cd..c39b15b 100644
--- a/frontend/js/modal.js
+++ b/frontend/js/modal.js
@@ -2,8 +2,7 @@
const close = qSA(".md-close")
close.forEach(one => {
one.addEventListener("click", (el) => {
- const active = qS(".md-active")
- active.classList.remove("md-active")
+ qS(".md-active").classList.remove("md-active")
})
})
diff --git a/frontend/js/nav.js b/frontend/js/nav.js
index b420d56..691c0a7 100644
--- a/frontend/js/nav.js
+++ b/frontend/js/nav.js
@@ -15,7 +15,10 @@ function show_modal(selector, modal_selector = null) {
}
show_modal(".nav-add", "#md-add-tree")
-show_modal(".nav-user", "#md-user-tree")
show_modal("#nav-login", "#md-login")
show_modal("#nav-signup", "#md-signup")
+show_modal(".nav-user", "#md-user-tree")
+qS(".nav-user").addEventListener("click", () => {
+ qS(".nav-user-dropdown").classList.toggle("visible")
+})
\ No newline at end of file
diff --git a/frontend/pages/home/home.php b/frontend/pages/home/home.php
index d85c9c9..acb8d50 100644
--- a/frontend/pages/home/home.php
+++ b/frontend/pages/home/home.php
@@ -2,12 +2,19 @@
-
-
+
+
Beer Name
12 Degree
+
Test Testovic
+