FTR - Pittsburgh Collection Updates

sk5 · Mar 6, 2020 · 2165d55 · 2165d55
1 parent e2d64a2
commit 2165d55
Show file tree

Hide file tree

Showing 16 changed files with 1,049 additions and 615 deletions.
diff --git a/.vs/fortherun/v15/.suo b/.vs/fortherun/v15/.suo
diff --git a/BC-Home.html b/BC-Home.html
@@ -9,12 +9,15 @@
 {% endif %}-->
 
 <div class="feature__highlight">
-    <h1 class="feature__welcome">Runners<br /> <strong>giving back</strong><br /> to runners</h1>
-    {% if theme.image_sets.slideshow.size > 0 %}
+    <!--<h1 class="feature__welcome">Runners<br /> <strong>giving back</strong><br /> to runners</h1>-->
+    <h1 class="feature__welcome"><span class="hidden">Your Inner Voice Collection</span></h1>
+    <p class="feature__blurb">Pre-Orders Begin January 17th</p>
+    <!-- Turned off for Your Inner Voice 1/13/2020
+        {% if theme.image_sets.slideshow.size > 0 %}
     {% for image in theme.image_sets.slideshow %}
     <img src="{{ image.url | constrain: 1800 }}" />
     {% endfor %}
-    {% endif %}
+    {% endif %}-->
 </div>
 
 {% if theme.featured_items > 0 %}
@@ -47,9 +50,9 @@ <h2 class="feature__title">What's new</h2>
                     <!-- product-list-item-info-headers -->
                     {% if product_status != blank %}<div class="feature__item--status {{ product_status }}">{{ product_status }}</div>{% endif %} <!-- product-list-item-status -->
                     {% for category in product.categories %}
-                        {% if category.name contains 'Pre-Order' %}
-                            <div class="feature__item--status pre-order">Pre-Order</div>
-                        {% endif %}
+                    {% if category.name contains 'Pre-Order' %}
+                    <div class="feature__item--status pre-order">Pre-Order</div>
+                    {% endif %}
                     {% endfor %}
                     <h3 class="feature__item--name">{{ product.name }}</h3> <!-- product-list-item-name -->
                     <div class="feature__item--price">{{ product.default_price | money: theme.money_format }}</div> <!-- product-list-item-price -->

diff --git a/BC-Layout.html b/BC-Layout.html
diff --git a/BC-Product-13020.html b/BC-Product-13020.html
diff --git a/BC-Product.html b/BC-Product.html
@@ -273,7 +273,7 @@ <h2 class="product--description__title">Description</h2>
     }
     document.getElementById("total").value = sum;
     if (sum > 5) {
-        document.getElementsByClassName('pre-order--sold')[0].innerHTML = "<strong>Pre-Order minimum met!</strong>";
+        document.getElementsByClassName('pre-order--sold')[0].innerHTML = "<strong>Pre-Order met!</strong>";
     } else {
         document.getElementsByClassName('pre-order--sold')[0].innerHTML = "<strong>" + sum + "</strong> sold";
     }
@@ -329,8 +329,9 @@ <h2 class="product--description__title">Description</h2>
     var dateCreated = "{{ product.created_at }}";
     var dateSplit = dateCreated.replace(' ', '-').split('-');
     var yearCreated = dateSplit[0];
-    var dayCreated = dateSplit[1];
-    var monthCreated = dateSplit[2];
+    var monthCreated = dateSplit[1];
+    var dayCreated = dateSplit[2];
+    console.log(dateCreated);
     //
     //Set 1 day in milliseconds
     var one_day = 1000*60*60*24
@@ -353,6 +354,7 @@ <h2 class="product--description__title">Description</h2>
     //
     // Show the results of DateDiff to make sure the math is right
     console.log("You have " + DateDiff(createdDate, currentDate) + " left");
+    console.log(new Date(createdDate).getTime() + (14 * one_day));
     //
     // If the number of days left if 0
     // The DateDiff function makes the "createdDate the deadline date
@@ -368,6 +370,12 @@ <h2 class="product--description__title">Description</h2>
     //
     //
     //
+    if (window.location.href.indexOf("testing") > -1) {
+        console.log("your url contains testing");
+    }
+    //
+    //
+    //
     //function findTotal(){
     //var arr = document.getElementsByClassName('option-sold');
     //var tot=0;

diff --git a/BC-Products.html b/BC-Products.html
@@ -6,7 +6,7 @@ <h1 class="products__title">Products</h1>
             <ul class="products__categories--list">
                 <li class="{% if page.full_url contains '/products' %}selected{% endif %}"><a href="/products">Everything</a></li>
                 {% for category in categories.active %}
