novox/photos
3
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Added multiple home layouts
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
jschoubben
2024-05-20 22:43:07 +02:00
parent 6bb2d32f8c
commit b58844bc30
22 changed files with 618 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/home-layouts/home-layout1.js
+20
View File
@@ -0,0 +1,20 @@
import {NavLink} from "react-router-dom";
import {ArrowRightAlt} from "@mui/icons-material";
import "./home-layout1.scss";
export function HomeLayout1({instance}) {
return <div id="homeLayout1">
<div className="cover-photo">
<img alt={instance.coverPhoto?.name} src={instance.coverPhoto?.url}/>
</div>
<div className="instance-details">
<div className="box">
<h1>{instance.title}</h1>
<h2>{instance.subtitle}</h2>
<NavLink to="/portfolio" className="goto-website-link">
<span>ENTER</span><ArrowRightAlt/>
</NavLink>
</div>
</div>
</div>;
}
client/src/public/pages/home-page.scss → client/src/components/home-layouts/home-layout1.scss
+23 -12
View File
@@ -1,4 +1,4 @@
#home {
#homeLayout1 {
height: 100vh;
width: 100vw;
display: grid;
@@ -36,15 +36,17 @@
padding: 60px;
max-width: 620px;
text-align: center;
@media(max-width: 600px) {
padding: 0;
max-width: 90vw;
}
h1 {
text-align: center;
display: inline-block;
font-size: 37px;
line-height: 1em;
margin: 0;
margin-bottom: 22px;
//font-family: proxima-nova;
margin: 0 0 22px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
@@ -65,29 +67,38 @@
letter-spacing: .28em;
line-height: 1.7em;
color: #333;
margin: 0;
margin-bottom: 36px;
margin: 0 0 36px;
}
.goto-website-link {
text-rendering: optimizeLegibility;
white-space: nowrap;
line-height: 1em;
//font-family: proxima-nova;
font-weight: 500;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0;
text-align: center;
padding: 1em calc(1.44em - 0em) 1em 1.44em;
display: inline-block;
padding: 1em 1.44em;
text-decoration: none;
background-color: transparent;
color: #333;
border: 2px solid #333;
display: inline-block;
height: calc(22px + 2em);
transition: background-color 170ms ease-in-out, color 170ms ease-in-out;
//transition: color 170ms ease-in-out, border-color 170ms ease-in-out;
span {
display: inline-block;
vertical-align: top;
line-height: 22px;
font-size: 14px;
font-weight: 500;
}
svg {
margin-left: 5px;
font-size: 22px;
}
&:hover {
background-color: black;
client/src/components/home-layouts/home-layout2.js
+20
View File
@@ -0,0 +1,20 @@
import {NavLink} from "react-router-dom";
import {ArrowRightAlt} from "@mui/icons-material";
import "./home-layout2.scss";
export function HomeLayout2({instance}) {
return <div id="homeLayout2">
<div className="instance-details">
<div className="box">
<h1>{instance.title}</h1>
<h2>{instance.subtitle}</h2>
<NavLink to="/portfolio" className="goto-website-link">
<span>ENTER</span><ArrowRightAlt/>
</NavLink>
</div>
</div>
<div className="cover-photo">
<img alt={instance.coverPhoto?.name} src={instance.coverPhoto?.url}/>
</div>
</div>;
}
client/src/components/home-layouts/home-layout2.scss
+110
View File
@@ -0,0 +1,110 @@
#homeLayout2 {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
@media(max-width: 1200px) {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.cover-photo {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
object-position: 50% 50%;
object-fit: cover;
}
}
.instance-details {
display: flex;
justify-content: center;
flex-direction: column;
.box {
position: static !important;
transform: none;
margin-left: auto;
margin-right: auto;
padding: 60px;
max-width: 620px;
text-align: center;
@media(max-width: 600px) {
padding: 0;
max-width: 90vw;
}
h1 {
text-align: center;
display: inline-block;
font-size: 37px;
line-height: 1em;
margin: 0 0 22px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: .1em;
color: #333;
@media(max-width: 600px) {
font-size: 24px;
}
}
h2 {
//font-family: minion-pro;
font-size: 19px;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
letter-spacing: .28em;
line-height: 1.7em;
color: #333;
margin: 0 0 36px;
}
.goto-website-link {
text-rendering: optimizeLegibility;
white-space: nowrap;
//font-family: proxima-nova;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0;
text-align: center;
padding: 1em 1.44em;
text-decoration: none;
background-color: transparent;
color: #333;
border: 2px solid #333;
display: inline-block;
height: calc(22px + 2em);
transition: background-color 170ms ease-in-out, color 170ms ease-in-out;
span {
display: inline-block;
vertical-align: top;
line-height: 22px;
font-size: 14px;
font-weight: 500;
}
svg {
margin-left: 5px;
font-size: 22px;
}
&:hover {
background-color: black;
color: white;
}
}
}
}
}
client/src/components/home-layouts/home-layout3.js
+20
View File
@@ -0,0 +1,20 @@
import {NavLink} from "react-router-dom";
import {ArrowRightAlt} from "@mui/icons-material";
import "./home-layout3.scss";
export function HomeLayout3({instance}) {
return <div id="homeLayout3">
<div className="cover-photo">
<img alt={instance.coverPhoto?.name} src={instance.coverPhoto?.url}/>
<div className="instance-details">
<div className="box">
<h1>{instance.title}</h1>
<h2>{instance.subtitle}</h2>
<NavLink to="/portfolio" className="goto-website-link">
<span>ENTER</span><ArrowRightAlt/>
</NavLink>
</div>
</div>
</div>
</div>;
}
client/src/components/home-layouts/home-layout3.scss
+110
View File
@@ -0,0 +1,110 @@
#homeLayout3 {
height: 100vh;
width: 100vw;
.cover-photo {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-position: 50% 50%;
object-fit: cover;
}
}
.instance-details {
margin-top: calc(50vh - 125px);
height: 250px;
width: 100vw;
background-color: white;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
.box {
position: static !important;
transform: none;
margin-left: auto;
margin-right: auto;
padding: 60px;
max-width: 620px;
text-align: center;
@media(max-width: 600px) {
padding: 0;
max-width: 90vw;
}
h1 {
text-align: center;
display: inline-block;
font-size: 37px;
line-height: 1em;
margin: 0 0 22px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: .1em;
color: #333;
@media(max-width: 600px) {
font-size: 24px;
}
}
h2 {
//font-family: minion-pro;
font-size: 19px;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
letter-spacing: .28em;
line-height: 1.7em;
color: #333;
margin: 0 0 36px;
}
.goto-website-link {
text-rendering: optimizeLegibility;
white-space: nowrap;
//font-family: proxima-nova;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0;
text-align: center;
padding: 1em 1.44em;
text-decoration: none;
background-color: transparent;
color: #333;
border: 2px solid #333;
display: inline-block;
height: calc(22px + 2em);
transition: background-color 170ms ease-in-out, color 170ms ease-in-out;
span {
display: inline-block;
vertical-align: top;
line-height: 22px;
font-size: 14px;
font-weight: 500;
}
svg {
margin-left: 5px;
font-size: 22px;
}
&:hover {
background-color: black;
color: white;
}
}
}
}
}
client/src/models/instance.js
+1
View File
@@ -7,5 +7,6 @@ export class Instance {
this.title = instance?.title;
this.subtitle = instance?.subtitle;
this.coverPhoto = instance?.coverPhoto ? new Photo(instance.coverPhoto) : null;
this.homeLayout = instance?.homeLayout;
}
}
client/src/public/pages/album.js
+6 -6
View File
@@ -30,7 +30,7 @@ export default function AlbumPage() {
dangerouslySetInnerHTML={{__html: selectedAlbum.description.replace(/\n/g, "<br />")}}>
</div>}
</div>
{selectedAlbum.photos && <div id="photo-list" className="photo-grid-layout">
{selectedAlbum.photos && <div id="photo-list" className="photo-grid-layout photo-grid-layout--no-details">
{selectedAlbum.photos.map((photo, idx) =>
<div className="photo grid-cell" key={photo.photoId}
onClick={() => setSelectedPhotoIndex(idx)}>
@@ -41,11 +41,11 @@ export default function AlbumPage() {
<ZoomOutMapSharp/>
</div>
</div>
<div className="details">
<div className="name">
{photo.name}
</div>
</div>
{/*<div className="details">*/}
{/* <div className="name">*/}
{/* {photo.name}*/}
{/* </div>*/}
{/*</div>*/}
</div>
)}
</div>}
client/src/public/pages/home-page.js
+9 -17
View File
@@ -1,23 +1,15 @@
import {useCurrentInstance} from "../../services/current-instance/use-current-instance";
import "./home-page.scss";
import {NavLink} from "react-router-dom";
import {HomeLayout1} from "../../components/home-layouts/home-layout1";
import {HomeLayout2} from "../../components/home-layouts/home-layout2";
import {HomeLayout3} from "../../components/home-layouts/home-layout3";
export function HomePage() {
const {instance} = useCurrentInstance();
return instance && <div id="home">
<div className="cover-photo">
<img alt={instance.coverPhoto?.name} src={instance.coverPhoto?.url}/>
</div>
<div className="instance-details">
<div className="box">
<h1>{instance.title}</h1>
<h2>{instance.subtitle}</h2>
<NavLink to="/portfolio" className="goto-website-link">
GO TO WEBSITE
</NavLink>
</div>
</div>
</div>;
return instance && instance.homeLayout === 3
? <HomeLayout3 instance={instance}/>
: instance.homeLayout === 2
? <HomeLayout2 instance={instance}/>
: <HomeLayout1 instance={instance}/>
;
}
client/src/public/public.scss
+4
View File
@@ -191,6 +191,10 @@ html:has(#photoViewer) {
column-gap: 30px;
margin-bottom: 4em;
&.photo-grid-layout--no-details {
row-gap: 30px;
}
//@media (max-width: 1920px) {
// grid-template-columns: repeat(4, 1fr);
//}