From 6808fd285d54182da5dca9e4190ad9d766c4c783 Mon Sep 17 00:00:00 2001 From: Alex Tatiyants Date: Tue, 5 Jan 2016 21:50:10 -0800 Subject: add about page, multiple UI tweaks --- app/assets/sass/_buttons.scss | 1 + app/assets/sass/_common.scss | 30 +++++++++++++++++++++++++++++- app/assets/sass/_forms.scss | 2 +- app/assets/sass/_highlight.scss | 4 ++-- app/assets/sass/_menu.scss | 3 +-- app/assets/sass/_nav.scss | 6 ++++++ app/assets/sass/_page.scss | 25 ++++++++++++++++++++++++- app/assets/sass/_plan-node.scss | 17 +++++++++-------- app/assets/sass/_plan.scss | 11 +++++++++++ app/assets/sass/_variables.scss | 2 +- 10 files changed, 85 insertions(+), 16 deletions(-) (limited to 'app/assets/sass') diff --git a/app/assets/sass/_buttons.scss b/app/assets/sass/_buttons.scss index 082372d..747b1f7 100644 --- a/app/assets/sass/_buttons.scss +++ b/app/assets/sass/_buttons.scss @@ -61,6 +61,7 @@ @extend .btn-slim; border-radius: 50%; box-shadow: 0; + line-height: 1.5; border: 1px solid $line-color; background-color: #fff; } diff --git a/app/assets/sass/_common.scss b/app/assets/sass/_common.scss index 647e9d9..6dde80b 100644 --- a/app/assets/sass/_common.scss +++ b/app/assets/sass/_common.scss @@ -52,8 +52,36 @@ a { cursor: pointer; } - code { font-family: $font-family-mono; font-weight: 600; } + +.pad-left { + margin-left: $padding-lg; +} + +.pad-top { + margin-top: $padding-lg; +} + +[tooltip]:before { + width: 150px; + text-transform: none; + text-align: left; + content: attr(tooltip); + position: absolute; + opacity: 0; + transition: all 0.15s ease; + padding: $padding-lg; + color: #fff; + border-radius: $border-radius-lg; + margin-top: -10px; + margin-left: 20px; + z-index: 5; +} + +[tooltip]:hover:before { + opacity: 1; + background: $dark-blue; +} diff --git a/app/assets/sass/_forms.scss b/app/assets/sass/_forms.scss index 4ab4dfe..48ed407 100644 --- a/app/assets/sass/_forms.scss +++ b/app/assets/sass/_forms.scss @@ -21,7 +21,7 @@ } &-lg { - width: 100%; + width: 98%; height: 280px; margin-bottom: $padding-base; margin-bottom: $padding-lg; diff --git a/app/assets/sass/_highlight.scss b/app/assets/sass/_highlight.scss index 08009db..e7c4ac8 100644 --- a/app/assets/sass/_highlight.scss +++ b/app/assets/sass/_highlight.scss @@ -6,13 +6,13 @@ box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3); border-radius: $border-radius-base; margin-bottom: $padding-xl; - z-index: 4; + z-index: 6; left: 0; code { font-weight: 300; } - + .plan-query-text { background-color: #fff; font-family: $font-family-mono; diff --git a/app/assets/sass/_menu.scss b/app/assets/sass/_menu.scss index f70c74d..e740726 100644 --- a/app/assets/sass/_menu.scss +++ b/app/assets/sass/_menu.scss @@ -9,12 +9,11 @@ $menu-toggle-height: 45px; top: $menu-offset - 5; left: 0; background-color: $gray-dark; - box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5); + box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2); color: #fff; border-top-right-radius: $border-radius-base; border-bottom-right-radius: $border-radius-base; z-index: 1; - // transition: all 0.3s; header { h3 { diff --git a/app/assets/sass/_nav.scss b/app/assets/sass/_nav.scss index 496213b..8c86ef7 100644 --- a/app/assets/sass/_nav.scss +++ b/app/assets/sass/_nav.scss @@ -7,4 +7,10 @@ nav { width: $page-width; margin: auto; } + + .about { + float: right; + line-height: 2; + margin-left: $padding-xl; + } } diff --git a/app/assets/sass/_page.scss b/app/assets/sass/_page.scss index 6c4e87b..f236f3f 100644 --- a/app/assets/sass/_page.scss +++ b/app/assets/sass/_page.scss @@ -4,10 +4,33 @@ width: $page-width; min-height: 600px; + em { + font-style: italic; + } +} + +.page-content { h2 { font-size: round($font-size-base * 2); - margin-bottom: $padding-base; + line-height: 2; } + h3 { + font-size: round($font-size-base * 1.7); + margin-top: $padding-xl; + line-height: 2; + } + + p, ul { + font-size: round($font-size-base * 1.2); + line-height: 1.5; + margin-bottom: $padding-xl; + } + + ul { + list-style-type: disc; + position: relative; + left: $padding-xl; + } } .page-stretch { diff --git a/app/assets/sass/_plan-node.scss b/app/assets/sass/_plan-node.scss index 0ac65ea..e063d5f 100644 --- a/app/assets/sass/_plan-node.scss +++ b/app/assets/sass/_plan-node.scss @@ -2,7 +2,7 @@ text-decoration: none; color: $text-color; display: inline-block; - transition: all 0.5s; + transition: all 0.1s; position: relative; padding: $padding-base $padding-lg; background-color: #fff; @@ -13,7 +13,7 @@ overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; - min-width: 220px; + width: 220px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); header { @@ -53,9 +53,9 @@ } .planner-estimate { - float: left; - clear: both; + border-top: 1px solid $line-color; text-align: left; + padding-top: $padding-sm; margin-top: $padding-base; width: 100%; } @@ -95,14 +95,15 @@ padding: 0 $padding-base; } } + + .btn-default { + border: 0; + } } .node-bar-container { - float: left; height: 5px; - margin-top: $padding-base; - margin-left: auto; - margin-right: auto; + margin-top: $padding-lg; border: 1px solid $line-color; border-radius: $border-radius-base; color: #fff; diff --git a/app/assets/sass/_plan.scss b/app/assets/sass/_plan.scss index 74ac4b7..eca3d60 100644 --- a/app/assets/sass/_plan.scss +++ b/app/assets/sass/_plan.scss @@ -119,4 +119,15 @@ $connector-line: 2px solid darken($line-color, 10%); border-left: solid $triangle-size transparent; border-right: solid $triangle-size transparent; } + + .btn-close { + padding: $padding-base; + background-color: transparent; + font-size: $font-size-lg; + text-align: center; + @extend .text-muted; + margin-left: $padding-base; + cursor: pointer; + border: 0; + } } diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss index aa17332..3a02de8 100644 --- a/app/assets/sass/_variables.scss +++ b/app/assets/sass/_variables.scss @@ -40,7 +40,7 @@ $text-color: #4d525a; $text-color-light: lighten($text-color, 30%); $line-color: $gray-light; -$line-color-light: lighten($gray-light, 20%); +$line-color-light: lighten($gray-light, 10%); $link-color: $blue; -- cgit v1.2.3