-                <li class="{% if page.full_url contains category.url %}selected{% endif %}">{{ category | link_to }}</li>
+                <li style="{% if category.name contains 'Limited' %}display:none;{% endif %}" data-cat="{{ category.name }}" class="{% if page.full_url contains category.url %}selected{% endif %}">{{ category | link_to }}</li>
                 {% endfor %}
             </ul>
         </nav>
@@ -88,34 +88,34 @@ <h3 class="products__item--name">{{ product.name }}</h3>
         {% endif %}
         <!-- -->
         {% if page.full_url contains '/products' or page.full_url contains '/shirts' %}
-            <!-- Above checks if the page is either all or shirts -->
-            {% for product in categories.shirts.products %}
-                {% assign product_status = '' %}
-                {% case product.status %}
-                    {% when 'active' %}
-                    {% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
-                    {% when 'sold-out' %}
-                    {% assign product_status = 'Sold out' %}
-                    {% when 'coming-soon' %}
-                    {% assign product_status = 'Coming soon' %}
-                {% endcase %}
-                <!-- GET THE CATEGORIES -->
-                <a style="{% for category in product.categories %}{% if category.name contains 'Pre-Order' %}display:none;{% endif %}{% endfor %}" class="products__item {{ theme.show_overlay }}" href="{{ product.url }}" title="View {{ product.name | escape }}">
-                    <!--<div class="product-list-item-container">-->
-                    <figure class="products__item--image">
-                        <img alt="Image of {{ product.name | escape }}" class="fade-in product-list-image {% if product.image.height > product.image.width %}image-tall{% elsif product.image.height < product.image.width %}image-wide{% else %}image-square{% endif %}" src="{{ product.image | product_image_url | constrain: 1000, 1000 }}">
-                    </figure>
-                    <!--</div>-->
-                    <div class="products__item--info">
-                        <!--<div class="product-list-item-background"></div>-->
-                        <div class="products__item--headers">
-                            {% if product_status != blank %}<div class="products__item--status {{ product_status }}">{{ product_status }}</div>{% endif %}
-                            <h3 class="products__item--name">{{ product.name }}</h3>
-                            <div class="products__item--price">{{ product.default_price | money: theme.money_format }}</div>
-                        </div>
-                    </div>
-                </a>
-            {% endfor %}
+        <!-- Above checks if the page is either all or shirts -->
+        {% for product in categories.shirts.products %}
+        {% assign product_status = '' %}
+        {% case product.status %}
+        {% when 'active' %}
+        {% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
+        {% when 'sold-out' %}
+        {% assign product_status = 'Sold out' %}
+        {% when 'coming-soon' %}
+        {% assign product_status = 'Coming soon' %}
+        {% endcase %}
+        <!-- GET THE CATEGORIES -->
+        <a style="{% for category in product.categories %}{% if category.name contains 'Pre-Order' %}display:none;{% endif %}{% endfor %}" class="products__item {{ theme.show_overlay }}" href="{{ product.url }}" title="View {{ product.name | escape }}">
+            <!--<div class="product-list-item-container">-->
+            <figure class="products__item--image">
+                <img alt="Image of {{ product.name | escape }}" class="fade-in product-list-image {% if product.image.height > product.image.width %}image-tall{% elsif product.image.height < product.image.width %}image-wide{% else %}image-square{% endif %}" src="{{ product.image | product_image_url | constrain: 1000, 1000 }}">
+            </figure>
+            <!--</div>-->
+            <div class="products__item--info">
+                <!--<div class="product-list-item-background"></div>-->
+                <div class="products__item--headers">
+                    {% if product_status != blank %}<div class="products__item--status {{ product_status }}">{{ product_status }}</div>{% endif %}
+                    <h3 class="products__item--name">{{ product.name }}</h3>
+                    <div class="products__item--price">{{ product.default_price | money: theme.money_format }}</div>
+                </div>
+            </div>
+        </a>
+        {% endfor %}
         <!-- -->
         {% endif %}
         <!-- -->
@@ -152,10 +152,11 @@ <h3 class="products__item--name">{{ product.name }}</h3>
         {% endif %}
         <!-- -->
     </div>
-    {% if paginate.pages > 1 %}
-    {{ paginate | default_pagination }}
-    {% endif %}
-
+    <!--
+        {% if paginate.pages > 1 %}
+        {{ paginate | default_pagination }}
+        {% endif %}
+    -->
     <!--<div class="artist-category-nav artist-category-nav-footer">
         <nav class="category-nav">
             <div class="nav-title">Products</div>

diff --git a/assets/css/_components.button.scss b/assets/css/_components.button.scss
@@ -197,6 +197,28 @@ button {
     //
     // STICKERS -- MARATHON
     //
+    &.angeles {
+        color: #fff;
+        background: #002859;
+        box-shadow: 0 0 0 .0625em #C3D831;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #C3D831;
+        }
+    }
+    //
+    &.austin {
+        color: #B4BD00;
+        background: #1F1C1D;
+        box-shadow: 0 0 0 .0625rem #4D9B44;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #4D9B44;
+        }
+    }
+    //
     &.boston {
         color: #154DB9;
         background: #F4DD00;
@@ -219,6 +241,50 @@ button {
         }
     }
     //
+    &.cim {
+        color: #F05F32;
+        background: #fff;
+        box-shadow: 0 0 0 .0625rem #0D4F67;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #0D4F67;
+        }
+    }
+    //
+    &.houston {
+        color: #fff;
+        background: #00AEEF;
+        box-shadow: 0 0 0 .0625rem #E51937;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #E51937;
+        }
+    }
+    //
+    &.indianapolis {
+        color: #F6921E;
+        background: #fff;
+        box-shadow: 0 0 0 .0625rem #23488B;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #23488B;
+        }
+    }
+    //
+    &.marine {
+        color: #000;
+        background: #FED130;
+        box-shadow: 0 0 0 .0625rem #B0151B;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #B0151B;
+        }
+    }
+    //
     &.original {
         color: $black;
         background: #fff;
@@ -230,6 +296,17 @@ button {
         }
     }
     //
