Merge pull request #2691 from doug-salvati/ds2685-2

Improved UI styling plus a section for AppVis

app/assets/stylesheets/application.css.scss

@@ -35,6 +35,10 @@ $table-bg-accent: #E8E8E8;
   word-wrap: break-word;
 }
 
+.article_box {
+  background: #c5e3ff;
+}
+
 .badges {
   display: flex;
   justify-content: space-between;
@@ -240,6 +244,53 @@ body {
   padding-bottom: 20px !important;
 }
 
+.explore-item {
+  box-shadow: 2px 3px 1px rgba(0,0,0,.25);
+  border-radius: 5px;
+  min-height: 210px;
+  margin-bottom: 1ex;
+  padding: 25px;
+  text-align: center;
+  color: white;
+
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  img {
+    height: 100px;
+  }
+}
+
+#news {
+  background: #bcd66f;
+  background: -moz-linear-gradient(top,  #bcd66f 0%, #60c600 40%, #1f9100 100%);
+  background: -webkit-linear-gradient(top,  #bcd66f 0%,#60c600 40%,#1f9100 100%);
+  background: linear-gradient(to bottom,  #bcd66f 0%,#60c600 40%,#1f9100 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcd66f', endColorstr='#1f9100',GradientType=0 );
+}
+
+#stats {
+  background: #1e5799;
+  background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+  background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
+  background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
+}
+
+#appvis {
+  background: #e5af4b;
+  background: -moz-radial-gradient(center, ellipse cover,  #e5af4b 0%, #d1a327 22%, #ff3232 100%);
+  background: -webkit-radial-gradient(center, ellipse cover,  #e5af4b 0%,#d1a327 22%,#ff3232 100%);
+  background: radial-gradient(ellipse at center,  #e5af4b 0%,#d1a327 22%,#ff3232 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5af4b', endColorstr='#ff3232',GradientType=1 );
+}
+
 .tag-expando-button {
   float: right;
 }
@@ -322,40 +373,82 @@ body {
     height: 110px;
     overflow-y: hidden;
     position: relative;
+    margin-top: 5px;
+    background: white;
+    border: 1px solid #c5e3ff;
+    border-radius: 10px;
+  }
+  .article_page_content_text {
+    padding: 5px;
   }
   .article_page_date {
-    font-size:0.8em;
+    font-size: 1em;
     margin-bottom: 20px;
   }
   .article_page_link {
     position: absolute;
     bottom: 0;
-    padding-top: 10px;
+    padding-top: 20px;
     text-align: center;
     width: 100%;
-    background: linear-gradient(rgba(221, 221, 211, 0),
-      rgba(221, 221, 221, 1) 45%,
-      rgba(221, 221, 221, 1));
+    background: linear-gradient(rgba(256,256,256,0), white 45%);
+    border-radius: 0 0 10px 10px;
   }
   .article_page_subtitle {
-    height: 20px;
+    a {color: black; }
+    font-size: 1.25em; // Larger than title b/c usually title is just version #
     white-space: nowrap;
     overflow: hidden;
   }
   .article_page_title {
     white-space: nowrap;
-    font-size: 18px;
+    font-size: 1em;
+    margin-bottom: 20px;
+  }
+  .article_date_title {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .article_date_title:hover {
+    .article_page_title {
+      white-space: normal;
+      overflow: visible;
+    }
+  }
+  .article_page_subtitle:hover {
+      white-space: normal;
+      overflow: visible;
   }
 }
 
+#latest-news-image {
+  height: auto;
+  width: 150px;
+}
+
 .item-image-link {
   float: left;
   display: block;
-  width: 210px;
-  height: 210px;
+  width: 160px;
+  height: 160px;
   background-size: cover;
-  margin-right: 5px;
+  margin-right: 15px;
   background-position: center center;
+  border: 1px solid #c5e3ff;
+  border-radius: 10px;
+}
+
+#main_feature {
+  border: 1px solid #c5e3ff;
+  border-radius: 10px;
+  background: #c5e3ff;
+  background: -webkit-linear-gradient(bottom, #c5e3ff 0%, #ffffff 99%);
+  background: -moz-linear-gradient(bottom, #c5e3ff 0%, #ffffff 99%);
+  background: -o-linear-gradient(bottom, #c5e3ff 0%, #ffffff 99%);
+  background: linear-gradient(to top, #c5e3ff 0%, #ffffff 99%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e3ff', endColorstr='#ffffff',GradientType=1 );
+  box-shadow: 0px 3px 6px 0px rgba(200,200,200,1);
+  margin-bottom: 32px;
 }
 
 .mainContent {
@@ -367,9 +460,15 @@ body {
 .mdl-card {
   height: 295px !important;
   width: initial !important;
+  border: 1px solid #c5e3ff;
+  border-radius: 10px;
   margin-bottom: 2em;
   line-height: initial;
   background: #ddd !important;
+  background: -moz-linear-gradient(bottom, #c5e3ff 0%, #ffffff 70%) !important;
+  background: -webkit-linear-gradient(bottom, #c5e3ff 0%,#ffffff 70%) !important;
+  background: linear-gradient(to top, #c5e3ff 0%,#ffffff 70%) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e3ff', endColorstr='#ffffff',GradientType=1 ) !important;
 }
 
   .mdl-card__title-text {
@@ -548,8 +647,6 @@ body {
 }
 
 .search-box {
-  background-color: #ddd;
-  box-shadow: 2px 3px 1px grey;
   padding: 2em;
   margin-bottom: 2ex;
 }
@@ -577,10 +674,9 @@ body {
 }
 
 .wide-item {
-  background-color: #ddd;
-  box-shadow: 2px 3px 1px grey;
-  min-height: 210px;
-  margin-bottom: 1ex;
+  margin-bottom: 2ex;
+  padding: 15px;
+  border-radius: 10px;
 
   .item-image {
     height: 210px;

app/assets/stylesheets/home.css.scss

@@ -55,3 +55,18 @@ body[data-page-name="home/formulas_help"] {
     padding: 20px;
   }
 }
+
+#homepage_feature {
+  border: 1px solid #c5e3ff;
+  border-radius: 10px;
+  #description_area {
+    border-right: 1px solid #c5e3ff;
+    border-radius: 10px 0 0 10px;
+    background: #c5e3ff;
+    background: -moz-linear-gradient(bottom, #c5e3ff 0%,#ffffff 99%);
+    background: -webkit-linear-gradient(bottom, #c5e3ff 0%,#ffffff 99%);
+    background: linear-gradient(to top, #c5e3ff 0%,#ffffff 99%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e3ff', endColorstr='#ffffff',GradientType=1 );
+    height: 400px; // Vis height is constant
+  }
+}

app/views/home/appvis.html.erb

@@ -0,0 +1,112 @@
+<div class="row">
+  <div class="col-md-12">
+    <h1><i class="fa fa-puzzle-piece" style="color: orange;"></i> AppVis Extension</h1>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12" style="text-align: justify; line-height: 2em;">
+    App Inventor 2 is an online tool used to create mobile apps for use on Android devices.
+    It is available for free at <a href="http://ai2.appinventor.mit.edu">ai2.appinventor.mit.edu</a>.
+    This page gives a quick look at AppVis, an extension for usage of App Inventor 2 in
+    conjunction with iSENSE.   With AppVis, App Inventor 2 apps are able to upload data sets
+    to a project, and retrieve a URL of a visualization of a project.
+  </div>
+</div>
+
+<hr>
+
+<div class="row">
+  <div class="col-md-12">
+    <h3>Get the extension</h3>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-4">
+    <%= link_to image_tag("appvis/import-aix.png", width: "100%"), image_path("appvis/import-aix.png") %>
+  </div>
+  <div class="col-md-8" style="text-align: justify; line-height: 2em;">
+    Start a new project on App Inventor 2 where you would like to use AppVis.
+    The last option on the Palette found on the left side of the screen is "Extension".
+    Click that, and then click where it says "Import Extension".
+    You will be prompted to either import an extension from your computer,
+    or use a URL. Use a URL, paste in the link <%= link_to 'isenseproject.org/aix', '/aix' %>,
+    and click "Import" to finish. iSENSEPublisher should be installed, and can be dragged into the
+    Viewer just as any other regular component.
+  </div>  
+</div>
+
+<hr>
+
+<div class="row">
+  <div class="col-md-12">
+    <h3>Set up your project</h3>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-4" style="text-align: justify; line-height: 2em;">
+    You don't need to change much to set up your iSENSE project for use with App Inventor 2.
+    What you need to do is set up a contributor key and find your project ID.
+  </div>
+  <div class="col-md-8">
+    <%= link_to image_tag("appvis/isense-settings.png", width: "100%"), image_path("appvis/isense-settings.png") %>
+  </div>
+</div>
+
+<hr>
+
+<div class="row">
+  <div class="col-md-12">
+    <h3>Design your screen</h3>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-8">
+    <%= link_to image_tag("appvis/ai-example.png", width: "100%"), image_path("appvis/ai-example.png") %>
+  </div>
+  <div class="col-md-4" style="text-align: justify; line-height: 2em;">
+    These are all the current editable properties in the Designer page of App Inventor 2 for the iSENSEPublisher extension.
+    ContributorKey is your contributor key from the previous step, and ProjectID is from the previous step as well.
+    UseVis specifies the visualization that will show up if you try to view it in the app.
+  </div>
+</div>
+
+<hr>
+
+<div class="row">
+  <div class="col-md-12">
+    <h3>Code your blocks</h3>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-6" style="text-align: justify; line-height: 2em;">
+    Apps made in App Inventor are powered by code blocks.
+    In addition to the numerous blocks App Inventor already has for you to use,
+    the AppVis extension includes <a href="https://github.com/mck529/appinventor-sources/wiki/Code-Blocks">many blocks</a>
+    that make working with iSENSE simple.  Combined with a WebViewer component, you can even 
+    <a href="https://github.com/mck529/appinventor-sources/wiki/Code-Blocks#getvisurl">view your default visualization</a> right on the app screen!
+  </div>
+  <div class="col-md-6">
+    <%= link_to image_tag("appvis/blocks.png", width: "100%"), image_path("appvis/blocks.png") %>
+  </div>
+</div>
+
+<hr>
+
+<div class="row">
+  <div class="col-md-12">
+    <h3>Use your app!</h3>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-3">
+    <%= link_to image_tag("appvis/screenshot.png", width: "100%"), image_path("appvis/screenshot.png") %>
+  </div>
+  <div class="col-md-9" style="text-align: justify; line-height: 2em;">
+     With your screen designed and your blocks set up, your app is ready to run on Android devices.
+     Check out the <a href="https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3">AI Companion App</a>
+     for an easy way to test and run your AppVis creations!<br><br>
+     For more details and the latest on AppVis, check out the
+     <a href="https://github.com/mck529/appinventor-sources/wiki">wiki page</a>.
+  </div>
+</div>