added donation form divs

added some divs to donation form and changed overal template somewhat of the donation (step 2) page.
openknowledgebe · Apr 12, 2016 · 7567405 · 7567405
1 parent 20f8338
commit 7567405
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 67 deletions.
diff --git a/resources/assets/sass/_mediaqueries.scss b/resources/assets/sass/_mediaqueries.scss
@@ -3,12 +3,20 @@
  have the same breakpoints as Twitter Bootstrap does, considering we use Twitter Bootstrap.
 */
 
+img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
 
-@media (min-width : 1200px) {
+@media (min-width : 1200px){
 
  #donation__start-form{
+ .about:nth-of-type(1) {
+ padding-top: 0;
+ }
+
  .about{
- padding-top:0;
  padding-bottom:0;
  }
  }
@@ -22,6 +30,7 @@
  }
  .about {
  padding-top: 40px;
+ padding-bottom:0;
  }
 
  //Donation Start Page - Form - col-md-10
@@ -39,6 +48,7 @@
  }
  .about {
  padding-top: 40px;
+ padding-bottom:0;
  }
 
  //Donation Start Page - Form - col-md-10
@@ -50,6 +60,7 @@
 
 @media (min-width : 480px) and (max-width: 767px) {
 
+ //Homepage
  .goals .numbers-container {
  height:500px !important;
  }
@@ -61,6 +72,7 @@
  }
  .about{
  padding-top: 40px;
+ padding-bottom:0;
  }
 
  //Donation Start Page - Form - col-md-10
@@ -70,10 +82,12 @@
  }
 }
 
-@media (min-width : 320px) and (max-width: 479px) {
-
- .goals .numbers-container {
- height:500px !important;
+@media (min-width : 320px) and (max-width: 479px) {
+ // height for container goals must be given so that it overwrites the standard height
+ .goals {
+ .numbers-container {
+ height: 500px !important;
+ }
  }
 
 
@@ -83,6 +97,7 @@
  }
  .about{
  padding-top: 40px;
+ padding-bottom:0;
  }
 
  //Donation Start Page - Form - col-md-10

diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -3,7 +3,6 @@
 @import "config";
 @import "colors";
 @import "setup";
-@import "mediaqueries";
 
 // Libraries
 @import "bootstrap";
@@ -32,4 +31,7 @@
 @import "components/lib/jquery.datetimepicker";
 
 // Sticky footer
-@import "stickyfooter";
+@import "stickyfooter";
+
+//media queries
+@import "mediaqueries";
diff --git a/resources/assets/sass/pages/_donation.scss b/resources/assets/sass/pages/_donation.scss
@@ -1,11 +1,11 @@
-#donation__start{
+#donation__start, #donation__details{
  margin-bottom: 0;
 
- #donation__start-title {
+ #donation__start-title, #donation__details-title{
  padding:50px 7% 50px 7%;
  }
 
- #donation__start-options {
+ #donation__start-options, #donation__details-options{
  padding:7%;
  background-color: $color-gray;
  }

diff --git a/resources/views/front/donation/user.blade.php b/resources/views/front/donation/user.blade.php
@@ -3,85 +3,89 @@
 @section('title', trans('generic.donation_detail'))
 
 @section('content')
- <div class="project">
+ <div class="project" id="donation__details">
  <!-- Banner -->
  <div class="home-banner"
  @if (file_exists(public_path() . "/project/banner.png")) style="background-image: url('{{ URL::to("/project/banner.png") }}');" @endif>
  </div>
  <!-- Donation page -->
- <div class="container">
+ <div class="container-fluid" id="donation__details-title">
  <div class="row">
  <div class="col-md-12">
  <!-- Donation header block -->
  <h1>{{ trans('donation.confirm.title') }}</h1>
- <p>{{ trans('donation.confirm.description') }}</p>
+ <p>{{ trans('donation.you_pledged') }}</p>
+ @foreach ($types as $type)
+ @if (is_array($type))
+ <strong>{{ trans('backoffice.' . $type['kind']) }}</strong><br/>
+ {{ $type['amount'] }}x {{ $type['name'] }}<br/>
+ @endif
+ @endforeach
+ @if (isset($types['currency']))
+ <p>{{ trans('donation.money_pledge') }} €{{ $types['currency'] }}</p>
+ @endif
  <hr/>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6 col-md-push-3">
