From 774f4440b9841675e2c88a72f13df6af9e824913 Mon Sep 17 00:00:00 2001 From: TSluizeman Date: Fri, 6 Jul 2018 12:17:29 +0200 Subject: [PATCH] styling footer plus contact form --- .../noorderzon/controller/FilterOpGenre.java | 9 + src/main/resources/static/css/style.css | 82 +- src/main/resources/static/footer.html | 37 +- src/main/resources/static/header.html | 1 - src/main/resources/static/include/mail.php | 27 + src/main/resources/static/index.html | 44 +- src/main/resources/static/js/functions.js | 6 + .../noorderzon/controller/FilterOpGenre.class | Bin 1593 -> 1593 bytes .../controller/ZoekOpVoorstellingNaam.class | Bin 0 -> 1678 bytes target/classes/static/css/style.css | 133 +- target/classes/static/footer.html | 37 +- target/classes/static/header.html | 3 +- target/classes/static/include/mail.php | 29 + target/classes/static/index.html | 21 +- target/classes/static/js/zoekFormulier.js | 90 +- target/classes/static/programma-invoer.html | 8 +- .../{zoek-formulier.html => programma.html} | 63 +- .../web (1)/bootstrap/css/bootstrap-grid.css | 2363 ---- .../bootstrap/css/bootstrap-grid.min.css.map | 25 - .../bootstrap/css/bootstrap-reboot.css.map | 20 - .../css/bootstrap-reboot.min.css.map | 19 - .../web (1)/bootstrap/css/bootstrap.css | 9637 ----------------- .../bootstrap/css/bootstrap.min.css.map | 157 - .../bootstrap/js/bootstrap.bundle.js.map | 606 -- .../bootstrap/js/bootstrap.bundle.min.js.map | 808 -- .../static/web (1)/bootstrap/js/bootstrap.js | 3896 ------- .../web (1)/bootstrap/js/bootstrap.min.js | 7 - 27 files changed, 482 insertions(+), 17646 deletions(-) create mode 100644 src/main/resources/static/include/mail.php create mode 100644 target/classes/nl/noorderzon/controller/ZoekOpVoorstellingNaam.class create mode 100644 target/classes/static/include/mail.php rename target/classes/static/{zoek-formulier.html => programma.html} (56%) delete mode 100644 target/classes/static/web (1)/bootstrap/css/bootstrap-grid.css delete mode 100644 target/classes/static/web (1)/bootstrap/css/bootstrap-grid.min.css.map delete mode 100644 target/classes/static/web (1)/bootstrap/css/bootstrap-reboot.css.map delete mode 100644 target/classes/static/web (1)/bootstrap/css/bootstrap-reboot.min.css.map delete mode 100644 target/classes/static/web (1)/bootstrap/css/bootstrap.css delete mode 100644 target/classes/static/web (1)/bootstrap/css/bootstrap.min.css.map delete mode 100644 target/classes/static/web (1)/bootstrap/js/bootstrap.bundle.js.map delete mode 100644 target/classes/static/web (1)/bootstrap/js/bootstrap.bundle.min.js.map delete mode 100644 target/classes/static/web (1)/bootstrap/js/bootstrap.js delete mode 100644 target/classes/static/web (1)/bootstrap/js/bootstrap.min.js diff --git a/src/main/java/nl/noorderzon/controller/FilterOpGenre.java b/src/main/java/nl/noorderzon/controller/FilterOpGenre.java index f550ba5..3f43b19 100644 --- a/src/main/java/nl/noorderzon/controller/FilterOpGenre.java +++ b/src/main/java/nl/noorderzon/controller/FilterOpGenre.java @@ -8,12 +8,21 @@ import javax.persistence.TypedQuery; import java.util.List; +/* + * Facilitates function for query 'Find Artists on Genre' where Genre is chosen on webpage and query is done on database via Spring boot + * @author Onze Marike + * @version 1001.1 + * @param /voorstellingen the param for webpage + * @return Artiests matching the Genre of choice + * */ + @RestController public class FilterOpGenre{ @PersistenceContext private EntityManager em; + @RequestMapping(value = "/voorstellingen") public List zoekOpGenre( @RequestParam(value = "artiestgenre") String genre) { diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index 474dd94..7e4d31d 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -77,6 +77,7 @@ h3 { } .container { min-height: 80vh; + max-height: min-content; } /* -- Intro page -- */ @@ -153,15 +154,15 @@ h3 { /* -- Top menu -- */ .top-bar { - padding: 5px 20px; - vertical-align: bottom; + padding: 10px 20px; + vertical-align: baseline; background-color: #eeeeee; box-shadow: 0 0 2px 2px #aaaaaa; position: fixed; width: 100vw; top: 0; z-index: 15; - height: 30px; + height: min-content; } .top-bar img { @@ -171,10 +172,9 @@ h3 { .top-menu { float: right; color: #0acc66; - vertical-align: bottom; position: absolute; - bottom: 0; right: 20px; + display: inline-block; } @media (max-width: 767px) { @@ -230,7 +230,7 @@ h3 { .section-img-3 { vertical-align: center; - margin-top: -25px; + margin-top: -50px; } .section-img-3 img { @@ -315,7 +315,7 @@ h3 { /* -- Section -- */ .section { - height: 550px; + min-height: 550px; } @media (max-width: 991px) { @@ -352,7 +352,7 @@ h3 { /* -- Section items -- */ .items { margin: auto; - height: 320px; + height: min-content; z-index: 2; } @@ -539,11 +539,11 @@ button.put-button { position: relative; bottom: 0; left: 0; - min-height: 180px; + max-height: min-content; width: 100vw; background-color: rgba(74, 74, 74, 0.9); color: #eee; - margin-top: -100px; + padding: 50px 30px 50px 30px; } #fill-page { @@ -621,3 +621,65 @@ button.put-button { .genre-radio li { display: inline; } + + +/* contact Formulier + */ +#formContact{ + width: auto; + padding: 20px; + position: relative; +} + +#formContact input{ + height: 45px; + border-radius: 5px; + background-color: #ffffff; + border: solid 1px #eeeeee; + width: 100%; + display:block; +} + +#formContact label{ + font-family: Europa, sans-serif; + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2em; + letter-spacing: normal; + color: rgba(6, 6, 6, 0.4); + display: block; + padding: 10px 0; +} + +#formContact textarea{ + display: block; + border: solid 1px #eeeeee; + width: 100%; + border-radius: 5px; +} + +.footer h5{ + font-size: 22px; + font-weight: bold; + text-decoration: underline; + margin-bottom: 10px; +} + +form button{ + border: 2px solid #0acc66; + color: #0acc66; + padding: 15px; + width: auto; + display: inline-block; + border-radius: 5px; + +} + +#bedanktForm{ + visibility: hidden; + min-height: 200px; + padding: 50px 30px; + border: 2px solid #0acc66 +} \ No newline at end of file diff --git a/src/main/resources/static/footer.html b/src/main/resources/static/footer.html index ff9d806..c6aa211 100644 --- a/src/main/resources/static/footer.html +++ b/src/main/resources/static/footer.html @@ -1,8 +1,33 @@ \ No newline at end of file diff --git a/src/main/resources/static/header.html b/src/main/resources/static/header.html index 694da92..0247bf5 100644 --- a/src/main/resources/static/header.html +++ b/src/main/resources/static/header.html @@ -4,7 +4,6 @@
diff --git a/src/main/resources/static/include/mail.php b/src/main/resources/static/include/mail.php new file mode 100644 index 0000000..dd8efa3 --- /dev/null +++ b/src/main/resources/static/include/mail.php @@ -0,0 +1,27 @@ +"; +$headers[] = "Reply-To: Noorderzon <{$from}>"; +//$headers[] = "Subject: {$subject}"; +$headers[] = "X-Mailer: PHP/".phpversion(); + +mail($to, $subject, $content, implode("\r\n", $headers), "-f".$from ); + +//header('Location: http://localhost:8888/src/main/resources/static/index.html); +?> \ No newline at end of file diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index b147f8c..67b7a0c 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -83,11 +83,26 @@

contact

-
    -
  • Vul hier
  • -
  • het contact-
  • -
  • formulier in
  • -
+
+ + + + + + +
+
+

Je contact bericht is verstuurd.

+

Don't call us, we call you!

+
@@ -100,6 +115,25 @@
+ \ No newline at end of file diff --git a/src/main/resources/static/js/functions.js b/src/main/resources/static/js/functions.js index 48f7473..8b02e30 100644 --- a/src/main/resources/static/js/functions.js +++ b/src/main/resources/static/js/functions.js @@ -17,3 +17,9 @@ $(document).ready(function(){ animate('zoomOutUp'); }); }); + +$('.buttonNeemContact').click(function(){ + $('#bedanktForm').show('fast'); + $('#formContact').hide('fast'); +}); + diff --git a/target/classes/nl/noorderzon/controller/FilterOpGenre.class b/target/classes/nl/noorderzon/controller/FilterOpGenre.class index 0c31048d33a84e6e03046d87450f0b1f5d82f754..5dc8afa64b8a4f030a9013a22555903e095bf38e 100644 GIT binary patch delta 27 icmdnVvy*2-EGwhPvZXfC&totb@RXXe@Y`Rn@+01H^@Lm#Gk(TnLG%p`HQAG5gEgSmci z+_%eo5)YDi$Pkk?hOzud(GZ__U25O)jZ_uMbILg8pdgf}O1;c*wHT15CQFX*lwJ8; zDbEPwc*M zuOi%%(2m`=lnL{}pTylRsxpFE+X?sC8=k2L2KcfJ>TTWF86KE>h+CL=q@5qaJPgl8L zx3zh%MNRH|dYA9ZGA}!7hl}I>^P=1fsHz1~uiH8@bTxz<*uL^cTPvhu7>|-@Q&?al zb%afi|2J|7Lvj1Iyg*mvs$(fM(wPi%wv`P3lbvrYftwUtPT?GeQs_sDVS6i=&t?Lfu0N0fDi@3$UY zbm~N2&*+~~PwWgSUz%eEF}(PD%w{TQ2OX$NQv`I7l8j{6%r~$vp*c;fbq2X#pw$A911{ncNtznCj6`^NA94DC zn=@Y#OUKiRBXq@4m`!)zJwh^$H?v3RVfaigaah>F(0!QX75c7)@R=q=3!cEpa+Sgi zQiy99q5F=~NqdQ=<~nI^kS0c+Hm^alWauAz2j*iO6V}@%HEESTp~Y}3^uK*vhdaP; DM;qd| literal 0 HcmV?d00001 diff --git a/target/classes/static/css/style.css b/target/classes/static/css/style.css index dc29efa..40ecaf7 100644 --- a/target/classes/static/css/style.css +++ b/target/classes/static/css/style.css @@ -59,7 +59,7 @@ table { /* --------------- reset CSS - end */ -body, button { +body { font-family: Averta, sans-serif; font-size: 20px; color: #4a4a4a; @@ -73,10 +73,11 @@ h2 { h3 { font-size: 30px; - margin: 0 0 0 -10px; + margin: 0 0 10px -10px; } .container { min-height: 80vh; + max-height: min-content; } /* -- Intro page -- */ @@ -153,15 +154,15 @@ h3 { /* -- Top menu -- */ .top-bar { - padding: 5px 20px; - vertical-align: bottom; + padding: 10px 20px; + vertical-align: baseline; background-color: #eeeeee; box-shadow: 0 0 2px 2px #aaaaaa; position: fixed; width: 100vw; top: 0; z-index: 15; - height: 30px; + height: min-content; } .top-bar img { @@ -171,10 +172,9 @@ h3 { .top-menu { float: right; color: #0acc66; - vertical-align: bottom; position: absolute; - bottom: 0; right: 20px; + display: inline-block; } @media (max-width: 767px) { @@ -275,7 +275,7 @@ h3 { @media (max-width: 991px) { .section-title-3 { - background-color: rgba(50, 50, 50, 0.2); + background-color: rgba(50, 50, 50, 0.5); left: 0; top: 0; width: auto; @@ -315,7 +315,7 @@ h3 { /* -- Section -- */ .section { - height: 550px; + min-height: 550px; } @media (max-width: 991px) { @@ -352,7 +352,7 @@ h3 { /* -- Section items -- */ .items { margin: auto; - height: 320px; + height: min-content; z-index: 2; } @@ -493,14 +493,31 @@ h3 { } .search-form button { + background-color: #4a4a4a; + cursor: pointer; + color: #fff; + border-radius: 4px; +} + +button.put-button { text-align: center; - position: absolute; - width: 30%; + position: static; + width: 35%; +/ / margin-top: 3 px; + margin: 10px 10% auto 65%; + color: #fff; border-radius: 4px; - background-color: #9b9b9b; + background-color: #4a4a4a; cursor: pointer; + float: left; } +.search-form button { + +} + + + @media (max-width: 767px ) { .search-form button { width: fit-content; @@ -522,11 +539,11 @@ h3 { position: relative; bottom: 0; left: 0; - min-height: 180px; + max-height: min-content; width: 100vw; background-color: rgba(74, 74, 74, 0.9); color: #eee; - margin-top: -100px; + padding: 50px 30px 50px 30px; } #fill-page { @@ -547,28 +564,38 @@ h3 { white-space: nowrap; } -.section-table td { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 16px; +.voorstellingen th { + font-size: 20px; } -.section-table div { - padding: 0; +@media (max-width: 992px) { + .voorstellingen th { + font-size: 17px; + } + + .voorstellingen td { + font-size: 15px; + } } -.col-lg-2 th, tr, table, td { - border-bottom: 2px solid black; - width: 100%; +.voorstellingen td { + border-bottom: 0px solid #9b9b9b; text-indent: 10px; } -.col-lg-2 td, .col-lg-3 td { - border-bottom: 2px solid gray; - text-indent: 0; - padding: 10px; - font-size: 16px; +.voorstellingen th { + background-color: rgba(10, 204, 102, 0.8); + text-indent: 10px; + color: #262626; +} + +.voorstellingen tbody tr:nth-child(even) { + background-color: rgba(10, 204, 102, 0.5); +} + +.voorstellingen tbody tr:nth-child(odd) { + background-color: rgba(155, 155, 155, 0.5); + color: #4a4a4a; } .col-tijdstip { @@ -591,3 +618,49 @@ h3 { width: 15%; } +.genre-radio li { + display: inline; +} + + +/* button contact Formulier + */ +#formContact{ + width: auto; + padding: 20px; + position: relative; +} + +#formContact input{ + height: 45px; + border-radius: 5px; + background-color: #ffffff; + border: solid 1px #eeeeee; + width: 100%; + display:block; +} + +#formContact label{ + font-family: Europa, sans-serif; + font-size: 16px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + line-height: 2em; + letter-spacing: normal; + color: #222222; + display: block; + padding: 10px 0; +} + +#formContact textarea{ + display: block; + border: solid 1px #eeeeee; + width: 100%; + border-radius: 5px; +} + +footer h5{ + font-size: 18px; + font-weight: bold; +} \ No newline at end of file diff --git a/target/classes/static/footer.html b/target/classes/static/footer.html index ff9d806..adecfce 100644 --- a/target/classes/static/footer.html +++ b/target/classes/static/footer.html @@ -1,8 +1,33 @@ \ No newline at end of file diff --git a/target/classes/static/header.html b/target/classes/static/header.html index 7ba902a..0247bf5 100644 --- a/target/classes/static/header.html +++ b/target/classes/static/header.html @@ -4,8 +4,7 @@ diff --git a/target/classes/static/include/mail.php b/target/classes/static/include/mail.php new file mode 100644 index 0000000..9ff8dd1 --- /dev/null +++ b/target/classes/static/include/mail.php @@ -0,0 +1,29 @@ +"; +$headers[] = "Reply-To: Noorderzon <{$from}>"; +//$headers[] = "Subject: {$subject}"; +$headers[] = "X-Mailer: PHP/".phpversion(); + +mail($to, $subject, $content, implode("\r\n", $headers), "-f".$from ); + + +header('Location: http://localhost/projectnooderzon?email=isverstuurd'); +?> \ No newline at end of file diff --git a/target/classes/static/index.html b/target/classes/static/index.html index b147f8c..2097b2f 100644 --- a/target/classes/static/index.html +++ b/target/classes/static/index.html @@ -83,11 +83,22 @@

contact

-
    -
  • Vul hier
  • -
  • het contact-
  • -
  • formulier in
  • -
+
+ + + + + + +
diff --git a/target/classes/static/js/zoekFormulier.js b/target/classes/static/js/zoekFormulier.js index 6d6aa87..ceb57ac 100644 --- a/target/classes/static/js/zoekFormulier.js +++ b/target/classes/static/js/zoekFormulier.js @@ -1,18 +1,33 @@ function loadShows() { -// var invoer = x; - jQuery.get('/allevoorstellingen', function (data) { + jQuery.get('/voorstellingen', function (data) { var shows = data; - /* - var $div = $('#message'); - var $ul = $('