make a nice tagline, make the navbar look non-shit, move to 3 columns

instead of 4, make text wrap properly

Makefile

@@ -21,8 +21,8 @@ clean:
 install:
 	$(MAKE) clean;
 	$(MAKE);
-	rm -rf /srv/http/build/;
-	cp -rT ./build /srv/http/build/;
+	rm -rf ${SRV_ROOT}build/;
+	cp -rT ./build ${SRV_ROOT}build/;
 	cp -rT ./build/scripts/ ${SRV_ROOT}scripts/;
 	cp -rT ./build/styles/ ${SRV_ROOT}styles/;
-	cp search.ini /srv/http/build/;
+	cp search.ini ${SRV_ROOT}build/;

src/scripts/class.tag

@@ -1,8 +1,8 @@
 <class>
     <div class="card-header">
-      <div id='title'> { dept } { title } </div>
-      <div id='prof'> { prof } </div>
-      <div id='sem'> { sem } </div>
+      <div class="text-center wraptext" id='title'> { dept } { title } </div>
+      <div class="wraptext" id='prof'>Taught by: { prof } </div>
+      <div class="wraptext" id='sem'>Running: { sem } </div>
     </div>
     <div if={ books } class="card-body"> 
         <button onclick={ makeShow(this) } class="btn btn-primary show-button">

src/scripts/results.tag

@@ -1,6 +1,6 @@
 <results>
       <div class="courses container">
-       <row class="columns" each={ rows } data="{ this }" classrow={ row }></row>
+       <row class="course-row columns" each={ rows } data="{ this }" classrow={ row }></row>
       </div>
 this.rows = [];
 var self = this;

src/scripts/row.tag

@@ -1,5 +1,5 @@
 <row>
-    <class class="course text-ellipsis text-justify rounded card column col-md-3" each="{ classrow }" data="{ this }"></class>
+    <class class="course text-ellipsis text-justify rounded card column col-md-4" each="{ classrow }" data="{ this }"></class>
 
 this.classrow = opts.classrow
 </row>

src/scripts/search.tag

@@ -24,7 +24,7 @@ function submit(ev) {
     $.getJSON("/search/fc?"+params,
         function(courses) {
             var fcourses = filterCourses(courses);
-            var cgroups = groupsof(4, fcourses);
+            var cgroups = groupsof(3, fcourses);
             results_passer.trigger("new_results", cgroups);
     });
 }

src/styles/search.css

@@ -2,6 +2,10 @@ header {
   color: #1c75bc;
 }
 
+.wraptext {
+  white-space: pre-wrap !important;
+}
+
 .body {
   color: #1c75bc;
 }
@@ -16,14 +20,17 @@ a {
 
 .courses {
   margin-top: 100px;
-  max-width: 85%;
+  max-width: 75%;
 }
 
 .course {
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-  margin-top: 5px !important;
-  margin-bottom: 5px !important;
+  margin-left: 10px !important;
+  margin-top: 20px !important;
+  margin-right: 10px !important;
+}
+
+.course-row {
+  margin-right: 50px !important;
 }
 
 .search-form {
@@ -36,8 +43,8 @@ a {
 }
 
 .form-item {
-  margin-left: 15px;
-  margin-right 15px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 #title {
@@ -105,9 +112,5 @@ a {
 }
 
 .title-div {
-  margin-right:1%;
-  margin-bottom: -3%;
-  margin-top:1%;
-  margin-left:30%;
   font-size: 25px;
 }

src/templates/search.html

@@ -2,15 +2,12 @@
 {% block head %}
   {{super()}}
   <meta name="viewport" content="width=device-width, initial-scale=1">
-<header class="nav navbar">
+<header class="text-center nav navbar">
     <section class="navbar-section">
         <div class="title-div">
-            <strong>Search For Books - by the
-            <a href="https://mgoal.ca/blog" target="_blank">Guerilla Open Access League</a>
-            </strong>
+          <h1>TextBook Commons</h1>
+          <h5>Type in the name of your course and start saving money on your books</h5>
         </div>
-    </section>
-    <section class="navbar-section">
         <search class="search-form"></search>
     </section>
 </header>