From: Damyan Ivanov Date: Sat, 5 Mar 2022 08:35:12 +0000 (+0000) Subject: visual improvements, grids X-Git-Url: https://git.ktnx.net/?a=commitdiff_plain;h=14917f67156e10a628489226af6d9e7ed274ac4e;p=lsl.git visual improvements, grids --- diff --git a/public/css/style.css b/public/css/style.css index 3d6d771..5b28d31 100644 --- 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 9e5d440..8e13575 100644 --- a/views/index.tt +++ b/views/index.tt @@ -2,31 +2,9 @@

Loading…

- -
+ +