forked from fr/deguapp
update
This commit is contained in:
parent
1bc1f58b8f
commit
e8fe008117
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
.env
|
||||
db_data/
|
||||
19
docker-compose.yaml
Normal file
19
docker-compose.yaml
Normal file
@ -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
|
||||
|
||||
@ -5,7 +5,11 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: OpenSans;
|
||||
font-family: OpenSans Roboto sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
||||
@ -9,4 +9,7 @@
|
||||
}
|
||||
.card {
|
||||
width: 15rem;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -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}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -31,9 +31,9 @@
|
||||
<link rel="stylesheet" href="/css/home.css">
|
||||
<link rel="stylesheet" href="/css/md-add.css">
|
||||
<link rel="stylesheet" href="/css/modal.css">
|
||||
<script defer src="/js/general.js"></script>
|
||||
<script defer src="/js/modal.js"></script>
|
||||
<script defer src="/js/nav.js"></script>
|
||||
<script src="/js/general.js"></script>
|
||||
<script src="/js/modal.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="f-row nav-wrapper">
|
||||
@ -66,6 +66,11 @@
|
||||
<img src="/img/icons/user.svg" alt="user icon">
|
||||
<a href="#">Test Testovic</a>
|
||||
</div>
|
||||
<div class="nav-user-dropdown">
|
||||
<a href="#">Můj účet</a>
|
||||
<a href="#">Nastavení</a>
|
||||
<a href="#">Odhlásit se</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</header>
|
||||
@ -109,8 +114,10 @@
|
||||
<div class="modal-content">
|
||||
<span class="md-close">×</span>
|
||||
<div class="f-col f-center">
|
||||
<h2>Hello User!<h2>
|
||||
<a href="/logout">Logout</a>
|
||||
<h2>Ahoj Pepo!</h2>
|
||||
<a href="/my-account">Můj účet</a>
|
||||
<a href="/settings">Nastavení</a>
|
||||
<a href="/logout">Odhlásit se</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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")
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@ -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")
|
||||
})
|
||||
@ -2,12 +2,19 @@
|
||||
<?php
|
||||
for ($i=0; $i < 8; $i++) {
|
||||
?>
|
||||
<div class="card f-col">
|
||||
<img width="200px" src="https://live.staticflickr.com/65535/49818361653_351771faae_h.jpg" alt="beer image">
|
||||
<div class="card card-beer f-col">
|
||||
<img width="200px" id="<?= $i ?>" src="https://live.staticflickr.com/65535/49818361653_351771faae_h.jpg" alt="beer image">
|
||||
<h2>Beer Name</h2>
|
||||
<p>12 Degree</p>
|
||||
</div>
|
||||
<?php
|
||||
} ?>
|
||||
|
||||
<script>
|
||||
qSA(".card-beer").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
window.location.href = "/beer/" + el.querySelector("img").id
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user