clockface 1.0.0.beta

data/app/assets/stylesheets/clockface/application.scss

@@ -0,0 +1,80 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_self
+ */
+
+// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
+@import "bootstrap-sprockets";
+@import "bootstrap";
+
+@import "application/fonts";
+@import "application/colors";
+
+@import "application/nav";
+@import "application/footer";
+@import "application/flash";
+
+@import "tasks/index";
+@import "tasks/delete";
+@import "tasks/task_form";
+
+@import "events/index";
+@import "events/delete";
+@import "events/event_form";
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  min-height: 100%;
+  font-family: $paragraph-font;
+  background-color: $white;
+}
+
+ul, li {
+  list-style-type: none;
+  // Override user stylesheet on several browsers
+  -webkit-padding-start: 0;
+  margin: 0;
+}
+
+h1, h2, h3 {
+  margin: 0;
+  font-family: $heading-font;
+}
+
+h1 {
+  color: $dark_gray;
+  font-size: 5rem;
+  font-weight: 300;
+  line-height: 50px;
+  margin: 25px 0;
+}
+
+h2 {
+  color: $black;
+  font-size: 2.25rem;
+  line-height: 30px;
+}
+
+h3 {
+  color: $black;
+  font-size: 1.25rem;
+  line-height: 26px;
+}
+
+a, a:hover, a:focus {
+  text-decoration: none;
+}

data/app/assets/stylesheets/clockface/application/_fonts.scss

@@ -0,0 +1,2 @@
+$heading-font: 'Raleway', sans-serif;
+$paragraph-font: 'Halvetica', sans-serif;

data/app/assets/stylesheets/clockface/application/colors.scss

@@ -0,0 +1,8 @@
+$black: #000000;
+$dark_blue: #003366;
+$light_gray: #EEEEEE;
+$dark_gray: #666666;
+$teal: #10C8CD;
+$white: #FFFFFF;
+$post_it_yellow: #FFFFA5;
+$red: #FF0000;

data/app/assets/stylesheets/clockface/application/flash.scss

@@ -0,0 +1,6 @@
+.flash {
+  display: none;
+  &.active {
+    display: block;
+  }
+}

data/app/assets/stylesheets/clockface/application/footer.scss

@@ -0,0 +1,37 @@
+.application-footer {
+  position: absolute;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  bottom: 0;
+  margin-bottom: 20px;
+}
+
+.application-footer__need-help {
+  position: absolute;
+  height: 40px;
+  line-height: 40px;
+  width: 200px;
+  margin: auto 20px;
+  left: 0;
+}
+
+.application-footer__version {
+  margin: auto 0;
+}
+
+.application-footer__source-btn{
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: Courier New, monospace;
+  color: white;
+  line-height: 40px;
+  text-align: center;
+  background: black;
+  margin: auto 20px auto 10px;
+}

data/app/assets/stylesheets/clockface/application/nav.scss

@@ -0,0 +1,51 @@
+.application-nav {
+  background-color: $dark_blue;
+}
+
+.navbar-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: no-wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.navbar-brand {
+  height: 100%;
+}
+
+.application-nav__icon {
+}
+
+.application-nav__heading {
+  font-size: 32px;
+  color: $teal;
+}
+
+.application-nav__link-container {
+  margin-left: 20px;
+  height: 100%;
+}
+
+// Nav links also have a .navbar-brand sibling class with more specific
+// css rules that take precedence. Make these rules more specific by nesting
+// under .application-nav
+.application-nav {
+  .application-nav__link {
+    color: $white;
+    height: 100%;
+    // Similar to above, .navbar-brand also has a very specific rule that sets
+    // margin-left. Override with importance. Not the best practice but it's
+    // there for when you actually need it, right?
+    margin: auto 5px !important;
+
+    &:hover {
+      color: $teal;
+    }
+  }
+}
+
+.application-nav__link--selected span {
+  border-bottom: 3px solid $red;
+  padding-bottom: 3px;
+}

data/app/assets/stylesheets/clockface/events/delete.scss

@@ -0,0 +1,45 @@
+.events-delete__event-detail {
+  margin: 25px auto;
+}
+
+.events-delete__event-detail-element {
+  height: 25px;
+
+  &.form-group {
+    margin-bottom: 5px;
+  }
+}
+
+.events-delete__event-detail-element--last_triggered_at {
+  span {
+    font-weight: 700;
+  }
+}
+
+.events-delete__event-detail-element--enabled {
+  .enabled-event {
+    color: green;
+  }
+
+  .disabled-event {
+    color: red;
+  }
+}
+
+.events-delete__captcha-label {
+  margin-bottom: 10px;
+
+  span {
+    font-weight: 700;
+    font-family: monospace;
+    font-size: 16px;
+    background-color: $post_it_yellow;
+  }
+}
+
+.events-delete__form-element--captcha {
+  display: inline-block;
+  width: 15%;
+  margin-bottom: 25px;
+  min-width: 110px;
+}

