Commit c5baf968 authored by dm141569's avatar dm141569 Committed by BZ

Styling

parent 65eb8531
......@@ -3,10 +3,10 @@
use Illuminate\Routing\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Response;
use DB;
use App\Event;
use App\Participant;
use DB;
/**
* Bug? Es wird die Version 5 verwendet, ist noch in Entwicklung
......@@ -34,8 +34,11 @@ class HomeController extends Controller {
{
// $events = DB::table('events')->get();
$date = date( 'Y-m-d', time() );
$events = Event::orderBy('date', 'asc')
->orderBy('time', 'asc')
->where( 'date', '>=', $date )
->get()
->groupBy('date');
......@@ -117,5 +120,15 @@ class HomeController extends Controller {
return 'false';
}
}
/**
* Get environment variable
*/
public function getEnv()
{
if( getEnv('APP_ENV') ) return getEnv('APP_ENV');
return false;
}
}
/**
* ********** Base **********
*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,300,700);
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #222222;
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.45em;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
/* IE, not valid, hasLayout
*display: inline;
*zoom: 1; */
}
html,
button,
input,
select,
textarea {
color: #222222;
}
embed,
iframe,
object,
video {
max-width: 100%; /* Make sure videos and embeds fit their containers. */
}
a,
a:link,
a:visited {
}
a:focus,
a:hover,
a:active {
}
a img {
border: none;
}
p {
margin: 1em;
}
img {
/** Responsive Images */
width: auto; /* IE 8 fix */
max-width: 100% !important;
height: auto;
border: none;
}
audio:not([controls]) {
display: none;
height: 0;
}
abbr {
cursor: help;
}
hr {
border: none;
border-top: 1px solid #CCCCCC;
}
input,
textarea {
outline: 0;
}
textarea {
max-width: 90%;
max-height: 320px;
resize: vertical;
overflow: auto;
vertical-align: top;
}
.browsehappy {
background-color: #FFF666;
color: #222222;
line-height: 3em;
text-align: center;
}
.browsehappy a {
color: #222222;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.btn {
min-width: 1.2em;
padding: 0.5em;
border-radius: 0.5em;
font-weight: normal;
text-align: center;
text-decoration: none;
}
.light {
border: 1px solid #FFFFFF;
color: #FFFFFF;
}
.dark {
border: 1px solid #222222;
color: #000000;
}
/**
* ********** Page Header **********
*/
#page-header {
width: 100%;
height: 45px;
margin: 0 auto;
padding: 0.55em 0;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: #2969B0;
box-shadow: 0 0 3px #333333;
color: #FFFFFF;
}
#page-header h1 {
margin: 0;
padding: 0;
letter-spacing: -0.05em;
line-height: 1.4em;
text-align: center;
}
.btn-head {
margin: 0 0.5em;
}
/**
* ********** Page Header **********
*/
main {
min-height: 100%;
margin-top: 58px;
/* margin-bottom: 252px; */
background-color: #FFFFFF;
}
/**
* ********** Create Meetup Form **********
*/
form {
background-color: #EFEFEF;
}
fieldset {
border: none;
}
legend {
margin: 0.75em 0 -0.3em -0.2em ;
font-size: 1.5em;
font-weight: bold;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 3em;
padding: 0.5em;
border: 1px solid #75706B;
border-radius: 7px;
}
input:focus {
border: 1px solid #3D8EB9;
}
input[type="submit"] {
margin: 1em 0;
background-color: #2969B0;
border: 1px solid #FFFFFF;
color: #FFFFFF;
}
label {
display: block;
margin-top: 1em;
line-height: 2em;
}
/**
* ********** Meetups **********
*/
#meetups h1 {
margin: 0;
padding: 0.2em;
padding-right: 1em;
background-color: #54ACD2;
color: #FFFFFF;
text-align: right;
}
#meetups h2 {
display: inline;
font-size: 1em;
}
#meetups span {
float: right;
display: inline-block;
color: #75706B;
font-size: 0.75em;
}
#meetups div {
padding: 1em;
border-bottom: 1px solid #EFEFEF;
}
#meetups div:last-child {
border-bottom: none;
}
/**
* ********** Meetup Details **********
*/
#content {
width: 95%;
margin: 5em auto 2em auto;
}
#details h1 {
font-size: 2em;
}
#details h2 {
font-size: 1.5em;
}
#details h1,
#details h2 {
border-bottom: 1px solid #CCCCCC;
line-height: 1.5em;
}
#details p {
margin: 0;
line-height: 1.75em;
}
.num {
font-weight: bold;
}
#details footer {
padding: 3em 0 4em 0;
text-align: center;
}
/**
* ********** Footer **********
*/
#page-footer {
position: relative;
/* position: fixed;
bottom: 0;
left: 0;
z-index: -1; */
width: 100%;
height: 250px;
padding-bottom: 2em;
background-color: #222222;
border-top: 2px solid #666666;
color: #AAAAAA;
}
#page-footer a {
color: #FFFFFF;
}
[title="MFG Logo"] {
width: 90px;
height: auto;
padding: 0.5em 0;
}
\ No newline at end of file
......@@ -7,6 +7,8 @@ SPORTMEETUPFH.Main = (function() {
/** Private */
var path = '/lv-moanw/initialprojekt/dev/public/'; // Without trailing slash
var path = '';
var data = null;
var currentEvent = null;
......@@ -17,13 +19,13 @@ SPORTMEETUPFH.Main = (function() {
function loadData() {
// Loading...
$.get('/', function(d) {
$.get(path + '/', function(d) {
data = d;
$.each(data, function(key, value) {
var section = $(document.createElement('section'));
var header = $(document.createElement('header'));
var h1 = $(document.createElement('h1'))
var section = $( document.createElement('section') );
var header = $( document.createElement('header') );
var h1 = $( document.createElement('h1') );
h1.append(key);
header.append(h1);
......@@ -32,13 +34,16 @@ SPORTMEETUPFH.Main = (function() {
$('#meetups').append(section);
$.each(value, function(k, v) {
var div = $(document.createElement('div'));
var div = $( document.createElement('div') );
var title = $( document.createElement('h2') );
var name = $( document.createElement('span') );
$(div).data('meetup-array-id', k);
$(div).data('meetup-date', v.date);
$(div).append(v.name);
$(div).append(v.sport);
$(div).append(v.time);
$(title).text(v.sport + ' um ' + v.time);
$(name).text('von ' + v.name);
$(div).append(title);
$(div).append(name);
$(div).bind('click', details);
......@@ -54,12 +59,12 @@ SPORTMEETUPFH.Main = (function() {
}
/**
* Create a new meetup
* Submit create a new meetup
*/
function createMeetup() {
// Validierung findet mit HTML5 statt, müsste eigentlich auch noch spearat mit JS und am Backend stattfinden, aus Zeitgründen wird das weggelassen.
$.post('/', {
$.post(path + '/', {
_token: $('#_token').val(),
name: $('#name').val(),
contact: $('#contact').val(),
......@@ -76,6 +81,7 @@ SPORTMEETUPFH.Main = (function() {
/** Quick and Dirty Solution */
$('#meetups').empty();
loadData();
$('#create-meetup').fadeOut();
return false;
}
......@@ -88,24 +94,41 @@ SPORTMEETUPFH.Main = (function() {
currentEvent = data[ $(this).data('meetup-date') ][ $(this).data('meetup-array-id') ];
/** Leider hier GET Request, schön wäre es gleich alle Daten mit einem Request zu laden */
$.get('/' + currentEvent.id + '/ps', function(d) {
$.get(path + '/' + currentEvent.id + '/ps', function(d) {
if (d.length == 0) {
$('#no-ps').show();
return false;
};
var num = 0;
$.each(d, function(key, value) {
var div = $(document.createElement('div'));
$(div).text(value.name + ' ' + value.contact);
$('#participants').append(div);
num++;
var p = $(document.createElement('p'));
$(p).text(
value.name
+ ' ('
+ value.contact
+ ')'
);
$('#participants')
.append(p)
.hide()
.slideDown();
});
$({ count: 0 }).animate({
count: num
}, {
duration: 500,
progress: function(animation, progress, remainingMs) {
return $('.num').text( Math.floor( parseInt(this.count) * progress ) );
}
});
});
var header = $(document.createElement('header'));
var h1 = $(document.createElement('h1'));
$('.sport').text(currentEvent.sport);
$('.name').text(currentEvent.name);
$('.date').text(currentEvent.date);
......@@ -115,16 +138,17 @@ SPORTMEETUPFH.Main = (function() {
$('#create-meetup').fadeOut('slow');
$('#meetups').fadeOut('slow', function() {
$('#details').fadeIn('slow');
animTop();
});
return false;
}
/**
* Attend to a meetup
* Submit form attend to a meetup
*/
function attendMeetup() {
$.post('/' + currentEvent.id, {
function attendMeetup() {
$.post(path + '/' + currentEvent.id, {
_token: $('#_a-token').val(),
id: currentEvent.id,
name: $('#a-name').val(),
......@@ -141,21 +165,49 @@ SPORTMEETUPFH.Main = (function() {
return false;
}
/**
* Plus button at the top right corner
*/
function btnCreate() {
$('#create-meetup').slideToggle();
return false;
}
/**
* Info button at the top left corner
*/
function btnInfo() {
$('#info').slideToggle();
return false;
}
/**
* Back button for attend view
*/
function btnBack() {
$('#details').fadeOut('slow', function() {
$('#create-meetup').fadeIn('slow');
$('#meetups').fadeIn('slow');
$('#attend').show();
$('#participants').empty();
$('#no-ps').hide();
$('.num').text('0');
animTop();
});
return false;
}
/**
* Scroll to top animation
*/
function animTop() {
$('html, body').animate({scrollTop: 0}, '500', 'swing');
return false;
}
/** Public */
......@@ -165,8 +217,7 @@ SPORTMEETUPFH.Main = (function() {
* Load data and call event listener setup
*/
init: function() {
$('#details').hide();
$('#no-ps').hide();
this.initContainer();
loadData();
......@@ -177,9 +228,22 @@ SPORTMEETUPFH.Main = (function() {
* Setup up event listeners
*/
initListeners: function() {
$('#btnCreate').click(btnCreate);
$('#btnInfo').click(btnInfo);
$('#create').submit(createMeetup);
$('#attend').submit(attendMeetup);
$('#btn-back').bind('click', btnBack);
$('[title="top"]').bind('click', animTop);
},
/**
* Hide and show different containers at startup
*/
initContainer: function() {
$('#info').hide();
$('#create-meetup').hide();
$('#details').hide();
$('#no-ps').hide();
}
}
}());
......
<!doctype html>
<html lang="de-AT" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>SportMeetupFH</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<header>
Sportmeetup FH, Mobile Forschungsgruppe macht Mobil, bei Arbeit, Sport und Spiel... HAHA WITZIG
<header id="page-header">
<a href="/" title="Info" id="btnInfo" class="align-left btn btn-head light">?</a>
<a href="/" title="Erstellen" id="btnCreate" class="align-right btn btn-head light">+</a>
<h1>Sportmeetup FH</h1>
</header>
<main role="main">
<section id="info">
<p>Text</p>
</section>
<section id="create-meetup">
<form id="create" method="post" action="/">
<fieldset>
......@@ -39,8 +46,8 @@
<label for="meetup-place">Treffpunkt:</label>
<input type="text" name="meetup-place" id="meetup-place" placeholder="Wo trefft ihr euch?" required="required"/>