Add pool CRUD operations/pages

4 files changed, 168 insertions, 0 deletions

diff --git a/client/css/pool-categories-view.styl b/client/css/pool-categories-view.styl
new file mode 100644
index 0000000..3e87635
--- /dev/null
+++ b/client/css/pool-categories-view.styl
@@ -0,0 +1,30 @@
+@import colors
+
+.content-wrapper.pool-categories
+    width: 100%
+    max-width: 45em
+    table
+        border-spacing: 0
+        width: 100%
+        tr.default td
+            background: $default-pool-category-background-color
+        td, th
+            padding: .4em
+            &.color
+                input[type=text]
+                    width: 8em
+            &.usages
+                text-align: center
+            &.remove, &.set-default
+                white-space: pre
+        th
+            white-space: nowrap
+            &:first-child
+                padding-left: 0
+            &:last-child
+                padding-right: 0
+        tfoot
+            display: none
+    form
+        width: auto
+
diff --git a/client/css/pool-input-control.styl b/client/css/pool-input-control.styl
new file mode 100644
index 0000000..3f71abe
--- /dev/null
+++ b/client/css/pool-input-control.styl
@@ -0,0 +1,53 @@
+@import colors
+
+div.pool-input
+    position: relative
+
+    .main-control
+        display: flex
+        input
+            flex: 5
+        button
+            flex: 1
+            margin: 0 0 0 0.5em
+
+
+ul.compact-pools
+    width: 100%
+    margin: 0.5em 0 0 0
+    padding: 0
+    li
+        margin: 0
+        width: 100%
+        line-height: 140%
+        white-space: nowrap
+        overflow: hidden
+        text-overflow: ellipsis
+        transition: background-color 0.5s linear
+        a
+            display: inline
+        a:focus
+            outline: 0
+            box-shadow: inset 0 0 0 2px $main-color
+        &.implication
+            background: $implied-pool-background-color
+            color: $implied-pool-text-color
+        &.new
+            background: $new-pool-background-color
+            color: $new-pool-text-color
+        &.duplicate
+            background: $duplicate-pool-background-color
+            color: $duplicate-pool-text-color
+    i
+        padding-right: 0.4em
+
+div.pool-input, ul.compact-pools
+    .pool-usages, .pool-weight, .remove-pool
+        color: $inactive-link-color
+        unselectable()
+    .pool-usages, .pool-weight
+        font-size: 90%
+    .pool-usages, .pool-weight
+        margin-left: 0.7em
+    .remove-pool
+        margin-right: 0.5em
diff --git a/client/css/pool-list-view.styl b/client/css/pool-list-view.styl
new file mode 100644
index 0000000..2333a37
--- /dev/null
+++ b/client/css/pool-list-view.styl
@@ -0,0 +1,52 @@
+@import colors
+
+.pool-list
+    table
+        width: 100%
+        border-spacing: 0
+        text-align: left
+        line-height: 1.3em
+        tr:hover td
+            background: $top-navigation-color
+        th, td
+            padding: 0.1em 0.5em
+        th
+            white-space: nowrap
+            background: $top-navigation-color
+        .names
+            width: 28%
+        .usages
+            text-align: center
+            width: 8%
+        .creation-time
+            text-align: center
+            width: 8%
+            white-space: pre
+        ul
+            list-style-type: none
+            margin: 0
+            padding: 0
+            display: inline
+            li
+                padding: 0
+                display: inline
+                &:not(:last-child):after
+                    content: ', '
+        @media (max-width: 800px)
+            .implications, .suggestions
+                display: none
+
+.pool-list-header
+    label
+        display: none !important
+    text-align: left
+    form
+        width: auto
+    input[name=search-text]
+        width: 25em
+        @media (max-width: 1000px)
+            width: 100%
+    .append
+        vertical-align: middle
+        font-size: 0.95em
+        color: $inactive-link-color
diff --git a/client/css/pool-view.styl b/client/css/pool-view.styl
new file mode 100644
index 0000000..bf16b79
--- /dev/null
+++ b/client/css/pool-view.styl
@@ -0,0 +1,33 @@
+#pool
+    width: 100%
+    max-width: 40em
+    h1
+        word-break: break-all
+        line-height: 130%
+        margin-top: 0
+    form
+        width: 100%
+    .pool-edit
+        textarea
+            height: 10em
+    .pool-summary
+        section
+            &.description
+                margin: 1.5em 0 0 0
+            &.details
+                vertical-align: top
+                padding-right: 0.5em
+                ul
+                    margin: 0
+                    padding: 0
+                    list-style-type: none
+                li
+                    display: inline
+                    margin: 0
+                    padding: 0
+                li:not(:last-of-type):after
+                    content: ', '
+                ul:empty:after
+                    content: '(none)'
+                section
+                    margin-bottom: 1em