data/app/assets/stylesheets/clockface/events/event_form.scss

@@ -0,0 +1,62 @@
+.events-form__form-element--name {
+}
+
+.events-form__form-element--enabled {
+}
+
+.events-form__form-element--period {
+}
+
+.events-form__form-element--period-value {
+  display: inline-block;
+  width: 5%;
+  min-width: 50px;
+}
+
+.events-form__form-element--period-units {
+  display: inline-block;
+  width: 15%;
+  min-width: 110px;
+}
+
+.events-form__form-element--at {
+}
+
+.events-form__form-element--day-of-week {
+  display: inline-block;
+  width: 15%;
+  min-width: 110px;
+}
+
+.events-form__form-element--hour {
+  display: inline-block;
+  width: 5%;
+  min-width: 50px;
+}
+
+.events-form__form-element--minute {
+  display: inline-block;
+  width: 5%;
+  min-width: 50px;
+}
+
+.events-form__form-element--time_zone {
+}
+
+.events-form__form-element--time_zone select {
+    display: inline-block;
+    width: 30%;
+    min-width: 220px;
+}
+
+.events-form__form-element--if_condition {
+}
+
+.events-form__form-element--if_condition select {
+    display: inline-block;
+    width: 20%;
+    min-width: 110px;
+}
+
+.events-new__form-submit {
+}

data/app/assets/stylesheets/clockface/events/index.scss

@@ -0,0 +1,56 @@
+.events-index__heading-banner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.events-index__new-link {
+  margin: 10px 10px 10px auto;
+}
+
+.events-index__new-btn {
+  height: 45px;
+  width: 45px;
+
+  .glyphicon {
+    font-size: 20px;
+  }
+}
+
+.events-index__events {
+  thead {
+    background-color: $light_gray;
+    color: $dark_gray;
+    font-weight: bold;
+    cursor: pointer;
+
+    .sorttable_nosort {
+      cursor: default;
+    }
+  }
+}
+
+.events-index__events-column--last_triggered_at {
+  span {
+    background-color: $post_it_yellow;
+    font-weight: 700;
+  }
+}
+
+.events-index__events-column--enabled {
+  .enabled-event {
+    color: green;
+  }
+
+  .disabled-event {
+    color: red;
+  }
+}
+
+.events-index__events-column--destroy {
+  .glyphicon {
+    color: red;
+  }
+}

data/app/assets/stylesheets/clockface/tasks/delete.scss

@@ -0,0 +1,29 @@
+.tasks-delete__task-detail {
+  margin: 25px auto;
+}
+
+.tasks-delete__task-detail-element {
+  height: 25px;
+
+  &.form-group {
+    margin-bottom: 5px;
+  }
+}
+
+.tasks-delete__captcha-label {
+  margin-bottom: 10px;
+
+  span {
+    font-weight: 700;
+    font-family: monospace;
+    font-size: 16px;
+    background-color: $post_it_yellow;
+  }
+}
+
+.tasks-delete__form-element--captcha {
+  display: inline-block;
+  width: 15%;
+  margin-bottom: 25px;
+  min-width: 110px;
+}

data/app/assets/stylesheets/clockface/tasks/index.scss

@@ -0,0 +1,47 @@
+.tasks-index__heading-banner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.tasks-index__new-link {
+  margin: 10px 10px 10px auto;
+}
+
+.tasks-index__new-btn {
+  height: 45px;
+  width: 45px;
+
+  .glyphicon {
+    font-size: 20px;
+  }
+}
+
+.tasks-index__tasks {
+  thead {
+    background-color: $light_gray;
+    color: $dark_gray;
+    font-weight: bold;
+    cursor: pointer;
+
+    .sorttable_nosort {
+      cursor: default;
+    }
+  }
+}
+
+.tasks-index__tasks-column--description {
+  width: 40%;
+}
+
+.tasks-index__tasks-column--command {
+  font-family: 'Courier';
+}
+
+.tasks-index__tasks-column--destroy {
+  .glyphicon {
+    color: red;
+  }
+}

data/app/assets/stylesheets/clockface/tasks/task_form.scss

@@ -0,0 +1,20 @@
+.tasks-form__form-element--name {
+  input {
+    width: 400px;
+  }
+}
+
+.tasks-form__form-element--description {
+  textarea {
+    width: 400px;
+  }
+}
+
+.tasks-form__form-element--command {
+  input {
+    width: 400px;
+  }
+}
+
+.tasks-new__form-submit {
+}