Droplets theme

esp/esp/themes/controllers.py

@@ -188,6 +188,7 @@ def get_less_names(self, theme_name, theme_only=False):
         if not theme_only:
             result += self.global_less()
             result.append(os.path.join(themes_settings.less_dir, 'bootstrap.less'))
+            result.append(os.path.join(themes_settings.less_dir, 'responsive.less'))
             result.append(os.path.join(themes_settings.less_dir, 'variables_custom.less'))
             result.append(os.path.join(themes_settings.less_dir, 'main.less'))
 

esp/esp/themes/tests.py

@@ -41,7 +41,7 @@ def testAvailableThemes(self):
         """ Check that the ThemeController says we have the themes we expect to have. """
 
         tc = ThemeController()
-        names_ref = ['barebones', 'bigpicture', 'circles', 'floaty', 'fruitsalad']
+        names_ref = ['barebones', 'bigpicture', 'circles', 'floaty', 'fruitsalad', 'droplets']
         names_tc = tc.get_theme_names()
         self.assertEqual(set(names_ref), set(names_tc))
 

esp/esp/themes/theme_data/droplets/config_form.py

@@ -0,0 +1,23 @@
+from __future__ import absolute_import
+from django import forms
+
+from esp.themes.forms import ThemeConfigurationForm
+from esp.utils.widgets import NavStructureWidgetWithIcons, ContactFieldsWidget
+
+class ConfigForm(ThemeConfigurationForm):
+    titlebar_prefix = forms.CharField()
+    full_group_name = forms.CharField()
+    show_group_name = forms.BooleanField(required = False, help_text='Should the full group name be shown in the page header?')
+    show_email = forms.BooleanField(required = False, help_text='Should the group email address be shown in the page header?')
+    contact_info = forms.CharField(required = False, widget=forms.Textarea,
+                                   help_text='Generic text to include in the page header. Leave blank to omit this field in the header.')
+    contact_links = forms.Field(required = False, widget=ContactFieldsWidget,
+                                label='Contact links below contact info (use absolute or relative URLs)',
+                                initial=[{"text": "contact us", "link": "/contact.html"}])
+    nav_structure = forms.Field(widget=NavStructureWidgetWithIcons,
+                                help_text="Note that header links are not clickable. However, if the first 5 characters of a user's\
+                                           request path match the first 5 characters of a header's link, then that header will be highlighted.")
+    facebook_link = forms.URLField(required=False, help_text='Leave blank to omit a Facebook link.')
+    # URLField requires an absolute URL, here we probably want relative.
+    faq_link = forms.CharField(required=False, initial='/faq.html',
+                               help_text='Leave blank to omit an FAQ link.')

esp/esp/themes/theme_data/droplets/less/main.less

