From ac0ceac6474b5b9050c21192622c62d8c902be31 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 9 Sep 2016 00:46:12 -0400 Subject: [PATCH] more list styling throughout vault --- src/popup/app/current/views/current.html | 2 +- src/popup/app/settings/views/settings.html | 45 ++-- src/popup/app/tools/views/tools.html | 2 +- src/popup/app/vault/views/vault.html | 6 +- src/popup/app/vault/views/vaultAddSite.html | 91 ++++---- src/popup/app/vault/views/vaultViewSite.html | 56 +++-- src/popup/less/components.less | 228 +++++++++++++++++++ src/popup/less/popup.less | 143 +----------- src/popup/less/variables.less | 10 + 9 files changed, 362 insertions(+), 221 deletions(-) create mode 100644 src/popup/less/components.less create mode 100644 src/popup/less/variables.less diff --git a/src/popup/app/current/views/current.html b/src/popup/app/current/views/current.html index 4bdf6c1543..e45e5d94b2 100644 --- a/src/popup/app/current/views/current.html +++ b/src/popup/app/current/views/current.html @@ -1,6 +1,6 @@ 
Current Sites
-
+
Some content for your current sites.
diff --git a/src/popup/app/settings/views/settings.html b/src/popup/app/settings/views/settings.html index 8a56ba8043..49f01a368f 100644 --- a/src/popup/app/settings/views/settings.html +++ b/src/popup/app/settings/views/settings.html @@ -1,25 +1,36 @@ 
Settings
-
+
-
- Manage +
+
+ Manage +
+
+ + Folders + + + Sync + +
- - Folders - - - Sync - -
- Current Session +
+
+ Current Session +
+
+ + Lock + + + Log out + +
+
+ This is a footer note. +
- - Lock - - - Log out -
diff --git a/src/popup/app/tools/views/tools.html b/src/popup/app/tools/views/tools.html index a0cd9eaeef..057c98ca80 100644 --- a/src/popup/app/tools/views/tools.html +++ b/src/popup/app/tools/views/tools.html @@ -1,6 +1,6 @@ 
Tools
-
+
Some content for your tools.
diff --git a/src/popup/app/vault/views/vault.html b/src/popup/app/vault/views/vault.html index bd5a75d5d8..fb50773b5b 100644 --- a/src/popup/app/vault/views/vault.html +++ b/src/popup/app/vault/views/vault.html @@ -2,13 +2,13 @@
My Vault
-
+
-
+
{{folder.name}}
- + {{site.name}} {{site.username}} diff --git a/src/popup/app/vault/views/vaultAddSite.html b/src/popup/app/vault/views/vaultAddSite.html index 3aad81e3c5..927ac0cede 100644 --- a/src/popup/app/vault/views/vaultAddSite.html +++ b/src/popup/app/vault/views/vaultAddSite.html @@ -5,49 +5,58 @@
-
- Site Information +
+
+ Site Information +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + Generate Password + + +
-
- - +
+
+
+ + +
+
+ + +
+
-
- - -
-
- - -
-
- - -
- - Generate Password - - -
-   -
-
- - -
-
- - -
-
- Notes -
-
- +
+
+ +
+
+
+ +
+
diff --git a/src/popup/app/vault/views/vaultViewSite.html b/src/popup/app/vault/views/vaultViewSite.html index 826f4ae436..ec514e4476 100644 --- a/src/popup/app/vault/views/vaultViewSite.html +++ b/src/popup/app/vault/views/vaultViewSite.html @@ -4,31 +4,39 @@
View Site
-
-
- Site Information +
+
+
+ Site Information +
+
+
+ Name + {{site.name}} +
+
+ Website + {{site.uri}} +
+
+ Username + {{site.username}} +
+
+ Password + {{site.password}} +
+
-
-
Name
- {{site.name}} -
-
-
Website
- {{site.uri}} -
-
-
Username
- {{site.username}} -
-
-
Password
- {{site.password}} -
-
- Notes -
-
- {{site.notes}} +
+
+ Notes +
+
+
+ {{site.notes}} +
+
diff --git a/src/popup/less/components.less b/src/popup/less/components.less new file mode 100644 index 0000000000..1df152d18f --- /dev/null +++ b/src/popup/less/components.less @@ -0,0 +1,228 @@ +@import (reference) "../../../node_modules/bootstrap/less/mixins.less"; +@import (reference) "../../../node_modules/bootstrap/less/variables.less"; +@import (reference) "variables.less"; + +.header { + min-height: 44px; + max-height: 44px; + background-color: @brand-primary; + color: white; + text-align: center; + position: absolute; + top: 0; + left: 0; + right: 0; + overflow: hidden; + + a { + color: white !important; + text-decoration: none; + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } + } + + .title { + font-weight: bold; + display: block; + padding: 12px 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .left { + float: left; + display: block; + padding: 12px 10px; + } + + .right { + float: right; + display: block; + padding: 12px 10px; + } +} + +.tabs { + width: 100%; + height: 55px; + background-color: white; + border-top: 1px solid @border-color-dark; + position: absolute; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + + ul { + width: 100%; + list-style: none; + padding: 0; + margin: 0; + + li { + width: 25%; + float: left; + display: inline-block; + padding: 0; + margin: 0; + + a { + text-align: center; + display: block; + padding: 7px 0; + text-decoration: none; + color: @gray-light; + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background-color: rgba(255, 255, 255, 0.8); + } + + i { + display: block; + margin-bottom: 2px; + } + } + + &.active { + a { + color: @brand-primary; + } + } + } + } +} + +.list { + .list-item { + border-top: 1px solid @border-color; + + &:first-child { + border: none; + } + } + + .list-item-header { + background-color: transparent; + padding: 10px 10px; + color: @gray-light; + + + .list-item { + border: none; + } + } + + .list-section { + padding-bottom: 10px; + + &:first-child { + padding-top: 10px; + } + + .list-section-header { + background-color: transparent; + padding: 5px 10px; + color: @gray-light; + text-transform: uppercase; + + label { + font-weight: normal; + } + } + + .list-section-items { + border-top: 1px solid @border-color-dark; + border-bottom: 1px solid @border-color-dark; + + .list-section-item { + border-bottom: 1px solid @border-color; + + &:last-child { + border: none; + } + } + } + + .list-section-footer { + padding: 5px 10px; + font-size: @font-size-small; + color: @gray-light; + } + } + + .list-item, .list-section-item { + display: block; + padding: 10px 10px; + background-color: white; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: @text-color; + + &:hover { + background-color: @list-item-hover; + } + + &.list-item-condensed { + padding: 3px 10px; + } + + .text { + display: block; + color: @text-color; + } + + .detail { + font-size: @font-size-small; + color: @gray-light; + display: block; + } + + label, .item-label { + font-size: @font-size-small; + color: @gray-light; + display: block; + width: 100%; + font-weight: normal; + } + + input:not([type="checkbox"]), select, textarea { + border: none; + width: 100%; + background-color: transparent; + + &:focus { + outline: none; + } + } + + &.list-section-item-checkbox { + label { + font-size: @font-size-base; + color: @text-color; + display: inline; + width: initial; + font-weight: normal; + } + + input[type="checkbox"] { + float: right; + } + } + } + + &.list-no-selection { + .list-item, .list-section-item { + &:hover { + background-color: white; + } + } + } +} diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less index af5af473f3..559fc29564 100644 --- a/src/popup/less/popup.less +++ b/src/popup/less/popup.less @@ -1,151 +1,26 @@ @import "../../../node_modules/bootstrap/less/bootstrap.less"; - -@font-family: "Open Sans", sans-serif; -@brand-primary: #3c8dbc; +@import "variables.less"; +@import "components.less"; body { - font-family: @font-family; width: 320px; height: 568px; -} - -.header { - min-height: 44px; - max-height: 44px; - background-color: @brand-primary; - color: white; - font-family: @font-family; - text-align: center; - position: absolute; - top: 0; - left: 0; - right: 0; - overflow: hidden; - - a { - color: white !important; - text-decoration: none; - - &:hover { - background-color: rgba(255, 255, 255, 0.1); - } - } - - .title { - font-weight: bold; - display: block; - padding: 12px 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .left { - float: left; - display: block; - padding: 12px 10px; - } - - .right { - float: right; - display: block; - padding: 12px 10px; - } + background-color: @background-color; } .content { position: absolute; top: 44px; - bottom: 55px; - left: 0; - right: 0; - overflow: auto; -} - -.tabs { - width: 100%; - height: 55px; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - position: absolute; bottom: 0; left: 0; right: 0; - overflow: hidden; + overflow: auto; - ul { - width: 100%; - list-style: none; - padding: 0; - margin: 0; + &.content-tabs { + bottom: 55px; + } - li { - width: 25%; - float: left; - display: inline-block; - padding: 0; - margin: 0; - - a { - text-align: center; - display: block; - padding: 7px 0; - text-decoration: none; - color: #777; - font-size: 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - background-color: rgba(255, 255, 255, 0.8); - } - - i { - display: block; - margin-bottom: 2px; - } - } - - &.active { - a { - color: @brand-primary; - } - } - } - } -} - -.list { - .list-item { - display: block; - padding: 10px 10px; - background-color: white; - border-bottom: 1px solid #ddd; - color: #333; - text-decoration: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:last-child { - border: none; - } - - .text { - display: block; - } - - .detail { - font-size: 12px; - color: #777; - display: block; - } - } - - .list-divider { - background-color: #eeeeee; - padding: 10px 10px; - border-bottom: 1px solid #ddd; + &.content-no-header { + top: 0; } } diff --git a/src/popup/less/variables.less b/src/popup/less/variables.less new file mode 100644 index 0000000000..168ae85a3f --- /dev/null +++ b/src/popup/less/variables.less @@ -0,0 +1,10 @@ +@import (reference) "../../../node_modules/bootstrap/less/mixins.less"; +@import (reference) "../../../node_modules/bootstrap/less/variables.less"; + +@font-family-sans-serif: "Open Sans", sans-serif; +@text-color: #000000; +@brand-primary: #3c8dbc; +@background-color: #efeff4; +@border-color: #f0f0f0; +@border-color-dark: #ddd; +@list-item-hover: #fbfbfb;