update styling

fabfile.py

@@ -6,7 +6,6 @@ import fabric.operations as op
 
 env.hosts = ["wes@mgoal.ca:444"]
 
-
 @task
 def installDeps():
     local("npm install --save-dev rollup rollup-plugin-riot")
@@ -46,8 +45,10 @@ def serveUp():
     sudo("rm -fr /srv/http/build")
     sudo("rm -fr /srv/http/goal/scripts/")
     sudo("mkdir -p /srv/http/goal/scripts")
+    sudo("mkdir -p /srv/http/goal/styles")
     sudo("cp -r /home/wes/tbookbuild /srv/http/build")
     sudo("cp -r /home/wes/tbookbuild/scripts/*js /srv/http/goal/scripts/")
+    sudo("cp -r /home/wes/tbookbuild/styles/*css /srv/http/goal/styles/")
     sudo("cp /home/wes/tbookbuild/search.service /etc/systemd/system/search.service")
     sudo("systemctl daemon-reload")
     sudo("systemctl enable search.service")
@@ -60,6 +61,7 @@ def serveUpLocal():
     local("sudo mkdir -p /srv/http/goal/scripts")
     local("sudo cp -r /home/wes/TextbookEngine/build/ /srv/http/build")
     local("sudo cp -r /home/wes/TextbookEngine/build/scripts/*js /srv/http/goal/scripts/")
+    local("sudo cp -r /home/wes/TextbookEngine/build/styles/*css /srv/http/goal/styles/")
     local("sudo cp /home/wes/TextbookEngine/build/search.service /etc/systemd/system/search.service")
     local("sudo systemctl daemon-reload")
     local("sudo systemctl enable search.service")
@@ -97,5 +99,5 @@ def buildLocal():
     buildTags()
     uglify()
     sass()
-    #buildLocalVenv()
+    buildLocalVenv()
     serveUpLocal()

package.json

@@ -7,10 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup src/scripts/search.js"
   },
-  "repository": {
+  "repository": "git+https://github.com/nisstyre56/TextbookEngine.git",
-    "type": "git",
-    "url": "git+https://github.com/nisstyre56/TextbookEngine.git"
-  },
   "author": "Wesley Kerfoot",
   "license": "AGPL-3.0",
   "bugs": {
@@ -27,6 +24,7 @@
     "whatwg-fetch": "^2.0.2"
   },
   "dependencies": {
+    "spectre.css": "^0.2.9",
     "whatwg-fetch": "^2.0.2"
   }
 }

src/scripts/book.tag

@@ -1,24 +1,20 @@
 <book>
-  <div class="text-clip toast">
+  <li class="menu-item text-ellipsis">
     <p>
-      <button onclick={getresources} class="btn btn-link">
+      <a href="#" onclick={getresources} class="block">
           { booktitle } {bookauthor !== "Ccw" ? "by " + bookauthor : ""}
-      </button>
+      </a>
       <dd>
         <div if={ loading } class="loading">
         </div>
         <p if={ iarchive }>
-          <a target="_blank" href="{ iarchive }">
+          <a class="btn" target="_blank" href="{ iarchive }">
-            <button class="centered btn">
             Internet Archive Result
-            </button>
           </a>
         </p>
         <p if={ openlib }>
-          <a target="_blank" href="{ openlib }">
+          <a class="btn" target="_blank" href="{ openlib }">
-            <button class="centered btn">
             Open Library Result
-            </button>
           </a>
         </p>
         <p if={ noresources } class="centered wraptext">
@@ -26,7 +22,7 @@
         </p>
       </dd>
     </p>
-  </div>
+  </li>
 
 <script>
 import 'whatwg-fetch'

src/scripts/class.tag

@@ -6,14 +6,14 @@
         <div class="wraptext" id='sem'>Running: { sem } </div>
       </div>
       <div if={ books } class="card-body">
-          <button onclick={showbooks} class="btn btn-primary show-button">
+          <div class="dropdown">
-              <strong>Show Textbooks</strong>
+            <button onclick={showbooks} class="btn btn-link dropdown-toggle" tabindex="0">
+              Books <i class="icon-caret"></i>
             </button>
-          <div if={ this.booksshown }>
+            <ul class="menu" if={ this.booksshown }>
-              <dl>
               <book each={ this.R.uniq(books) } data="{ this }">
               </book>
-              </dl>
+            </ul>
           </div>
       </div>
       <div class="toast" if={ !books }>

src/scripts/row.tag

@@ -1,5 +1,5 @@
 <row>
-    <class class="course text-ellipsis text-justify rounded card column col-md-4"
+    <class class="course text-justify rounded card column col-xs-12 col-sm-12 col-md-6 col-lg-4"
            each="{ classrow }"
            data="{ this }">
     </class>

src/scripts/search.tag

@@ -3,8 +3,7 @@
     <div class="form-group">
       <div class="container">
           <div class="columns">
-
+            <div class="column col-xs-12 col-sm-12 col-md-12 col-lg-12">
-            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
               <input onfocus={ showhelp }
                      class="form-input search"
                      placeholder="Course Description"
@@ -16,22 +15,18 @@
           </div>
 
           <div class="columns">
-            <div class="col-sm-6 col-md-6 col-lg-6">
+            <div class="column col-xs-12 col-sm-12 col-md-12 col-lg-12">
-              <select class="semester form-select float-right" aria-labelledby="dLabel" ref="sem">
-                <option value="Fall" selected>Fall</option>
-                <option value="Winter">Winter</option>
-                <option value="Spring/Summer">Spring/Summer</option>
-              </select>
-            </div>
-            <div class="col-sm-6 col-md-6 col-lg-6">
-
               <button
