From e801ecf736dcd0ff7ea9888c62ea63d806cd1a45 Mon Sep 17 00:00:00 2001
From: Miki Hobgood <mikihobgood@Mikis-MacBook-Pro.local>
Date: Sun, 30 Apr 2017 13:11:01 -0700
Subject: [PATCH 1/2] site-section markup and initial styles

---
 app/assets/stylesheets/static_pages.css.scss | 25 ++++++++++++++++++++
 app/views/static_pages/front_page.html.erb   |  7 +++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/static_pages.css.scss b/app/assets/stylesheets/static_pages.css.scss
index 0f289e5..7384c28 100644
--- a/app/assets/stylesheets/static_pages.css.scss
+++ b/app/assets/stylesheets/static_pages.css.scss
@@ -2,6 +2,31 @@
 // // They will automatically be included in application.css.
 // // You can use Sass (SCSS) here: http://sass-lang.com/
 
+$base-font-size: 10px;
+
+//convert px value to rem value
+@function px-to-rem($px, $base:$base-font-size) {
+  @return ($px / $base) * 1rem;
+}
+
+.site-section {
+  text-align: center;
+  
+  h2 {
+    font-size: px-to-rem(36px);
+    margin-bottom: px-to-rem(30px);
+  }
+
+  p {
+    font-size: px-to-rem(18px);
+  }
+
+  a {
+    color: black;
+  }
+}
+
+
 // .front-page {
 //     padding-top: 20px;
 //     padding-bottom: 40px;
diff --git a/app/views/static_pages/front_page.html.erb b/app/views/static_pages/front_page.html.erb
index 2e6ee71..2ebee7f 100644
--- a/app/views/static_pages/front_page.html.erb
+++ b/app/views/static_pages/front_page.html.erb
@@ -1,5 +1,11 @@
 <%# render "layouts/navbar", page: "" %>
 
+<section class="site-section">
+  <h2>Header Text Goes Here</h2>
+  <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
+  <a href="#">page name here</a>
+</section>
+
 <!-- <div class="container front-page page">
     <div class="col-sm-12">
         <div class="row">
@@ -37,4 +43,3 @@
     </div>
 </div>
  -->
- 
\ No newline at end of file

From 92a3e62290b56594ee5b9ace1e7eec857231580f Mon Sep 17 00:00:00 2001
From: jadefaerie <mikihobgood@gmail.com>
Date: Tue, 25 Jul 2017 20:35:46 -0700
Subject: [PATCH 2/2] created mixins

---
 .rspec                                       |  2 +
 app/assets/stylesheets/_mixins.scss          | 20 ++++
 app/assets/stylesheets/_variables.scss       |  4 +
 app/assets/stylesheets/static_pages.css.scss | 41 +++++++-
 app/views/static_pages/front_page.html.erb   | 46 ++++++++-
 spec/models/resource_spec.rb                 | 16 ++++
 spec/rails_helper.rb                         | 77 +++++++++++++++
 spec/spec_helper.rb                          | 99 ++++++++++++++++++++
 spec/views/resources_views_spec.rb           | 43 +++++++++
 9 files changed, 343 insertions(+), 5 deletions(-)
 create mode 100644 .rspec
 create mode 100644 app/assets/stylesheets/_mixins.scss
 create mode 100644 spec/models/resource_spec.rb
 create mode 100644 spec/rails_helper.rb
 create mode 100644 spec/spec_helper.rb
 create mode 100644 spec/views/resources_views_spec.rb

diff --git a/.rspec b/.rspec
new file mode 100644
index 0000000..83e16f8
--- /dev/null
+++ b/.rspec
@@ -0,0 +1,2 @@
+--color
+--require spec_helper
diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
new file mode 100644
index 0000000..deeef95
--- /dev/null
+++ b/app/assets/stylesheets/_mixins.scss
@@ -0,0 +1,20 @@
+@mixin arrow() {
+  position: relative;
+  text-indent: -9999999rem;
+  &::before { // the line of the arrow
+    content: '';
+    position: absolute;
+    top: calc(50% - .2rem); //change the rem value when we know the height
+    height: .4rem;
+    width: 2rem;
+    background-color: black;
+  }
+  &::after { // the head of the arrow
+    content: '>';
+    position: absolute;
+    top: calc(50% - .5rem); //change the rem value when we know the height
+    height: 1rem;
+    width: 1rem;
+    color: black; 
+  }
+}
diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 2934932..4600d27 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -7,3 +7,7 @@
 // Bootstrap variables
 //
 $navbar-height: 70px;
