visual improvements, grids

diff --git a/public/css/style.css b/public/css/style.css
index 3d6d771444f5915052f1fd02b46a2c269dbe6c6c..5b28d314705a2c2eadc9a8c835d70dc70b028fb0 100644 (file)
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,7 +1,7 @@
 
 body {
 margin: 0;
-margin-bottom: 25px;
+margin-bottom: 1em;
 padding: 0;
 background-color: #ddd;
 font-family: "Bitstream Vera Sans", sans-serif;
@@ -48,24 +48,22 @@ text-decoration: none;
 
 #page {
 background-color: #ddd;
-width: 750px;
+max-width: 80em;
 margin: auto;
-margin-left: auto;
-padding-left: 0px;
-margin-right: auto;
+display: grid;
+grid-template-columns: auto minmax(25%,20em);
+grid-column-gap: 1em;
+margin: 0 1em 1em 1em;
 }
 
 #content {
 background-color: white;
 border: 3px solid #aaa;
 border-top: none;
-padding: 25px;
-width: 500px;
+padding: 1em;
 }
 
 #sidebar {
-float: right;
-width: 175px;
 }
 
 #about, #getting-started {
@@ -94,12 +92,12 @@ padding-left: 0;
 }
 #sidebar ul h3 {
 margin-top: 25px;
-font-size: 16px;
+font-size: 120%;
 padding-bottom: 10px;
-border-bottom: 1px solid #ccc;
 }
 #sidebar li {
 list-style-type: none;
+border-bottom: 1px solid #ccc;
 }
 #sidebar ul.links li {
 margin-bottom: 5px;
@@ -120,10 +118,8 @@ code, .filepath, .app-info {
 }
 
 #footer {
-clear: both;
 padding-top: 2em;
 text-align: center;
-padding-right: 160px;
 font-family: sans-serif;
 font-size: 10px;
 }
@@ -133,8 +129,8 @@ font-size: 10px;
     display: none;
 }
 .have-lists #lists-sidebar-item { display: block; }
-div.needs-lists { display: none; }
-.have-lists div.needs-lists { display: block; }
+.needs-lists { display: none; }
+.have-lists .needs-lists { display: block; }
 .have-list-items #list-is-empty { display: none; }
 #list-is-empty {
     font-style: italic;
@@ -152,12 +148,9 @@ div.needs-lists { display: none; }
 }
 .input-with-button {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto max-content;
     column-gap: 1ex;
 }
-.input-with-button > button {
-    max-width: max-content;
-}
 
 .list-item-row {
     display: grid;
@@ -182,8 +175,9 @@ div.needs-lists { display: none; }
     opacity: 1;
     padding: 0 0.5ex;
 }
-.edit-trigger:hover {
+.list-edit-trigger:hover {
     background: hsla(0, 0%, 80%, 1);
+    border-left: 1px solid black;
 }
 
 #busy-screen {
@@ -214,12 +208,16 @@ div.needs-lists { display: none; }
     border-radius: 1ex;
 }
 ul#lists > li {
+    padding-inline-start: .75ex;
+    min-height: 2em;
     cursor: pointer;
     border: 1px solid transparent;
+    border-top: 1px solid #bbb;
     transition: 0.25s;
     display: grid;
     grid-template-columns: auto max-content;
     column-gap: 1ex;
+    align-items: center;
 }
 ul#lists > li:hover {
     border: 1px solid black;
@@ -234,17 +232,16 @@ span.list-edit-trigger {
     visibility: hidden;
     opacity: 0;
     transition: 0.25s;
-    margin-top: auto;
-    margin-bottom: auto;
+    height: 100%;
+    min-width: 2em;
+    display: grid;
+    align-items: center;
+    justify-items: center;
 }
 ul#lists > li:hover span.list-edit-trigger {
     visibility: visible;
     opacity: 1;
 }
-ul#lists > li span.ui-icon-disk,
-ul#lists > li.editing span.ui-icon-pencil {
-    display: none;
-}
 
 ul#lists > li.editing span.ui-icon-disk { display: inline-block; }
 

diff --git a/views/index.tt b/views/index.tt
index 9e5d4406dba25faca21c15e57f5e67459d90f487..8e1357568279966fe885f3fdc3283e43cf4951da 100644 (file)
--- a/views/index.tt
+++ b/views/index.tt
@@ -2,31 +2,9 @@
   <p>Loading…</p>
 </div>
 <div id="page" class="loading-lists" lsl-uri-base="<% request.uri_base %>" lsl-environment="<% settings.environment %>" >
-  <div id="sidebar">
-    <ul id="sidebar-items">
-      <li id="lists-sidebar-item">
-        <h3>Shopping lists</h3>
-        <ul id="lists">
-        </ul>
-      </li>
-
-      <li id="no-lists-sidebar-item" class="have-no-lists">
-        <h3>No shopping lists</h3>
-      </li>
-
-      <li id="new-list-sidebar-item">
-        <h3>New shopping list</h3>
-        <div class="input-with-button">
-          <input name="list_name" size="20" maxlength="60" />
-          <button class="ui-icon-plusthick"></button>
-        </div>
-      </li>
-    </ul>
-  </div>
-
   <div id="content">
     <div id="header">
-      <h1 id="selected-list-name" class="have-lists"></h1>
+      <h1 id="selected-list-name" class="needs-lists"></h1>
       <div class="have-no-lists">
         <div class="table-2-col">
           <h1>First create a shopping list</h1><div class="arrow">→</div>
@@ -46,5 +24,27 @@
       </div>
     </div>
   </div>
+
+  <div id="sidebar">
+    <ul id="sidebar-items">
+      <li id="lists-sidebar-item">
+        <h3>Shopping lists</h3>
+        <ul id="lists">
+        </ul>
+      </li>
+
+      <li id="no-lists-sidebar-item" class="have-no-lists">
+        <h3>No shopping lists</h3>
+      </li>
+
+      <li id="new-list-sidebar-item">
+        <h5>New shopping list</h5>
+        <div class="input-with-button">
+          <input name="list_name" size="10" maxlength="60" />
+          <button class="ui-icon-plusthick"></button>
+        </div>
+      </li>
+    </ul>
+  </div>
 </div>
 <!-- vim: set ft=html sw=2 :-->