@@ -0,0 +1,239 @@
+
+#main {
+    h1 {
+        color: @accent2;
+        font-size: 42px;
+        font-weight: normal;
+        margin-bottom: 0.5em;
+    }
+    h2 {
+        color: @accent2;
+        font-size: 32px;
+        font-weight: normal;
+        margin-bottom: 0.3em;
+    }
+    a {
+        color: @accent2;
+        text-decoration: underline;
+    }
+    .btn {
+        border: 1px solid @accent2;
+		background-image: none;
+        &:active, &:focus {
+            outline: none;
+            border-color: @accent1;
+        }
+    }
+	.module_link_large {
+        border: 1px solid @accent2;
+        background: @btnBackground;
+        &:active, &:focus {
+            outline: none;
+            border-color: @accent1;
+        }
+    }
+    .btn-primary {
+		    text-decoration: none;
+    }
+
+    .control-group .controls > ul {
+        list-style: none;
+    }
+    input[type="text"], input[type="password"], textarea, select, label {
+        margin: 0;
+        padding: 0.3em 0.5em;
+        font-size: inherit;
+        line-height: normal;
+        vertical-align: text-bottom;
+    }
+    input[type="text"], input[type="password"], textarea, select {
+        box-sizing: border-box;
+        display: inline-block;
+        -webkit-appearance: none;
+        color: black;
+        background-color: #fdfdfd;
+        border: 1px solid @accent2;
+        &:focus {
+            border-color: @accent1;
+            outline: none;
+            -webkit-box-shadow: none;
+               -moz-box-shadow: none;
+                    box-shadow: none;
+        }
+    }
+    input[type="text"], input[type="password"] {
+        border-width: 1px 0px;
+        border-top: 1px solid #eee;
+        -webkit-border-radius: 0;
+        -moz-border-radius: 0;
+        border-radius: 0;
+        line-height: 2.5em;
+        height: 2.5em;
+    }
+}
+
+
+
+body {
+    background: @bodyBackground;
+    position: relative;
+    padding-top: 40px;
+    width: 100%;
+}
+@media (max-width: 767px) {
+    body {
+        padding: 0px;
+        padding-top: 40px;
+        width: 100%;
+    }
+}
+.container {
+    margin: 0;
+    width: ~"calc(100% - 2rem)";
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+body, .jumbotron {
+    box-sizing: border-box;
+}
+.header-cell {
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+
+div.qsd_edit_visible textarea, textarea.wide {
+    font-family: monospace;
+    width: 100%;
+    box-sizing: border-box;
+}
+input, textarea, select, .uneditable-input {
+    vertical-align: baseline;
+}
+
+.logged_in.nav.hidden {
+    display: none;
+    visibility: hidden;
+}
+
+.btn:hover {
+    background-position: 0;
+}
+
+.navbar .navbar-inner {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: @navFontSize;
+}
+
+@media (max-width: 979px) {
+    .navbar-fixed-top {
+        position: fixed;
+        margin-left: 0px;
+        margin-bottom: 20px;
+        padding-right: 20px;
+    }
+}
+
+#adminbar_content .title {
+    padding: 3px 6px !important;
+}
+
+#adminbar_Manage_content, #adminbar_Other_content {
+    padding: 0px 2px !important;
+}
+
+#adminbar_content .content {
+    padding: 3px 5px;
+}
+
+#adminbar_content a {
+    color: #333333; /* should match the other navbar dropdowns */
+}
+
+@media (max-width: 979px) {
+    #adminbar_content a {
+        color: #999999;
+    }
+}
+
+.admin .dropdown-menu {
+    padding: 0px;
+    overflow: hidden;
+}
+
+.logo {
+    max-width: 300px;
+    max-height: 300px;
+    margin: 0;
+}
+.jumbotron {
+    margin-bottom: 30px;
+    position: relative;
+    padding: 50px 20px;
+    color: #fff;
+    text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 30px rgba(0,0,0,.075);
+    background-size: cover;
+    background-position: center;
+    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+       -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+            box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+}
+.jumbotron-announcements {
+    font-size: 20px;
+
+    p {
+        margin: 0 0 0.5em;
+        font-family: inherit;
+        font-size: 1em;
+        line-height: normal;
+    }
+}
+
+.contact-form {
+    th, td {
+        padding: 4px 3px;
+    }
+    th {
+        vertical-align: top;
+        text-align: right;
+        white-space: nowrap;
+        label {
+            display: block;
+        }
+    }
+    td {
+        vertical-align: top;
+    }
+    #id_message {
+        width: 100% !important;
+        display: block;
+    }
+    #id_subject {
+        width: 100% !important;
+    }
+}
+
+#user_search_form input {
+  box-sizing: border-box;
+  display: block;
+  height: auto;
+  margin: 0;
+  width: 100%;
+}
+
+.form_error {
+  color: red;
+  display: inline-block;
+}
+
+/* copied from fruitsalad, but with #main instead of #content.
+   TODO(benkraft): something less theme-specific for things like this. */
+#main form {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+#reg_types_div {
+    font-size: 13px;
+}

esp/esp/themes/theme_data/droplets/less/variables.less

@@ -0,0 +1,7 @@
+@accent1: #FF8000;
+@accent2: #1C1953;
+
+@navBackground: #fafafa;
+@navFontColor: #333333;
+
+@navFontSize: 16px;

esp/esp/themes/theme_data/droplets/scripts/admin_bar.js

