New repo who dis
This commit is contained in:
Alex Huddleston
commit
21dbefab2d
10 changed files with 1291 additions and 0 deletions
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
/elm-stuff/
|
||||||
|
/downloads/
|
||||||
|
/guidelines/
|
||||||
|
assets/images/420/
|
||||||
|
assets/images/full/
|
||||||
|
assets/other/
|
||||||
|
assets/javascripts/main.js
|
||||||
18
add-iamge.sh
Executable file
18
add-iamge.sh
Executable file
|
|
@ -0,0 +1,18 @@
|
||||||
|
#!/usr/bin/env bash
|
||||||
|
|
||||||
|
IMG=$1
|
||||||
|
|
||||||
|
if ! [ -f $IMG ]; then
|
||||||
|
echo "Please specify a path to an image"
|
||||||
|
exit
|
||||||
|
fi
|
||||||
|
|
||||||
|
PATHFULL=assets/images/full
|
||||||
|
PATH420=assets/images/420
|
||||||
|
|
||||||
|
mkdir -p $PATHFULL $PATH420
|
||||||
|
|
||||||
|
file=$(basename $IMG)
|
||||||
|
|
||||||
|
convert $IMG -resize 420x420 "${PATH420}/${file%.*}.png"
|
||||||
|
convert $IMG "${PATHFULL}/${file%.*}.png"
|
||||||
BIN
assets/images/favicon/favicon.png
Normal file
BIN
assets/images/favicon/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
2
assets/javascripts/detect_mobile.js
Normal file
2
assets/javascripts/detect_mobile.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
function isMobile(){return (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))){return true;}else{return false;}})(navigator.userAgent||navigator.vendor||window.opera);}
|
||||||
|
|
||||||
402
assets/styles/styles.css
Normal file
402
assets/styles/styles.css
Normal file
|
|
@ -0,0 +1,402 @@
|
||||||
|
body {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .dropdown {
|
||||||
|
position: relative !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
color: #999999;
|
||||||
|
background-color: #292929;
|
||||||
|
border-color: #101010;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-header {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header {
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header .show-nav {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header .show-nav.active {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #2266ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header .show-nav p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carat {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-left: 2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-top: 4px dashed;
|
||||||
|
border-top-color: currentcolor;
|
||||||
|
border-top: 4px solid;
|
||||||
|
border-right: 4px solid transparent;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: #292929;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
background-color: #292929;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper ul {
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-header .show-nav,
|
||||||
|
.nav-wrapper > ul > li {
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-khtml-user-select: none; /* Konqueror HTML */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
user-select: none; /* Non-prefixed version, currently
|
||||||
|
supported by Chrome and Opera */
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul > li:hover,
|
||||||
|
.nav-wrapper > ul > li .dropdown-active {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #2266ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li:hover,
|
||||||
|
.desktop-nav-wrapper > ul > li .dropdown-active {
|
||||||
|
border-color: #2266ff;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul > li .button-wrapper {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li .button-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li .button-wrapper p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 1em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-wrapper > ul > li .button-wrapper p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul > li .nav-link {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .nav-item > div {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li.home-item .button-wrapper p {
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-wrapper > ul > li.home-item .button-wrapper p {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul > li.nav-item .button-wrapper p {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li .dropdown {
|
||||||
|
color: #292929;
|
||||||
|
background-color: #ffffff;
|
||||||
|
text-align: left;
|
||||||
|
min-width: 10em;
|
||||||
|
border-bottom: 1px solid #999;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-wrapper > ul > li .dropdown {
|
||||||
|
color: #cccccc;
|
||||||
|
background-color: #404040;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-wrapper > ul > li .dropdown-active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li .dropdown,
|
||||||
|
.desktop-nav-wrapper > ul > li ul.dropdown > li.sub-item:last-child p {
|
||||||
|
border-bottom-left-radius: 0.4em;
|
||||||
|
border-bottom-right-radius: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li .dropdown li.sub-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul > li .dropdown li.sub-item p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-wrapper > ul > li .dropdown li.sub-item p {
|
||||||
|
padding: 0.8em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav-wrapper > ul > li .dropdown li.sub-item p {
|
||||||
|
padding: 0.4em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper > ul > li .dropdown li.sub-item p:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #2266ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
background-color: #444444;
|
||||||
|
background-image: url('/assets/images/full/pexels-photo-downscale.png');
|
||||||
|
background-attachment: local;
|
||||||
|
background-size: cover;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
height: 100vh;
|
||||||
|
max-height: 500px;
|
||||||
|
margin-top: 51px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .dimmer {
|
||||||
|
opacity: 0.7;
|
||||||
|
background-color: #000000;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .centered {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .content {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .content h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .content p {
|
||||||
|
padding: 0.5em 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .content h1,
|
||||||
|
.welcome .content p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
padding: 1em;
|
||||||
|
background-color: #efefef;
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-wrapper {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-info {
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-columns {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-column {
|
||||||
|
margin: 0 auto;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 465px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-image {
|
||||||
|
margin: 1em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-image-wrapper {
|
||||||
|
padding: 1em;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0px 2px 3px #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-image img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #00b0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
color: #5555f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:active {
|
||||||
|
color: #00b0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-wrapper {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-column {
|
||||||
|
margin: 0 auto;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-column-wrapper {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 632px) {
|
||||||
|
.desktop-nav {
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-wrapper {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-wrapper {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-column {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 932px) {
|
||||||
|
.desktop-nav {
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .centered {
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-wrapper {
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-wrapper {
|
||||||
|
width: 900px
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-column {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.desktop-nav {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome .centered {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .gallery-wrapper {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-wrapper {
|
||||||
|
width: 1170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .footer-column {
|
||||||
|
width: 390px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
28
elm.json
Normal file
28
elm.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"type": "application",
|
||||||
|
"source-directories": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"elm-version": "0.19.0",
|
||||||
|
"dependencies": {
|
||||||
|
"direct": {
|
||||||
|
"elm/browser": "1.0.1",
|
||||||
|
"elm/core": "1.0.2",
|
||||||
|
"elm/html": "1.0.0",
|
||||||
|
"hercules-ci/elm-dropdown": "1.0.1"
|
||||||
|
},
|
||||||
|
"indirect": {
|
||||||
|
"elm/json": "1.1.3",
|
||||||
|
"elm/parser": "1.1.0",
|
||||||
|
"elm/time": "1.0.0",
|
||||||
|
"elm/url": "1.0.0",
|
||||||
|
"elm/virtual-dom": "1.0.2",
|
||||||
|
"elm-community/json-extra": "4.2.0",
|
||||||
|
"rtfeldman/elm-iso8601-date-strings": "1.1.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test-dependencies": {
|
||||||
|
"direct": {},
|
||||||
|
"indirect": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
index.html
Normal file
25
index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Werefox Software</title>
|
||||||
|
<link rel="shortcut icon" href="/assets/images/favicon/favicon.png">
|
||||||
|
<link href="/assets/styles/styles.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="/assets/javascripts/detect_mobile.js"></script>
|
||||||
|
<script src="/assets/javascripts/main.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="elm-app">
|
||||||
|
<h1>Please enable javascript to view this website</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var node = document.getElementById("elm-app");
|
||||||
|
var app = Elm.Main.init({
|
||||||
|
node: node,
|
||||||
|
flags: { mobile: isMobile() }
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
index.php
Normal file
1
index.php
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<?php header( 'Location: /index.html' ) ; ?>
|
||||||
3
make.sh
Executable file
3
make.sh
Executable file
|
|
@ -0,0 +1,3 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
elm make --output="assets/javascripts/main.js" src/Main.elm
|
||||||
805
src/Main.elm
Normal file
805
src/Main.elm
Normal file
|
|
@ -0,0 +1,805 @@
|
||||||
|
module Main exposing (main)
|
||||||
|
|
||||||
|
{-| This is the main module of the application.
|
||||||
|
|
||||||
|
|
||||||
|
# main function
|
||||||
|
|
||||||
|
@docs main
|
||||||
|
|
||||||
|
-}
|
||||||
|
|
||||||
|
import Html exposing (Attribute, Html, a, article, button, div, footer, h1, h2, h3, h4, header, img, li, nav, p, section, span, text, ul)
|
||||||
|
import Html.Attributes exposing (class, href, rel, src, title)
|
||||||
|
import Html.Events exposing (onClick)
|
||||||
|
import Array exposing (Array)
|
||||||
|
import Dropdown exposing (ToggleEvent(..), drawer, dropdown, toggle)
|
||||||
|
import Browser.Events exposing (onResize)
|
||||||
|
import Browser.Dom exposing (getViewport)
|
||||||
|
import Browser exposing (document)
|
||||||
|
import Task exposing (perform)
|
||||||
|
|
||||||
|
|
||||||
|
-- MAIN
|
||||||
|
|
||||||
|
|
||||||
|
{-| The main function of the application
|
||||||
|
-}
|
||||||
|
main : Program Flags Model Msg
|
||||||
|
main =
|
||||||
|
document
|
||||||
|
{ init = init
|
||||||
|
, view = (\model -> { title = "Your Mom", body = view model })
|
||||||
|
, update = update
|
||||||
|
, subscriptions = subscriptions
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-- MODEL
|
||||||
|
|
||||||
|
|
||||||
|
type alias Model =
|
||||||
|
{ flags : Flags
|
||||||
|
, nav : Navigation
|
||||||
|
, welcome : WelcomeBanner
|
||||||
|
, gallery : Gallery
|
||||||
|
, footer : List FooterSection
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias Navigation =
|
||||||
|
{ smallNav : Bool
|
||||||
|
, showNav : Bool
|
||||||
|
, navText : String
|
||||||
|
, items : Array NavItem
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type NavItem
|
||||||
|
= HomeLink String String
|
||||||
|
| InitDropdown String (Array NavItem)
|
||||||
|
| Dropdown String DropdownConfig (Array NavItem)
|
||||||
|
| NavLink String String
|
||||||
|
|
||||||
|
|
||||||
|
type alias DropdownConfig =
|
||||||
|
{ name : String
|
||||||
|
, event : ToggleEvent
|
||||||
|
, attribute : Attribute Msg
|
||||||
|
, state : Dropdown.State
|
||||||
|
, message : Bool -> Msg
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias WelcomeBanner =
|
||||||
|
{ title : String
|
||||||
|
, description : String
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias Gallery =
|
||||||
|
{ title : String
|
||||||
|
, description : String
|
||||||
|
, url : String
|
||||||
|
, urltext : String
|
||||||
|
, columns : Int
|
||||||
|
, images : List GalleryItem
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type GalleryItem
|
||||||
|
= Image GalleryImage
|
||||||
|
| Project GalleryProject
|
||||||
|
| ProjectLink GalleryLink
|
||||||
|
|
||||||
|
|
||||||
|
type alias GalleryImage =
|
||||||
|
{ url : String
|
||||||
|
, mouseoverText : String
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias GalleryProject =
|
||||||
|
{ url : String
|
||||||
|
, mouseoverText : String
|
||||||
|
, title : String
|
||||||
|
, description : List String
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias GalleryLink =
|
||||||
|
{ url : String
|
||||||
|
, mouseoverText : String
|
||||||
|
, title : String
|
||||||
|
, description : List String
|
||||||
|
, links : List ( String, String )
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias FooterSection =
|
||||||
|
{ title : String
|
||||||
|
, description : String
|
||||||
|
, link : String
|
||||||
|
, url : String
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type alias Flags =
|
||||||
|
{ mobile : Bool
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-- INIT
|
||||||
|
|
||||||
|
|
||||||
|
init : Flags -> ( Model, Cmd Msg )
|
||||||
|
init flags =
|
||||||
|
( { flags = flags
|
||||||
|
, nav =
|
||||||
|
{ showNav = False
|
||||||
|
, smallNav = False
|
||||||
|
, navText = "Navigation"
|
||||||
|
, items =
|
||||||
|
initDropdowns
|
||||||
|
[ HomeLink "Home" "/"
|
||||||
|
, InitDropdown
|
||||||
|
"Social Media"
|
||||||
|
(initDropdowns
|
||||||
|
[ NavLink "Facebook" "https://facebook.com/shadow8t4"
|
||||||
|
, NavLink "Twitter" "https://twitter.com/Shadow8t4"
|
||||||
|
, NavLink "Google+" "https://plus.google.com/u/2/118253409016956205819"
|
||||||
|
]
|
||||||
|
)
|
||||||
|
, InitDropdown
|
||||||
|
"Games"
|
||||||
|
(initDropdowns
|
||||||
|
[ NavLink "Angels and Demons" "https://gitea.werefoxsoftware.com/shadow8t4/angels-and-demons"
|
||||||
|
, NavLink "Monster Chase" "https://gitea.werefoxsoftware.com/shadow8t4/MochaPine64Backup"
|
||||||
|
, NavLink "Monster Chase Server" "https://gitea.werefoxsoftware.com/shadow8t4/MochaServerPine64Backup"
|
||||||
|
, NavLink "Revival Survival" "/revival-survival"
|
||||||
|
, NavLink "Project Undercover" "/project-undercover"
|
||||||
|
, NavLink "Project Undercover Git Repo" "https://gitea.werefoxsoftware.com/shadow8t4/Project-Undercover"
|
||||||
|
, NavLink "So Bow-y Cute" "https://double-darling-duo-deluxe.itch.io/so-bow-y-cute"
|
||||||
|
]
|
||||||
|
)
|
||||||
|
, InitDropdown
|
||||||
|
"Other Projects"
|
||||||
|
(initDropdowns
|
||||||
|
[ NavLink "Re-Procedural City" "https://gitea.werefoxsoftware.com/shadow8t4/Re-ProceduralCity"
|
||||||
|
, NavLink "Procedural City" "https://gitea.werefoxsoftware.com/shadow8t4/ProceduralCity"
|
||||||
|
, NavLink "PSVR Git Repo" "https://gitea.werefoxsoftware.com/shadow8t4/Public-Speaking-VR"
|
||||||
|
, NavLink "PSVR Research Paper" "/assets/other/Public_Speaking_in_VR_Research_Paper.pdf"
|
||||||
|
]
|
||||||
|
)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
, welcome = welcomeBanner "Werefox Software" "A self-hosted portfolio site for and by Alex Huddleston"
|
||||||
|
, gallery =
|
||||||
|
initGallery
|
||||||
|
"Portfolio Gallery"
|
||||||
|
"A few projects I've worked on. The source code for many of these can be viewed on my self-hosted git service (hosted through Gitea)."
|
||||||
|
"https://gitea.werefoxsoftware.com"
|
||||||
|
"Git subdomain"
|
||||||
|
[ galleryLink
|
||||||
|
"angels-and-demons.png"
|
||||||
|
"A completed game board."
|
||||||
|
"Angels and Demons"
|
||||||
|
[ "Angels and Demons is a board game concept I created during my time in college, specifically"
|
||||||
|
++ " during my Game History class. I decided on my own time to take up converting it to a"
|
||||||
|
++ " video game. Right now, it's focused for mainly Android and WebGL builds. It's currently"
|
||||||
|
++ " (as of June 2018) in very early development. The basic mechanics and logic work, but "
|
||||||
|
++ " it can only be played locally with very little indication of turns or progress. There"
|
||||||
|
++ " are also no instructions aside from a rough document I made for the class, which has"
|
||||||
|
++ " been converted to the repository's readme."
|
||||||
|
]
|
||||||
|
[ ( "Git Repo"
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/angels-and-demons"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"projectundercover-guard.png"
|
||||||
|
"The guard's view in ProjectUndercover."
|
||||||
|
"ProjectUndercover - guard view"
|
||||||
|
[ "Project Undercover is a game about pretending to be an AI. Or at least -- that's part of it."
|
||||||
|
++ " Players will compete against one another, with one side trying to blend in with a crowd"
|
||||||
|
++ " of non-player characters, and the other side attempting to identify them. It takes place"
|
||||||
|
++ " at a party, and the undercover players are agents trying to infiltrate and complete"
|
||||||
|
++ " several missions before the guard, or overseer, catches them."
|
||||||
|
, "The overseer is limited"
|
||||||
|
++ " by a set of cameras, and slowly receives information over the course of the game to"
|
||||||
|
++ " help identify the agents, thus putting the heat on them."
|
||||||
|
, "This picture is from the perspective of one of the guard's cameras."
|
||||||
|
]
|
||||||
|
[ ( "Git Repo"
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/Project-Undercover"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"revival-survival.png"
|
||||||
|
"A game where you save a soul you accidentally reaped as the grim reaper."
|
||||||
|
"Revival Survival"
|
||||||
|
[ "This was my entry for Chillennium 2017, a game jam held and hosted by students at Texas A&M."
|
||||||
|
++ " I was in a group with 3 other students, and mostly worked on the sound design and"
|
||||||
|
++ " game mechanics from the game. The game was made using Unity."
|
||||||
|
, "In Revival Survival, you play as the Grim Reaper in a 2D platformer that has to return"
|
||||||
|
++ " the soul of someone they accidentally reaped. Throughout the game you are met with"
|
||||||
|
++ " adversaries - hellhounds that want to eat the soul you reaped and paladins who wish to avenge"
|
||||||
|
++ " that soul you reaped."
|
||||||
|
, "You can find a link to play this game in browser on the nav bar at the top of this page, as well"
|
||||||
|
++ " as the link below. I've also provided a link to the itch.io submission page, where you"
|
||||||
|
++ " can download a Windows standalone copy of the game."
|
||||||
|
]
|
||||||
|
[ ( "itch.io Page Link"
|
||||||
|
, "https://d4-team.itch.io/revival-survival"
|
||||||
|
)
|
||||||
|
, ( " / "
|
||||||
|
, "/"
|
||||||
|
)
|
||||||
|
, ( "In-browser Game Link"
|
||||||
|
, "/revival-survival"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"mocha_bordered.png"
|
||||||
|
"The status screen of the game."
|
||||||
|
"Monster Chase"
|
||||||
|
[ "Monster Chase was a fitness game/app developed during my senior capstone class in college."
|
||||||
|
++ " The development team consisted of me and 4 other computer science majors, and the"
|
||||||
|
++ " objective was to create a fitness game designed to track users' steps through engaging"
|
||||||
|
++ " gameplay of the user being virtually chased by a monster that they could customize and"
|
||||||
|
++ " use to challenge other players online. The game makes use of the FitBit API if a device"
|
||||||
|
++ " and subsequent account are available to help track data and utilizes and separate server"
|
||||||
|
++ " to keep track of points for an online leaderboard functionality. While the finaly build"
|
||||||
|
++ "is still in many cases a prototype compared to what we initially intended to develop, it"
|
||||||
|
++ "is functional and the source code for both the app and server are available in their"
|
||||||
|
++ "subsequent repositories."
|
||||||
|
, "During the development of the game, I worked mainly on the front-end design and functionality"
|
||||||
|
++ " of the game through the Unity editor. Most scripted events and transitions in the front end"
|
||||||
|
++ " were also programmed by me, or I at least had a hand in."
|
||||||
|
]
|
||||||
|
[ ( "Git Repo "
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/MochaPine64Backup"
|
||||||
|
)
|
||||||
|
, ( " / "
|
||||||
|
, "/"
|
||||||
|
)
|
||||||
|
, ( "Server Git Repo"
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/MochaServerPine64Backup"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryProject
|
||||||
|
"projectundercover-spy.png"
|
||||||
|
"A spy's view in ProjectUndercover."
|
||||||
|
"Project Undercover - spy view"
|
||||||
|
[ "This is another picture from Project Undercover, this time from the perspective"
|
||||||
|
++ " of a spy. In this picture, the spy is finishing a waving interaction with an AI spy."
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"public-speaking-vr.png"
|
||||||
|
"A Case Study on Public Speaking in Virtual Reality."
|
||||||
|
"Public Speaking in VR"
|
||||||
|
[ "In this project, and the resulting research paper, a group I was assigned in and I show the results of"
|
||||||
|
++ " a case study on the effectiveness and realism of using Virtual Reality technology to simulate the"
|
||||||
|
++ " experience of public speaking in an effort to practice one’s speech skills."
|
||||||
|
, "We used a Development"
|
||||||
|
++ " Kit 2 version of the Oculus Rift and the Unity editor to create and run our simulation. In the"
|
||||||
|
++ " simulation, we presented users a large classroom environment with a handful of characters to"
|
||||||
|
++ " present a mock speech in front of. We provided the users with an Xbox game controller to allow"
|
||||||
|
++ " for easier camera movement as well as a way to switch through the given slides in the mock presentation."
|
||||||
|
, "The resulting research paper from the case study and a link to the project's github page can be found"
|
||||||
|
++ " below."
|
||||||
|
]
|
||||||
|
[ ( "Git Repo "
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/Public-Speaking-VR"
|
||||||
|
)
|
||||||
|
, ( " / "
|
||||||
|
, "/"
|
||||||
|
)
|
||||||
|
, ( "Research Paper"
|
||||||
|
, "/assets/other/Public_Speaking_in_VR_Research_Paper.pdf"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"re-procedural-city.png"
|
||||||
|
"An image of the re-implementation's output."
|
||||||
|
"Re:Procedural City"
|
||||||
|
[ "A Rust implementation of the Procedural City project. This was done to gain some insight"
|
||||||
|
++ " into the programming language and to refamiliarize myself with the work itself. In"
|
||||||
|
++ " addition, the project is done through solely open-source libraries as opposed to the"
|
||||||
|
++ " ones used in the original project provided by my professor, meaning that documentation"
|
||||||
|
++ " of the library functions is much more accessible."
|
||||||
|
]
|
||||||
|
[ ( "Git Repo"
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/Re-ProceduralCity"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"procedural-city.png"
|
||||||
|
"A picture of some output from ProceduralCity"
|
||||||
|
"Procedural City"
|
||||||
|
[ "In this project my partner, Jeremy Martin, and I presented a way of procedurally generating a basic city by"
|
||||||
|
++ " creating an .obj mesh file using some given template meshes. The goal was that when given a"
|
||||||
|
++ " user input population density and some template meshes, the program would output"
|
||||||
|
++ " a resulting mesh of a procedurally generated “city” using the template"
|
||||||
|
++ " meshes along with some defined rules. The program takes the input files and duplicates it at"
|
||||||
|
++ " procedurally determined intersections, creating a basic city structure in the"
|
||||||
|
++ " resulting output .obj mesh file."
|
||||||
|
, " Unfortunately, the program was unable to be fully"
|
||||||
|
++ " completed before our deadline, and currently takes one input mesh file and duplicates it"
|
||||||
|
++ " based on user-defined amounts of layers from a central point with user-defined spacing."
|
||||||
|
, "Specific documentation on how to operate the program is detailed on the respective github page."
|
||||||
|
]
|
||||||
|
[ ( "Git Repo"
|
||||||
|
, "https://gitea.werefoxsoftware.com/shadow8t4/ProceduralCity"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
, galleryLink
|
||||||
|
"so-bow-y-cute.png"
|
||||||
|
"A game where you become cute."
|
||||||
|
"So Bow-y Cute"
|
||||||
|
[ "This was my entry for Chillennium 2016, a game jam held and hosted by students at Texas A&M."
|
||||||
|
++ " This was my first time at the game jam and I was randomly patnered with one other person,"
|
||||||
|
++ " who did the art for this game. Everything else was done by me. The game was made using Unity."
|
||||||
|
, "In So Bow-y Cute - When your parent decides to limit you cuteness potential by prohibiting all bows, you must"
|
||||||
|
++ " rebel against their tyranny and become the cutest you possibly can. Be careful not to get"
|
||||||
|
++ " caught! or else you're out of luck."
|
||||||
|
, "You can find a link to the itch.io page below."
|
||||||
|
]
|
||||||
|
[ ( "itch.io Page Link"
|
||||||
|
, "https://double-darling-duo-deluxe.itch.io/so-bow-y-cute"
|
||||||
|
)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
, footer =
|
||||||
|
[ initFooterSection
|
||||||
|
""
|
||||||
|
""
|
||||||
|
""
|
||||||
|
"/"
|
||||||
|
, initFooterSection
|
||||||
|
""
|
||||||
|
"This website was programmed in elm with the help of my friend Riley."
|
||||||
|
"source code"
|
||||||
|
"https://gitea.werefox.dev/shadow8t4/portfolio-site"
|
||||||
|
, initFooterSection
|
||||||
|
""
|
||||||
|
""
|
||||||
|
""
|
||||||
|
"/"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
, Task.perform WindowWidth (getViewport
|
||||||
|
|> Task.map (\viewport -> floor viewport.scene.width))
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
smallImagePath : String -> String
|
||||||
|
smallImagePath filename =
|
||||||
|
"/assets/images/420/" ++ filename
|
||||||
|
|
||||||
|
|
||||||
|
fullImagePath : String -> String
|
||||||
|
fullImagePath filename =
|
||||||
|
"/assets/images/full/" ++ filename
|
||||||
|
|
||||||
|
|
||||||
|
defaultDropdownConfig : DropdownConfig
|
||||||
|
defaultDropdownConfig =
|
||||||
|
{ name = "dropdown1"
|
||||||
|
, event = OnClick
|
||||||
|
, attribute = class "dropdown-active"
|
||||||
|
, state = False
|
||||||
|
, message = ToggleDropdown 0
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
initDropdown : Int -> NavItem -> NavItem
|
||||||
|
initDropdown index item =
|
||||||
|
case item of
|
||||||
|
Dropdown name config items ->
|
||||||
|
Dropdown
|
||||||
|
name
|
||||||
|
{ config
|
||||||
|
| name = "dropdown" ++ (String.fromInt index)
|
||||||
|
, message = ToggleDropdown index
|
||||||
|
}
|
||||||
|
items
|
||||||
|
|
||||||
|
InitDropdown name items ->
|
||||||
|
Dropdown
|
||||||
|
name
|
||||||
|
{ defaultDropdownConfig
|
||||||
|
| name = "dropdown" ++ (String.fromInt index)
|
||||||
|
, message = ToggleDropdown index
|
||||||
|
}
|
||||||
|
items
|
||||||
|
|
||||||
|
other ->
|
||||||
|
other
|
||||||
|
|
||||||
|
|
||||||
|
initDropdowns : List NavItem -> Array NavItem
|
||||||
|
initDropdowns =
|
||||||
|
Array.indexedMap initDropdown << Array.fromList
|
||||||
|
|
||||||
|
|
||||||
|
welcomeBanner : String -> String -> WelcomeBanner
|
||||||
|
welcomeBanner title description =
|
||||||
|
{ title = title, description = description }
|
||||||
|
|
||||||
|
|
||||||
|
galleryImage : String -> String -> GalleryItem
|
||||||
|
galleryImage url text =
|
||||||
|
Image { url = url, mouseoverText = text }
|
||||||
|
|
||||||
|
|
||||||
|
galleryProject : String -> String -> String -> List String -> GalleryItem
|
||||||
|
galleryProject url text title description =
|
||||||
|
Project { url = url, mouseoverText = text, title = title, description = description }
|
||||||
|
|
||||||
|
|
||||||
|
galleryLink : String -> String -> String -> List String -> List ( String, String ) -> GalleryItem
|
||||||
|
galleryLink url text title description links =
|
||||||
|
ProjectLink { url = url, mouseoverText = text, title = title, description = description, links = links }
|
||||||
|
|
||||||
|
|
||||||
|
initGallery : String -> String -> String -> String -> List GalleryItem -> Gallery
|
||||||
|
initGallery title description url urltext images =
|
||||||
|
{ title = title, description = description, url = url, urltext = urltext, columns = 1, images = images }
|
||||||
|
|
||||||
|
|
||||||
|
initFooterSection : String -> String -> String -> String -> FooterSection
|
||||||
|
initFooterSection title description link url =
|
||||||
|
{ title = title, description = description, link = link, url = url }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-- VIEW
|
||||||
|
|
||||||
|
|
||||||
|
view : Model -> List (Html Msg)
|
||||||
|
view model =
|
||||||
|
[ headerBar model
|
||||||
|
, welcome model.welcome
|
||||||
|
, viewGallery model.gallery
|
||||||
|
, footerSections model.footer
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
welcome : WelcomeBanner -> Html Msg
|
||||||
|
welcome banner =
|
||||||
|
section [ class "welcome" ]
|
||||||
|
[ div [ class "welcome-wrapper" ]
|
||||||
|
[ div [ class "dimmer" ]
|
||||||
|
[ div [ class "centered" ]
|
||||||
|
[ article [ class "content" ]
|
||||||
|
[ h1 [ class "title" ] [ text banner.title ]
|
||||||
|
, p [ class "description" ] [ text banner.description ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
headerBar : Model -> Html Msg
|
||||||
|
headerBar model =
|
||||||
|
if model.flags.mobile || model.nav.smallNav then
|
||||||
|
mobileHeaderbar model
|
||||||
|
else
|
||||||
|
desktopHeaderBar model
|
||||||
|
|
||||||
|
|
||||||
|
desktopHeaderBar : Model -> Html Msg
|
||||||
|
desktopHeaderBar model =
|
||||||
|
header [ class "desktop-header" ]
|
||||||
|
[ nav [ class "desktop-nav" ]
|
||||||
|
[ div [ class "desktop-nav-wrapper", class "nav-wrapper" ]
|
||||||
|
[ ul [] (Array.map navItem model.nav.items |> Array.toList)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
mobileHeaderbar : Model -> Html Msg
|
||||||
|
mobileHeaderbar model =
|
||||||
|
header [ class "mobile-header" ]
|
||||||
|
[ div
|
||||||
|
([ class "show-nav", onClick (ToggleNav (not model.nav.showNav)) ]
|
||||||
|
++ if model.nav.showNav then
|
||||||
|
[ class "active" ]
|
||||||
|
else
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
[ p []
|
||||||
|
[ text model.nav.navText
|
||||||
|
, span [ class "carat" ] []
|
||||||
|
]
|
||||||
|
]
|
||||||
|
, nav
|
||||||
|
([ class "mobile-nav" ]
|
||||||
|
++ if model.nav.showNav then
|
||||||
|
[]
|
||||||
|
else
|
||||||
|
[ class "hidden" ]
|
||||||
|
)
|
||||||
|
[ div [ class "mobile-nav-wrapper", class "nav-wrapper" ]
|
||||||
|
[ ul [] (Array.map navItem model.nav.items |> Array.toList)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
homeLink : String -> String -> Html Msg
|
||||||
|
homeLink name url =
|
||||||
|
li [ class "home-item" ]
|
||||||
|
[ div []
|
||||||
|
[ a [ class "nav-link", href url ]
|
||||||
|
[ div [ class "button-wrapper" ]
|
||||||
|
[ p [] [ text name ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
navItem : NavItem -> Html Msg
|
||||||
|
navItem item =
|
||||||
|
case item of
|
||||||
|
NavLink name url ->
|
||||||
|
navLink name url
|
||||||
|
|
||||||
|
Dropdown name config items ->
|
||||||
|
navDropdown name config items
|
||||||
|
|
||||||
|
HomeLink name url ->
|
||||||
|
homeLink name url
|
||||||
|
|
||||||
|
_ ->
|
||||||
|
text ""
|
||||||
|
|
||||||
|
|
||||||
|
navLink : String -> String -> Html Msg
|
||||||
|
navLink name url =
|
||||||
|
li [ class "nav-item" ]
|
||||||
|
[ div []
|
||||||
|
[ a [ class "nav-link", href url ]
|
||||||
|
[ div [ class "button-wrapper" ]
|
||||||
|
[ p [] [ text name ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
navDropdown : String -> DropdownConfig -> Array NavItem -> Html Msg
|
||||||
|
navDropdown name config items =
|
||||||
|
li [ class "nav-item" ]
|
||||||
|
[ dropdown div []
|
||||||
|
[
|
||||||
|
(toggle div
|
||||||
|
([ class "button-wrapper" ]
|
||||||
|
++ if config.state then
|
||||||
|
[ class "dropdown-active" ]
|
||||||
|
else
|
||||||
|
[]
|
||||||
|
)
|
||||||
|
[ p []
|
||||||
|
[ text name
|
||||||
|
, span [ class "carat" ] []
|
||||||
|
]
|
||||||
|
]
|
||||||
|
)
|
||||||
|
, (drawer ul [ class "dropdown" ] (Array.map subItem items |> Array.toList))
|
||||||
|
]
|
||||||
|
config.state
|
||||||
|
(dropdownConfig config)
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
subItem : NavItem -> Html Msg
|
||||||
|
subItem item =
|
||||||
|
case item of
|
||||||
|
NavLink name url ->
|
||||||
|
li [ class "sub-item" ]
|
||||||
|
[ a [ class "nav-link", href url ]
|
||||||
|
[ p [] [ text name ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
_ ->
|
||||||
|
text ""
|
||||||
|
|
||||||
|
|
||||||
|
dropdownConfig : DropdownConfig -> Dropdown.Config Msg
|
||||||
|
dropdownConfig config =
|
||||||
|
Dropdown.Config
|
||||||
|
config.name
|
||||||
|
config.event
|
||||||
|
config.attribute
|
||||||
|
config.message
|
||||||
|
|
||||||
|
|
||||||
|
viewGallery : Gallery -> Html Msg
|
||||||
|
viewGallery gallery =
|
||||||
|
let
|
||||||
|
arr : Array (List GalleryItem)
|
||||||
|
arr =
|
||||||
|
gallery.images
|
||||||
|
|> List.indexedMap (\index item -> ( index, item ))
|
||||||
|
|> List.foldl
|
||||||
|
(\( index, item ) acc ->
|
||||||
|
if (remainderBy gallery.columns index) < Array.length acc then
|
||||||
|
case
|
||||||
|
acc
|
||||||
|
|> Array.get (remainderBy gallery.columns index)
|
||||||
|
|> Maybe.map ((::) item)
|
||||||
|
of
|
||||||
|
Just column ->
|
||||||
|
Array.set (remainderBy gallery.columns index) column acc
|
||||||
|
|
||||||
|
Nothing ->
|
||||||
|
acc
|
||||||
|
else
|
||||||
|
Array.push [ item ] acc
|
||||||
|
)
|
||||||
|
Array.empty
|
||||||
|
in
|
||||||
|
div [ class "gallery" ]
|
||||||
|
[ section [ class "gallery-wrapper" ]
|
||||||
|
[ article [ class "gallery-info" ]
|
||||||
|
[ h2 [] [ text gallery.title ]
|
||||||
|
, p [] [ text gallery.description ]
|
||||||
|
, a [ href gallery.url ] [ text gallery.urltext ]
|
||||||
|
]
|
||||||
|
, div [ class "gallery-columns" ]
|
||||||
|
(arr
|
||||||
|
|> Array.map (div [ class "gallery-column" ] << List.map displayImage << List.reverse)
|
||||||
|
|> Array.toList
|
||||||
|
)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
displayImage : GalleryItem -> Html Msg
|
||||||
|
displayImage item =
|
||||||
|
case item of
|
||||||
|
Image image ->
|
||||||
|
article [ class "gallery-image" ]
|
||||||
|
[ div [ class "gallery-image-wrapper" ]
|
||||||
|
[ a [ href (fullImagePath image.url) ]
|
||||||
|
[ img [ src (smallImagePath image.url), title image.mouseoverText ] []
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
Project project ->
|
||||||
|
article [ class "gallery-image" ]
|
||||||
|
[ div [ class "gallery-image-wrapper" ]
|
||||||
|
[ a [ href (fullImagePath project.url) ]
|
||||||
|
[ img [ src (smallImagePath project.url), title project.mouseoverText ] []
|
||||||
|
]
|
||||||
|
, div [ class "gallery-image-info" ]
|
||||||
|
[ h4 [] [ text project.title ]
|
||||||
|
, div [] (List.map (\t -> p [] [ text t ]) project.description)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
ProjectLink projectlink ->
|
||||||
|
article [ class "gallery-image" ]
|
||||||
|
[ div [ class "gallery-image-wrapper" ]
|
||||||
|
[ a [ href (fullImagePath projectlink.url) ]
|
||||||
|
[ img [ src (smallImagePath projectlink.url), title projectlink.mouseoverText ] []
|
||||||
|
]
|
||||||
|
, div [ class "gallery-image-info" ]
|
||||||
|
[ h4 [] [ text projectlink.title ]
|
||||||
|
, div [] (List.map (\t -> p [] [ text t ]) projectlink.description)
|
||||||
|
, p [] (List.map (\( t, url ) -> a [ href url ] [ text t ]) projectlink.links)
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
footerSection : FooterSection -> Html Msg
|
||||||
|
footerSection item =
|
||||||
|
div [ class "footer-column" ]
|
||||||
|
[ article [ class "footer-column-wrapper" ]
|
||||||
|
[ h3 [] [ text item.title ]
|
||||||
|
, p [] [ text item.description ]
|
||||||
|
, p []
|
||||||
|
[ a [ href item.url ]
|
||||||
|
[ text item.link ]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
footerSections : List FooterSection -> Html Msg
|
||||||
|
footerSections items =
|
||||||
|
footer []
|
||||||
|
[ section [ class "footer-wrapper" ] (List.map footerSection items)
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-- UPDATE
|
||||||
|
|
||||||
|
|
||||||
|
type Msg
|
||||||
|
= WindowWidth Int
|
||||||
|
| ToggleDropdown Int Bool
|
||||||
|
| ToggleNav Bool
|
||||||
|
|
||||||
|
|
||||||
|
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||||
|
update msg model =
|
||||||
|
case msg of
|
||||||
|
WindowWidth x ->
|
||||||
|
( { model
|
||||||
|
| gallery = updateGalleryWidth model.flags.mobile x model.gallery
|
||||||
|
, nav = updateNavWidth x model.nav
|
||||||
|
}
|
||||||
|
, Cmd.none
|
||||||
|
)
|
||||||
|
|
||||||
|
ToggleDropdown index state ->
|
||||||
|
( { model | nav = updateDropdown index state model.nav }
|
||||||
|
, Cmd.none
|
||||||
|
)
|
||||||
|
|
||||||
|
ToggleNav state ->
|
||||||
|
( { model | nav = toggleNav state model.nav }
|
||||||
|
, Cmd.none
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
toggleNav : Bool -> Navigation -> Navigation
|
||||||
|
toggleNav state nav =
|
||||||
|
{ nav | showNav = state }
|
||||||
|
|
||||||
|
|
||||||
|
updateGalleryWidth : Bool -> Int -> Gallery -> Gallery
|
||||||
|
updateGalleryWidth mobile width gallery =
|
||||||
|
if mobile then
|
||||||
|
gallery
|
||||||
|
else if width < 632 then
|
||||||
|
{ gallery | columns = 1 }
|
||||||
|
else if width < 932 then
|
||||||
|
{ gallery | columns = 2 }
|
||||||
|
else
|
||||||
|
{ gallery | columns = 3 }
|
||||||
|
|
||||||
|
|
||||||
|
updateNavWidth : Int -> Navigation -> Navigation
|
||||||
|
updateNavWidth width nav =
|
||||||
|
if width < 700 then
|
||||||
|
{ nav | smallNav = True }
|
||||||
|
else
|
||||||
|
{ nav | smallNav = False, showNav = False }
|
||||||
|
|
||||||
|
|
||||||
|
updateDropdown : Int -> Bool -> Navigation -> Navigation
|
||||||
|
updateDropdown index state nav =
|
||||||
|
case Array.get index nav.items of
|
||||||
|
Just dropdown ->
|
||||||
|
case dropdown of
|
||||||
|
Dropdown name config items ->
|
||||||
|
{ nav | items = Array.set index (Dropdown name { config | state = state } items) nav.items }
|
||||||
|
|
||||||
|
_ ->
|
||||||
|
nav
|
||||||
|
|
||||||
|
Nothing ->
|
||||||
|
nav
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-- SUBSCRIPTIONS
|
||||||
|
|
||||||
|
|
||||||
|
subscriptions : Model -> Sub Msg
|
||||||
|
subscriptions model =
|
||||||
|
onResize (\width _ -> WindowWidth width)
|
||||||
Reference in a new issue