Streamline lobby kiosk ad submissions #822 (#854)

* No longer buried -- called out on all relevant spaces & space types

* Simplify the submission guidelines and drop the verbose PDF

* Generate a basic email template via `mailto` to help focus patron on
  providing pertinent details

Ideally, the kiosk page with guidelines would utilize editable elements
that allow the content to be managed from the back-office. In the
meantime, we're going for the quicker/easier solution of managing
content in the snippet.

app/views/pages/.gitignore

@@ -39,6 +39,7 @@
 !site-feedback.liquid
 !use/collections/special/registration.liquid
 !use/spaces.liquid
+!use/spaces/lobby-cafe/kiosk.liquid
 !use/technology/computing/desktops.liquid
 !use/technology/computing/laptops.liquid
 !use/technology/software.liquid

app/views/pages/use/spaces/lobby-cafe/kiosk.liquid

@@ -0,0 +1,16 @@
+---
+title: Lobby Kiosk
+slug: kiosk
+handle: lobby-kiosk
+position: 1
+listed: false
+published: true
+is_layout: false
+editable_elements:
+  main/page_content: ''
+---
+{% extends 'layouts/basic-page' %}
+
+{% block 'main/dynamic' %}
+  {% include 'dynamic-lobby-kiosk' %}
+{% endblock %}

app/views/snippets/content-type-spaces-types.liquid

@@ -2,6 +2,10 @@
 
 <p>{{ spaces_type.description }}</p>
 
+{% if spaces_type._slug == 'lobby-cafe' %}
+  {% include 'spaces-lobby-kiosk' %}
+{% endif %}
+
 {% assign libcal_widget_counter = 1 %}
 
 {% if spaces_type._slug == 'study' %}

app/views/snippets/content-type-spaces.liquid

@@ -21,6 +21,10 @@
 
   <p>{{ space.description }}</p>
 
+  {% if space._slug contains 'lobby' %}
+    {% include 'spaces-lobby-kiosk' %}
+  {% endif %}
+
   {% include 'room-availability-variables' %}
 
   {% include 'room-availability-logic' %}

app/views/snippets/dynamic-lobby-kiosk.liquid

@@ -0,0 +1,63 @@
+<p>Please ensure you follow these guidelines when submitting your ad for display in the Mann Library lobby.</p>
+
+<section class="lobby-kiosk__category">
+  <h4>Content</h4>
+
+  <div class="lobby-kiosk__list lobby-kiosk__list--nice">
+    <i class="lobby-kiosk__icon big icon checkmark"></i>
+    <ul>
+      <li>Educational accomplishments, opportunities, events</li>
+      <li>Priority given to CALS &amp; CHE</li>
+    </ul>
+  </div>
+
+  <div class="lobby-kiosk__list lobby-kiosk__list--naughty">
+    <i class="lobby-kiosk__icon big icon ban"></i>
+    <ul>
+      <li>For sale/rent</li>
+      <li>Non-academic events (i.e. athletics, social)</li>
+    </ul>
+  </div>
+</section>
+
+<section class="lobby-kiosk__category">
+  <h4>Design</h4>
+
+  <div class="lobby-kiosk__list lobby-kiosk__list--nice">
+    <i class="lobby-kiosk__icon big icon checkmark"></i>
+    <ul>
+      <li>Minimal text with a striking image</li>
+      <li>Include date, time and contact information</li>
+    </ul>
+  </div>
+
+  <div class="lobby-kiosk__list lobby-kiosk__list--naughty">
+    <i class="lobby-kiosk__icon big icon ban"></i>
+    <ul>
+      <li>Text or image heavy</li>
+      <li>Missing pertinent information</li>
+    </ul>
+  </div>
+</section>
+
+<section class="lobby-kiosk__category">
+  <h4>Format</h4>
+
+  <div class="lobby-kiosk__list lobby-kiosk__list--nice">
+    <i class="lobby-kiosk__icon big icon checkmark"></i>
+    <ul>
+      <li>JPG: 1004px wide by 768px high, 1MB max file size</li>
+      <li>Powerpoint: 13.944” wide by 10.667” high; export JPG</li>
+    </ul>
+  </div>
+
+  <div class="lobby-kiosk__list lobby-kiosk__list--naughty">
+    <i class="lobby-kiosk__icon big icon ban"></i>
+    <ul>
+      <li>Any file format besides JPG at 1004px by 768px</li>
+      <li>File size exceeds 1MB</li>
+    </ul>
+  </div>
+</section>
+
+<a class="ui blue button" href="mailto:mann-lcd-l@cornell.edu?subject=Mann%20Lobby%20Kiosk%20submission&body=Start%20Date:%0D%0AEnd%20Date:%0D%0A%0D%0ADon%27t%20forget%20to%20attach%20your%20image!%0D%0A%0D%0A" title="Send your ad via email">Submit your ad for review</a>

