column bizness

2 files changed, 49 insertions, 35 deletions

diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index 711a60d..f0069d0 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -20,20 +20,36 @@ ol {
 .main.index .resource-category button,
 a {}
 
-.main.index .resource-category a {
+.main.index .resource-list a {
+-webkit-column-break-inside: avoid;
+          page-break-inside: avoid;
+               break-inside: avoid;
+    font-weight:100;
+    display: block;
+    width:100%;
     text-decoration: none;
     color: #000;
-    display: inline-block;
     font-weight: 500;
     padding: 10px 2px;
+    cursor: pointer;
 }
-.main.index .resource-category del a {
+
+.main.index .resource-list a:before {
+    counter-increment: start;
+    content: counter(start, decimal-leading-zero) ".\00a0\00a0";
+}
+
+.main.index .resource-list a.disabled {
+    display: block;
     text-decoration: line-through;
     opacity: 0.5;
 }
 
-.main.index .resource-category li:hover {
-   background:#ccc!important;
+.main.index .resource-list a:hover {
+   background: #ccc !important;
+}
+.main.index nav a {
+    text-decoration: none;
 }
 
 .main.index .resource-category button:hover,
@@ -58,24 +74,30 @@ a:hover {}
 }
 
 .main.index .resource-category {
-    float: left;
     min-width: 200px;
     width: 100%;
     padding: 0 5px;
 }
 
-.main.index .resource-category ol {
+.main.index .resource-list {
+    position: relative;
+    counter-reset: start;
     width: 100%;
+    -moz-columns: 4;
     columns: 4;
-    list-style-type: decimal-leading-zero;
-    list-style-position: inside;
 }
 
-.main.index .resource-category.active li:before {
-    content: "::";
-    margin-right: 1em;
+.main.index .resource-category.active .resource-list a:before {
+    content: counter(start, decimal-leading-zero) " :: ";
 }
 
+.main.index .resource-list:after {
+    content: " ";
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 1px;
+}
 
 .resource-nav {
     background: white;
@@ -87,12 +109,12 @@ a:hover {}
 }
 
 .resource-nav a {
-  color:white;
-  background: #ccc;
-  padding:5px;
-  margin-bottom: 5px;
-  text-decoration: none;
-  text-transform: lowercase;
+    color: white;
+    background: #ccc;
+    padding: 5px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    text-transform: lowercase;
 }
 
 h2 {
@@ -121,13 +143,13 @@ h2 {
     color: white;
 }
 
-.main.index .resource-category.active ol {
+.main.index .resource-category.active .resource-list a {
     cursor: -webkit-grab;
     cursor: grab;
 }
 
-.main.index .resource-category.active li a {
-    pointer-events: none;
+.main.index .resource-category .resource-list a:nth-child(2n+2) {
+  background:#f9f9f9;
 }
 
 .main.index .resource-category.active footer {
@@ -177,10 +199,6 @@ h2 {
 
 .main.index .resource-category .add-btn {}
 
-.main.index .resource-category li:nth-child(2n+2) {
-  background:#f9f9f9;
-}
-
 .main.resource {
     float: left;
     margin-top: 2em;
diff --git a/themes/okadmin/templates/index.liquid b/themes/okadmin/templates/index.liquid
index ebb1bde..d2ae557 100644
--- a/themes/okadmin/templates/index.liquid
+++ b/themes/okadmin/templates/index.liquid
@@ -29,13 +29,11 @@
                 </header>
                 <ol class="resource-list">
                   {% for data in members %}
-                    <li>
-                      {% if data.disabled %} <del> {% endif %}
-                        <a href="{{resource.type}}/{{data.id}}/">{{data.title}}</a>
-                      {% if data.disabled %} </del> {% endif %}
+                    <a href="{{resource.type}}/{{data.id}}/" {% if data.disabled %}class="disabled"{% endif %}>
+                      {{data.title}}
                       <input class="resource-input" type="hidden" name="{{resource.type}}[{{increment i}}]"
                           value='{{data | stringify | escape_once}}'>
-                    </li>
+                    </a>
                   {% endfor %}
                 </ol>
                 <footer>
@@ -53,13 +51,11 @@
         {% else %}
           <ol class="resource-list">
             {% for data in resource.data %}
-              <li>
-                {% if data.disabled %} <del> {% endif %}
-                  <a href="{{resource.type}}/{{data.id}}/">{{data.title}}</a>
-                {% if data.disabled %} </del> {% endif %}
+              <a href="{{resource.type}}/{{data.id}}/" {% if data.disabled %}class="disabled"{% endif %}>
+                {{data.title}}
                 <input class="resource-input" type="hidden" name="{{resource.type}}[{{forloop.index0}}]"
                     value='{{data | stringify | escape_once}}'>
-              </li>
+              </a>
             {% endfor %}
           </ol>
           <footer>