All styling is done

Raku · Nov 12, 2015 · fade303 · fade303
1 parent 44e5f9f
commit fade303
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ db-builder/assets/js/jquery.tablesorter.min.js
 db-builder/index.html
 db-builder/proto.json
 mojo-app/public/sass/.sass-cache/
+mojo-app/public/sass/sprite.css
 mojo-app/public/sass/cerulean.scss
 mojo-app/public/sass/cerulean/
 mojo-app/public/packed/

diff --git a/db-builder/lib/P6Project.pm b/db-builder/lib/P6Project.pm
@@ -151,7 +151,8 @@ sub write_sprite {
         [qw/camelia.png/],
     )->css;
 
-    spurt $sprite => catfile $self->{output_dir}, qw/assets  css  sprite.css/;
+    spurt $sprite => catfile $self->{output_dir},
+        qw/.. mojo-app public sass sprite.css/;
 
     $self;
 }
@@ -192,8 +193,8 @@ sub write_dist_db {
     );
 
     move DB_FILE, catfile $self->{output_dir}, '..', 'mojo-app', DB_FILE;
-    system hypnotoad => catfile $self->{output_dir},
-                                        qw/.. mojo-app bin ModulesPerl6.pl/;
+    # system hypnotoad => catfile $self->{output_dir},
+                                        # qw/.. mojo-app bin ModulesPerl6.pl/;
 
     $self;
 }

