v0.2.0 - new admin theme

2 files changed, 338 insertions, 259 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 6a48e94..711a60d 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -1,456 +1,535 @@
 * {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 
-html, body {
-  margin: 0;
-  padding: 0;
-  font-family: "Helvetica", sans-serif;
-  font-weight: 300;
-  font-size: 0.9em;
-  background-image: url('http://okfoc.us/assets/images/photocopy.png');
-  background-position: bottom center;
-  background-repeat: repeat;
-  background-attachment: scroll;
+@import 'https://fonts.googleapis.com/css?family=Roboto';
+html,
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    font-size: 15px;
 }
 
-ul, ol {
-  padding: 0;
-  list-style: none;
+ul,
+ol {
+    padding: 0;
+    list-style: none;
 }
 
 .main.index .resource-category button,
-a {
-  color: #A200FF;
-  text-decoration: none;
-  font-family: Monaco, monospace;
-  text-transform: uppercase;
-}
+a {}
 
-.main.index .resource-category button:hover,
-a:hover {
-  border-bottom: 1px solid #A200FF;
+.main.index .resource-category a {
+    text-decoration: none;
+    color: #000;
+    display: inline-block;
+    font-weight: 500;
+    padding: 10px 2px;
+}
+.main.index .resource-category del a {
+    text-decoration: line-through;
+    opacity: 0.5;
 }
 
-a:visited {
-  color: #A200FF;
+.main.index .resource-category li:hover {
+   background:#ccc!important;
 }
 
+.main.index .resource-category button:hover,
+a:hover {}
+
 .admin-header {
-  height: 50px;
-  background-color: rgba(255,255,255,0.8);
-  border-bottom: 2px solid #ddd;
+    background: #000;
+    color: white;
+    padding: 5px;
+    font-size: 24px;
+    font-weight: 100;
 }
 
-.admin-header .breadcrumb {
-  margin-left: 0.5em;
-  font-size: 2em;
-  color: rgba(0, 0, 0, 0.25);
-  line-height: 50px;
-}
-.admin-header .breadcrumb b {
-  color: #333;
-}
+.admin-header .breadcrumb {}
+
+.admin-header .breadcrumb b {}
 
 .admin-header .site-link {
-  float: right;
-  margin-right: 1em;
-  line-height: 50px;
+    float: right;
+    color: white;
+    font-size: 11px;
 }
 
 .main.index .resource-category {
-  float: left;
-  min-width: 200px;
-  margin: 1em;
-  padding: 1em;
-  background-color: #fff;
-  border: 2px solid #ddd;
+    float: left;
+    min-width: 200px;
+    width: 100%;
+    padding: 0 5px;
+}
+
+.main.index .resource-category ol {
+    width: 100%;
+    columns: 4;
+    list-style-type: decimal-leading-zero;
+    list-style-position: inside;
 }
 
 .main.index .resource-category.active li:before {
-  content: "፧";
-  margin-right: 1em;
+    content: "::";
+    margin-right: 1em;
 }
 
+
 .resource-nav {
-  background: white;
-  width: 10%;
-  margin: 2.5em 1em;
-  padding: 1em;
-  float: left;
-  display: block;
+    background: white;
+    width: 12%;
+    margin: 2.5em 1em;
+    padding: 1em;
+    float: left;
+    display: block;
+}
+
+.resource-nav a {
+  color:white;
+  background: #ccc;
+  padding:5px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-transform: lowercase;
 }
 
 h2 {
-  margin-bottom: 1.5em;
-  line-height: 1;
-  text-transform: uppercase;
-  font-size: 14px;
-  letter-spacing: 6px;
-  text-align: left;
-  font-style: italic;
-  font-family: Comic Sans MS, cursive;
-  font-weight: 100;
-  color: #333;
-  -webkit-transform: rotate(-1deg);
-  transform: rotate(-1deg);
+    font-size: 17px;
+    color: black;
+    border-bottom: 2px solid;
+    padding-bottom: 10px;
 }
 
 .main.index .resource-category nav {
-  float: right;
+    margin-top: 10px;
+    width: 100%;
+    display: inline-block;
+    margin-bottom: 30px;
+}
+
+.main.index .resource-category nav a {
+    margin-right: 0px;
+    padding: 10px;
+    background: #ccc;
+    color: white;
+}
+
+.main.index .resource-category nav a:last-child {
+    background: black;
+    color: white;
 }
 
 .main.index .resource-category.active ol {
-  cursor: -webkit-grab;
-  cursor: grab;
+    cursor: -webkit-grab;
+    cursor: grab;
 }
 
 .main.index .resource-category.active li a {
-  pointer-events: none;
+    pointer-events: none;
 }
 
+.main.index .resource-category.active footer {
+    margin-top: -10px;
+    margin-bottom: -10px;
+}
+
+
 /* Makes the button look like a link */
+
 .main.index .resource-category button {
-  background: none !important;
-  height: 1.5em;
-  border: none;
-  padding: 0 !important;
-  font: inherit;
-  cursor: pointer;
-  font-family: Monaco, monospace;
-  text-transform: uppercase;
+    background: black;
+    color: white;
+    border: none;
+    padding: 10px;
+    font: inherit;
+    cursor: pointer;
+    font-family: Roboto, sans-serif;
 }
 
 .main.index .resource-category .btn {
-  border-bottom: 3px solid rgba(0, 0, 0, 0);
-  color: rgba(0, 0, 0, 0.25);
-  line-height: 20px;
+    font-family: Roboto, sans-serif;
 }
 
-.main.index .resource-category .btn {
-  display: none;
+.main.index .resource-category .btn:hover {}
+
+.add-btn:after {
+    content: " Add Item";
 }
 
-.main.index .resource-category .btn.active {
-  display: inline;
+.main.index .resource-category .btn {
+    display: none;
 }
 
-.main.index .resource-category .btn:hover {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+.main.index .resource-category .btn.active {
+    display: inline;
 }
 
 .main.index .resource-category .btn {
-  margin-right: 1em;
+    margin-right: 10px;
+    font-size: 17px;
 }
 
 .main.index .resource-category .btn:last-child {
-  margin-right: 0;
-}
-.main.index .resource-category .add-btn {
-  font-size: 20px;
+    margin-right: 0;
 }
 
-.main.index .resource-category li {
-  margin: 1em 0;
-}
+.main.index .resource-category .add-btn {}
 
+.main.index .resource-category li:nth-child(2n+2) {
+  background:#f9f9f9;
+}
 
 .main.resource {
-  float: left;
-  margin-top: 2em;
-  width: 85%;
+    float: left;
+    margin-top: 2em;
+    width: 85%;
 }
 
 .main.resource > * {
-  margin: 1em 1em;
+    margin: 1em 1em;
 }
 
-.main.resource form {
-  border-top: 1px solid #ddd;
-  font-size: 1.25em;
-}
+.main.resource form {}
 
 label {
-  clear: left;
-  display: block;
-  float: left;
-  font-weight: normal;
-  background: white;
-  margin-top: 0.5em;
-  margin-right: 0.5em;
-  margin-bottom: 1em;
-  width: 10em;
-  line-height: 1.5em;
-  color: rgba(0, 0, 0, 0.75);
+    clear: left;
+    display: block;
+    float: left;
+    background: white;
+    margin-bottom: 1em;
+    width: 10em;
+    line-height: 17px;
+    font-weight: 500;
+    font-size: 13px;
 }
+
 .property label {
-  border-bottom: 1px solid #000;
+    border-bottom: 1px solid #000;
 }
 
 .main.resource form .property {
-  margin: 1em 0;
+    margin: 1em 0;
 }
 
 .main.resource form input,
 .main.resource form textarea,
 .main.resource form select,
 .main.resource form img {
-  display: block;
-  float: left;
-  width: 25em;
-  font-size: 1.0em;
-  color: #000;
-  border: 1px solid #333;
-  min-height: 2em;
-  padding: 0 0.5em;
-  margin-bottom: 1em;
+    display: block;
+    float: left;
+    width: 25em;
+    font-size: 1.0em;
+    color: #000;
+    border: 1px solid #333;
+    min-height: 2em;
+    padding: 0 0.5em;
+    margin-bottom: 1em;
 }
+
 .main.resource form input[name=id] {
-  width: 15em;
+    width: 15em;
 }
-button, input[type=submit] {
-  cursor: pointer;
+
+button,
+input[type=submit] {
+    cursor: pointer;
 }
+
 .main.resource .date input {
-  /* date inputs need font family override */
-  font-family: "Helvetica", sans-serif;
+    /* date inputs need font family override */
+    font-family: "Helvetica", sans-serif;
 }
+
 .main.resource form .group {
-  position: relative;
-  display: block;
-  float: left;
-  width: 31em;
-  margin-bottom: 1em;
+    position: relative;
+    display: block;
+    float: left;
+    width: 31em;
+    margin-bottom: 1em;
 }
+
 .main.resource form .group label {
-  width: 5em;
-  color: #777;
-  font-size: 0.9em;
-  line-height: 1.4em;
-  margin-bottom: 0;
-  margin-left: -5.8em;
-  text-align: right;
-  border: 0;
-  display: none;
+    width: 5em;
+    color: #777;
+    font-size: 0.9em;
+    line-height: 1.4em;
+    margin-bottom: 0;
+    margin-left: -5.8em;
+    text-align: right;
+    border: 0;
+    display: none;
 }
+
 .main.resource form .group.image input,
 .main.resource form .group.video input[type=text]:first-child,
 .main.resource form .group.loaded.video input[type=text],
 .main.resource form .group input:first-child {
-  display: block;
-  width: 25em;
+    display: block;
+    width: 25em;
 }
+
 .main.resource form .group .checkboxes,
 .main.resource form .group.loaded .checkboxes {
-  clear: left;
-  display: block;
-  max-width: 250px;
-  padding-top: 5px;
+    clear: left;
+    display: block;
+    max-width: 250px;
+    padding-top: 5px;
 }
+
 .main.resource form .group .checkboxes input.flag,
 .main.resource form .group.loaded .checkboxes input.flag {
-  display: inline-block;
-  max-width: 20px;
-  float: none;
+    display: inline-block;
+    max-width: 20px;
+    float: none;
 }
+
 .main.resource form .group .checkboxes label,
 .main.resource form .group.loaded .checkboxes label {
-  display: inline-block;
-  float: none;
-  width: 70px;
-  margin: 0;
-  text-align: left;
+    display: inline-block;
+    float: none;
+    width: 70px;
+    margin: 0;
+    text-align: left;
 }
+
 .main.resource form .group.loaded label {
-  display: block;
+    display: block;
 }
+
 .main.resource form .group.loaded input {
-  display: block;
+    display: block;
 }
+
 .main.resource form .group input[type=text] {
-  width: 20.05em;
-  margin-bottom: 0.1em;
+    width: 20.05em;
+    margin-bottom: 0.1em;
 }
+
 .main.resource form .group.image .image-element,
 .main.resource form .group.video input[type=text],
 .main.resource form .group.loaded input[hidden],
 .main.resource form .group.image.loaded .fields,
 .main.resource form input[hidden] {
-  display: none;
+    display: none;
 }
+
 .main.resource form .group.image.loaded .image-element {
-  display: block;
+    display: block;
 }
+
 .main.resource form .fields {
-  height: 3em;
+    height: 3em;
 }
+
 .main.resource form textarea {
-  padding: 0.5em;
-  height: 15em;
+    padding: 0.5em;
+    height: 15em;
 }
+
 .main.resource form select {
-  margin-top: 0.5em;
+    margin-top: 0.5em;
 }
+
 .main.resource form button {
-  float: left;
-  padding: 0.5em;
-  font-size: 1.0em;
-  margin-top: 1.0em;
+    float: left;
+    padding: 0.5em;
+    font-size: 1.0em;
+    color: white;
+    border: 0;
+    font-weight: 500;
 }
+
 .main.resource form#delete_form button {
-  float: right;
+    float: right;
+    background:red;
+    margin-bottom: 50px
 }
 
+
+.main.resource form#delete_form button:hover {
+    background:black;
+}
+.main.resource form button[type="submit"]{
+  background: black;
+  font-size: 17px;
+  padding:10px;
+}
 .main.resource form ol {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
+
 .main.resource form li {
-  list-style-type: none;
-  display: block;
-  clear: both;
-  height: 7em;
+    list-style-type: none;
+    display: block;
+    clear: both;
+    height: 7em;
 }
+
 .main.resource form img {
-  width: auto;
-  height: auto;
-  max-width: 10em;
-  max-height: 6em;
-  border: 0;
+    width: auto;
+    height: auto;
+    max-width: 10em;
+    max-height: 6em;
+    border: 0;
 }
+
 .main.resource form .images img {
-  cursor: -webkit-grab;
-  cursor: grab;
+    cursor: -webkit-grab;
+    cursor: grab;
 }
+
 .main.resource form textarea.caption {
-  width: 15em;
-  height: 6em;
+    width: 15em;
+    height: 6em;
 }
+
 .main.resource form .audio-element input[type=text],
 .main.resource form .video-element input[type=text] {
-  width: 15em;
+    width: 15em;
 }
+
 .main.resource form .group input[type=text].link-input,
 .main.resource form .group input[type=text].link-input-new {
-  width: 13.05em;
-  padding: 0 0 0 0.5em;
+    width: 13.05em;
+    padding: 0 0 0 0.5em;
 }
+
 .handle {
-  display: block;
-  width: 1em;
-  height: 2em;
-  background: #ddd;
-  float: left;
+    display: block;
+    width: 1em;
+    height: 2em;
+    background: #ddd;
+    float: left;
 }
+
 .main.resource form .links li {
-  height: 2em;
+    height: 2em;
 }
+
 .main .link-list .add-link-btn,
 .main .link-list .remove-link-btn {
-  margin: 0;
-  height: 2em;
-  line-height: 1em;
+    margin: 0;
+    height: 2em;
+    line-height: 1em;
 }
+
 .add-image-button {
-  background: #ddd;
-  clear: left;
-  text-align: left;
-  float: left;
-  margin-right: 1em;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-}
-.add-image-button:hover {
-  background: #def;
+    background: #ddd;
+    clear: left;
+    text-align: left;
+    float: left;
+    margin-right: 1em;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
 }
+
+
 .main.resource form .add-image-button button {
-  margin: 0;
-  pointer-events: none;
-  width: 100%; height: 100%;
+    margin: 0;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
 }
+
 .add-image-button input[type=file] {
-  opacity: 0;
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  margin: 0; padding: 0;
-  cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
 }
+
 .audio-element:hover .remove,
 .video-element:hover .remove,
 .image-element:hover .remove {
-  display: block;
+    display: block;
 }
+
 .audio-element .remove:hover,
 .video-element .remove:hover,
 .image-element .remove:hover {
-	color: red;
+    color: red;
 }
 
 .progress {
-  position: absolute;
-  top: 0; right: -100px;
-  padding: 10px 10px 0 10px;
-  margin: 0px;
-  width: 100px;
-  pointer-events: none;
-  background: #eee;
-  opacity: 0;
-  transition: opacity 0.3s;
+    position: absolute;
+    top: 0;
+    right: -100px;
+    padding: 10px 10px 0 10px;
+    margin: 0px;
+    width: 100px;
+    pointer-events: none;
+    background: #eee;
+    opacity: 0;
+    transition: opacity 0.3s;
 }
+
 .progress .xhr {
-  height: 10px;
-  background: black;
-  margin-bottom: 10px;
-  transition: all 0.2s;
+    height: 10px;
+    background: black;
+    margin-bottom: 10px;
+    transition: all 0.2s;
 }
+
 .progress .xhr div {
-  background: white;
-  transition: all 0.2s;
-  height: 100%;
+    background: white;
+    transition: all 0.2s;
+    height: 100%;
 }
+
 .progress.loading {
-  opacity: 1;
+    opacity: 1;
 }
 
+
 /* 
 .remove {
   display: none;
 }
  */
 
-#delete_form button:hover { color: red }
+#delete_form button:hover {
+    color: red
+}
 
 .template {
-  display: none;
+    display: none;
 }
+
 .disabled {
-  display: none;
+    display: none;
 }
 
+.success,
+.errors {
+    background: white;
+    padding: 10px;
+    width: 50%;
+    border: 1px solid;
+    margin: 10px 5px 0 5px;
 
-.success, .errors {
-  background: white;
-  padding: 9px 8px 7px;
-  width: 50%;
-  line-height: 1.4em;
-  border: 1px solid;
-  margin: 1em;
-  border-radius: 2px;
 }
 
 .success {
-  color: green;
+    color: green;
 }
-.errors  {
-  color: red;
+
+.errors {
+    color: red;
 }
 
 .clear {
-  clear: both;
+    clear: both;
 }
 
 .hidden {
-  display: none;
-}
+    display: none;
+}
\ No newline at end of file
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index 18fad26..0871b43 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -8,13 +8,13 @@ var OKUpload = function(){
   this.imageAction = "/_services/s3/image"
   this.videoAction = "/_services/s3/video"
   this.audioAction = "/_services/s3/audio"
+  this.$progress = $("<div class='progress'>")
+  this.xhrCount = 0
+  this.loadCount = 0
 }
 OKUpload.prototype.bind = function(rapper){
   var uploader = this
   this.rapper = rapper
-  this.$progress = $("<div class='progress'>")
-  this.xhrCount = 0
-  this.loadCount = 0
   
   $(this.rapper).append(this.$progress)
   $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) )