Merge pull request #1796 from chrisgarrity/hotfix/conf2018-feb5

[DEVELOP] Hotfix Conference page to close session proposals
scratchfoundation · Feb 5, 2018 · aff3c33 · aff3c33
2 parents 15982b5 + a5f2121
commit aff3c33
Show file tree

Hide file tree

Showing 6 changed files with 454 additions and 159 deletions.
diff --git a/src/components/navigation/conference/2018/navigation.jsx b/src/components/navigation/conference/2018/navigation.jsx
@@ -8,17 +8,48 @@ const Navigation = () => (
     <NavigationBox>
         <ul className="ul mod-2018">
             <li className="li-left mod-logo mod-2018">
-                <a
-                    className="logo-a"
-                    href="/"
-                >
-                    <img
-                        alt="Scratch Logo"
-                        className="logo-a-image"
-                        src="/images/logo_sm.png"
-                    />
-                    <p className="logo-a-title">Conferences</p>
-                </a>
+                <ul className="li-left-ul mod-2018">
+                    <li>
+                        <a
+                            className="logo-a"
+                            href="/"
+                        >
+                            <img
+                                alt="Scratch Logo"
+                                className="logo-a-image"
+                                src="/images/logo_sm.png"
+                            />
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            className="link-a"
+                            href="/conference"
+                        >
+                            <span className="logo-a-title">Conference</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li className="li-right mod-2018">
+                <ul className="li-right-ul mod-2018">
+                    <li className="link info">
+                        <a
+                            className="link-a"
+                            href="#info"
+                        >
+                            Registration Info
+                        </a>
+                    </li>
+                    <li className="link questions">
+                        <a
+                            className="link-a"
+                            href="#questions"
+                        >
+                            Questions
+                        </a>
+                    </li>
+                </ul>
             </li>
         </ul>
     </NavigationBox>

diff --git a/src/components/navigation/conference/2018/navigation.scss b/src/components/navigation/conference/2018/navigation.scss
@@ -2,15 +2,23 @@
 @import "../../../../frameless";
 
 #navigation {
-    .ul.mod-2018 {
+    .ul.mod-2018,
+    .li-right-ul.mod-2018,
+    .li-left-ul.mod-2018 {
         display: flex;
         justify-content: space-between;
         flex-flow: row nowrap;
         align-items: center;
         list-style-type: none;
     }
+
+    .li-left-ul.mod-2018 {
+        padding-left: 0;
+    }
 
-    .li-left.mod-2018 {
+    .li-left,
+    .li-right,
+    .link {
         margin-top: 0;
         margin-right: 10px;
         color: $type-white;
@@ -36,4 +44,47 @@
         font-size: .85rem;
         font-weight: bold;
     }
+
+    @media only screen and (max-width: $mobile - 1) {
+        .li-right-ul.mod-2018 {
+            flex-flow: row nowrap;
+        }
+
+        .link {
+            margin: 0;
+            padding: 0;
+        }
+
+        .link-a {
+            font-size: .75rem;
+        }
+    }
+
+    @media only screen and (max-width: $tablet - 1) {
+        height: 100px;
+
+        .ul.mod-2018 {
+            justify-content: center;
+            flex-flow: row wrap;
+        }
+
+        .li-left,
+        .li-right,
+        .link {
+            align-self: center;
+        }
+
+        .li-right {
+            margin-left: 0;
+            align-self: center;
+        }
+
+        .logo-a {
+            padding-top: 6px;
+        }
+
+        .logo-a-image {
+            padding-left: 15px;
+        }
+    }
 }