diff --git a/mojo-app/lib/ModulesPerl6.pm b/mojo-app/lib/ModulesPerl6.pm
@@ -47,8 +47,9 @@ sub startup {
 
     # ROUTES
     my $r = $self->routes;
-    $r->get('/'          )->to('root#index');
-    $r->get('/q/:term'   )->to('root#index');
+
+    # multiple search aliases, because why not?
+    $r->get( $_ )->to('root#index') for qw{/  /q/:q  /s/:q  /search/:q};
     $r->get('/dist/:dist')->to('root#dist')->name('dist');
     $r->get('/kwalitee/:dist')->to('root#kwalitee')->name('kwalitee');
 

diff --git a/mojo-app/lib/ModulesPerl6/Model/Dists.pm b/mojo-app/lib/ModulesPerl6/Model/Dists.pm
@@ -42,7 +42,7 @@ sub add {
     my $db = $self->db;
     for my $dist ( @data ) {
         $_ = trim $_//'' for values %$dist;
-        $dist->{travis_status} ||= 'not setup';
+        $dist->{travis_status} ||= 'not set up';
         $dist->{date_updated}  ||= 0;
         $dist->{date_added}    ||= 0;
         $dist->{kwalitee} //= ModulesPerl6::Metrics::Kwalitee->new->kwalitee({

diff --git a/mojo-app/public/pics/bg.jpg b/mojo-app/public/pics/bg.jpg
diff --git a/mojo-app/public/sass/main.scss b/mojo-app/public/sass/main.scss
@@ -1,25 +1,21 @@
 
 body {
-    /* Original vector bg pic is at:
-        http://zoffix.com/new/modules.perl6.org.bg.eps
-    */
-    background: url(/pics/bg.jpg) no-repeat center top fixed;
-    background-size: 100% auto;
+    background: lighten(#2FA4E7, 45%);
 }
 
 header {
     margin-top: 20px;
 
-    .panel-body {
-        /*background: #80B5FF;*/
-    }
-
     #logo {
         margin-top: -60px;
         margin-right: -40px;
     }
 }
 
+.table > thead > tr > th {
+    border-bottom-width: 1px;
+}
+
 @media (max-width: 665px) {
     header #logo {
         margin: 0;
@@ -31,17 +27,115 @@ header {
 }
 
 #dists {
-    .name a {
+    th:first-child,
+    td:first-child {
+        padding-left: 20px;
+    }
+
+    td {
         vertical-align: middle;
     }
+    a {
+        color: darken(#2FA4E7, 10%);
+    }
+
+    .name {
+        a, i {
+            vertical-align: middle;
+            line-height: 32px;
+        }
+
+        .sprite {
+            float: right;
+        }
+    }
     .github {
         background: url(/pics/github-icon.png);
         width: 16px;
         height: 16px;
         display: inline-block;
     }
+
+    .kwalitee, .travis, .stars, .issues, .updated {
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    tbody {
+        .travis {
+            padding: 0;
+            white-space: nowrap;
+            font-size: 95%;
+            background: #a2a2a2;
+            background: -ms-linear-gradient(top,  #a2a2a2 0%,#909090 100%);
+            background: linear-gradient(to bottom,  #a2a2a2 0%,#909090 100%);
+        }
+
+        .travis:hover {
+            background: #a2a2a2;
+        }
+
+        .travis-passing {
+            background: #50ca22;
+            background: -ms-linear-gradient(top,  #50ca22 0%,#3eb810 100%);
+            background: linear-gradient(to bottom,  #50ca22 0%,#3eb810 100%);
+        }
+
+        .travis-passing:hover {
+            background: #50ca22;
+        }
+
+        .travis-pending {
+            background: #dbb428;
+            background: -ms-linear-gradient(top,  #dbb428 0%,#c9a216 100%);
+            background: linear-gradient(to bottom,  #dbb428 0%,#c9a216 100%);
+        }
+
+        .travis-pending:hover {
+            background: #dbb428;
+        }
+
+        .travis-failing {
+            background: #dc6750;
+            background: -ms-linear-gradient(top,  #dc6750 0%,#ca553e 100%);
+            background: linear-gradient(to bottom,  #dc6750 0%,#ca553e 100%);
+        }
+
+        .travis-failing:hover {
+            background: #dc6750;
+        }
+
+        .travis a {
+            padding: 0 5px;
+            text-decoration: none;
+            color: #fff;
+            text-shadow: 1px 1px #333;
+            display: block;
+            height: 32px + 5px + 5px;
+            line-height: 32px + 5px + 5px;
+        }
+
+        .travis-not {
+            font-size: 80%;
+            background: #ddd;
+        }
+
+        .travis-not a {
+            text-shadow: none;
+            color: #333;
+        }
+
+        .travis-not:hover {
+            background: #ccc;
+        }
+    }
 }
 
+#search {
+    margin: 20px 5px 0;
+}
+
+
 /* Bootstrap amendments */
 
 .btn .glyphicon {

diff --git a/mojo-app/templates/layouts/default.html.ep b/mojo-app/templates/layouts/default.html.ep
@@ -44,5 +44,6 @@
 
   %= asset "bootstrap.js"
   %= asset "app.js";
+  <link rel="stylesheet" href="/sass/sprite.css" property="stylesheet">
 </body>
 </html>
diff --git a/mojo-app/templates/root/index.html.ep b/mojo-app/templates/root/index.html.ep
@@ -30,13 +30,18 @@
     <h2 class="panel-title">Project List</h2>
   </div>
 
-  <form action="<%= url_for '/' %>" id="search">
-    <input type="text" id="q" name="q" value="<%= param 'q' %>">
-    <input type="submit" value="Search">
+  <form action="<%= url_for '/' %>" id="search" class="row">
+    <div class="form-group col-sm-8 col-xs-12">
+      <input type="text" id="q" name="q" value="<%= param 'q' %>"
+      class="form-control">
+    </div>
+    <div class="form-group col-sm-4 col-xs-12">
+      <input type="submit" value="Search" class="btn btn-primary btn-block">
+    </div>
   </form>
 
-  <div class="panel-body table-responsive">
-    <table class="table table-condensed" id="dists">
+  <div class="table-responsive">
+    <table class="table table-condensed table-striped panel-body" id="dists">
       <thead>
         <tr>
           <th class="name">Name</th>
@@ -65,7 +70,12 @@
             </td>
             <td class="travis travis-<%= $dist->{travis_status} %>">
               <a href="<%= $dist->{travis_url} %>"
-                ><%= $dist->{travis_status} %></a>
+                >
+                % if ( $dist->{travis_status} eq 'not set up' ) {
+                  <i class="glyphicon glyphicon-question-sign"></i>
+                % }
+                <%= $dist->{travis_status} %>
+              </a>
             </td>
             <td class="stars">
               <a href="<%= $dist->{url} . 'stargazers' %>"