diff --git a/app/assets/images/appvis.svg b/app/assets/images/appvis.svg new file mode 100644 index 000000000..7a1a3fdf5 --- /dev/null +++ b/app/assets/images/appvis.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/appvis/ai-example.png b/app/assets/images/appvis/ai-example.png new file mode 100644 index 000000000..12771f1cb Binary files /dev/null and b/app/assets/images/appvis/ai-example.png differ diff --git a/app/assets/images/appvis/blocks.png b/app/assets/images/appvis/blocks.png new file mode 100644 index 000000000..1d262c12f Binary files /dev/null and b/app/assets/images/appvis/blocks.png differ diff --git a/app/assets/images/appvis/import-aix.png b/app/assets/images/appvis/import-aix.png new file mode 100644 index 000000000..2c6f23b0a Binary files /dev/null and b/app/assets/images/appvis/import-aix.png differ diff --git a/app/assets/images/appvis/isense-settings.png b/app/assets/images/appvis/isense-settings.png new file mode 100644 index 000000000..99bd0c137 Binary files /dev/null and b/app/assets/images/appvis/isense-settings.png differ diff --git a/app/assets/images/appvis/screenshot.png b/app/assets/images/appvis/screenshot.png new file mode 100644 index 000000000..02c5b5688 Binary files /dev/null and b/app/assets/images/appvis/screenshot.png differ diff --git a/app/assets/images/missing_news.jpg b/app/assets/images/missing_news.jpg deleted file mode 100644 index ba2b6f4af..000000000 Binary files a/app/assets/images/missing_news.jpg and /dev/null differ diff --git a/app/assets/images/news.svg b/app/assets/images/news.svg new file mode 100644 index 000000000..f80af6a67 --- /dev/null +++ b/app/assets/images/news.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/stats.svg b/app/assets/images/stats.svg new file mode 100644 index 000000000..ddff3d6ab --- /dev/null +++ b/app/assets/images/stats.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index aa1c701c3..3acbfda11 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/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; diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.css.scss index 982a24754..332cf6885 100644 --- a/app/assets/stylesheets/home.css.scss +++ b/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 + } +} diff --git a/app/views/home/appvis.html.erb b/app/views/home/appvis.html.erb new file mode 100644 index 000000000..1923f6979 --- /dev/null +++ b/app/views/home/appvis.html.erb @@ -0,0 +1,112 @@ +
+
+

AppVis Extension

+
+
+ +
+
+ App Inventor 2 is an online tool used to create mobile apps for use on Android devices. + It is available for free at ai2.appinventor.mit.edu. + 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. +
+
+ +
+ +
+
+

Get the extension

+
+
+
+
+ <%= link_to image_tag("appvis/import-aix.png", width: "100%"), image_path("appvis/import-aix.png") %> +
+
+ 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. +
+
+ +
+ +
+
+

Set up your project

+
+
+
+
+ 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. +
+
+ <%= link_to image_tag("appvis/isense-settings.png", width: "100%"), image_path("appvis/isense-settings.png") %> +
+
+ +
+ +
+
+

Design your screen

+
+
+
+
+ <%= link_to image_tag("appvis/ai-example.png", width: "100%"), image_path("appvis/ai-example.png") %> +
+
+ 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. +
+
+ +
+ +
+
+

Code your blocks

+
+
+
+
+ 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 many blocks + that make working with iSENSE simple. Combined with a WebViewer component, you can even + view your default visualization right on the app screen! +
+
+ <%= link_to image_tag("appvis/blocks.png", width: "100%"), image_path("appvis/blocks.png") %> +
+
+ +
+ +
+
+

Use your app!

+
+
+
+
+ <%= link_to image_tag("appvis/screenshot.png", width: "100%"), image_path("appvis/screenshot.png") %> +
+
+ With your screen designed and your blocks set up, your app is ready to run on Android devices. + Check out the AI Companion App + for an easy way to test and run your AppVis creations!

+ For more details and the latest on AppVis, check out the + wiki page. +
+
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index bfd12a66d..b6f9173d3 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -6,10 +6,10 @@
-
+
<% if @featured_vis != nil%>
-
+

<%= link_to @featured_vis.title.html_safe, visualization_path(@featured_vis)%> @@ -61,57 +61,52 @@ <% end %>

-
+
-

What's New

+

Explore

-
- <% if @news.first != nil %> -
+
+
+ <%= image_tag "news.svg"%> +

News