app/views/snippets/spaces-lobby-kiosk.liquid

@@ -0,0 +1,11 @@
+<div class="space__lobby-kiosk">
+  <h4 class="space__lobby-kiosk-heading">
+    <i class="tv icon"></i>
+    Advertise your event in our lobby!
+  </h4>
+
+  <p>
+    <a class="space__lobby-kiosk-btn ui tiny blue button" href="{% path_to lobby-kiosk %}">
+    Submit your ad</a> The lobby kiosk is available to help Cornell community members promote educational events and services.
+  <p>
+</div>

src/scss/_config.scss

@@ -97,9 +97,11 @@ $colors: (
   'spring-green': hsl(72, 58%, 85%),
   'alert': 'blond',
   'error': 'tutu',
+  'error-dark': 'error' ('darken': 55%),
   'danger': 'yellow-sea' ('tint': 60%),
   'notice': 'glitter',
   'success': 'ocean-green' ('tint': 75%),
+  'success-dark': 'success' ('darken': 55%),
 
   // Availability
   'available': 'myrtle-green',

src/scss/components/_lobby-kiosk.scss

@@ -0,0 +1,37 @@
+.lobby-kiosk__category {
+  @include span(full nest);
+
+  margin: 0 0 1.5em;
+}
+
+.lobby-kiosk__icon {
+  float: left;
+
+  &.icon { // Override semantic ui default
+    margin: .2em .5em 0 0;
+  }
+}
+
+.lobby-kiosk__list {
+  @include susy-breakpoint($lapdesk, $g-lapdesk) {
+    @include span(4 of 8);
+  }
+
+  @include span(full);
+
+  border-radius: .5em;
+  padding: 1.5em;
+
+  &--nice {
+    @include susy-breakpoint(max-width ($lapdesk - .05), $g-lapdesk) {
+      margin-bottom: 1em;
+    }
+    background-color: color('success');
+    color: color('success-dark');
+  }
+
+  &--naughty {
+    background-color: color('error');
+    color: color('error-dark');
+  }
+}

src/scss/components/_space-finder.scss

@@ -51,6 +51,8 @@
 }
 
 .space-finder__cards {
+  @include break;
+
   &~.ui { // Override semantic ui default
     margin-top: 0;
   }

src/scss/components/_space.scss

@@ -31,6 +31,14 @@
   margin-top: .8em;
 }
 
+.space__lobby-kiosk {
+  margin: 1em 0;
+}
+
+.space__lobby-kiosk-heading {
+  margin: 0 0 .3em;
+}
+
 .space__photo {
   @include susy-breakpoint($tablet, $g-tablet) {
     float: right;

src/scss/main.scss

@@ -39,6 +39,7 @@
 @import 'components/events-home';
 @import 'components/featured';
 @import 'components/landing';
+@import 'components/lobby-kiosk';
 @import 'components/mann-brand';
 @import 'components/mann-form';
 @import 'components/news';