CRO-139: group logo properties

bigcommerce · May 17, 2017 · 1cccb8e · 1cccb8e
1 parent 02c8d43
commit 1cccb8e
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 50 deletions.
diff --git a/assets/scss/layouts/header/_header.scss b/assets/scss/layouts/header/_header.scss
@@ -106,7 +106,7 @@
 .header-logo-text {
     display: block;
     font-family: $fontFamily-hero;
-    font-size: fontSize("small");   // 1
+    font-size: $fontSize-logo-small;   // 1
     font-weight: stencilFontWeight("logo-font");
     letter-spacing: remCalc(5px);
     margin-left: auto;
@@ -118,15 +118,15 @@
     white-space: nowrap;
 
     @include breakpoint("small") {
-        font-size: fontSize("large");
+        font-size: $fontSize-logo-medium;
         letter-spacing: remCalc(9px);
         padding-bottom: 0;
         padding-top: 0;
     }
 
     @include breakpoint("medium") {
         display: inline;
-        font-size: fontSize("largest");
+        font-size: $fontSize-logo-large;
         margin-left: 0;
         margin-right: -(remCalc(9px)); // 3
         max-width: none;

diff --git a/assets/scss/settings/global/typography/_typography.scss b/assets/scss/settings/global/typography/_typography.scss
@@ -42,6 +42,9 @@ $fontSize-small:                stencilNumber("fontSize-h4");
 $fontSize-smaller:              stencilNumber("fontSize-h5");
 $fontSize-smallest:             stencilNumber("fontSize-h6");
 $fontSize-tiny:                 12px;
+$fontSize-logo-large:           stencilNumber("logo_fontSize");
+$fontSize-logo-medium:			$fontSize-logo-large - 6px;
+$fontSize-logo-small:           $fontSize-logo-medium - 2px;
 
 
 // Line heights

diff --git a/config.json b/config.json
@@ -70,6 +70,8 @@
     "product_list_display_mode": "grid",
     "logo-position": "center",
     "logo_size": "250x100",
+    "logo_fontSize": 28,
+    "logo-font": "Google_Oswald_300",
     "brand_size": "190x250",
     "gallery_size": "300x300",
     "productgallery_size": "500x659",
@@ -83,7 +85,6 @@
     "default_image_gift_certificate": "/assets/img/GiftCertificate.png",
     "body-font": "Google_Karla_400",
     "headings-font": "Google_Montserrat_400",
-    "logo-font": "Google_Oswald_300",
     "fontSize-root": 14,
     "fontSize-h1": 28,
     "fontSize-h2": 25,

diff --git a/schema.json b/schema.json
@@ -70,27 +70,6 @@
   {
     "name": "Typography & Icons",
     "settings": [
-      {
-        "type": "heading",
-        "content": "Logo"
-      },
-      {
-        "type": "font",
-        "label": "Font family",
-        "id": "logo-font",
-        "options": [
-          {
-            "group": "Oswald",
-            "label": "Oswald",
-            "value": "Google_Oswald_400"
-          },
-          {
-            "group": "Oswald",
-            "label": "Oswald Light",
-            "value": "Google_Oswald_300"
-          }
-        ]
-      },
       {
         "type": "heading",
         "content": "Body text"
@@ -615,11 +594,6 @@
   {
     "name": "Header",
     "settings": [
-      {
-        "type": "color",
-        "label": "Store name text color",
-        "id": "storeName-color"
-      },
       {
         "type": "color",
         "label": "Background color",
@@ -723,43 +697,202 @@
     "name": "Logo",
     "settings": [
       {
-        "type": "imageDimension",
-        "label": "Logo size",
-        "id": "logo_size",
-        "description": "Please specify a maximum image size for desktop display. We'll automatically scale down the image for smaller devices.",
-        "force_reload": true,
+        "type": "select",
+        "label": "Position",
+        "id": "logo-position",
         "options": [
           {
-            "value": "original",
-            "label": "Original (as uploaded)"
+            "value": "right",
+            "label": "Right"
           },
           {
-            "value": "250x100",
-            "label": "Optimized for theme"
+            "value": "center",
+            "label": "Center"
           },
           {
-            "value": "custom",
-            "label": "Specify dimensions"
+            "value": "left",
+            "label": "Left"
           }
         ]
       },
+      {
+        "type": "heading",
+        "content": "Text based logo"
+      },
       {
         "type": "select",
-        "label": "Logo position",
-        "id": "logo-position",
-        "force_reload": true,
+        "label": "Font size",
+        "id": "logo_fontSize",
         "options": [
           {
-            "value": "right",
-            "label": "Right"
+            "value": 14,
+            "label": "14px"
           },
           {
-            "value": "center",
-            "label": "Center"
+            "value": 16,
+            "label": "16px"
           },
           {
-            "value": "left",
-            "label": "Left"
+            "value": 18,
+            "label": "18px"
+          },
+          {
+            "value": 20,
+            "label": "20px"
+          },
+          {
+            "value": 22,
+            "label": "22px"
+          },
+          {
+            "value": 24,
+            "label": "24px"
+          },
+          {
+            "value": 26,
+            "label": "26px"
+          },
+          {
+            "value": 28,
+            "label": "28px"
+          },
+          {
+            "value": 30,
+            "label": "30px"
+          },
+          {
+            "value": 32,
+            "label": "32px"
+          },
+          {
+            "value": 34,
+            "label": "34px"
+          },
+          {
+            "value": 36,
+            "label": "36px"
+          },
+          {
+            "value": 38,
+            "label": "38px"
+          },
+          {
+            "value": 40,
+            "label": "40px"
+          },
+          {
+            "value": 42,
+            "label": "42px"
+          },
+          {
+            "value": 44,
+            "label": "44px"
+          },
+          {
+            "value": 46,
+            "label": "46px"
+          },
+          {
+            "value": 48,
+            "label": "48px"
+          },
+          {
+            "value": 50,
+            "label": "50px"
+          },
+          {
+            "value": 52,
+            "label": "52px"
+          },
+          {
+            "value": 54,
+            "label": "54px"
+          },
+          {
+            "value": 56,
+            "label": "56px"
+          },
+          {
+            "value": 58,
+            "label": "58px"
+          },
+          {
+            "value": 60,
+            "label": "60px"
+          },
+          {
+            "value": 62,
+            "label": "62px"
+          },
+          {
+            "value": 64,
+            "label": "64px"
+          },
+          {
+            "value": 66,
+            "label": "66px"
+          },
+          {
+            "value": 68,
+            "label": "68px"
+          },
+          {
+            "value": 70,
+            "label": "70px"
+          },
+          {
+            "value": 72,
+            "label": "72px"
+          },
+          {
+            "value": 74,
+            "label": "74px"
+          }
+        ]
+      },
+      {
+        "type": "color",
+        "label": "Text Color",
+        "id": "storeName-color"
+      },
+      {
+        "type": "font",
+        "label": "Font family",
+        "id": "logo-font",
+        "options": [
+          {
+            "group": "Oswald",
+            "label": "Oswald",
+            "value": "Google_Oswald_400"
+          },
+          {
+            "group": "Oswald",
+            "label": "Oswald Light",
+            "value": "Google_Oswald_300"
+          }
+        ]
+      },
+      {
+        "type": "heading",
+        "content": "Custom image logo"
+      },
+      {
+        "type": "imageDimension",
+        "label": "Size",
+        "id": "logo_size",
+        "description": "Please specify a maximum image size for desktop display. We'll automatically scale down the image for smaller devices.",
+        "options": [
+          {
+            "value": "original",
+            "label": "Original (as uploaded)"
+          },
+          {
+            "value": "250x100",
+            "label": "Optimized for theme"
+          },
+          {
+            "value": "custom",
+            "label": "Specify dimensions"
           }
         ]
       }