Feature/GitHub (#1001)

* added github link to school list above line in the hero * added github link to navbar in splash page * added github link to web app * #997 added open source section to splash page * made footer github webapp link github botton * fixing codeclimate * fixing codeclimate * fixing codeclimate * fixing codeclimate * fixing codeclimate * fixing codeclimate
noahpresler · Aug 12, 2017 · 3c050e8 · 3c050e8
1 parent 4c7c26b
commit 3c050e8
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 31 deletions.
diff --git a/static/css/splash.css b/static/css/splash.css
@@ -47,7 +47,6 @@ header nav {
 	line-height: 30px;
 	height: 30px;
 }
-
 header nav a,
 header nav a:link,
 header nav a:active,
@@ -57,10 +56,12 @@ header nav a:visited {
 	text-decoration: none;
 	transition: color .2s;
 }
-
 header nav a:hover {
 	color: #3498DB;
 }
+header nav a .fa {
+  margin-right: 3px;
+}
 .desktop-nav {
 	display: block;
 }
@@ -76,6 +77,7 @@ header nav a:hover {
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+  float: right;
 }
 .mobile-nav .mobile-nav-label span {
 	display: inline-block;
@@ -199,8 +201,13 @@ header nav a:hover {
 	display: inline-block;
 	width: 30px;
 	height: 30px;
+  text-align: center;
 	vertical-align: middle;
 }
+#hero ul a .square-logo .fa {
+  font-size: 20px;
+  line-height: 30px;
+}
 #hero ul a span {
 	display: inline-block;
 	vertical-align: middle;
@@ -495,6 +502,66 @@ footer h6 {
 #hub {
 	width: 7.8%;
 }
+/* End Authors*/
+
+/* Open Source */
+#open-source {
+  padding: 70px 10px 50px;
+  background-color: #eee;
+  border-top: 1px solid #ddd;
+  background-image: url(/static/img/splash/grey.png)
+}
+#open-source h2 {
+  margin-bottom: 20px;
+}
+.open-source__cta {
+  clear: both;
+  padding: 20px 0 40px;
+}
+.open-source__cta a,
+.open-source__cta a:link,
+.open-source__cta a:active,
+.open-source__cta a:visited {
+  text-decoration: none;
+  border-radius: 4px;
+  font-size: 16px;
+  padding: 5px 15px;
+  margin: 20px 5px;
+}
+.open-source__cta a i {
+  margin: 0 4px 0 -5px;
+  font-size: 18px;
+}
+.cta--primary {
+  background-color: #00a1ff;
+  color: #fff;
+}
+.cta--primary:hover {
+  background-color: #2eb1fd;
+}
+.cta--alt {
+  color: #333;
+  background-color: #eee;
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fcfcfc),color-stop(100%,#eee));
+  background-image: -webkit-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: -moz-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: -ms-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: -o-linear-gradient(top,#fcfcfc 0,#eee 100%);
+  background-image: linear-gradient(to bottom,#fcfcfc 0,#eee 100%);
+  background-repeat: no-repeat;
+  border: 1px solid #d5d5d5;
+}
+.cta--alt:hover {
+  background-color: #ddd;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(100%, #ddd));
+  background-image: -webkit-linear-gradient(top, #eee 0, #ddd 100%);
+  background-image: -moz-linear-gradient(top, #eee 0, #ddd 100%);
+  background-image: -ms-linear-gradient(top, #eee 0, #ddd 100%);
+  background-image: -o-linear-gradient(top, #eee 0, #ddd 100%);
+  background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
+  border-color: #ccc;
+}
+/* End Open Source */
 
 @media(max-width: 1110px) {
 	#hero ul {
@@ -569,7 +636,7 @@ footer h6 {
 		display: none;
 	}
 }
-@media(max-width: 820px) {
+@media(max-width: 892px) {
 	header h1 {
 		display: none;
 	}

diff --git a/static/css/timetable/framework/page_layout.scss b/static/css/timetable/framework/page_layout.scss
@@ -273,7 +273,7 @@ textarea {
 // End Navicon
 
 
-.nav > li {
+li {
   &.footer-button {
     line-height: 22px;
 
@@ -286,6 +286,20 @@ textarea {
       }
     }
 
+    .footer-button--github {
+      font-size: 13px;
+      color: $g333;
+      background-color: $geee;
+      border-radius: 3px;
+      &:hover {
+        text-decoration: none;
+        background-color: $gddd;
+      }
+      i {
+        margin: 0 3px;
+      }
+    }
+
     div {
       line-height: 20px;
     }
@@ -330,7 +344,7 @@ footer {
   margin: 5px 0;
 }
 
-@media(max-width: 676px) {
+@media(max-width: 710px) {
   .data-last-updated {
     float: none;
     text-align: center;

diff --git a/static/img/splash/grey.png b/static/img/splash/grey.png
diff --git a/static/js/redux/ui/semesterly.jsx b/static/js/redux/ui/semesterly.jsx
@@ -169,30 +169,19 @@ class Semesterly extends React.Component {
               <p className="data-last-updated no-print">Data last
                 updated: { this.props.dataLastUpdated && this.props.dataLastUpdated.length && this.props.dataLastUpdated !== 'null' ? this.props.dataLastUpdated : null }</p>
               <ul className="nav nav-pills no-print">
+                <li className="footer-button" role="presentation"><a href="/termsofservice">Terms</a></li>
+                <li className="footer-button" role="presentation"><a href="/privacypolicy">Privacy</a></li>
                 <li className="footer-button" role="presentation"><a
-                  href="/termsofservice"
-                >Terms</a></li>
+                  href="mailto:contact@semester.ly?Subject=Semesterly">Contact us</a></li>
+                <li className="footer-button" role="presentation"><a target="_blank" rel="noopener noreferrer"
+                  href="http://goo.gl/forms/YSltU2YI54PC9sXw1">Feedback</a></li>
+                <li className="footer-button" role="presentation"><a rel="noopener noreferrer" target="_blank"
+                  href="https://www.facebook.com/semesterly/">Facebook</a></li>
                 <li className="footer-button" role="presentation"><a
-                  href="/privacypolicy"
-                >Privacy</a></li>
-                <li className="footer-button" role="presentation"><a
-                  href="mailto:contact@semester.ly?Subject=Semesterly"
-                >Contact us</a></li>
-                <li className="footer-button" role="presentation"><a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href="http://goo.gl/forms/YSltU2YI54PC9sXw1"
-                >Feedback</a>
-                </li>
-                <li
-                  className="footer-button"
-                  role="presentation"
-                >
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://www.facebook.com/semesterly/"
-                  >Facebook</a>
+                    className="footer-button--github"
+                    target="_blank" rel="noopener noreferrer"
+                    href="https://github.com/noahpresler/semesterly/"
+                  ><i className="fa fa-github"></i>Follow</a>
                 </li>
                 <li className="footer-button">
                   <div

diff --git a/static/js/splash.js b/static/js/splash.js
@@ -16,18 +16,15 @@ GNU General Public License for more details.
 $(document).ready(function() {  
     sizeitup();
 
-    $('#schools-dropdown').click(function(){
-        console.log('toggling');
+    $('#schools-dropdown .mobile-nav-label').click(function(){
         $('#schools-dropdown').toggleClass('open');
     });
 
     $('#schools-dropdown').click(function(e){
-        console.log('preventing');
         e.stopPropagation();
     });
 
     $(document).click(function(){
-        console.log('removing');
         $('#schools-dropdown').removeClass('open');
     });
 

diff --git a/timetable/templates/index.html b/timetable/templates/index.html
@@ -53,8 +53,10 @@ <h1>Semester.ly</h1>
 						<a href="https://chapman.semester.ly">Chapman</a>
 						<a href="https://umich.semester.ly">UMich</a>
 						<a href="https://salisbury.semester.ly">Salisbury</a>
+                        <a href="https://github.com/noahpresler/semesterly/"><i class="fa fa-github"></i>Github</a>
 					</div>
 					<div id="schools-dropdown" class="mobile-nav">
+                        <a href="https://github.com/noahpresler/semesterly/"><i class="fa fa-github"></i>Github</a>
 						<div class="mobile-nav-label">
 							<span>Schools</span>
 							<span class="tip-down"></span>
@@ -121,6 +123,10 @@ <h4>Scheduling your classes for the next semester just got easier!  Semester.ly
 								<div class="square-logo" style="background-image: url(/static/img/school_logos/salisbury-square.png);"></div>
 								<span>Salisbury University</span>
 							</a>
+							<a href="https://github.com/noahpresler/semesterly/">
+                                <div class="square-logo"><i class="fa fa-github"></i></div>
+								<span>Add a School</span>
+							</a>
 						</ul>
 					</div>
 					<div class="col-2-3">
@@ -176,6 +182,17 @@ <h4>A myriad of filters and toggles will narrow your search results to the perfe
 						</div>
 					</div>
 				</div>
+                <div id="open-source" class="reason">
+                    <div class="grid cf">
+                        <h2>Open Source</h2>
+                        <p class="col-10-16 push-3">Semester.ly believes that students know best. University IT departments can't keep up with the latest but students are always on the cutting edge. That’s why Semester.ly is built by students, and always will be. That’s why we have open sourced our platform.</p>
+                        <p class="col-10-16 push-3">Our vision is to make Semester.ly the most popular college student contributed open source project in existence. Our goal is to make it accessible for students to make impactful changes and contributions and we will do everything in our power to enable students to leverage our system to make everyone's semester easier.</p>
+                        <div class="open-source__cta">
+                            <a href="http://semesterly.readthedocs.io/en/latest/" target="_blank" class="cta--primary"><i class="fa fa-code"></i>Get Started</a>
+                            <a href="https://github.com/noahpresler/semesterly" target="_blank" class="cta--alt"><i class="fa fa-github"></i>Github</a>
+                        </div>
+                    </div>
+                </div>
 				<div class="reason" id="authors">
 					<h2>In The News</h2>
 					<h4>A platform built for students, by students</h4>