11/04/2016 - Styling changes

Styling changes to make things more responsive.
openknowledgebe · Apr 12, 2016 · 20f8338 · dive-michiel · Apr 17, 2016 · 20f8338
1 parent 8637cd5
commit 20f8338
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,4 +18,15 @@ Homestead.json
 /vagrant/Vagrantfile
 /vagrant/.vagrant
 /vagrant/puphpet
-/vagrant/html
+/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
@@ -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
@@ -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
@@ -28,4 +28,8 @@ input[type=file]{
         font-size: 14px;
         font-weight: normal;
     }
+}
+
+#donation__start-form .row {
+    margin-bottom:40px;
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -3,20 +3,19 @@
 @section('title', trans('generic.donate'))
 
 @section('content')
-    <div class="project">
+    <div class="project" id="donation__start">
         <!-- Banner -->
         <div class="home-banner"
              @if (file_exists(public_path() . "/project/banner.png")) style="background-image: url('{{ URL::to("/project/banner.png") }}');" @endif>
         </div>
         @if (!$donationsDisabled)
         <!-- Donation page -->
-        <div class="container">
+        <div class="container-fluid" id="donation__start-title">
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-md-12" id>
                     <!-- Donation header block -->
                     <h1>{{ trans('donation.title') }}</h1>
                     <p>{{ trans('donation.description') }}</p>
-                    <hr/>
                 </div>
                 <div class="col-md-6 col-md-push-3">
                     @if($errors->any())
@@ -27,15 +26,17 @@
                     @endif
                 </div>
             </div>
+        </div>
+        <div class="container-fluid" id="donation__start-options">
             <div class="row">
                 <div class="col-md-12">
-                    <form method="POST" action="{{ URL::route('donate::details') }}" enctype="multipart/form-data">
+                    <form method="POST" action="{{ URL::route('donate::details') }}" enctype="multipart/form-data" id="donation__start-form">
                         <input name="_method" type="hidden" value="POST">
                         {{ csrf_field() }}
 
                         @if ($project->currency > 0)
                             <div class="row">
-                                <div class="col-md-2">
+                                <div class="col-md-2 col-xs-12">
                                     {{-- Radial progress currency --}}
                                     @if ($project->currency > 0 && count($donationTypes) > 0)
                                         <div class="progress-radial @if($contributedPercentage > 100) progress-100 @else progress-{{round($contributedPercentage)}} @endif">
@@ -47,7 +48,7 @@
                                     @endif
                                     {{-- End radial progress currency --}}
                                 </div>
-                                <div class="col-md-10">
+                                <div class="col-md-10 col-xs-12 donation__form__item-margin-top">
                                     {{-- Start of reward tiers --}}
                                     <p>{{ trans('donation.select_tier') }}</p>
                                     @if ($project->currency > 0 && count($tiers) > 0)
@@ -77,7 +78,7 @@ class="form-control" id="currency" name="currency"
                         @endif
                         @foreach ($donationTypes as $donationKind => $donationType)
                             <div class="row">
-                                <div class="col-md-2">
+                                <div class="col-md-2 col-xs-12">
                                     {{-- Radial progress --}}
                                     @if ($donationKind != "currency" && isset($donationTypes[$donationKind]) && count($donationTypes[$donationKind]) > 0)
                                         <div class="progress-radial progress-{{ round($percentages[$donationKind]["percentage"]) }}">
@@ -89,7 +90,7 @@ class="form-control" id="currency" name="currency"
                                     @endif
                                     {{-- End radial progress --}}
                                 </div>
-                                <div class="col-md-10">
+                                <div class="col-md-10 col-xs-12 donation__form__item-margin-top">
                                     @foreach ($donationType as $key => $option)
                                         <div class="about">
                                             <strong>{{ $option['name'] }}</strong><br/>

diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php
@@ -18,12 +18,12 @@
 
         {{-- Goals --}}
         <div class="goals-container">
-            <div class="container goals">
+            <div class="container-fluid goals">
                 <div class="row">
-                    {{-- Goals left column (with progress) --}}
-                    <div class="col-md-7 meta-container">
+                    {{-- Gdoals left column (with progress) --}}
+                    <div class="col-lg-7 col-md-7 col-sm-12 meta-container">
                         <section class="meta project-meta">
-                            <h1>{{ $project->title }}</h1>
+                            <h1 class="">{{ $project->title }}</h1>
                             <span>
                                 <i class="icon icon-person icon-align-text"></i>
                                 {{ trans('home.projectby') }}
@@ -68,20 +68,20 @@
                         </section>
                     </div>
                     {{-- Goals right column --}}
-                    <div class="col-md-5 numbers-container">
+                    <div class="col-lg-5 col-md-5 col-sm-12 numbers-container">
                         <section class="numbers">
                             <div class="row">
                                 @if ($project->currency > 0)
-                                    <div class="col-md-12">
+                                    <div class="col-lg-4 col-md-4 col-sm-4">
                                         <span class="number-lg">€{{ $contributed }}</span><br/>
                                         <span class="number-sm">{{ trans('home.of') }} €{{ round($project->currency) }}</span>
                                     </div>
                                 @endif
-                                <div class="col-md-4">
+                                <div class="col-lg-4 col-md-4 col-sm-4">
                                     <span class="number-md">{{ $donorCount }}</span><br/>
                                     <span class="number-sm">{{ trans('home.donors') }}</span>
                                 </div>
-                                <div class="col-md-4">
+                                <div class="col-lg-4 col-md-4 col-sm-4">
                                     @if ($hoursleft < 24)
                                             @if ($hoursleft <= 2)
                                                 <span class="number-md">{{ $minutesleft }}</span><br/>
@@ -110,11 +110,15 @@
         {{-- About this company --}}
         <div class="about">
             <div class="container">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <h2>{{ trans('home.aboutproject') }}</h2>
+                    </div>
+                </div>
                 <div class="row">
                     <div class="col-md-7">
                         {{-- About video --}}
                         <section class="about-video">
-                            <h2>{{ trans('home.aboutproject') }}</h2>
                             <br/>
                             <div class="video-container">
                             {{-- Based on the provider, the output differs --}}

diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
@@ -2,6 +2,10 @@
     <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/>