+    &.pittsburgh {
+        color: $black;
+        background: #FDC619;
+        box-shadow: 0 0 0 .0625rem #313131;
+        //
+        .button.choose--product:hover &,
+        .button.choose--product.selected & {
+            box-shadow: 0 0 0 .25rem #313131;
+        }
+    }
+    //
     &.york {
         color: #FEB204;
         background: #2843B9;
@@ -240,6 +317,11 @@ button {
             box-shadow: 0 0 0 .25rem #2843B9;
         }
     }
+    //
+    &[class*="sold"] {
+        opacity: .3;
+        cursor: default;
+    }
 }
 //
 .product__color--label {

diff --git a/assets/css/_components.content.scss b/assets/css/_components.content.scss
@@ -229,19 +229,6 @@
     //
     //
     &__charity-breakdown {
-        // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
-        // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
-        /*@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) {
-            display: grid;
-            grid-template-columns: auto;
-            grid-template-rows: auto; // 25rem;
-            grid-gap: 1rem;
-            //
-            @media screen and (min-width: 62.5em) { // 1000px
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }*/
-        //
         margin: 2rem 0;
         padding: 0;
         list-style: none;

diff --git a/assets/css/_components.modules.scss b/assets/css/_components.modules.scss
diff --git a/assets/css/_components.product.scss b/assets/css/_components.product.scss
@@ -66,16 +66,6 @@
         padding-top: 2rem;
         padding-bottom: 2rem;
         //
-        /*&:before {
-            content: "";
-            position: absolute;
-            right: -20vw;
-            bottom: 0;
-            left: -20vw;
-            height: .0625rem;
-            box-shadow: 0 .0625rem 0 darken(#f9fafb, 10%);
-        }*/
-        //
         &:before {
             content: "";
             position: absolute;
@@ -266,19 +256,6 @@
         }
     }
     //
-    /*&:before {
-        content: "";
-        position: absolute;
-        z-index: -1;
-        top: 0;
-        right: -20vw;
-        left: -20vw;
-        height: 10rem;
-        background: $black;
-        background-image: url(../images/polygon-background.svg), linear-gradient(30deg, $yellow 0%, $orange 33%, $red 66%, $purple 100%);
-        background-size: cover;
-    }*/
-    //
     &--image-wrapper {
         // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties.
         // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties.
@@ -346,45 +323,6 @@
         margin-bottom: 2rem;
     }
     //
-    /*&--color {
-        float: left;
-        margin-right: 1rem;
-        margin-bottom: 1rem;
-        width: 40%;
-    }*/
-    //
-    /*&--sizing {
-        float: left;
-        width: 40%;
-    }
-    //
-    &--quantity {
-        margin-bottom: 1rem;
-        width: 20%;
-    }*/
-    //
-    /*&--select-color,
-    &--select-size,
-    &--select-quantity {
-        padding: .25rem .5rem;
-        width: 100%;
-        color: $black;
-        font-size: 1rem;
-        border: .125rem solid $black;
-    }*/
-    //
-    /*.form--label {
-        display: block;
-        margin-bottom: .25rem;
-        padding-right: 1rem;
-        padding-left: 1rem;
-        font-family: $brand-text;
-        font-size: .75rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        color: $black;
-    }*/
-    //
     //
     //
     &__inventory {