lots of stylings & some functionality fixes

This commit is contained in:
Ulf Gebhardt 2019-09-06 16:39:22 +02:00
parent 0443088704
commit 793a78a329
No known key found for this signature in database
GPG Key ID: 81308EFE29ABFEBD
13 changed files with 339 additions and 127 deletions

View File

@ -2,4 +2,5 @@
\SYSTEM\autoload::registerFolder(dirname(__FILE__));
\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/img/','img','*.*');
\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/persons/','persons','*.*');
\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/projects/','projects','*.*');
\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/projects/','projects','*.*');
\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/font/','font','*.*');

View File

@ -5,11 +5,14 @@ $color_black: rgb(0,0,0);
$color_green_1: rgb(12,22,11);
$color_green_2: rgb(21,26,16);
$color_green_3: rgb(29,48,25);
$color_orange: #F5A623;
// Distances
$distance_huge: 250px;
$distance_big: 100px;
$distance_xlarge: 75px;
$distance_large: 50px;
$distance_xmedium: 30px;
$distance_medium: 25px;
$distance_small: 10px;
@ -17,14 +20,23 @@ $distance_small: 10px;
$home_img: url(./files/img/wecker_manufaktur.jpg);
// Font Size
$font_size_20: 20px;
$font_size_25: 25px;
$font_size_50: 50px;
$font_size_70: 70px;
body {
color: $color_white;
font-family: 'sf-pro-light';
}
p{
padding:0;
margin:0;
}
.fullpage {
min-height: 100vh;
overflow-y: hidden;
@ -37,37 +49,54 @@ body {
#menu {
padding-left: $distance_big;
padding-right: $distance_big;
position: absolute;
width: 100%;
}
strong {
font-family: 'sf-pro-bold';
}
#home {
background-image: $home_img;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
padding-left: $distance_big;
padding-right: $distance_big;
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
h1{
display: flex;
flex: 1 0 auto;
align-self: center;
align-items: center;
font-size: $font_size_70;
padding-top: $distance_large;
}
h4 {
align-self: bottom;
font-size: $font_size_25
}
a{
font-size: $font_size_50;
color: $color_grey;
margin-top: -25px;
margin-bottom: -20px;
margin-top: -15px;
margin-bottom: $distance_small;
}
}
.badge {
margin-right: $distance_small;
//height: 22px;
}
#content {
background-image: linear-gradient($color_green_1,$color_green_3);
text-align: center;
@ -75,10 +104,22 @@ body {
padding-right: $distance_big;
#philosophy{
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
div{
align-self: center;
}
h2{
font-size: $font_size_50;
padding-top: $distance_large;
padding-bottom: $distance_medium;
}
span{
font-size: $font_size_25;
}
}
#persons{
@ -86,45 +127,81 @@ body {
padding-bottom: $distance_medium;
.person {
padding-top: $distance_xlarge;
padding-bottom: $distance_medium;
img {
object-fit: cover;
width: 300px;
height: 300px;
width: $distance_huge;
height: $distance_huge;
}
.disabled{
filter: grayscale(100%);
&.disabled{
opacity: 0.5;
}
.person-img-name {
padding-top: $distance_medium;
color: $color_white;
font-size: $font_size_20;
}
}
.person-details{
text-align: left;
padding-left: $distance_medium;
font-size: $font_size_20;
.table td, .table th {
border:0;
}
.badge {
font-size: $font_size_20;
}
}
}
#projects{
padding-top: $distance_large;
padding-bottom: $distance_medium;
h2{
font-size: $font_size_50;
padding-top: $distance_large;
padding-bottom: $distance_medium;
}
span{
font-size: $font_size_25;
}
.project{
padding-bottom: $distance_medium;
img {
object-fit: cover;
width: 300px;
height: 300px;
width: $distance_huge;
height: $distance_huge;
}
.disabled{
filter: grayscale(100%);
&.disabled{
opacity: 0.5;
}
.project-img-name {
padding-top: $distance_medium;
color: $color_white;
font-size: $font_size_20;
}
}
.project-details{
text-align: left;
padding-left: $distance_medium;
font-size: $font_size_20;
.table td, .table th {
border:0;
}
.badge {
font-size: $font_size_20;
}
img {
object-fit: cover;
width: 75px;
height: 75px;
width: 50px;
height: 50px;
}
}
}
@ -132,10 +209,16 @@ body {
#apply{
padding-bottom: $distance_medium;
h2 {
h2{
font-size: $font_size_50;
padding-top: $distance_large;
padding-bottom: $distance_medium;
}
span{
font-size: $font_size_25;
padding-bottom: $distance_xlarge;
display: block;
}
input, textarea {
background-image: linear-gradient(to right, $color_green_1,$color_green_3);
@ -144,6 +227,7 @@ body {
border: 0;
padding: $distance_small;
border-radius: $distance_small;
font-size: $font_size_20;
}
input::placeholder, textarea::placeholder{
@ -161,10 +245,25 @@ body {
#apply-send-box {
text-align: left;
a {
color: $color_white;
font-size: $font_size_20;
&.disabled{
pointer-events: none;
}
}
}
#apply-count-box {
text-align: right;
font-size: $font_size_20;
padding-bottom: $distance_medium;
span{
font-size: $font_size_20;
font-weight: bold;
display: contents;
padding: 0;
}
}
}
@ -178,20 +277,48 @@ body {
}
}
#footer-links {
#footer {
background-color: $color_green_2;
padding-left: $distance_big;
padding-right: $distance_big;
padding-top: $distance_small;
padding-bottom: $distance_small;
}
#footer-links {
padding-top: $distance_large;
padding-bottom: $distance_large;
#footer-nl-email{
margin-top: $distance_medium;
width: 100%;
}
#footer-nl-subscribe{
margin-top: $distance_small;
background-color: $color_orange;
}
a {
color: $color_white;
display: block;
font-size: $font_size_20;
margin-top: $distance_small;
}
#footer-sm{
display: flex;
a > i {
font-size: 26px;
color: #fff;
padding-top: 10px;
border: #fff 2px solid;
width: 50px;
height: 50px;
border-radius: 25px;
text-align: center;
margin-right: $distance_small;
}
}
}
#footer-bottomline {
background-color: $color_black;
padding: $distance_small;
padding-left: $distance_big;
padding-right: $distance_big;
text-align: center;
#footer-bottomline {
background-color: $color_black;
padding: $distance_small;
padding-left: $distance_big;
padding-right: $distance_big;
text-align: center;
}
}
.modal {

View File

@ -0,0 +1,13 @@
@font-face {
font-family: 'sf-pro-bold';
src: url('./files/font/SanFranciscoDisplay-Bold.otf') format('truetype');
}
@font-face {
font-family: 'sf-pro-light';
src: url('./files/font/SanFranciscoDisplay-Light.otf') format('truetype');
}
@font-face {
font-family: 'sf-pro-semibold';
src: url('./files/font/SanFranciscoDisplay-Semibold.otf') format('truetype');
}

View File

@ -13,6 +13,7 @@ class default_page implements \SYSTEM\PAGE\DefaultPage {
return \SYSTEM\HTML\html::link(\SYSTEM\CACHE\cache_css::minify(array(
\LIB\lib_bootstrap::css(),
\LIB\lib_font_awesome::css(),
new PPAGE('default_page/css/font.css'),
new PPAGE('default_page/css/default_page.scss')
)));
}

View File

@ -1,15 +1,16 @@
$(document).ready(function() {
//new SYSTEM('./api.php',1,'start');
$('.person-link').click(function(e){showPerson(e,$(this).attr('person'),false,true)})
//new SYSTEM('./api.php',1,'start');
$('.person-link').click(function(e){showPerson(e,$(this).attr('person'),false,true)})
$('.project-link').click(function(e){showProject(e,$(this).attr('project'),false,true)})
$('.person-project-link').click(function(e){showProject(e,$(this).attr('project'),true,false)})
$('.person-link').hover(function(){hoverPerson($(this).attr('person'),true)},function(){hoverPerson($(this).attr('person'),false)});
$('.project-link').hover(function(){hoverProject($(this).attr('project'),true)},function(){hoverProject($(this).attr('project'),false)});
$('.project-link').click(function(e){showProject(e,$(this).attr('project'),false,true)})
$('.person-project-link').click(function(e){showProject(e,$(this).attr('project'),true,false)})
$('.project-person-link').click(function(e){showPerson(e,$(this).attr('person'),true,false)})
$('.project-person-link').click(function(e){showPerson(e,$(this).attr('person'),true,false)})
$("#apply-send").click(function(e){
$("#apply-send").click(function(e){
e.preventDefault();
var data = { name: $('#apply-name').val(),
email: $('#apply-email').val(),
@ -34,6 +35,7 @@ $(document).ready(function() {
sendMail(data,function(data){
if(data && data.status){
$("#apply-message").val('')
$('#apply-message').trigger('keyup');
alert("Danke! Deine Nachricht wurde versendet.");
} else {
alert("Deine Nachricht konnte nicht versendet weden. Bitte versuche es später noch einmal. Danke.");
@ -42,9 +44,13 @@ $(document).ready(function() {
});
$('#apply-message').on('keyup',function(){
$('#apply-count').html($(this).val().length+'/500');
$('#apply-count').html($(this).val().length);
checkApply();
});
$('#apply-name').on('keyup',checkApply)
$('#apply-email').on('keyup',checkApply)
$('#footer-nl-subscribe').click(function(e){
e.preventDefault();
var email = $('#footer-nl-email').val();
@ -78,76 +84,130 @@ $(document).ready(function() {
});
});
function showPerson(event,subject_id,jump,toggle){
// Jump to anchor
if(!jump){
event.preventDefault();
}
// Is the element already shown?
isHidden = $('#person-details-'+subject_id).hasClass('d-none');
function checkApply(){
name = $('#apply-name').val(),
email = $('#apply-email').val(),
message = $('#apply-message').val();
// Grey out all
if(isHidden){
if (name.length >= 3 &&
validateEmail(email) &&
message.length <= 500 &&
message.length > 0){
$("#apply-send").removeClass('disabled');
} else {
$("#apply-send").addClass('disabled');
}
}
function hoverPerson(subject_id,hoverin){
detailsShown = $('.person-details:not(.d-none)').length;
// Grey out all
if(!detailsShown){
if(hoverin){
$('.person').addClass('disabled');
$('#person-'+subject_id).removeClass('disabled');
} else {
} else {
$('.person').removeClass('disabled');
}
// Hide all details
$('.person-details').addClass('d-none');
}
}
}
// Toggle or ensure visibility of specific detail
console.log(toggle, isHidden)
if(!toggle || isHidden){
$('#person-details-'+subject_id).removeClass('d-none');
}
function hoverProject(subject_id,hoverin){
detailsShown = $('.project-details:not(.d-none)').length;
// Grey out all
if(!detailsShown){
if(hoverin){
$('.project').addClass('disabled');
$('#project-'+subject_id).removeClass('disabled');
} else {
$('.project').removeClass('disabled');
}
}
}
function showPerson(event,subject_id,jump,toggle){
// Jump to anchor
if(!jump){
event.preventDefault();
}
// Arrows
$('.person i').removeClass('fa-angle-up');
$('.person i').addClass('fa-angle-down');
// Is the element already shown?
isHidden = $('#person-details-'+subject_id).hasClass('d-none');
// Grey out all
if(isHidden){
$('.person').addClass('disabled');
$('#person-'+subject_id).removeClass('disabled');
$('#person-'+subject_id+' i').removeClass('fa-angle-down');
$('#person-'+subject_id+' i').addClass('fa-angle-up');
} else {
$('.person').removeClass('disabled');
}
// Hide all details
$('.person-details').addClass('d-none');
// Toggle or ensure visibility of specific detail
if(!toggle || isHidden){
$('#person-details-'+subject_id).removeClass('d-none');
}
}
function showProject(event,subject_id,jump,toggle){
// Jump to anchor
if(!jump){
event.preventDefault();
}
// Is the element already shown?
isHidden = $('#project-details-'+subject_id).hasClass('d-none');
// Jump to anchor
if(!jump){
event.preventDefault();
}
// Grey out all others
if(isHidden){
$('.project').addClass('disabled');
$('#project-'+subject_id).removeClass('disabled');
} else {
$('.project').removeClass('disabled');
}
// Arrows
$('.project i').removeClass('fa-angle-up');
$('.project i').addClass('fa-angle-down');
// Is the element already shown?
isHidden = $('#project-details-'+subject_id).hasClass('d-none');
// Hide all details
$('.project-details').addClass('d-none');
// Grey out all others
if(isHidden){
$('.project').addClass('disabled');
$('#project-'+subject_id).removeClass('disabled');
$('#project-'+subject_id+' i').removeClass('fa-angle-down');
$('#project-'+subject_id+' i').addClass('fa-angle-up');
} else {
$('.project').removeClass('disabled');
}
// Toggle or ensure visibility of specific detail
console.log(toggle, isHidden)
if(!toggle || isHidden){
$('#project-details-'+subject_id).removeClass('d-none');
}
// Hide all details
$('.project-details').addClass('d-none');
// Toggle or ensure visibility of specific detail
if(!toggle || isHidden){
$('#project-details-'+subject_id).removeClass('d-none');
}
}
function sendMail(data,callback){
$.ajax({
async: true,
url: './api.php',
type: 'GET',
dataType: 'JSON',
data: {
call: 'send_mail',
data: data
},
success: function(data){
callback(data);
},
error: function(){
callback(false);
}
});
$.ajax({
async: true,
url: './api.php',
type: 'GET',
dataType: 'JSON',
data: {
call: 'send_mail',
data: data
},
success: function(data){
callback(data);
},
error: function(){
callback(false);
}
});
}
function validateEmail(email) {

View File

@ -1,17 +1,19 @@
<div class="row">
<div class="col-12">
<input id="apply-name" type="text" placeholder="${content_apply_name_placeholder}" />
</div>
<div class="col-12">
<input id="apply-email" type="email" placeholder="${content_apply_email_placeholder}" />
</div>
<div class="col-12">
<textarea id="apply-message" placeholder="${content_apply_message_placeholder}" maxlength="500"></textarea>
</div>
<div id="apply-send-box" class="col-6">
<a id="apply-send" href="#">${content_apply_send}</a>
</div>
<div id="apply-count-box" class="col-6">
<span id="apply-count">0/500</span>
<div class="container">
<div class="row">
<div class="col-12">
<input id="apply-name" type="text" placeholder="${content_apply_name_placeholder}" />
</div>
<div class="col-12">
<input id="apply-email" type="email" placeholder="${content_apply_email_placeholder}" />
</div>
<div class="col-12">
<textarea id="apply-message" placeholder="${content_apply_message_placeholder}" maxlength="500"></textarea>
</div>
<div id="apply-send-box" class="col-6">
<a id="apply-send" class="disabled" href="#">${content_apply_send}</a>
</div>
<div id="apply-count-box" class="col-6">
<span id="apply-count">0</span>/500
</div>
</div>
</div>

View File

@ -1,4 +1,6 @@
<div class="row">
${_content_imgs}
${_content_details}
<div class="container">
<div class="row">
${_content_imgs}
${_content_details}
</div>
</div>

View File

@ -33,7 +33,7 @@
</head>
<body>
<!-- MENU -->
<nav id="menu" class="navbar navbar-expand-lg navbar-light fixed-top">
<nav id="menu" class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -47,41 +47,45 @@
</nav>
<!-- HOME -->
<section id="home" class="fullpage">
<h1><img src="./files/img/WECKER_Logo.png" alt="${page_title}" style="width: 50%; margin-left: auto; margin-right: auto;"/></h1>
<h4>${page_statement}</h4>
<a href="#philosophy"><i class="fa fa-angle-down"></i></a>
<div class="container">
<h1><img src="./files/img/WECKER_Logo.png" alt="${page_title}" style="width: 100%; margin-left: auto; margin-right: auto;"/></h1>
<h4>${page_statement}</h4>
<a href="#philosophy"><i class="fa fa-angle-down"></i></a>
</div>
</section>
<!-- CONTENT -->
<section id="content">
<div id="philosophy">
<h2>${content_philosophy_heading}</h2>
${content_philosophy}
<div id="philosophy" class="fullpage">
<div>
<h2>${content_philosophy_heading}</h2>
<span>${content_philosophy}</span>
</div>
</div>
<div id="persons">
${_content_persons}
</div>
<div id="projects">
<h2>${content_projects_heading}</h2>
${content_projects}
<span>${content_projects}</span>
${_content_projects}
</div>
<div id="apply">
<h2>${content_apply_heading}</h2>
${content_apply}
<span>${content_apply}</span>
${_content_apply}
</div>
</section>
<!-- FOOTER -->
<section id="footer">
<div class="container-fluid">
<div class="container">
<div class="row" id="footer-links">
<div class="col-lg-3">
<div id="footer-logo">
<img src="./files/img/WECKER_Logo.png" alt="${footer_logo}" style="width: 100%;"/>
</div>
<div id="footer-nl">
<input id="footer-nl-email" name="email" type="text" placeholder="${footer_newsletter_email_placeholder}"/>
<input id="footer-nl-subscribe" name="submit" type="submit" value="${footer_newsletter_email_value}"/>
<input id="footer-nl-email" class="form-control" name="email" type="text" placeholder="${footer_newsletter_email_placeholder}"/>
<input id="footer-nl-subscribe" class="btn" name="submit" type="submit" value="${footer_newsletter_email_value}"/>
</div>
</div>
<div class="col-lg-3">
@ -107,7 +111,9 @@
</div>
</div>
</div>
<div class="row" id="footer-bottomline">
</div>
<div class="container-fluid" id="footer-bottomline">
<div class="row">
<div class="col-12">
${footer_bottomline}
</div>

View File

@ -3,7 +3,7 @@
<div>
<img src="./files/persons/${img}" class="rounded-circle" alt="${name}">
</div>
<div>
<div class="person-img-name">
${name} <i class="fa fa-angle-down"></i>
</div>
</a>

View File

@ -3,7 +3,7 @@
<div>
<img src="./files/projects/${img}" class="rounded" alt="${name}">
</div>
<div>
<div class="project-img-name">
${name} <i class="fa fa-angle-down"></i>
</div>
</a>