@@ -0,0 +1,94 @@
+ESP = (function(){
+  var loaded = false;
+  var queued_modules = [];
+  var adminbar = document.getElementById('adminbar_content');
+
+  $j(document).ready(function() {
+    loaded = true;
+    for (var i = 0; i < queued_modules.length; i++)
+    {
+      ESP.registerAdminModule(queued_modules[i]);
+    }
+  });
+
+  return {
+    toggleDisplay: function(id) {
+      var el = document.getElementById(id);
+      if (el.style.display == "none") {
+        el.style.display = "block";
+      } else {
+        el.style.display = "none";
+      }
+    },
+    registerAdminModule: function(module) {
+      if (loaded) {
+        var module_wrap = document.createElement("div");
+        var module_class = "adminbar_" + module.name;
+        module_wrap.className = module_class;
+        module_wrap.innerHTML =
+            "<div class='title' onclick='ESP.toggleDisplay(\""+module_class+"_content"+"\");'>" + module.displayName + "</div>";
+        var module_content = document.createElement("div");
+        module_content.id = module_class+"_content";
+        module_content.className = "content";
+        if (module.content_html) {
+            module_content.innerHTML = module.content_html;
+        } else {
+            module_content.appendChild(document.getElementById(module.content_target));
+        }
+        module_wrap.appendChild(module_content);
+
+        adminbar.appendChild(module_wrap);
+      } else {
+        queued_modules.push(module);
+      }
+    }
+  };
+})();
+
+// In Bootstrap 3, replace these with
+// http://getbootstrap.com/components/#input-groups-buttons
+
+ESP.registerAdminModule({
+content_html:
+    '<form id="usersearchform" name="usersearchform" method="get" action="/manage/usersearch">' +
+    '<div class="input-append">' +
+    '<input type="text" id="user_search_field" name="userstr" placeholder="Find User" />' +
+    '<button type="submit" id="user_search_submit" name="search_submit" aria-label="Search" class="btn btn-default"><span class="glyphicon glyphicon-search glyphicon-btn-height" aria-hidden="true"></span></button>' +
+    '</div>' +
+    '</form>',
+    name: 'user_search',
+    displayName: 'User Search'
+});
+
+if (currentPrograms && currentPrograms.forEach) {
+    currentPrograms.forEach(function (currentProgram) {
+        ESP.registerAdminModule({
+            content_html:
+                (currentProgram.class_search ? '<form id="class_search_form" name="class_search_form" method="get" action="/manage/' + currentProgram.urlBase + '/classsearch">' +
+                '<div class="input-append">' +
+                '<input type="text" id="class_search_field" name="namequery" placeholder="Find Class by Title" />' +
+                '<button type="submit" id="class_search_submit" name="class_search_submit" aria-label="Search" class="btn btn-default"><span class="glyphicon glyphicon-search glyphicon-btn-height" aria-hidden="true"></span></button>' +
+                '</div>' +
+                '</form>' : '') +
+                '<div id="adminbar_Manage_content" class="content">' +
+                '<a href="/manage/' + currentProgram.urlBase +'/main">Main Management Page</a><br />' +
+                '<a href="/manage/' + currentProgram.urlBase +'/dashboard">Program Dashboard</a><br />' +
+                '<a href="/onsite/' + currentProgram.urlBase +'/main">Main Onsite Page</a>' +
+                '</div>',
+            name: 'class_search',
+            displayName: 'Manage ' + currentProgram.name
+        });
+    });
+}
+
+ESP.registerAdminModule({
+    content_html: '<div class="content">' +
+                  '<a href="/manage/programs/">Manage all programs</a><br/>' +
+                  '<a href="/manage/pages">Manage static pages</a><br />' +
+                  (debug ? '<a href="/admin/">Administration pages</a><br />' : '') +
+                  '<a href="/admin/filebrowser/browse/">Manage media files</a><br />' +
+                  '<a href="/themes/">Manage theme settings</a>' +
+                  '</div>',
+    name: 'Other',
+    displayName: 'Other Important Links'
+});