From 021dea9dfe21adf337a81912f4f59301bade1467 Mon Sep 17 00:00:00 2001 From: Dm1tr1y147 Date: Mon, 30 Mar 2020 20:58:42 +0500 Subject: [PATCH] Added gallery pagination, finished footer, some little improvments --- .env | 1 + dmitriy.ovpn | 110 ++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 2 +- src/app.scss | 2 +- src/components/Footer.js | 13 +++- src/components/Gallery.js | 36 +++++++++-- src/components/GalleryItem.js | 4 +- src/components/GalleryItem.scss | 4 +- src/components/footer.scss | 33 +++++++++- src/components/gallery.scss | 56 ++++++++++++++++ src/components/galleryView.scss | 4 +- src/components/home.scss | 2 +- src/components/instagram.svg | 1 + src/components/lastfm.svg | 53 +++++++++++++++ src/components/navbar.scss | 10 +-- src/components/telegram.svg | 2 +- src/components/viewBox.scss | 6 ++ src/components/vk.svg | 1 + src/index.scss | 13 +++- yarn.lock | 2 +- 21 files changed, 326 insertions(+), 30 deletions(-) create mode 100644 .env create mode 100644 dmitriy.ovpn create mode 100644 src/components/instagram.svg create mode 100644 src/components/lastfm.svg create mode 100644 src/components/vk.svg diff --git a/.env b/.env new file mode 100644 index 0000000..cea9a39 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +REACT_APP_API_URL=http://localhost:8000 \ No newline at end of file diff --git a/dmitriy.ovpn b/dmitriy.ovpn new file mode 100644 index 0000000..22f04e4 --- /dev/null +++ b/dmitriy.ovpn @@ -0,0 +1,110 @@ +client +dev tun +proto udp +sndbuf 0 +rcvbuf 0 +remote 45.9.73.5 1407 +resolv-retry infinite +nobind +persist-key +persist-tun +remote-cert-tls server +auth SHA512 +cipher AES-256-CBC +setenv opt block-outside-dns +key-direction 1 +verb 3 + +-----BEGIN CERTIFICATE----- +MIIDQjCCAiqgAwIBAgIUTnm+AQYOQsbZx6HLtrSxeTQVgJwwDQYJKoZIhvcNAQEL +BQAwEzERMA8GA1UEAwwIQ2hhbmdlTWUwHhcNMTkwNzEyMDU0NDM2WhcNMjkwNzA5 +MDU0NDM2WjATMREwDwYDVQQDDAhDaGFuZ2VNZTCCASIwDQYJKoZIhvcNAQEBBQAD +ggEPADCCAQoCggEBAMGu1pA/ERmMlDmhAYsTWOVxL22In1/s/xqKVgY6Yo4GzdQv +xml29EK8/Q8ifVFipAli5NM3sgI7qxoFOYzix7CmOW76EXsUkPSD/NFXbh1Alsah +g1B0nk1gJx2oF/n8qC1Y4KQn/Aj+ZlYLGuBUeXHRsna6mBBj73OvjWysKyqY7Bn6 +xZPH31z6cL1XXU9SvX7Os0GOD4AMX/sdS69q0tBOHMiEfe46gtXj0rxl/Pe7k8vL +/EuRR8ydRUYxjHSoYbuMGr1dGNWwH34BFH/bDtJov/dZFrGqEYzufANSm7o+mXlp +j7I/bwQ+owI++zlcD6JiJW6zIxJiVVv+N5Zw3KkCAwEAAaOBjTCBijAdBgNVHQ4E +FgQUUxoBdi/9D7ADf+oYxckDGEaJ6xQwTgYDVR0jBEcwRYAUUxoBdi/9D7ADf+oY +xckDGEaJ6xShF6QVMBMxETAPBgNVBAMMCENoYW5nZU1lghROeb4BBg5CxtnHocu2 +tLF5NBWAnDAMBgNVHRMEBTADAQH/MAsGA1UdDwQEAwIBBjANBgkqhkiG9w0BAQsF +AAOCAQEAJA6V8c/lUkq9tm6qvdEZLEvft3NkGb+E763iOAFI/0YteUEGfmjHXPOX +XrS1T3eD6OqujipJ3dLeoyi5BqqE+Lh08HTfZjrabqP8zL/z+Z1VD/rJK8+XSM06 +Q5bHCPhHB62LOk+dtUIpi/vH6CcPPnxJnFqW4JXIJBuoKrq44sX/4ueLCJHX+dBs +WKj30TMs7XMyGjiWBSS7HCqwvFzaJEnwP68s8WsDMsUBNPS7FL8ROwd1WiXZ0d0G +spIzM31oIyd0qZz2MA2vWLj1w83grvxppSwsyiR+ANJFTH/+LJz4eBtjB2cl2ZQt +IWW9Pmw4fZwQah2+5FPHjvKDql0UfA== +-----END CERTIFICATE----- + + +-----BEGIN CERTIFICATE----- +MIIDTzCCAjegAwIBAgIQTvoE7dpCm6CmagfHDJT7nDANBgkqhkiG9w0BAQsFADAT +MREwDwYDVQQDDAhDaGFuZ2VNZTAeFw0xOTA3MTIwNTQ0MzdaFw0yOTA3MDkwNTQ0 +MzdaMBIxEDAOBgNVBAMMB2RtaXRyaXkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAw +ggEKAoIBAQC2sZshbO58a2st46LPnNI+PixW47dBkzdNMe/4ItGizd9UTILZOR7a +HPh98V8XdgDby26x6eWXV9ynALqqHg0BlYHrRq4C9oby0OnWGb2S0yEvggxy4WZB +uqflDKcm7ZJYbY/8mz2NCKm755M1zf3cFp9Hd5wTlw3zQ059LJuJX+F/Teyv220s +lNHIFGqYPoL4SqB+Enu46AVmlqy9te6TPfcB6ipmyyg9pbyN82RfzWcko3jceBve +uKdIo9g+ARUb6Xp/sIbWZaIHZSLQQ620WCoEifvkE5IuFSyjItpUsvcM0/wFchyd +EWxGe/NPO0QUfGGQceovhGOyRuGAu48NAgMBAAGjgZ8wgZwwCQYDVR0TBAIwADAd +BgNVHQ4EFgQU3LySrwe8jP7GmQvCrmilFYf+SIowTgYDVR0jBEcwRYAUUxoBdi/9 +D7ADf+oYxckDGEaJ6xShF6QVMBMxETAPBgNVBAMMCENoYW5nZU1lghROeb4BBg5C +xtnHocu2tLF5NBWAnDATBgNVHSUEDDAKBggrBgEFBQcDAjALBgNVHQ8EBAMCB4Aw +DQYJKoZIhvcNAQELBQADggEBAFAezO4lvjVKaZ2KxIbIMqovx/EK/LJJP5vSHIP8 +N2szHfxXQ4CbrYZxIWlC5GU6LHfOk+BDin0Vf4CFfA3eJADdWVgEQI2lY9NCI9Ez +BcjK9QzY0XSyRbaWaXp02N9JrAe6u73q76r1uUMBCbo3ge+xb49gNx0Y0F/3RIph +6LJTbAd2jJIYGvktiMQDAF3T4tU7t7dAetaic7FxSF7UkZstiUrimafwfP9JTjFt +M3vqeQlL76KBl4BuZp/UVEJaoteJyOuB1lKHInmSuD3W9os+/KZYaJKZlLvGNf71 +vC8C5q1BACYTdyUqwzV7YqaxKCz/1aVmusg0HsbtEHrjwsw= +-----END CERTIFICATE----- + + +-----BEGIN PRIVATE KEY----- +MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC2sZshbO58a2st +46LPnNI+PixW47dBkzdNMe/4ItGizd9UTILZOR7aHPh98V8XdgDby26x6eWXV9yn +ALqqHg0BlYHrRq4C9oby0OnWGb2S0yEvggxy4WZBuqflDKcm7ZJYbY/8mz2NCKm7 +55M1zf3cFp9Hd5wTlw3zQ059LJuJX+F/Teyv220slNHIFGqYPoL4SqB+Enu46AVm +lqy9te6TPfcB6ipmyyg9pbyN82RfzWcko3jceBveuKdIo9g+ARUb6Xp/sIbWZaIH +ZSLQQ620WCoEifvkE5IuFSyjItpUsvcM0/wFchydEWxGe/NPO0QUfGGQceovhGOy +RuGAu48NAgMBAAECggEAFIrJ36tI8ZJ+fa1v3BpNBZSmFasLKwNrn3FzAxqfKcgu +SWNE/znN/0ZspnSidZfeJtir/LNJDohhliGd24z/d2MhNZw/6rNfnyPgdyNzznOQ +8q+TyMMRZWiggj+298iUwP6oxwWJmTcVJry2L8GWvs2IYVfQo99DQUwbIjYG0x5U +9DT009+WdmMZOaYhLczjy37P8WuhEkJoBbrzt9iSXDz5W8yJDaitIAnpYkcXm0oK +RfJu2kP3b2swoY7WCQNVZHshQKqpnrOa6D+9wF8QA5pUe0CMwK4eEvaxl+AowIu4 +RG8XCK6QLqX3ga7iFgpPvxcR94AHSc02hWqeDZjXHQKBgQDux3drJhqapRxWEZoJ +OPsbINDTAuOcEy+aIzb8fWcude66fc6UjhI1Vc0Pnt08Hbg5c17U7q+stFPVSDSW +nXaUCwA45D0+vyv88TAiHOjD9eEwC6832SDiXjm/kPhy26Rj+4hGZ5/Ylr1wzSin +2l7RhL4i45yoPfjc9XGFejF65wKBgQDD3qVQEvZYYj6Vve9SVQM4TceSEUZ61dqG +JbTj85dih/weBahJuWVw6wGneSCVVDHRziW6hTiwoyndVfLU04bXpRgqKipr7gzg +4SvL7StOQkHAbBYi8d7BJPp/xq8W9Jx1rAzz2A9PEJI7MxE6H7MCi52NaUN+0GuW +xAUTew+76wKBgCsIUbJCzLqgFQpB49PTrBWIhXnx5FlFb+fEfu1kIEtUP7DmaWuG +ayuniexNwitKY+AetbGETq6+VPl0KN4YBL3Leb/HCm6bf273fKg5M43Vaz8AbBSR +kgaZ2qh2lQAGK4tFUpr1o+4hxIRmxPPzO/Fgje+1u47qlEYmCc53ZiFzAoGAWOL4 +KF+Cldd3yWKZccaMoIeDksDuOB5Gfewsq+nGgHtvqXwtw88zvsuXQ5YPeFTuCuU/ +b+a3NEnHXN99RKH9pm0Qi0n5WGN+SqtEwdWOeoRM7HLglNkomoQafdP/by5wtmHu +utYJFHtTsTPalIMALJ6JUDw92hXhTVkFaLLHECMCgYB6gMxiFNwMuz0qZ21Dexo4 +VcYNJmB0+fjEjjhFIg6JZRGNbL93Vy2/OoSRExToFQrAzFmL8itp5wPkYnVW8zZ/ +aDvn385WtlsmTtaVPrynJg8W2ltytDKRg5lp2JiPN1WGwLO0SPeUL+u6wgLiySs0 +Euizbi6jFIK3Gi+EhmpCDg== +-----END PRIVATE KEY----- + + +-----BEGIN OpenVPN Static key V1----- +bcd89a0eed275b70415deef12d11fad0 +02d94fa400ac20b85f2e37fe7107eea0 +b3b9fc60e2dc9736238ed48b5c582b7c +db597e9e6ac45cab2ffc5a8aad272e3a +70c11279e8a530efcb8dfb1c5664330a +d955015eecea5ad16b257e4c42a8a5ce +f41960fb918b6b5d5adfbe10398c9f4d +f87f4ae187d03c199766ce770310c802 +4b87129d63f9cb3c05eefaa5be634bcb +a0a75fa413ef8c35c5499254e4b01a96 +511eaeba803b1b525eae77de073328c6 +ac5f52a70a65dbaf2e49a257216cd667 +b06c41dc351ab3fe22a70b94583311e4 +fcc0d81ff469f6d65f861c6b5ea45a0f +5ed7bedbfb366dd34820a01250c7a8ce +7f28f9561346d1ad5c6d50d4c8922733 +-----END OpenVPN Static key V1----- + diff --git a/package.json b/package.json index 7f289fe..a5cee86 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "cors": "^2.8.5", + "dotenv": "^8.2.0", "node-sass": "^4.13.1", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/src/App.js b/src/App.js index b48ee1a..ecaceb4 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ import { Home, Gallery, Footer, -} from './components' +} from './components'; import './app.scss'; const App = () => { diff --git a/src/app.scss b/src/app.scss index b9240ad..f16ba5d 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,6 +1,6 @@ @import url('https://fonts.googleapis.com/css?family=Assistant|Kaushan+Script&display=swap'); -a, p, span { +a, p, span, button { font-family: 'Assistant', sans-serif; font-size: 3vh; font-weight: 300; diff --git a/src/components/Footer.js b/src/components/Footer.js index 89b8579..7ec56c4 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,11 +1,20 @@ import React from 'react' import './footer.scss' -import { ReactComponent as Telegram} from './telegram.svg' +import { ReactComponent as Telegram } from './telegram.svg' +import { ReactComponent as Instagram } from './instagram.svg' +import { ReactComponent as Vk } from './vk.svg' +import { ReactComponent as LastFM } from './lastfm.svg' const Footer = () => { return ( ); } diff --git a/src/components/Gallery.js b/src/components/Gallery.js index f2659f2..470e133 100644 --- a/src/components/Gallery.js +++ b/src/components/Gallery.js @@ -15,20 +15,44 @@ const GalleryList = (json) => { const Gallery = props => { const [galleryData, setGalleryData] = useState([]); + const [pagesAmount, setPagesAmount] = useState(1); + const [currentPage, setCurrentPage] = useState(1); + const [hasError, setHasError] = useState(false); const size = (props.type === "galleryList") ? 4 : 9; useEffect( () => { - async function fetchData() { - const res = await fetch(`http://localhost:8000/?size=${size}`); - const json = await res.json(); - setGalleryData(json.list); + const fetchData = async () => { + try { + const res = await fetch(`${process.env.REACT_APP_API_URL}/?size=${size}&page=${currentPage}`); + + if (!res.ok) { + throw Error(res.statusText); + } + const json = await res.json(); + + setPagesAmount(json.pagesAmount); + setGalleryData(g => [...g, ...json.list] ); + + } catch (error) { + setHasError(true); + console.log(error); + } } fetchData(); - }, [size]); + }, [size, currentPage]); return (
- {GalleryList(galleryData)} + { GalleryList(galleryData) } + { ( props.type === "galleryGrid" && + currentPage < pagesAmount || hasError ) && + }
); } diff --git a/src/components/GalleryItem.js b/src/components/GalleryItem.js index 83a65a7..26445fd 100644 --- a/src/components/GalleryItem.js +++ b/src/components/GalleryItem.js @@ -7,8 +7,8 @@ const GalleryItem = props => { const src = 'http://localhost:8000/' + props.src; return ( -
setShowViewbox(true) }> - My shots +
+ My shots setShowViewbox(true) } /> {showViewBox && }
diff --git a/src/components/GalleryItem.scss b/src/components/GalleryItem.scss index 55862e4..2c0051f 100644 --- a/src/components/GalleryItem.scss +++ b/src/components/GalleryItem.scss @@ -1,14 +1,12 @@ .galleryItem { - margin-bottom: 3vh; & > img { z-index: 5; max-width: 100%; - max-height: 75vh; cursor: pointer; &:hover { - filter: contrast(75%) brightness(120%); + filter: var(--image-hover-color); } } } \ No newline at end of file diff --git a/src/components/footer.scss b/src/components/footer.scss index 25ec6e2..88208ef 100644 --- a/src/components/footer.scss +++ b/src/components/footer.scss @@ -2,9 +2,36 @@ footer { width: 100vw; min-height: 25vh; display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--background-second-color); + box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24); + padding: 10vmin; - .telegram { - fill: #2a9fd9; - height: 10vh; + .social { + svg { + height: 6vh; + width: 6vh; + margin: 0 2vh; + } + } + + p { + line-height: 6vh; + } +} +@media (orientation: portrait) { + footer { + flex-direction: column; + + .social { + display: flex; + justify-content: space-between; + width: 100%; + + svg { + margin: 0; + } + } } } \ No newline at end of file diff --git a/src/components/gallery.scss b/src/components/gallery.scss index 32a6061..9f88cc7 100644 --- a/src/components/gallery.scss +++ b/src/components/gallery.scss @@ -3,15 +3,71 @@ grid-template-columns: repeat(3, 1fr); grid-gap: 3vh; padding: 10vh 10vw; + align-items: end; } + .galleryList { width: 100%; .galleryItem { max-width: 50vw; + margin-bottom: 3vh; &:nth-child(2n) { float: right; } + + & > img { + max-height: 75vh; + } + } +} + +button { + background-color: var(--background-color); + color: var(--text-color); + border: none; + width: 10vw; + height: 5vh; + box-shadow: var(--box-shadow); + border-radius: 5vh; + margin: 0 auto; + grid-column: span 3; + cursor: pointer; + transition: all 0.2s; + + &:hover { + background-color: var(--background-second-color); + } + + &:active { + background-color: var(--background-touched-color); + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } +} + +@media (orientation: portrait) { + .galleryGrid { + grid-template-columns: 1fr; + + button { + width: 50vw; + grid-column: 1; + } + } + + .galleryList { + .galleryItem { + max-width: none; + width: 100%; + } + } +} + +@media (prefers-color-scheme: dark) { + .galleryGrid { + button { + background-color: var(--background-second-color); + } } } \ No newline at end of file diff --git a/src/components/galleryView.scss b/src/components/galleryView.scss index 1bfd2a9..b0c1df2 100644 --- a/src/components/galleryView.scss +++ b/src/components/galleryView.scss @@ -4,8 +4,8 @@ font-family: 'Kaushan Script', cursive; font-size: 10vh; text-align: center; - padding-top: 10vh; - padding-bottom: 7vh; + margin-top: 10vh; + padding: 7vh 0; color: var(--text-color); } } \ No newline at end of file diff --git a/src/components/home.scss b/src/components/home.scss index 70cfc34..e7acae5 100644 --- a/src/components/home.scss +++ b/src/components/home.scss @@ -9,7 +9,7 @@ header { background-size: cover; background-position: bottom; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + box-shadow: var(--box-shadow); h1 { font-family: 'Kaushan Script', cursive; diff --git a/src/components/instagram.svg b/src/components/instagram.svg new file mode 100644 index 0000000..77bd84a --- /dev/null +++ b/src/components/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/lastfm.svg b/src/components/lastfm.svg new file mode 100644 index 0000000..881340c --- /dev/null +++ b/src/components/lastfm.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/navbar.scss b/src/components/navbar.scss index 41d77fb..3d45d46 100644 --- a/src/components/navbar.scss +++ b/src/components/navbar.scss @@ -3,13 +3,13 @@ nav { top: 0; height: 10vh; display: flex; - padding: 2vh 4vw; + padding: 2vh 4vmax; width: 100vw; - background-color: var(--background-color); + background-color: var(--background-navbar-color); z-index: 100; - &.showShadow { - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + & { + box-shadow: var(--box-shadow); } .logo { @@ -24,7 +24,7 @@ nav { a { line-height: 6vh; - padding: 0 1vw; + padding: 0 1vmax; } .galactikka { background-image: url('./galactikka_bg.jpg'); diff --git a/src/components/telegram.svg b/src/components/telegram.svg index 704be0e..7c31021 100644 --- a/src/components/telegram.svg +++ b/src/components/telegram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/viewBox.scss b/src/components/viewBox.scss index c3a27dc..e18d615 100644 --- a/src/components/viewBox.scss +++ b/src/components/viewBox.scss @@ -4,6 +4,7 @@ bottom: 0; left: 0; right: 0; + width: 100vw; background-color: var(--background-color); cursor: pointer; display: flex; @@ -13,4 +14,9 @@ img { object-fit: contain; } +} +@media (orientation: portrait) { + .viewBox img { + width: 100vw; + } } \ No newline at end of file diff --git a/src/components/vk.svg b/src/components/vk.svg new file mode 100644 index 0000000..74d30c2 --- /dev/null +++ b/src/components/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 4e9be53..bad85d1 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,7 +1,12 @@ :root { color-scheme: light dark; --background-color: #ffffff; - --text-color: #282627; + --background-navbar-color: #ffffff; + --background-second-color: #ebebeb; + --background-touched-color: #dedede; + --text-color: #121212; + --box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + --image-hover-color: contrast(75%) brightness(120%); } * { @@ -36,7 +41,11 @@ code { @media (prefers-color-scheme: dark) { :root { color-scheme: light dark; - --background-color: #1c1c1e; + --background-color: #121212; + --background-second-color: #1f1f1f; + --background-navbar-color: #1f1f1f; + --background-touched-color: #373737; --text-color: #ffffff; + --image-hover-color: contrast(90%) brightness(90%); } } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index c210ca6..745c3f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3617,7 +3617,7 @@ dotenv-expand@5.1.0: resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0" integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA== -dotenv@8.2.0: +dotenv@8.2.0, dotenv@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a" integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==