didier/cineflex
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: working copy, caching ASP, notworking orders though

Browse source
This commit is contained in:
Didier Slof 2023-02-03 09:05:29 +01:00
parent dc5d204cfc
commit 390ad23e03
Signed by: didier
GPG key ID: 01E71F18AA4398E5
32 changed files with 246 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

32
public/css/main/jumbotron.css Normal file
View file

@ -0,0 +1,32 @@
.jumbotron {
position: relative;
margin: 0;
width: 100%;
height: 30vh;
}
.jumbotron img.jumbotron-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(1px) brightness(0.5);
}
.jumbotron .container {
position: relative;
z-index: 1;
display: grid;
place-items: center;
height: 100%;
}
.jumbotron .container h1 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 0;
color: var(--primary-color-text);
}

84
public/css/main/main.css Normal file
View file

@ -0,0 +1,84 @@
header {
background: var(--second-bg);
display: grid;
grid-template-columns: 1.5fr 0.5fr;
height: 7vh;
align-items: center;
}
header span {
font-size: 1.5rem;
font-weight: bold;
margin: 0.5rem 1rem;
}
header div {
text-align: right;
display: inline;
}
header div a {
padding: 1.5rem;
}
header div a:hover {
font-size: 1.2rem;
}
main {
margin: 0 auto;
padding: 1rem;
max-width: 800px;
}
/* #movies needs to be a grid with movie poster and show details on hover */
#movies {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 1rem;
}
#movies a {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
}
#movies a img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
#movies a:hover img {
transform: scale(1.1);
}
#movies a .details {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
opacity: 0;
padding: 1rem;
max-width: calc(100% - 2rem);
transition: opacity 0.5s;
}
#movies a .details span {
overflow: hidden;
text-overflow: ellipsis;
}
#movies a:hover .details {
opacity: 1;
}

1
public/css/main/movies.css Normal file
View file

@ -0,0 +1 @@
@import "../manage/movies.css";

59
public/css/main/order.css Normal file
View file

@ -0,0 +1,59 @@
body {
/* center with spacing on the left and right*/
margin: 0 auto;
width: 100%;
padding: 0 20px 3rem;
display: grid;
place-content: center;
}
#seat-chooser {
border: 1px solid black;
padding: 2rem;
}
#summary {
background-color: var(--second-bg);
border-radius: 5px;
padding: 1rem;
margin: 1rem 0;
}
#summary-dyn .seat {
background-color: var(--darkest-bg);
color: var(--primary-color-text);
border-radius: 5px;
padding: 0.5rem;
margin: 0.5rem;
}
#summary-dyn .seat select.ticket-select {
background-color: var(--primary-color);
color: var(--primary-color-text);
border: 0;
border-radius: 5px;
padding: 0.5rem;
margin: 0.5rem;
}
#summary-dyn .seat .seat-span {
background-color: var(--primary-color);
color: var(--primary-color-text);
border-radius: 5px;
padding: 0.5rem;
margin: 0.5rem;
}
#summary-dyn .seat .price {
background-color: var(--secondary-color);
color: var(--darkest-bg);
border-radius: 5px;
padding: 0.5rem;
margin: 0.5rem;
float: right;
}
#order-button {
margin-bottom: 10rem;
}