From 20f83388c248d60515e8bca354e2de23f1e53ba8 Mon Sep 17 00:00:00 2001 From: wesobi Date: Tue, 12 Apr 2016 09:26:17 +0200 Subject: [PATCH] 11/04/2016 - Styling changes Styling changes to make things more responsive. --- .gitignore | 13 ++- resources/assets/sass/_mediaqueries.scss | 94 +++++++++++++++++++ resources/assets/sass/app.scss | 2 + resources/assets/sass/components/_form.scss | 4 + resources/assets/sass/components/_icons.scss | 2 +- resources/assets/sass/pages/_donation.scss | 12 +++ resources/assets/sass/pages/_home.scss | 3 +- resources/assets/sass/partials/_footer.scss | 5 + .../views/front/donation/start.blade.php | 19 ++-- resources/views/front/home.blade.php | 22 +++-- resources/views/partials/footer.blade.php | 4 + 11 files changed, 158 insertions(+), 22 deletions(-) create mode 100644 resources/assets/sass/_mediaqueries.scss create mode 100644 resources/assets/sass/pages/_donation.scss diff --git a/.gitignore b/.gitignore index 1e0e8b4..7780007 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,15 @@ Homestead.json /vagrant/Vagrantfile /vagrant/.vagrant /vagrant/puphpet -/vagrant/html \ No newline at end of file +/vagrant/html +.idea/blade.xml + +.idea/copyright/profiles_settings.xml + +.idea/modules.xml + +.idea/workspace.xml + +.idea/vcs.xml + +.idea/W4P.iml diff --git a/resources/assets/sass/_mediaqueries.scss b/resources/assets/sass/_mediaqueries.scss new file mode 100644 index 0000000..3268207 --- /dev/null +++ b/resources/assets/sass/_mediaqueries.scss @@ -0,0 +1,94 @@ +/* + These are the media queries in which we include all our responsive code if it's necessary. Please note that these + have the same breakpoints as Twitter Bootstrap does, considering we use Twitter Bootstrap. +*/ + + +@media (min-width : 1200px) { + + #donation__start-form{ + .about{ + padding-top:0; + padding-bottom:0; + } + } +} + +@media (min-width : 992px) and (max-width: 1199px) { + + #donation__start-form { + .about:nth-of-type(1) { + padding-top: 0; + } + .about { + padding-top: 40px; + } + + //Donation Start Page - Form - col-md-10 + .donation__form__item-margin-top { + margin-top: 40px; + } + } +} + +@media (min-width : 768px) and (max-width: 991px) { + + #donation__start-form { + .about:nth-of-type(1) { + padding-top: 0; + } + .about { + padding-top: 40px; + } + + //Donation Start Page - Form - col-md-10 + .donation__form__item-margin-top { + margin-top: 40px; + } + } +} + +@media (min-width : 480px) and (max-width: 767px) { + + .goals .numbers-container { + height:500px !important; + } + + + #donation__start-form { + .about:nth-of-type(1) { + padding-top:0; + } + .about{ + padding-top: 40px; + } + + //Donation Start Page - Form - col-md-10 + .donation__form__item-margin-top { + margin-top:40px; + } + } +} + +@media (min-width : 320px) and (max-width: 479px) { + + .goals .numbers-container { + height:500px !important; + } + + + #donation__start-form { + .about:nth-of-type(1) { + padding-top:0; + } + .about{ + padding-top: 40px; + } + + //Donation Start Page - Form - col-md-10 + .donation__form__item-margin-top { + margin-top:40px; + } + } +} + diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 4eb8fa5..92851ec 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -3,6 +3,7 @@ @import "config"; @import "colors"; @import "setup"; +@import "mediaqueries"; // Libraries @import "bootstrap"; @@ -11,6 +12,7 @@ @import "pages/home"; @import "pages/post"; @import "pages/previous"; +@import "pages/donation"; // Components @import "components/form"; diff --git a/resources/assets/sass/components/_form.scss b/resources/assets/sass/components/_form.scss index 47ecfaa..d89bebb 100644 --- a/resources/assets/sass/components/_form.scss +++ b/resources/assets/sass/components/_form.scss @@ -28,4 +28,8 @@ input[type=file]{ font-size: 14px; font-weight: normal; } +} + +#donation__start-form .row { + margin-bottom:40px; } \ No newline at end of file diff --git a/resources/assets/sass/components/_icons.scss b/resources/assets/sass/components/_icons.scss index c471064..2a482ff 100644 --- a/resources/assets/sass/components/_icons.scss +++ b/resources/assets/sass/components/_icons.scss @@ -5,7 +5,7 @@ i.icon { height: 23px; background-size: contain; display: inline-block; - margin: 0; + margin:15px 0 0 0; padding: 0; background-repeat: no-repeat; background-position: center; diff --git a/resources/assets/sass/pages/_donation.scss b/resources/assets/sass/pages/_donation.scss new file mode 100644 index 0000000..099e09f --- /dev/null +++ b/resources/assets/sass/pages/_donation.scss @@ -0,0 +1,12 @@ +#donation__start{ + margin-bottom: 0; + + #donation__start-title { + padding:50px 7% 50px 7%; + } + + #donation__start-options { + padding:7%; + background-color: $color-gray; + } +} diff --git a/resources/assets/sass/pages/_home.scss b/resources/assets/sass/pages/_home.scss index 391712f..28e3fda 100644 --- a/resources/assets/sass/pages/_home.scss +++ b/resources/assets/sass/pages/_home.scss @@ -78,8 +78,7 @@ .meta { position: relative; z-index: 0; - padding: 38px 0; - padding-right: 34px; + padding: 38px 34px; &:first-child{ diff --git a/resources/assets/sass/partials/_footer.scss b/resources/assets/sass/partials/_footer.scss index b06cd8c..902de20 100644 --- a/resources/assets/sass/partials/_footer.scss +++ b/resources/assets/sass/partials/_footer.scss @@ -28,5 +28,10 @@ footer { .gray { color: #8A8A8A; } + + .newsletter__textbox-icon { + padding:3px 5px; + background-color:$color-primary; + } } diff --git a/resources/views/front/donation/start.blade.php b/resources/views/front/donation/start.blade.php index 4bd73cf..e2664ef 100644 --- a/resources/views/front/donation/start.blade.php +++ b/resources/views/front/donation/start.blade.php @@ -3,20 +3,19 @@ @section('title', trans('generic.donate')) @section('content') -
+
@if (!$donationsDisabled) -
+
-
+

{{ trans('donation.title') }}

{{ trans('donation.description') }}

-
@if($errors->any()) @@ -27,15 +26,17 @@ @endif
+
+
-
+ {{ csrf_field() }} @if ($project->currency > 0)
-
+
{{-- Radial progress currency --}} @if ($project->currency > 0 && count($donationTypes) > 0)
@@ -47,7 +48,7 @@ @endif {{-- End radial progress currency --}}
-
+
{{-- Start of reward tiers --}}

{{ trans('donation.select_tier') }}

@if ($project->currency > 0 && count($tiers) > 0) @@ -77,7 +78,7 @@ class="form-control" id="currency" name="currency" @endif @foreach ($donationTypes as $donationKind => $donationType)
-
+
{{-- Radial progress --}} @if ($donationKind != "currency" && isset($donationTypes[$donationKind]) && count($donationTypes[$donationKind]) > 0)
@@ -89,7 +90,7 @@ class="form-control" id="currency" name="currency" @endif {{-- End radial progress --}}
-
+
@foreach ($donationType as $key => $option)
{{ $option['name'] }}
diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php index 422f11a..e4adeaa 100644 --- a/resources/views/front/home.blade.php +++ b/resources/views/front/home.blade.php @@ -18,12 +18,12 @@ {{-- Goals --}}
-
+
- {{-- Goals left column (with progress) --}} -
+ {{-- Gdoals left column (with progress) --}} +
-

{{ $project->title }}

+

{{ $project->title }}

{{ trans('home.projectby') }} @@ -68,20 +68,20 @@
{{-- Goals right column --}} -
+
@if ($project->currency > 0) -
+
€{{ $contributed }}
{{ trans('home.of') }} €{{ round($project->currency) }}
@endif -
+
{{ $donorCount }}
{{ trans('home.donors') }}
-
+
@if ($hoursleft < 24) @if ($hoursleft <= 2) {{ $minutesleft }}
@@ -110,11 +110,15 @@ {{-- About this company --}}
+
+
+

{{ trans('home.aboutproject') }}

+
+
{{-- About video --}}
-

{{ trans('home.aboutproject') }}


{{-- Based on the provider, the output differs --}} diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 4a10685..e9fdccd 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -2,6 +2,10 @@
+
nieuwsbrief
+ + + @if (property_exists($settings, 'legal'))
{{ $settings->legal->org }}