- <p>{{ trans('donation.you_pledged') }}</p>
- @foreach ($types as $type)
- @if (is_array($type))
- <strong>{{ trans('backoffice.' . $type['kind']) }}</strong><br/>
- {{ $type['amount'] }}x {{ $type['name'] }}<br/>
- @endif
- @endforeach
- @if (isset($types['currency']))
- <p>{{ trans('donation.money_pledge') }} €{{ $types['currency'] }}</p>
- @endif
+ <p>{{ trans('donation.confirm.description') }}</p>
  <hr/>
  </div>
  </div>
+ </div>
+ <div class="container-fluid" id="donation__details-options">
  <div class="row">
- <div class="col-md-6 col-md-push-3">
+ <div class="col-md-8 col-md-push-2">
 
  @if($errors->any())
  <div class="alert alert-danger" role="alert">
  <strong>{{ trans('setup.generic.oops') }}</strong>
  {{$errors->first()}}
  </div>
  @endif
-
+ <div class="col-md-12">
  <form method="POST" action="{{ URL::route('donate::confirm') }}" enctype="multipart/form-data">
  <input name="_method" type="hidden" value="POST">
  <input name="_pledge" type="hidden" value="{{ json_encode($types) }}">
 
  {{ csrf_field() }}
+ <div class="row">
+ <div class="col-lg-6 col-md-6 col-sm-12">
+ <div class="form-group">
+ <label for="firstName">
+ {{ trans('donation.user.first_name.title') }}
+ </label>
+ <input type="text" class="form-control" name="firstName"
+ placeholder="{{ trans('donation.user.first_name.placeholder') }}"
+ value=
+ "<?php
+ if (isset($input['firstName'])) {
+ echo $input['firstName'];
+ }
+ ?>"
+ maxlength="255">
+ <span id="helpBlock" class="help-block">
+ {{ trans('donation.user.first_name.info') }}
+ </span>
+ </div>
+ </div>
 
- <div class="form-group">
- <label for="firstName">
- {{ trans('donation.user.first_name.title') }}
- </label>
- <input type="text" class="form-control" name="firstName"
- placeholder="{{ trans('donation.user.first_name.placeholder') }}"
- value=
- "<?php
- if (isset($input['firstName'])) {
- echo $input['firstName'];
- }
- ?>"
- maxlength="255">
- <span id="helpBlock" class="help-block">
- {{ trans('donation.user.first_name.info') }}
- </span>
- </div>
- <div class="form-group">
- <label for="lastName">
- {{ trans('donation.user.last_name.title') }}
- </label>
- <input type="text" class="form-control" name="lastName"
- placeholder="{{ trans('donation.user.last_name.placeholder') }}"
- value=
- "<?php
- if (isset($input['lastName'])) {
- echo $input['lastName'];
- }
- ?>"
- maxlength="255">
- <span id="helpBlock" class="help-block">
- {{ trans('donation.user.last_name.info') }}
- </span>
+ <div class="col-lg-6 col-md-6 col-sm-12">
+ <div class="form-group">
+ <label for="lastName">
+ {{ trans('donation.user.last_name.title') }}
+ </label>
+ <input type="text" class="form-control" name="lastName"
+ placeholder="{{ trans('donation.user.last_name.placeholder') }}"
+ value=
+ "<?php
+ if (isset($input['lastName'])) {
+ echo $input['lastName'];
+ }
+ ?>"
+ maxlength="255">
+ <span id="helpBlock" class="help-block">
+ {{ trans('donation.user.last_name.info') }}
+ </span>
+ </div>
+ </div>
  </div>
  <div class="form-group">
  <label for="email">
@@ -113,6 +117,7 @@
 
  <button type="submit" class="btn4 pull-right">{{ trans('donation.buttons.confirm') }}</button>
  </form>
+ </div>
  </div>
  </div>
  </div>

diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
@@ -2,10 +2,6 @@
  <div class="container">
  <div class="row">
  <div class="col-md-3">
- <h6>nieuwsbrief</h6>
- <input type="text" placeholder="nieuwsbrief" value="nieuwsbrief">
- <span class="newsletter__textbox-icon">-></span>
-
  @if (property_exists($settings, 'legal'))
  <div class="small-legal">
  <strong>{{ $settings->legal->org }}</strong><br/>