-                class="search-btn btn btn-primary float-left tooltip tooltip-bottom"
+                class="inline-block search-btn btn btn-primary tooltip tooltip-bottom"
                 data-tooltip="Search by keywords"
                 type="submit">
                   Search
               </button>
-
+              <select class="inline-block semester form-select" aria-labelledby="dLabel" ref="sem">
+                <option value="Fall" selected>Fall</option>
+                <option value="Winter">Winter</option>
+                <option value="Spring/Summer">Spring/Summer</option>
+              </select>
             </div>
           </div>
       </div>

src/styles/search.scss

@@ -68,125 +68,31 @@ a {
   margin-right: 10px !important;
 }
 
-.course-row {
+.course-row {}
-  margin-right: 50px !important;
-}
 
-.search-form {
+.search-form {}
-  margin-top: 6%;
-  -webkit-appearance: none !important;
-}
 
 .book-title {
   margin-right: 0px !important;
 }
 
 .search {
-  max-width: 60%;
-  margin-bottom: 10px;
-  margin-left: auto;
-  margin-right: auto;
-  @media (max-width: 735px) {
-    max-width: 80%;
-  }
-  @media (max-width: 480px) {
-    max-width: 100%;
   margin-bottom: 10px;
-  }
 }
 
-.semester {
+.semester {}
-  margin-bottom: 10px;
-  margin-right: 5px;
-  @media (max-width: 480px) {
-    max-width: 100%;
-    margin-bottom: 10px;
-  }
-}
 
 .search-btn {
-  margin-bottom: 10px;
+  margin: auto !important;
-  margin-left: 5px;
-  @media (max-width: 480px) {
-    max-width: 100%;
-    margin-bottom: 10px;
-  }
 }
 
-.search-controls {
+.title {}
-  margin-top: 5px;
-  margin-left: 20%;
-}
 
-.title {
+.header-text {}
-  font-weight: bolder;
-  float: right;
-  margin-right: 10%;
-}
 
-.header-text {
+.logo {}
-  margin: auto;
-  max-width: 80%;
-}
 
-.ui-autocomplete {
+.page-top {}
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 1000;
-    float: left;
-    display: none;
-    min-width: 160px;
-    padding: 4px 0;
-    margin: 0 0 10px 25px;
-    list-style: none;
-    background-color: #ffffff;
-    border-color: #ccc;
-    border-color: rgba(0, 0, 0, 0.2);
-    border-style: solid;
-    border-width: 1px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -moz-background-clip: padding;
-    background-clip: padding-box;
-}
-
-.ui-menu-item > a.ui-corner-all {
-    display: block;
-    padding: 3px 15px;
-    clear: both;
-    font-weight: normal;
-    line-height: 18px;
-    color: #555555;
-    white-space: nowrap;
-    text-decoration: none;
-}
-
-.ui-state-hover, .ui-state-active {
-    color: #ffffff;
-    text-decoration: none;
-    background-color: #0088cc;
-    border-radius: 0px;
-    -webkit-border-radius: 0px;
-    background-image: none;
-}
-
-.logo {
-  float: left;
-  margin-left: -20%;
-  margin-top: 15px;
-  @media (max-width: 480px) {
-    margin-left: 45% !important;
-  }
-}
-
-.page-top {
-  font-size: 15px;
-  margin: auto;
-  width: 80% !important;
-}
 
 .help-toast {
   background-color: rgba(28,117,188, 0.7) !important;

src/templates/search.html

@@ -3,24 +3,22 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <header class="text-center nav navbar">
   <section class="page-top navbar-section">
-    <div class="container header-text">
+    <div class="container">
       <div class="columns">
-        <div class="col-sm-9 col-md-9 col-lg-9 text-center">
+        <div class="column">
-          <h1 class="title">TextBook Commons</h1>
+          <h1 class="title inline-block">TextBook Commons</h1>
-        </div>
+          <figure class="inline-block logo avatar avatar-xl">
-        <div class="col-sm-3 col-md-3 col-lg-3">
-          <figure class="logo avatar avatar-xl">
             <img src="https://mgoal.ca/goal.png" />
           </figure>
         </div>
       </div>
       <div class="columns">
-        <div class="title col-sm-12 col-md-12 col-lg-12">
+        <div class="title column col-sm-12 col-md-12 col-lg-12">
           <h5>Search for a course and find your books</h5>
         </div>
       </div>
-    </div>
     <search></search>
+    </div>
   </section>
 </header>
 <html>

src/website.py

@@ -14,8 +14,6 @@ from archive import searchIA
 cache = MemcachedCache(['127.0.0.1:11211'])
 
 def predict(fieldtype, term):
-    print(fieldtype)
-    print(term)
     if not term:
         return jsonify([])
     else:
@@ -77,7 +75,6 @@ def ClassSearch(configfile=None):
         params = request.json
         if params is None:
             return jsonify(False)
-        print(params)
         author = params["author"]
         title = params["title"]
 
@@ -87,11 +84,9 @@ def ClassSearch(configfile=None):
 
         # Cache the result of the open library search
         openlib = cacheit("openlib"+title+author, lambda : bookUrls(title, author))
-        print(openlib)
 
         # cache the result of an internet archive search
         iarchive = cacheit("iarchive"+title+author, lambda : searchIA(title, author))
-        print(iarchive)
 
         if not (any(openlib) or any(iarchive)):
             # We literally could not find ANYTHING