+
+// Media Query Min-Width
+$width-md: 38.75em; // ~620px
+$width-lg: 64em; // ~1024px
diff --git a/app/assets/stylesheets/static_pages.css.scss b/app/assets/stylesheets/static_pages.css.scss
index 7384c28..ade019e 100644
--- a/app/assets/stylesheets/static_pages.css.scss
+++ b/app/assets/stylesheets/static_pages.css.scss
@@ -2,6 +2,9 @@
 // // They will automatically be included in application.css.
 // // You can use Sass (SCSS) here: http://sass-lang.com/
 
+@import "./_variables";
+@import "./_mixins";
+
 $base-font-size: 10px;
 
 //convert px value to rem value
@@ -11,7 +14,7 @@ $base-font-size: 10px;
 
 .site-section {
   text-align: center;
-  
+
   h2 {
     font-size: px-to-rem(36px);
     margin-bottom: px-to-rem(30px);
@@ -23,7 +26,43 @@ $base-font-size: 10px;
 
   a {
     color: black;
+    @include arrow();
   }
+
+  &.resources {
+    //resources-specific styles here
+    background-color: red; //temp color
+  }
+
+  &.community {
+    //community-specific styles here
+    background-color: green; // temp color
+  }
+
+  &.mentorship {
+    //mentorship-specific styles here
+    background-color: blue; // temp color
+  }
+
+  @media (min-width: $width-md) {
+
+    padding: 0 px-to-rem(20px);
+
+    .primary {
+      padding: px-to-rem(20px) px-to-rem(30px);
+    }
+  }
+
+  //use this for larger screen sizes, define the width of the screen in _variables.scss
+  @media (min-width: $width-lg) {
+
+  }
+}
+
+//testing only -- this is not the "real" featured-list
+.featured-list {
+  display: block;
+  background-color: pink;
 }
 
 
diff --git a/app/views/static_pages/front_page.html.erb b/app/views/static_pages/front_page.html.erb
index 2ebee7f..d9eb8eb 100644
--- a/app/views/static_pages/front_page.html.erb
+++ b/app/views/static_pages/front_page.html.erb
@@ -1,11 +1,49 @@
 <%# render "layouts/navbar", page: "" %>
+<!--base section -->
+<!-- <div class="primary">
+    <h2>Header Text Goes Here</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
+    <a href="#">page name here</a>
+  </div>
+
+  <!--sample feature-list for visual reference only -->
+  <!--<div class="featured-list">
+    <p>featured list component</p>
+  </div>
+</section>-->
+
+<section class="site-section resources"> <!--specific section "resources" -->
+  <div class="primary">
+    <h2>Resources</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
+    <a href="#">arrow goes here</a>
+  </div>
+
+  <!--featured list component goes here -->
+
+</section>
+
+<section class="site-section community"> <!--specific section "resources" -->
+  <div class="primary">
+    <h2>Community</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
+    <a href="#">arrow goes here</a>
+  </div>
+
+  <!--featured list component goes here -->
 
-<section class="site-section">
-  <h2>Header Text Goes Here</h2>
-  <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
-  <a href="#">page name here</a>
 </section>
 
+<section class="site-section mentorship"> <!--specific section "resources" -->
+  <div class="primary">c
+    <h2>Mentorship</h2>
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.</p>
+    <a href="#">arrow goes here</a>
+  </div>
+
+  <!--featured list component goes here -->
+
+</section>
 <!-- <div class="container front-page page">
     <div class="col-sm-12">
         <div class="row">
diff --git a/spec/models/resource_spec.rb b/spec/models/resource_spec.rb
new file mode 100644
index 0000000..6bdd7b2
--- /dev/null
+++ b/spec/models/resource_spec.rb
@@ -0,0 +1,16 @@
+require "rails_helper"
+
+RSpec.describe Resource, :type => :model do
+  
+  describe 'Model Resource' do
+
+    let (:resource_one) { Resource.create( {title: "Imposter Syndrome", url: "https://counseling.caltech.edu/general/InfoandResources/Impostor", description: "General definition and information on the Imposter Syndrome, provided by the Caltech Counseling Center." } ) }
+
+    it "has title, description and url" do
+      expect(resource_one.title).to eq("Imposter Syndrome")
+      expect(resource_one.url).to eq("https://counseling.caltech.edu/general/InfoandResources/Impostor")
+      expect(resource_one.description).to eq("General definition and information on the Imposter Syndrome, provided by the Caltech Counseling Center.")
+    end
+
+  end
+end
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
new file mode 100644
index 0000000..6e94063
--- /dev/null
+++ b/spec/rails_helper.rb
@@ -0,0 +1,77 @@
+# This file is copied to spec/ when you run 'rails generate rspec:install'
+ENV['RAILS_ENV'] ||= 'test'
+require File.expand_path('../../config/environment', __FILE__)
+# Prevent database truncation if the environment is production
+abort("The Rails environment is running in production mode!") if Rails.env.production?
+require 'spec_helper'
+require 'rspec/rails'
+require 'capybara/rails'
+require 'database_cleaner'
+# Add additional requires below this line. Rails is not loaded until this point!
+
+# Requires supporting ruby files with custom matchers and macros, etc, in
+# spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are
+# run as spec files by default. This means that files in spec/support that end
+# in _spec.rb will both be required and run as specs, causing the specs to be
+# run twice. It is recommended that you do not name files matching this glob to
+# end with _spec.rb. You can configure this pattern with the --pattern
+# option on the command line or in ~/.rspec, .rspec or `.rspec-local`.
+#
+# The following line is provided for convenience purposes. It has the downside
+# of increasing the boot-up time by auto-requiring all files in the support
+# directory. Alternatively, in the individual `*_spec.rb` files, manually
+# require only the support files necessary.
+#
+# Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }
+
+# Checks for pending migration and applies them before tests are run.
+# If you are not using ActiveRecord, you can remove this line.
+ActiveRecord::Migration.maintain_test_schema!
+
+RSpec.configure do |config|
+  # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
+  config.fixture_path = "#{::Rails.root}/spec/fixtures"
+
+  # If you're not using ActiveRecord, or you'd prefer not to run each of your
+  # examples within a transaction, remove the following line or assign false
+  # instead of true.
+  config.use_transactional_fixtures = true
+
+  config.before(:suite) do
+    DatabaseCleaner.clean_with(:truncation)
+  end
+
+  config.before(:each, :js => true) do
+    DatabaseCleaner.strategy = :truncation
+  end
+
+  config.before(:each) do
+    DatabaseCleaner.start
+  end
+
+  config.after(:each) do
+    DatabaseCleaner.clean
+  end
+
+  # RSpec Rails can automatically mix in different behaviours to your tests
+  # based on their file location, for example enabling you to call `get` and
+  # `post` in specs under `spec/controllers`.
+  #
+  # You can disable this behaviour by removing the line below, and instead
+  # explicitly tag your specs with their type, e.g.:
+  #
+  #     RSpec.describe UsersController, :type => :controller do
+  #       # ...
+  #     end
+  #
+  # The different available types are documented in the features, such as in
+  # https://relishapp.com/rspec/rspec-rails/docs
+  config.infer_spec_type_from_file_location!
+
+  # Filter lines from Rails gems in backtraces.
+  config.filter_rails_from_backtrace!
+  # arbitrary gems may also be filtered via:
+  # config.filter_gems_from_backtrace("gem name")
+
+  config.include Capybara::DSL
+end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
new file mode 100644
index 0000000..8f698be
--- /dev/null
+++ b/spec/spec_helper.rb
@@ -0,0 +1,99 @@
+# This file was generated by the `rails generate rspec:install` command. Conventionally, all
+# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
+# The generated `.rspec` file contains `--require spec_helper` which will cause
+# this file to always be loaded, without a need to explicitly require it in any
+# files.
+#
+# Given that it is always loaded, you are encouraged to keep this file as
+# light-weight as possible. Requiring heavyweight dependencies from this file
+# will add to the boot time of your test suite on EVERY test run, even for an
+# individual file that may not need all of that loaded. Instead, consider making
+# a separate helper file that requires the additional dependencies and performs
+# the additional setup, and require it from the spec files that actually need
+# it.
+#
+# The `.rspec` file also contains a few flags that are not defaults but that
+# users commonly want.
+#
+# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
+RSpec.configure do |config|
+  # rspec-expectations config goes here. You can use an alternate
+  # assertion/expectation library such as wrong or the stdlib/minitest
+  # assertions if you prefer.
+  config.expect_with :rspec do |expectations|
+    # This option will default to `true` in RSpec 4. It makes the `description`
+    # and `failure_message` of custom matchers include text for helper methods
+    # defined using `chain`, e.g.:
+    #     be_bigger_than(2).and_smaller_than(4).description
+    #     # => "be bigger than 2 and smaller than 4"
+    # ...rather than:
+    #     # => "be bigger than 2"
+    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
+  end
+
+  # rspec-mocks config goes here. You can use an alternate test double
+  # library (such as bogus or mocha) by changing the `mock_with` option here.
+  config.mock_with :rspec do |mocks|
+    # Prevents you from mocking or stubbing a method that does not exist on
+    # a real object. This is generally recommended, and will default to
+    # `true` in RSpec 4.
+    mocks.verify_partial_doubles = true
+  end
+
+  # This option will default to `:apply_to_host_groups` in RSpec 4 (and will
+  # have no way to turn it off -- the option exists only for backwards
+  # compatibility in RSpec 3). It causes shared context metadata to be
+  # inherited by the metadata hash of host groups and examples, rather than
+  # triggering implicit auto-inclusion in groups with matching metadata.
+  config.shared_context_metadata_behavior = :apply_to_host_groups
+
+# The settings below are suggested to provide a good initial experience
+# with RSpec, but feel free to customize to your heart's content.
+=begin
+  # This allows you to limit a spec run to individual examples or groups
+  # you care about by tagging them with `:focus` metadata. When nothing
+  # is tagged with `:focus`, all examples get run. RSpec also provides
+  # aliases for `it`, `describe`, and `context` that include `:focus`
+  # metadata: `fit`, `fdescribe` and `fcontext`, respectively.
+  config.filter_run_when_matching :focus
+
+  # Allows RSpec to persist some state between runs in order to support
+  # the `--only-failures` and `--next-failure` CLI options. We recommend
+  # you configure your source control system to ignore this file.
+  config.example_status_persistence_file_path = "spec/examples.txt"
+
+  # Limits the available syntax to the non-monkey patched syntax that is
+  # recommended. For more details, see:
+  #   - http://rspec.info/blog/2012/06/rspecs-new-expectation-syntax/
+  #   - http://www.teaisaweso.me/blog/2013/05/27/rspecs-new-message-expectation-syntax/
+  #   - http://rspec.info/blog/2014/05/notable-changes-in-rspec-3/#zero-monkey-patching-mode
+  config.disable_monkey_patching!
+
+  # Many RSpec users commonly either run the entire suite or an individual
+  # file, and it's useful to allow more verbose output when running an
+  # individual spec file.
+  if config.files_to_run.one?
+    # Use the documentation formatter for detailed output,
+    # unless a formatter has already been configured
+    # (e.g. via a command-line flag).
+    config.default_formatter = 'doc'
+  end
+
+  # Print the 10 slowest examples and example groups at the
+  # end of the spec run, to help surface which specs are running
+  # particularly slow.
+  config.profile_examples = 10
+
+  # Run specs in random order to surface order dependencies. If you find an
+  # order dependency and want to debug it, you can fix the order by providing
+  # the seed, which is printed after each run.
+  #     --seed 1234
+  config.order = :random
+
+  # Seed global randomization in this process using the `--seed` CLI option.
+  # Setting this allows you to use `--seed` to deterministically reproduce
+  # test failures related to randomization by passing the same `--seed` value
+  # as the one that triggered the failure.
+  Kernel.srand config.seed
+=end
+end
diff --git a/spec/views/resources_views_spec.rb b/spec/views/resources_views_spec.rb
new file mode 100644
index 0000000..9be7919
--- /dev/null
+++ b/spec/views/resources_views_spec.rb
@@ -0,0 +1,43 @@
+require 'spec_helper'
+require 'capybara/rspec'
+
+describe "The Resources interface" do
+
+  before(:all) do
+    @resources = []
+    resources_data = [
+        { title: '#Ask4More', 
+          url: 'https://www.levo.com/ask4more', 
+          description: "This is a movement encouraging women to demand equal pay for equal work.", 
+          source: 'Levo League', 
+          public: true },
+        { title: 'Resources, research & advocacy to level the playing field for women entrepreneurs', 
+          url: 'http://athenacenter.barnard.edu/entrepreneurs', 
+          description: "Provides resources, research & advocacy to level the playing field for women entrepreneurs.", 
+          source: 'Athena', 
+          public: true },
+        { title: 'Django Girls', 
+          url: 'http://djangogirls.org/', 
+          description: "Django Girls is a non-profit organization that empowers and helps women to organize free, one-day programming workshops by providing tools, resources and support." ,
+          source: 'Django Girls', 
+          public: true }
+      ]
+    resources_data.each do |resource_data|
+      @resources << Resource.find_or_create_by!(resource_data)
+    end
+  end
+
+  describe "on the resources page" do
+    before(:each) do
+      visit resources_path
+    end
+
+    it "should list the resources titles" do
+      @resources.each do |resource|
+        expect(page).to have_content(resource.title)
+      end
+    end
+
+  end
+
+end
\ No newline at end of file