+ <% if @news.first != nil %> <% n = @news.first %> - - <% if n.featured_media_id != nil %> - -
- <% mo = MediaObject.find(n.featured_media_id) %> -
"> -
-
- - <% end %> -
- - <%= n.title.html_safe %> - -
- - Written on <%=n.created_at.strftime("%B %d, %Y")%> - -
-
-
- <%= n.summary%> -
-
-
- <%= link_to "Read More", news_path(n) %> -
-
-
+ <%=n.created_at.strftime("%-m/%-d/%y")%> | <%= n.title.html_safe %>
+ <%= n.summary%>
+ <%= link_to "Read More", news_path(n) %> <% end %> +
-
-
-
- Statistics

- <%=User.count%> users registered
- <%=DataSet.count%> data sets contributed
- <%=Project.count%> projects created
-
+
+
+ <%= image_tag "stats.svg"%> +

Statistics

+ + + + +
+ <%= number_with_delimiter(User.count, :delimiter => ',') %>
+ <%= number_with_delimiter(DataSet.count, :delimiter => ',') %>
+ <%= number_with_delimiter(Project.count, :delimiter => ',') %>
+
+ Users
+ Data Sets
+ Projects
+
+
+
+
+
+ <%= image_tag "appvis.svg"%> +

AppVis

+ Easily create your own app featuring iSENSE!
+ <%= link_to 'Get the App Inventor Extension', '/aix' %>
+ <%= link_to 'Learn More', '/appvis' %>
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 3334a304e..5c23f5328 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -37,7 +37,7 @@
  • <%=link_to projects_path do %> Projects<%end%>
  • <%=link_to visualizations_path do %> Visualizations<%end%>
  • <%=link_to tutorials_path do %> Tutorials<%end%>
    • -
  • <%=link_to news_index_path do %> News<%end%>
    • +
  • <%=link_to news_index_path do %> News<%end%>
    • <% if is_admin? %>
  • <%= link_to users_path do%> Users<%end%>
    • <% end %> diff --git a/app/views/news/index.html.erb b/app/views/news/index.html.erb index 9a5f7cc6f..d84e91802 100644 --- a/app/views/news/index.html.erb +++ b/app/views/news/index.html.erb @@ -21,14 +21,50 @@ <% end %>
    - <% @news.each do |n| %> - <%= render 'shared/article_box', {image_id: n.featured_media_id, path: news_path(n), title: n.title.html_safe, - brief: n.summary, content: n.content, date: n.created_at.strftime("%B %d %Y"), width: 12} %> +
    + +
    +
    + + +
    +

    Latest

    +
    +
    +
    + <% if @news.paginate(page: 1).all.first != nil %> + <% n = @news.paginate(page: 1).all.first %> + <%= image_tag((n.featured_media_id == nil) ? "news.svg" : MediaObject.find(n.featured_media_id).src, :id => "latest-news-image") %>

    + <%=n.created_at.strftime("%-m/%-d/%y")%> | <%= n.title.html_safe %>
    + <%= n.summary%>
    + <% end %> +
    +
    +
    + <% if @news.paginate(page: 1).all.first != nil %> + <% n = @news.paginate(page: 1).all.first %> + <%= n.content.html_safe %> <% end %>
    -
    - <%= will_paginate @news, renderer: BootstrapPagination::Rails, - inner_window: 1, outer_window: 0, previous_label: "<<", - next_label: ">>" %> +
    +

    All News

    +
    + <% @news.each do |n| %> + <%= render 'shared/article_box', {image_id: n.featured_media_id, path: news_path(n), title: n.title.html_safe, + brief: ((n.summary == '') or (n.summary == nil)) ? "Click for Details" : n.summary, content: n.content, date: n.created_at.strftime("%-m/%-d/%y | "), width: 6} %> + <% end %> +
    + <%= will_paginate @news, renderer: BootstrapPagination::Rails, + inner_window: 1, outer_window: 0, previous_label: "<<", + next_label: ">>", :params => {:anchor => "all_news"} %> +
    +
    \ No newline at end of file diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb index 8dd9a0f19..859db1911 100644 --- a/app/views/news/show.html.erb +++ b/app/views/news/show.html.erb @@ -15,6 +15,8 @@
    <% end %> + NOTE: Date, Title, and Summary (see the menu) show up on the home page.
    + Please be sure all of these attributes are present. <%end%>
    diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index bfd9244a1..3fc299df9 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -1,6 +1,6 @@
    -
    +